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

/**
    * Call this function when the selected tab changes. When used with `selectedIndex`,
    * the component will not control its own state.
    */
    onChange: PropTypes.func,
    /**
    * the selected tab should be focused
    */
    focus: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * 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'])
  }

  static defaultProps = {
    children: null,
    padding: 'small',
    margin: 'none',
    textAlign: 'start',
    variant: 'default',
    focus: false,

* the selected tab should be focused
    */
    focus: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * 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'])
  }

  static defaultProps = {
    children: null,
    padding: 'small',
    margin: 'none',
    textAlign: 'start',
    variant: 'default',
    focus: false,
    defaultSelectedIndex: 0,
    onChange: undefined,
    selectedIndex: undefined,
    size: 'medium'
  }

@themeable(theme, styles)
export default class TabPanel extends Component {
  static propTypes = {
    /**
    * The content that will be rendered in the corresponding  and will label
    * this `` for screen readers
    */
    title: PropTypes.node.isRequired,
    children: PropTypes.node,
    variant: PropTypes.oneOf(['simple', 'minimal']),
    maxHeight: PropTypes.string,
    id: PropTypes.string,
    labelledBy: PropTypes.string,
    selected: PropTypes.bool,
    disabled: PropTypes.bool,
    padding: ThemeablePropTypes.spacing,
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
    /**
    * A ref to this `` component instance
    */
    tabRef: PropTypes.func
  }

  static defaultProps = {
    children: null,
    maxHeight: undefined,
    disabled: false,
    textAlign: undefined,
    id: null,
    variant: 'simple',
    labelledBy: null,
    selected: false,

/**
    * Call this function when the selected tab changes. When used with `selectedIndex`,
    * the component will not control its own state.
    */
    onChange: PropTypes.func,
    /**
    * the selected tab should be focused
    */
    focus: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * 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'])
  }

  static defaultProps = {
    variant: 'simple',
    focus: false,
    defaultSelectedIndex: 0,
    padding: undefined,
    textAlign: undefined,
    size: undefined,

class Table extends Component {
  static propTypes = {
    /**
     * Set the table's caption for screen reader
     */
    caption: PropTypes.string.isRequired,
    /**
     * Build table via `Table.Head` and `Table.Body`
     */
    children: ChildrenPropTypes.oneOf([Head, Body]),
    /**
     * 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,
    /**
     * Provide a reference to the underlying html element
     */
    elementRef: PropTypes.func,
    /**
     * Highlight each row on hover
     */
    hover: PropTypes.bool,
    /**
     * `auto` lets the browser determine table column widths based on cell content,
     * while `fixed` forces columns of equal width. `stacked` renders table in one
     * column to be more readable on narrow screens
     */
    layout: PropTypes.oneOf(['auto', 'fixed', 'stacked']),
  }

* the selected tab should be focused
    */
    focus: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * 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'])
  }

  static defaultProps = {
    variant: 'simple',
    focus: false,
    defaultSelectedIndex: 0,
    padding: undefined,
    textAlign: undefined,
    size: undefined,
    selectedIndex: undefined,
    onChange: undefined,
    margin: undefined,
    children: null
  }

export default class Panel extends Component {
  static propTypes = {
    /**
    * The content that will be rendered in the corresponding  and will label
    * this `` for screen readers
    */
    title: PropTypes.node.isRequired,
    children: PropTypes.node,
    variant: PropTypes.oneOf(['default', 'secondary']),
    maxHeight: PropTypes.string,
    minHeight: PropTypes.string,
    id: PropTypes.string,
    labelledBy: PropTypes.string,
    selected: PropTypes.bool,
    disabled: PropTypes.bool,
    padding: ThemeablePropTypes.spacing,
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
    /**
    * A ref to this `` component instance
    */
    tabRef: PropTypes.func
  }

  static defaultProps = {
    children: null,
    id: undefined,
    disabled: false,
    maxHeight: undefined,
    minHeight: undefined,
    textAlign: 'start',
    variant: 'default',
    labelledBy: null,