styled function issue with Component with as prop

[imshubhamsingh]

Description

styled from jsx ( https://panda-css.com/docs/concepts/style-props#factory-function) function allows you to enable style props to a Component. Issue with this is that if a component also accept as prop. The styled function use this as prop to render the HTML tag instead of actual Component.

panda/packages/generator/src/artifacts/react-jsx/jsx.ts

Lines 31 to 34 in 9da8bbd

	const __base__ = Dynamic.__base__ || Dynamic
	const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
	const { as: Element = __base__, children, ...restProps } = props

For now to get around this problem, I'm managing this using splitCssProps directly and not using styled
I'm creating a design system using Panda. as prop will be a well used prop for primitive components.

We can add few checks to compute what Element should be. Below should work, I'm guessing there can be few other cases.

     const { children, ...restProps } = props
     const Element = __base__ || props.as

I've just started using Panda in production, so far happy with it. If the above solution sounds good, I can also create a fix PR

Panda CSS Version

0.46.0