import { createElement , forwardRef } from 'react' ; import { BoxProps } from './types' ; import { useBoxStyles } from './useBoxStyles' ; export const Box = forwardRef < HTMLElement , BoxProps > ( ( { component = 'div' , padding , paddingX , paddingY , paddingTop , paddingBottom , paddingLeft , paddingRight , margin , marginX , marginY , marginTop , marginBottom , marginLeft , marginRight , display , flexDirection , flexWrap , flexShrink , flexGrow , alignItems , justifyContent , textAlign , border , borderColor , borderWidth , borderRightWidth , borderTopWidth , borderLeftWidth , borderBottomWidth , borderXWidth , borderYWidth , borderStyle , borderRadius , background , backgroundPattern , boxShadow , transition , transform , height , width , position , cursor , pointerEvents , overflow , minWidth , top , bottom , right , left , userSelect , outline , opacity , printHidden , className , ... restProps } , ref ) => { const boxStyles = useBoxStyles ( { component , padding , paddingX , paddingY , paddingTop , paddingBottom , paddingLeft , paddingRight , margin , marginX , marginY , marginTop , marginBottom , marginLeft , marginRight , display , flexDirection , flexWrap , flexShrink , flexGrow , alignItems , justifyContent , textAlign , border , borderColor , borderWidth , borderRightWidth , borderTopWidth , borderLeftWidth , borderBottomWidth , borderXWidth , borderYWidth , borderStyle , borderRadius , background , backgroundPattern , boxShadow , transition , transform , height , width , position , cursor , pointerEvents , overflow , minWidth , top , bottom , right , left , userSelect , outline , opacity , printHidden , className , } ) ; return createElement ( component , { className : boxStyles , ... restProps , ref , } ) ; } ) ;