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

`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 `

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,

    /**
    * Activate an outline around the component to make building your
    * layout easier
    */

/**
    * 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,
    /**
     * The horizontal offset for the positioned content
     */
    offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

'alert',
      'info',
      'success',
      'danger',
      'warning'
    ]),

    /**
    * Controls the shadow depth for 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,

    /**
    * Activate an outline around the component to make building your
    * layout easier
    */

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'),

    /**
     *
     * A function that returns a reference to the content element
     */
    contentRef: PropTypes.func,