import { ElementRef , ElementType , PropsWithChildren , forwardRef } from "react" ; import { SlotProps , StyledComponentProps , mergeProps } from "../../shared" ; import { useStyleProps , useStyledSystem } from "../../styling" ; export type HtmlElementProps < T extends ElementType > = SlotProps & StyledComponentProps < T > & { as ? : ElementType ; } ; export function htmlElement < T extends ElementType > ( name , elementType , className ? ) { return forwardRef < ElementRef < T > , HtmlElementProps < T > > ( ( props , ref ) => { const [ styleProps ] = useStyleProps < HtmlElementProps < T > > ( name ) ; const mergedProps = mergeProps ( styleProps , props ) as PropsWithChildren < HtmlElementProps < T > > ; const { as = elementType , children , ... rest } = useStyledSystem ( mergedProps ) ; const As = as as ElementType ; return ( < As { ... mergeProps ( rest , { className , ref } ) } > { children } < /As>); } ) ; }