import * as React from 'react' ; import styled from '@emotion/styled' ; import isPropValid from '@emotion/is-prop-valid' ; import { createComponent , StyledType } from '@workday/canvas-kit-react/common' ; import { border , BorderStyleProps } from './utils/border' ; import { color , ColorStyleProps } from './utils/color' ; import { depth , DepthStyleProps } from './utils/depth' ; import { flexItem , FlexItemStyleProps } from './utils/flexItem' ; import { layout , LayoutStyleProps } from './utils/layout' ; import { position , PositionStyleProps } from './utils/position' ; import { space , SpaceStyleProps } from './utils/space' ; export type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & PositionStyleProps & SpaceStyleProps & { children ? : React . ReactNode ; } ; const omittedProps = [ 'display' , 'color' , 'height' , 'overflow' , 'width' , 'border' , 'background' ] ; const shouldForwardProp = ( prop ) => { return isPropValid ( prop ) && ! omittedProps . includes ( prop ) ; } ; const StyledBox = styled ( 'div' , { shouldForwardProp } ) < StyledType & BoxProps > ( { boxSizing : 'border-box' , } , border , color , depth , flexItem , layout , position , space ) ; example export const Box = createComponent ( 'div' ) ( { displayName : 'Box' , Component : ( { children , ... elemProps } , ref , Element ) => { return ( < StyledBox as = { Element } ref = { ref } { ... elemProps } > { children } < /StyledBox>); } , } ) ;