How to use the ui-box.propTypes function in ui-box

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box from 'ui-box'
import { TextStyles } from 'evergreen-typography'
import {
  InputAppearances,
  getBorderRadiusForTextSize
} from 'evergreen-shared-styles'

export default class Textarea extends PureComponent {
  static propTypes = {
    ...Box.propTypes,
    disabled: PropTypes.bool.isRequired,
    isInvalid: PropTypes.bool.isRequired,
    spellcheck: PropTypes.bool.isRequired,
    textSize: PropTypes.oneOf(Object.keys(TextStyles))
  }

  static defaultProps = {
    is: 'textarea',
    boxSizing: 'border-box',
    minHeight: 80,
    minWidth: 280,
    disabled: false,
    isInvalid: false,
    spellcheck: true,
    textSize: 300,
    borderRadius: 5,

import React, { PureComponent } from 'react'
import Box from 'ui-box'

export default class Tablist extends PureComponent {
  static propTypes = {
    ...Box.propTypes
  }

  render() {
    return 
  }
}

const sheetCloseClassNameCache = {}

const getSheetCloseClassName = position => {
  if (!sheetCloseClassNameCache[position]) {
    sheetCloseClassNameCache[position] = css({
      ...sheetCloseStyles[position],
      ...sharedStyles
    }).toString()
  }

  return sheetCloseClassNameCache[position]
}

export default class SheetClose extends PureComponent {
  static propTypes = {
    ...Box.propTypes,
    isClosing: PropTypes.bool,
    position: PropTypes.oneOf([
      Position.LEFT,
      Position.RIGHT,
      Position.TOP,
      Position.BOTTOM
    ]).isRequired
  }

  render() {
    const { isClosing, position, ...props } = this.props
    return (

const IconAim = {
  none: null,
  top: '0deg',
  up: '0deg',
  right: '90deg',
  bottom: '180deg',
  down: '180deg',
  left: '270deg'
}

export default class Icon extends PureComponent {
  static propTypes = {
    /**
     * Composes the Box component as the base.
     */
    ...Box.propTypes,

    /**
     * The aim of the icon.
     * none | up | right | down | left.
     */
    aim: PropTypes.oneOf(Object.keys(IconAim)).isRequired,

    /**
     * The size of the wrapping box of the icon (not the icon itself).
     */
    size: PropTypes.number,

    /**
     * The size of the wrapping box around the icon.
     */
    iconSize: PropTypes.number

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box from 'ui-box'

export default class Image extends PureComponent {
  static propTypes = {
    ...Box.propTypes,
    src: PropTypes.string
  }

  render() {
    return 
  }
}

strokeDashoffset: 600,
    strokeDasharray: 300,
    strokeWidth: 12,
    strokeMiterlimit: 10,
    strokeLinecap: 'round',
    animation: `${loadingCircleKeyframes} 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite`,
    stroke: color,
    fill: 'transparent'
  }).toString()

class Spinner extends PureComponent {
  static propTypes = {
    /**
     * Composes the Box component as the base.
     */
    ...Box.propTypes,

    /**
     * Delay after which spinner should be visible.
     */
    delay: PropTypes.number,

    /**
     * The size of the spinner.
     */
    size: PropTypes.number.isRequired,

    /**
     * Theme provided by ThemeProvider.
     */
    theme: PropTypes.object.isRequired
  }

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box from 'ui-box'

export default class UnorderedList extends PureComponent {
  static propTypes = {
    ...Box.propTypes,

    /**
     * Size of the text used in a list item.
     * Can be: 300, 400, 500, 600.
     */
    size: PropTypes.oneOf([300, 400, 500, 600]).isRequired,

    /**
     * When passed, adds a icon before each list item in the list
     * You can override this on a individual list item.
     */
    icon: PropTypes.string,

    /**
     * The color of the icon in each list item in the list.
     */

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box from 'ui-box'
import FontFamilies from '../styles/FontFamilies'
import TextStyles from '../styles/TextStyles'
import TextUppercaseStyles from '../styles/TextUppercaseStyles'
import TextColors from '../styles/TextColors'

const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV

export default class Text extends PureComponent {
  static propTypes = {
    ...Box.propTypes,
    size: PropTypes.oneOf(Object.keys(TextStyles).map(Number)),
    color: PropTypes.string,
    fontFamily: PropTypes.oneOf(Object.keys(FontFamilies)),
    textStyles: PropTypes.object,
    textUppercaseStyles: PropTypes.object,
    isUppercase: PropTypes.bool
  }

  static defaultProps = {
    is: 'span',
    size: 500,
    color: 'default',
    fontFamily: 'ui',
    textStyles: TextStyles,
    textUppercaseStyles: TextUppercaseStyles
  }

import cx from 'classnames'
import { css as glamorCss } from 'glamor'
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box from 'ui-box'
import { withTheme } from '../../theme'

class Text extends PureComponent {
  static propTypes = {
    /**
     * Composes the Box component as the base.
     */
    ...Box.propTypes,

    /**
     * Size of the text style.
     * Can be: 300, 400, 500, 600.
     */
    size: PropTypes.oneOf([300, 400, 500, 600]).isRequired,

    /**
     * Font family.
     * Can be: `ui`, `display` or `mono` or a custom font family.
     */
    fontFamily: PropTypes.string.isRequired,

    /**
     * Theme provided by ThemeProvider.
     */

import React, { PureComponent } from 'react'
import Box from 'ui-box'

export default class TabNavigation extends PureComponent {
  static propTypes = {
    ...Box.propTypes
  }

  render() {
    return 
  }
}