How to use the @instructure/ui-themeable/lib/utils/ThemeablePropTypes.spacing function in @instructure/ui-themeable

---
**/
@themeable(theme, styles)
class Container extends Component {
  static propTypes = {
    as: PropTypes.elementType, // eslint-disable-line react/require-default-props
    children: PropTypes.node,
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
    /**
    * Controls the maximum width of the Container
    */
    size: PropTypes.oneOf(['auto', 'x-small', 'small', 'medium', 'large', 'fullscreen']),
    /**
    * Set the margin using familiar CSS shorthand
    */
    margin: ThemeablePropTypes.spacing,
    /**
    * Set the padding using familiar CSS shorthand
    */
    padding: ThemeablePropTypes.spacing,
    /**
    * By default the Container's display prop is null, meaning it takes on the
    * display rules of the html element it's rendered as.
    */
    display: PropTypes.oneOf([null, 'block', 'inline']),
    /**
    * Activate a dotted line around the Container to make building your
    * layout easier
    */
    visualDebug: PropTypes.bool,

    /**

static propTypes = {
    as: PropTypes.elementType, // eslint-disable-line react/require-default-props
    children: PropTypes.node,
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
    /**
    * Controls the maximum width of the Container
    */
    size: PropTypes.oneOf(['auto', 'x-small', 'small', 'medium', 'large', 'fullscreen']),
    /**
    * Set the margin using familiar CSS shorthand
    */
    margin: ThemeablePropTypes.spacing,
    /**
    * Set the padding using familiar CSS shorthand
    */
    padding: ThemeablePropTypes.spacing,
    /**
    * By default the Container's display prop is null, meaning it takes on the
    * display rules of the html element it's rendered as.
    */
    display: PropTypes.oneOf([null, 'block', 'inline']),
    /**
    * Activate a dotted line around the Container to make building your
    * layout easier
    */
    visualDebug: PropTypes.bool,

    /**
    * provides a reference to the underlying html element
    */
    elementRef: PropTypes.func,

arrowOffsetTop: PropTypes.oneOfType([
      PropTypes.number, PropTypes.string
    ]),
    placement: LayoutPropTypes.placement,
    positionStart: PropTypes.oneOfType([
      PropTypes.number, PropTypes.string
    ]),
    positionTop: PropTypes.oneOfType([
      PropTypes.number, PropTypes.string
    ]),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
    margin: ThemeablePropTypes.spacing,
    /**
    * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
    */
    padding: ThemeablePropTypes.spacing,
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
    /**
    * Component will expand to fit the width of its contents by default,
    * unless size is specified
    */
    size: PropTypes.oneOf(['small', 'medium', 'large'])
  }

  static defaultProps = {
    variant: 'default',

]),
    positionTop: PropTypes.oneOfType([
      PropTypes.number, PropTypes.string
    ]),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
    margin: ThemeablePropTypes.spacing,
    /**
    * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
    */
    padding: ThemeablePropTypes.spacing,
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
    /**
    * Component will expand to fit the width of its contents by default,
    * unless size is specified
    */
    size: PropTypes.oneOf(['small', 'medium', 'large'])
  }

  static defaultProps = {
    variant: 'default',
    placement: 'center end',
    withArrow: true,
    withBorder: true,
    withShadow: true,
    size: undefined,
    padding: undefined,