Box components has not proper types when used with the as prop.

[vorillaz]

Description

Hi there,
When trying to use the the Box component generated along with the as prop the compiler complains although the output is properly and semantically rendered.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-3d7r7f?file=src%2FApp.tsx

Steps to reproduce

1. Import the Box component as import { Box } from '../styled-system/jsx';
2. Render a header as <Box as="h1>Hey</Box>
3. The output is actually `

   Hey

4. The TypeScript compiler complains.

JS Framework

React

Panda CSS Version

0.46.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

Stitches has a really nice API where the <Box /> also inherits the passed through element's properties which would amazing to have as it can get composed over and over again. styled-system also follows a similar approach https://github.com/styled-system/styled-system

[vorillaz]

For anyone interested, here is a quick workaround

import { Box as Boxy } from '../styled-system/jsx';
import type { BoxProps } from '../styled-system/jsx';

type PolymorphicProps<E extends React.ElementType> = React.PropsWithChildren<
  React.ComponentPropsWithoutRef<E> & {
    as?: E;
  }
> &
  BoxProps;

export const Box = <E extends React.ElementType>({
  as,
  ...props
}: PolymorphicProps<E>) => {
  return <Boxy {...props} as={as} />;
};

And you can use it as:

export const Foo = () => <Box as="a" href="https://google.com">Click me</Box>

Then TypeScript works like a charm