import * as React from 'react' ; import { Box as ReakitBox , BoxProps as ReakitBoxProps } from 'reakit' ; import { ThemeConfig , CSSProperties } from '../types' ; import { useStyle , useClassName , omitCSSProps , pickHTMLProps , mergeRefs , createComponent , createElement , createHook , } from '../utils' ; import * as styles from './Box.styles' ; type ComponentType < R > = React . ComponentType < R > & { useProps : any ; } ; export type LocalBoxProps = { use ? : string | ComponentType < any > ; className ? : string ; children ? : React . ReactNode | ( ( props : BoxProps ) => React . ReactNode ) ; alignX ? : 'left' | 'center' | 'right' ; alignY ? : 'top' | 'center' | 'bottom' ; variant ? : string ; colorMode ? : string ; disabled ? : boolean ; overrides ? : ThemeConfig ; elementRef ? : React . Ref < any > ; themeKey ? : string ; } ; export type BoxProps = ReakitBoxProps & CSSProperties & LocalBoxProps ; const useProps = createHook < BoxProps > ( ( _props , { disableCSSProps , themeKey } ) => { let props = _props ; const { use } = props ; if ( use && typeof use !== 'string' && use . useProps ) { const newProps = use . useProps ( { ... props , use : undefined } ) ; props = { ... props , ... newProps } ; } const style = useStyle ( props , { disableCSSProps } ) ; let className = useClassName ( { style : styles . style , styleProps : { ... props , style } , themeKey , prevClassName : props . className , } ) ; className = useClassName ( { style : styles . Box , styleProps : props , prevClassName : className , themeKey , } ) ; const htmlProps = omitCSSProps ( pickHTMLProps ( { ... props , className } ) ) ; if ( props . elementRef ) { htmlProps . ref = mergeRefs ( props . elementRef , props . ref ) ; } if ( props . wrapElement ) { htmlProps . wrapElement = props . wrapElement ; } return { ... htmlProps } ; } , { themeKey : 'Box' } ) ; export const Box = createComponent < BoxProps > ( ( props ) => { const boxProps = useProps ( props ) ; return createElement ( { children : props . children , component : ReakitBox , use : props . use , htmlProps : boxProps } ) ; } , { attach : { displayName : 'Box' , useProps } , themeKey : 'Box' , } ) ;