fix?

Author: francinelucca

packages/styled-react/src/components/DataTable.tsx

@@ -1,18 +1,28 @@
-import {Table as PrimerDataTable} from '@primer/react/experimental'
+import {Table as PrimerDataTable, type TableContainerProps} from '@primer/react/experimental'
 import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
 import type React from 'react'
-import type {ComponentProps} from 'react'
 
 const {Container: PrimerDataTableContainer, ...rest} = PrimerDataTable
 
-type DataTableContainerProps = ComponentProps<typeof PrimerDataTable.Container> & SxProp
+type DataTableContainerProps<As extends React.ElementType = 'div'> = TableContainerProps<As> & SxProp
 
-const DataTableContainer: React.ComponentType<DataTableContainerProps> = styled(PrimerDataTableContainer).withConfig({
+const StyleDataTableContainer: React.ComponentType<DataTableContainerProps> = styled(
+  PrimerDataTableContainer,
+).withConfig({
   shouldForwardProp: prop => (prop as keyof DataTableContainerProps) !== 'sx',
 })<DataTableContainerProps>`
   ${sx}
-`
+` as typeof PrimerDataTable.Container & {
+  <As extends React.ElementType = 'div'>(props: DataTableContainerProps<As>): React.ReactElement | null
+}
+
+const DataTableContainer = function DataTableContainer<As extends React.ElementType = 'div'>({
+  as,
+  ...rest
+}: DataTableContainerProps<As>) {
+  return <StyleDataTableContainer {...rest} {...(as ? {forwardedAs: as} : {})} />
+}
 
 const Table: typeof PrimerDataTable & {
   Container: typeof DataTableContainer