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

'warning',
      'default',
      'light',
      'inverse'
    ]), ['default', 'inverse', 'light'], ({ propName, propValue }) => (
      `In version 8.0.0, the value '${propValue}' for \`${propName}\` will be changed to ${(() => {
         if (propValue === 'default') return `'primary'`
         if (propValue === 'light') return `'secondary'`
         if (propValue === 'inverse') return `'primary-inverse'`
      })()}. Use that value instead.`
    )),

    /**
    * Controls the shadow depth for the `

'default',
      'inverse',
      'light',
      'transparent',
      'brand',
      'alert',
      'info',
      'success',
      'danger',
      'warning'
    ]),

    /**
    * Controls the shadow depth for the `

/**
    * Whether or not an arrow pointing to the trigger should be rendered
    */
    withArrow: PropTypes.bool,
    /**
    * Color variant of the popover content
    */
    color: PropTypes.oneOf(['primary', 'primary-inverse']),
    /**
     * The placement of the content in relation to the trigger
     */
    placement: PositionPropTypes.placement,
    /**
    * Controls the shadow depth for the ``
    */
    shadow: ThemeablePropTypes.shadow,
    /**
    * Controls the z-index depth for the `` content
    */
    stacking: ThemeablePropTypes.stacking,
    /**
     * A function that returns a reference to the content element
     */
    contentRef: PropTypes.func,
    /**
     * An element or a function returning an element to focus by default
     */
    defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    /**
     * An accessible label for the `` content
     */
    screenReaderLabel: PropTypes.string,

minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

    /**
    * The children to render inside the ``
    */
    children: PropTypes.node,

    /**
    * Designates the text alignment within the ``
    */
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),

    /**
    * Controls the shadow depth for the ``
    */
    shadow: ThemeablePropTypes.shadow,

    /**
    * Controls the z-index depth for the ``
    */
    stacking: ThemeablePropTypes.stacking,

    /**
    * Designates the background style of the ``
    */
    background: PropTypes.oneOf(['default', 'inverse']),

    /**
    * Specifies how the arrow for `` will be rendered.
    * Ex. `placement="top"` will render with an arrow pointing down.
    */
    placement: LayoutPropTypes.placement,

minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

    /**
    * The children to render inside the ``
    */
    children: PropTypes.node,

    /**
    * Designates the text alignment within the ``
    */
    textAlign: PropTypes.oneOf(['start', 'center', 'end']),

    /**
    * Controls the shadow depth for the ``
    */
    shadow: ThemeablePropTypes.shadow,

    /**
    * Controls the z-index depth for the ``
    */
    stacking: ThemeablePropTypes.stacking,

    /**
    * Designates the background style of the ``
    */
    background: PropTypes.oneOf(['default', 'inverse']),

    /**
    * Specifies how the arrow for `` will be rendered.
    * Ex. `placement="top"` will render with an arrow pointing down.
    */
    placement: LayoutPropTypes.placement,

placement: LayoutPropTypes.placement,

    /**
     * The action that causes the Content to display (`click`, `hover`, `focus`)
     */
    on: PropTypes.oneOfType([
      PropTypes.oneOf(['click', 'hover', 'focus']),
      PropTypes.arrayOf(PropTypes.oneOf(['click', 'hover', 'focus']))
    ]),

    variant: PropTypes.oneOf(['default', 'inverse']),

    /**
    * Controls the shadow depth for the ``
    */
    shadow: ThemeablePropTypes.shadow,

    /**
    * Controls the z-index depth for the `` content
    */
    stacking: ThemeablePropTypes.stacking,

    /**
     * Whether or not the content should be rendered on initial render.
     */
    defaultShow: PropTypes.bool,

    /**
    * Whether or not the `` is shown (should be accompanied by `onToggle`)
    */
    show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),