How to use the @fluentui/react-proptypes.size function in @fluentui/react-proptypes

class Avatar extends UIComponent, any> {
  static create: ShorthandFactory

  static className = 'ui-avatar'

  static displayName = 'Avatar'

  static propTypes = {
    ...commonPropTypes.createCommon({
      children: false,
      content: false,
    }),
    name: PropTypes.string,
    image: customPropTypes.itemShorthandWithoutJSX,
    label: customPropTypes.itemShorthand,
    size: customPropTypes.size,
    status: customPropTypes.itemShorthand,
    getInitials: PropTypes.func,
  }

  static defaultProps = {
    size: 'medium',
    getInitials(name: string) {
      if (!name) {
        return ''
      }

      const reducedName = name
        .replace(/\s*\(.*?\)\s*/g, ' ')
        .replace(/\s*{.*?}\s*/g, ' ')
        .replace(/\s*\[.*?]\s*/g, ' ')

indicator: `${Loader.className}__indicator`,
    label: `${Loader.className}__label`,
    svg: `${Loader.className}__svg`,
  }

  static propTypes = {
    ...commonPropTypes.createCommon({
      children: false,
      content: false,
    }),
    delay: PropTypes.number,
    indicator: customPropTypes.itemShorthand,
    inline: PropTypes.bool,
    label: customPropTypes.itemShorthand,
    labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
    size: customPropTypes.size,
    svg: customPropTypes.itemShorthand,
  }

  static defaultProps = {
    accessibility: loaderBehavior,
    delay: 0,
    indicator: {},
    labelPosition: 'below',
    svg: '',
    size: 'medium',
  }

  delayTimer: number

  constructor(props, context) {
    super(props, context)

static displayName = 'Icon'

  static propTypes = {
    ...commonPropTypes.createCommon({
      children: false,
      content: false,
      color: true,
    }),
    bordered: PropTypes.bool,
    circular: PropTypes.bool,
    disabled: PropTypes.bool,
    name: PropTypes.string.isRequired,
    outline: PropTypes.bool,
    rotate: PropTypes.number,
    size: customPropTypes.size,
    xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
  }

  static defaultProps = {
    as: 'span',
    size: 'medium',
    accessibility: iconBehavior,
    rotate: 0,
  }

  renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
    const { name } = this.props
    const { icons = {} } = theme || {}

    const maybeIcon = icons[name]
    const isSvgIcon = maybeIcon && maybeIcon.isSvg

content: 'shorthand',
    }),
    circular: PropTypes.bool,
    disabled: PropTypes.bool,
    fluid: PropTypes.bool,
    icon: customPropTypes.itemShorthandWithoutJSX,
    iconOnly: PropTypes.bool,
    iconPosition: PropTypes.oneOf(['before', 'after']),
    loader: customPropTypes.itemShorthandWithoutJSX,
    loading: PropTypes.bool,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    text: PropTypes.bool,
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    size: customPropTypes.size,
  }

  static defaultProps = {
    as: 'button',
    accessibility: buttonBehavior as Accessibility,
    size: 'medium',
  }

  static Group = ButtonGroup

  actionHandlers = {
    performClick: event => {
      event.preventDefault()
      this.handleClick(event)
    },
  }

class Status extends UIComponent, any> {
  static create: ShorthandFactory

  static className = 'ui-status'

  static displayName = 'Status'

  static propTypes = {
    ...commonPropTypes.createCommon({
      children: false,
      content: false,
    }),
    color: PropTypes.string,
    icon: customPropTypes.itemShorthandWithoutJSX,
    size: customPropTypes.size,
    state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']),
  }

  static defaultProps = {
    accessibility: statusBehavior,
    as: 'span',
    size: 'medium',
    state: 'unknown',
  }

  renderComponent({ accessibility, ElementType, classes, unhandledProps, variables, styles }) {
    const { icon } = this.props as StatusProps
    return (
      
        {Icon.create(icon, {
          defaultProps: () => ({

}

class Text extends UIComponent, any> {
  static create: ShorthandFactory

  static className = 'ui-text'

  static displayName = 'Text'

  static propTypes = {
    ...commonPropTypes.createCommon({ color: true }),
    atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]),
    disabled: PropTypes.bool,
    error: PropTypes.bool,
    important: PropTypes.bool,
    size: customPropTypes.size,
    weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']),
    success: PropTypes.bool,
    temporary: PropTypes.bool,
    align: customPropTypes.align,
    timestamp: PropTypes.bool,
    truncated: PropTypes.bool,
  }

  static defaultProps = {
    as: 'span',
  }

  renderComponent({ accessibility, ElementType, classes, unhandledProps }): React.ReactNode {
    const { children, content } = this.props

    return (