@sanity/ui 3.1.14 → 3.3.0

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

@@ -0,0 +1,142 @@
+/** @jest-environment jsdom */
+
+import {type ComponentProps} from 'react'
+
+import {render} from '../../../../test'
+import {responsiveGridItemStyle} from '../../styles/internal'
+import {Box} from './box'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveGridItemStyle: jest.fn(actual.responsiveGridItemStyle),
+  }
+})
+
+describe('<Box />', () => {
+  const mockedResponsiveGridItemStyle = jest.mocked(responsiveGridItemStyle)
+
+  beforeEach(() => {
+    mockedResponsiveGridItemStyle.mockClear()
+  })
+
+  it('uses column when gridColumn is not provided', () => {
+    render(<Box column={3} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [3]}),
+    )
+  })
+
+  it('uses gridColumn when provided', () => {
+    render(<Box gridColumn={4} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [4]}),
+    )
+  })
+
+  it('prefers gridColumn over column when both are provided', () => {
+    render(<Box column={3} gridColumn={5} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$column: [3]}),
+    )
+  })
+
+  it('supports responsive arrays with gridColumn', () => {
+    const gridColumn: ComponentProps<typeof Box>['gridColumn'] = [2, 'full']
+
+    render(<Box gridColumn={gridColumn} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [2, 'full']}),
+    )
+  })
+
+  it('uses columnStart when gridColumnStart is not provided', () => {
+    render(<Box columnStart={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [2]}),
+    )
+  })
+
+  it('prefers gridColumnStart over columnStart when both are provided', () => {
+    render(<Box columnStart={2} gridColumnStart={4} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [4]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [2]}),
+    )
+  })
+
+  it('uses columnEnd when gridColumnEnd is not provided', () => {
+    render(<Box columnEnd={3} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [3]}),
+    )
+  })
+
+  it('prefers gridColumnEnd over columnEnd when both are provided', () => {
+    render(<Box columnEnd={3} gridColumnEnd={5} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [3]}),
+    )
+  })
+
+  it('uses row when gridRow is not provided', () => {
+    render(<Box row={1} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [1]}))
+  })
+
+  it('prefers gridRow over row when both are provided', () => {
+    render(<Box row={1} gridRow={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [2]}))
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$row: [1]}),
+    )
+  })
+
+  it('uses rowStart when gridRowStart is not provided', () => {
+    render(<Box rowStart={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [2]}),
+    )
+  })
+
+  it('prefers gridRowStart over rowStart when both are provided', () => {
+    render(<Box rowStart={2} gridRowStart={4} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [4]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [2]}),
+    )
+  })
+
+  it('uses rowEnd when gridRowEnd is not provided', () => {
+    render(<Box rowEnd={3} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [3]}),
+    )
+  })
+
+  it('prefers gridRowEnd over rowEnd when both are provided', () => {
+    render(<Box rowEnd={3} gridRowEnd={5} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [3]}),
+    )
+  })
+})

package/src/core/primitives/box/box.tsx

@@ -15,6 +15,7 @@ import {
   responsivePaddingStyle,
   ResponsivePaddingStyleProps,
 } from '../../styles/internal'
+import {ElementType, Props} from '../../types'
 import {
   ResponsiveBoxProps,
   ResponsiveFlexItemProps,
@@ -24,18 +25,24 @@ import {
 } from '../types'
 
 /**
+ * The props that `Box` adds on top of the element it renders as.
+ *
  * @public
  */
-export interface BoxProps
+export interface BoxOwnProps
   extends ResponsiveFlexItemProps,
     ResponsiveBoxProps,
     ResponsiveGridItemProps,
     ResponsiveMarginProps,
     ResponsivePaddingProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: ElementType
 }
 
+/**
+ * @public
+ */
+export type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
+
 const StyledBox = styled.div<
   FlexItemStyleProps &
     ResponsiveBoxStyleProps &
