import * as React from 'react' ; import clsx , { ClassValue } from 'clsx' ; import { Atoms , atoms , sprinkles } from '../../css' ; type HTMLProperties = Omit < React . AllHTMLAttributes < HTMLElement > , 'as' | 'className' | 'color' | 'height' | 'width' > ; type Props = Atoms & HTMLProperties & { as ? : React . ElementType ; className ? : ClassValue ; } ; export const Box = React . forwardRef < HTMLElement , Props > ( ( { as = 'div' , className , ... props } , ref ) => { const atomProps = { } ; const nativeProps = { } ; for ( const key in props ) { if ( sprinkles . properties . has ( key as keyof Omit < Atoms , 'reset' > ) ) { atomProps [ key ] = props [ key as keyof typeof props ] ; } else { nativeProps [ key ] = props [ key as keyof typeof props ] ; } } const atomicClasses = atoms ( { reset : typeof as === 'string' ? ( as as Atoms [ 'reset' ] ) : 'div' , ... atomProps , } ) ; return React . createElement ( as , { className : clsx ( atomicClasses , className ) , ... nativeProps , ref , } ) ; } ) ; export type BoxProps = Parameters < typeof Box > [ 0 ] ; Box . displayName = 'Box' ;