import { TextAlignProperty } from 'csstype'; import * as React from 'react'; type StringOrNum = string | number; export type ContainerTag = 'div' | 'span'; export interface ContainerProps { marginTop?: StringOrNum; marginBottom?: StringOrNum; marginRight?: StringOrNum; marginLeft?: StringOrNum; padding?: StringOrNum; paddingTop?: StringOrNum; paddingBottom?: StringOrNum; paddingRight?: StringOrNum; paddingLeft?: StringOrNum; backgroundColor?: string; background?: string; borderRadius?: StringOrNum; borderBottomLeftRadius?: StringOrNum; borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; height?: StringOrNum; minWidth?: StringOrNum; minHeight?: StringOrNum; textAlign?: TextAlignProperty; isHidden?: boolean; className?: string; position?: 'absolute' | 'fixed' | 'relative' | 'unset'; display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; top?: string; left?: string; right?: string; bottom?: string; zIndex?: number; Tag?: ContainerTag; cursor?: string; id?: string; onClick?: (event: React.MouseEvent) => void; overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; } export const Container: React.StatelessComponent = props => { const { children, className, Tag, isHidden, id, onClick, ...style } = props; const visibility = isHidden ? 'hidden' : undefined; return ( {children} ); }; Container.defaultProps = { Tag: 'div', }; Container.displayName = 'Container';