@@ -51,21 +58,18 @@ const StyledBox = styled.div<
   responsivePaddingStyle,
 )
 
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export const Box = forwardRef(function Box(
-  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+const BoxComponent = forwardRef(function Box(
+  props: BoxOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     as: asProp = 'div',
-    column,
-    columnStart,
-    columnEnd,
+    gridColumn,
+    column: deprecated_column,
+    gridColumnStart,
+    columnStart: deprecated_columnStart,
+    gridColumnEnd,
+    columnEnd: deprecated_columnEnd,
     display = 'block',
     flex,
     height,
@@ -84,12 +88,21 @@ export const Box = forwardRef(function Box(
     paddingRight,
     paddingBottom,
     paddingLeft,
-    row,
-    rowStart,
-    rowEnd,
+    gridRow,
+    row: deprecated_row,
+    gridRowStart,
+    rowStart: deprecated_rowStart,
+    gridRowEnd,
+    rowEnd: deprecated_rowEnd,
     sizing,
     ...restProps
   } = props
+  const column = gridColumn === undefined ? deprecated_column : gridColumn
+  const columnStart = gridColumnStart === undefined ? deprecated_columnStart : gridColumnStart
+  const columnEnd = gridColumnEnd === undefined ? deprecated_columnEnd : gridColumnEnd
+  const row = gridRow === undefined ? deprecated_row : gridRow
+  const rowStart = gridRowStart === undefined ? deprecated_rowStart : gridRowStart
+  const rowEnd = gridRowEnd === undefined ? deprecated_rowEnd : gridRowEnd
 
   return (
     <StyledBox
@@ -128,4 +141,14 @@ export const Box = forwardRef(function Box(
     </StyledBox>
   )
 })
-Box.displayName = 'ForwardRef(Box)'
+BoxComponent.displayName = 'ForwardRef(Box)'
+
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+export const Box = BoxComponent as unknown as <E extends ElementType = 'div'>(
+  props: BoxProps<E>,
+) => React.JSX.Element

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -5,12 +5,12 @@ import {Container} from '../../container/container'
 import {Grid} from '../../grid/grid'
 import {Stack} from '../../stack/stack'
 import {Text} from '../../text/text'
-import {Button, ButtonProps} from '../button'
+import {Button, ButtonOwnProps} from '../button'
 
 const GAP = 4
 const COLUMNS = 3
 
-const DEFAULT_PROPS: ButtonProps = {
+const DEFAULT_PROPS: ButtonOwnProps = {
   icon: SquareIcon,
   iconRight: SquareIcon,
 }

package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -27,7 +27,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
 
 export default function SanityUploadButtonWorkaroundStory() {
   return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
+    <Flex align="center" height="fill" justify="center">
       <SanityUploadButton icon={UploadIcon} tabIndex={0} text="Upload">
         <input type="file" />
       </SanityUploadButton>

package/src/core/primitives/button/__workshop__/uploadButton.tsx

@@ -11,7 +11,7 @@ export default function UploadButtonStory() {
   }, [])
 
   return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
+    <Flex align="center" height="fill" justify="center">
       <Button
         as="label"
         onKeyDown={handleKeyDown}

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

@@ -5,9 +5,25 @@ import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
 
 import {render} from '../../../../test'
-import {Button, ButtonProps} from './button'
+import {Flex} from '../flex'
+import {Button, ButtonOwnProps} from './button'
+
+jest.mock('../flex', () => {
+  const actual = jest.requireActual('../flex')
+
+  return {
+    ...actual,
+    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+  }
+})
 
 describe('atoms/button', () => {
+  const mockedFlex = jest.mocked(Flex)
+
+  beforeEach(() => {
+    mockedFlex.mockClear()
+  })
+
   it('Axe: should have no violations', async () => {
     const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
       scheme: 'light',
@@ -29,11 +45,11 @@ describe('atoms/button', () => {
   })
 
   it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
+    function WrappedButton({button: buttonProps}: {button: ButtonOwnProps}) {
       return <Button {...buttonProps} />
     }
 
-    const buttonProps: ButtonProps = {
+    const buttonProps: ButtonOwnProps = {
       text: 'Button text',
     }
 
@@ -41,4 +57,26 @@ describe('atoms/button', () => {
 
     expect(screen.getByText('Button text')).toBeInTheDocument()
   })
+
+  it('should support `space`', () => {
+    render(<Button icon={AddIcon} space={17} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [17]}))
+  })
+
+  it('should support `gap`', () => {
+    render(<Button gap={18} icon={AddIcon} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [18]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(<Button gap={19} icon={AddIcon} space={20} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [19]}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: [20]}))
+  })
 })

package/src/core/primitives/button/button.tsx

@@ -6,7 +6,15 @@ import {styled} from 'styled-components'
 import {_getArrayProp, ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
+import {
+  ButtonMode,
+  ButtonTextAlign,
+  ButtonTone,
+  ButtonWidth,
+  ElementType,
+  FlexJustify,
+  Props,
+} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -17,8 +25,7 @@ import {buttonBaseStyles, buttonColorStyles} from './styles'
 /**
  * @public
  */
-export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   mode?: ButtonMode
   icon?: React.ElementType | React.ReactNode
@@ -29,7 +36,11 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
    */
   loading?: boolean
   selected?: boolean
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  gap?: number | number[]
   muted?: boolean
   text?: React.ReactNode
   textAlign?: ButtonTextAlign
@@ -39,6 +50,11 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   width?: ButtonWidth
 }
 
+/**
+ * @public
+ */
+export type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
+
 const StyledButton = styled.button<
   {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
     ThemeProps
@@ -59,11 +75,11 @@ const LoadingBox = styled.div`
   box-shadow: inherit;
 `
 
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
+const ButtonComponent = forwardRef(function Button(
+  props: ButtonOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'as' | 'width'
+    >,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -84,7 +100,8 @@ export const Button = forwardRef(function Button(
     paddingRight: paddingRightProp,
     radius: radiusProp = 2,
     selected,
-    space: spaceProp = 3,
+    gap,
+    space: deprecated_space = 3,
     text,
     textAlign,
     textWeight,
@@ -105,7 +122,7 @@ export const Button = forwardRef(function Button(
   const paddingLeft = _getArrayProp(paddingLeftProp)
   const paddingRight = _getArrayProp(paddingRightProp)
   const radius = _getArrayProp(radiusProp)
-  const space = _getArrayProp(spaceProp)
+  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
 
   const boxProps = useMemo(
     () => ({
@@ -143,7 +160,7 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify} gap={space}>
+          <Flex as="span" justify={justify} gap={spacing}>
             {IconComponent && (
               <Text size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
@@ -183,4 +200,11 @@ export const Button = forwardRef(function Button(
     </StyledButton>
   )
 })
-Button.displayName = 'ForwardRef(Button)'
+ButtonComponent.displayName = 'ForwardRef(Button)'
+
+/**
+ * @public
+ */
+export const Button = ButtonComponent as unknown as <E extends ElementType = 'button'>(
+  props: ButtonProps<E>,
+) => React.JSX.Element

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -19,7 +19,7 @@ export default function AsComponentStory() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3}>
+      <Card as={CustomLink} data-as="a" {...props} padding={3} req="example">
         <Text size={1}>As component</Text>
       </Card>
     </Flex>

package/src/core/primitives/card/card.tsx

@@ -13,8 +13,8 @@ import {
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
 import {ThemeColorProvider, useRootTheme} from '../../theme'
-import {CardTone} from '../../types'
-import {Box, BoxProps} from '../box'
+import {CardTone, ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {cardStyle} from './styles'
 import {CardStyleProps} from './types'
@@ -22,8 +22,8 @@ import {CardStyleProps} from './types'
 /**
  * @public
  */
-export interface CardProps
-  extends BoxProps,
+export interface CardOwnProps
+  extends BoxOwnProps,
     ResponsiveBorderProps,
     ResponsiveRadiusProps,
     ResponsiveShadowProps {
@@ -37,12 +37,19 @@ export interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
+  disabled?: boolean
   muted?: boolean
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
+  selected?: boolean
   tone?: CardTone
 }
 
+/**
+ * @public
+ */
+export type CardProps<E extends ElementType = 'div'> = Props<CardOwnProps, E>
+
 const StyledCard = styled(Box)<
   CardStyleProps &
     ResponsiveRadiusStyleProps &
@@ -50,14 +57,8 @@ const StyledCard = styled(Box)<
     ResponsiveShadowStyleProps
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
-/**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
- *
- * @public
- */
-export const Card = forwardRef(function Card(
-  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+const CardComponent = forwardRef(function Card(
+  props: CardOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -114,4 +115,14 @@ export const Card = forwardRef(function Card(
     </ThemeColorProvider>
   )
 })
-Card.displayName = 'ForwardRef(Card)'
+CardComponent.displayName = 'ForwardRef(Card)'
+
+/**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
+ * @public
+ */
+export const Card = CardComponent as unknown as <E extends ElementType = 'div'>(
+  props: CardProps<E>,
+) => React.JSX.Element

package/src/core/primitives/code/code.tsx

@@ -3,6 +3,7 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
+import {ElementType, Props} from '../../types'
 import {codeBaseStyle} from './styles'
 
 const LazyRefractor = lazy(() => import('./refractor'))
@@ -10,21 +11,22 @@ const LazyRefractor = lazy(() => import('./refractor'))
 /**
  * @public
  */
-export interface CodeProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface CodeOwnProps {
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string
 }
 
-const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
-
 /**
  * @public
  */
-export const Code = forwardRef(function Code(
-  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+export type CodeProps<E extends ElementType = 'pre'> = Props<CodeOwnProps, E>
+
+const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+
+const CodeComponent = forwardRef(function Code(
+  props: CodeOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLElement>,
 ) {
   const {children, language, size = 2, weight, ...restProps} = props
@@ -43,4 +45,11 @@ export const Code = forwardRef(function Code(
     </StyledCode>
   )
 })
-Code.displayName = 'ForwardRef(Code)'
+CodeComponent.displayName = 'ForwardRef(Code)'
+
+/**
+ * @public
+ */
+export const Code = CodeComponent as unknown as <E extends ElementType = 'pre'>(
+  props: CodeProps<E>,
+) => React.JSX.Element

package/src/core/primitives/container/container.tsx

@@ -2,7 +2,8 @@ import {forwardRef} 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 {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
 import {ResponsiveWidthStyleProps} from './types'
@@ -10,20 +11,23 @@ import {ResponsiveWidthStyleProps} from './types'
 /**
  * @public
  */
-export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+export interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
+
+/**
+ * @public
+ */
+export type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>
 
 const StyledContainer = styled(Box)<ResponsiveWidthStyleProps>(
   containerBaseStyle,
   responsiveContainerWidthStyle,
 )
 
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export const Container = forwardRef(function Container(
-  props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+const ContainerComponent = forwardRef(function Container(
+  props: ContainerOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'width'
+    >,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, width = 2, ...restProps} = props
@@ -38,4 +42,13 @@ export const Container = forwardRef(function Container(
     />
   )
 })
-Container.displayName = 'ForwardRef(Container)'
+ContainerComponent.displayName = 'ForwardRef(Container)'
+
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
+ * @public
+ */
+export const Container = ContainerComponent as unknown as <E extends ElementType = 'div'>(
+  props: ContainerProps<E>,
+) => React.JSX.Element