How to use the @instructure/ui-react-utils.deprecated function in @instructure/ui-react-utils

import { DatePicker } from './DatePicker'

import styles from './styles.css'
import theme from './theme'

import { isDayDisabled } from "./utils/dateHelpers"

/**
---
category: components/deprecated
id: DeprecatedDateInput
---
**/
@testable()
@deprecated('7.0.0', null, 'Use @instructure/ui-date-input instead')
@themeable(theme, styles)
class DateInput extends Component {
  static propTypes = {
    /**
      The label to put on the previous month button of the calendar.
    **/
    previousLabel: PropTypes.string.isRequired,
    /**
      The label to put on the next month button of the calendar.
    **/
    nextLabel: PropTypes.string.isRequired,
    /**
     * The message that's used when the data is invalid.
     */
    invalidDateMessage: PropTypes.oneOfType([
      PropTypes.string,

import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable'
import { omitProps , deprecated } from '@instructure/ui-react-utils'
import { supportsObjectFit } from '@instructure/ui-dom-utils'
import { testable } from '@instructure/ui-testable'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components/deprecated
id: DeprecatedImg
---
**/
@testable()
@deprecated('7.0.0', {
  cover: 'constrain'
})
@deprecated('7.0.0', null, 'Use Img from ui-img instead')
@themeable(theme, styles)
class Img extends Component {
  static propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string,
    inline: PropTypes.bool,
    /**
    * 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,
    /**

import { View } from '@instructure/ui-view'
import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable'
import { omitProps, deprecated } from '@instructure/ui-react-utils'
import { testable } from '@instructure/ui-testable'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components/deprecated
id: DeprecatedTable
---
**/

@deprecated('7.0.0', null, 'Use @instructure/ui-table instead.')
@testable()
@themeable(theme, styles)
class Table extends Component {
  static propTypes = {
    /**
    * Set the table's caption element (its label)
    */
    caption: PropTypes.node.isRequired,
    /**
    * Build the table markup via the children prop
    */
    children: PropTypes.node,
    /**
    * Highlight each row on hover
    */
    hover: PropTypes.bool,

import { createChainedFunction } from '@instructure/ui-utils'
import { callRenderProp, safeCloneElement, deprecated } from '@instructure/ui-react-utils'
import { Children as ChildrenPropTypes, controllable } from '@instructure/ui-prop-types'
import { PositionPropTypes } from '@instructure/ui-position'
import { FormPropTypes } from '@instructure/ui-form-field'
import { testable } from '@instructure/ui-testable'
import { themeable } from '@instructure/ui-themeable'

import styles from './styles.css'

/**
---
category: components
---
**/
@deprecated('7.0.0', {
  label: 'renderLabel'
})
@testable()
@themeable(null, styles)
class DateInput extends Component {
  static Day = Calendar.Day

  static propTypes = {
    /**
    * Specifies the input label.
    */
    renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
        /**
    * deprecated
    */
    label: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
import { findDOMNode, findFocusable, isActiveElement } from '@instructure/ui-dom-utils'
import { deprecated, getElementType, matchComponentTypes, omitProps } from '@instructure/ui-react-utils'
import { warn } from '@instructure/console/macro'
import { testable } from '@instructure/ui-testable'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components/deprecated
id: DeprecatedLink
---
**/
@deprecated('7.0.0', null, 'Use Link from ui-link instead')
@testable()
@themeable(theme, styles)
class Link extends Component {
  static propTypes = {
    href: PropTypes.string,
    children: PropTypes.node.isRequired,
    variant: PropTypes.oneOf(['default', 'inverse']),
    /**
    * provides a reference to the underlying focusable (`button` or `a`) element
    */
    linkRef: PropTypes.func,
    /**
    * provides a reference to the underlying html element
    */
    elementRef: PropTypes.func,
    /**

class PopoverTrigger extends ComponentIdentifier {
  static displayName = 'PopoverTrigger'
}

@deprecated('8.0.0', null, 'Use Popover\'s `children` instead.')
@testable()
class PopoverContent extends ComponentIdentifier {
  static displayName = 'PopoverContent'
}

/**
---
category: components
---
**/
@deprecated('8.0.0', {
  show: 'isShowingContent',
  defaultShow: 'defaultIsShowingContent',
  variant: 'color',
  label: 'screenReaderLabel',
  trackPosition: 'shouldTrackPosition',
  alignArrow: 'shouldAlignArrow',
  onShow: 'onShowContent',
  onDismiss: 'onHideContent',
  onToggle: 'onShowContent/onHideContent'
})
@testable()
@bidirectional()
class Popover extends Component {
  static Trigger = PopoverTrigger
  static Content = PopoverContent

class PositionContent extends ComponentIdentifier {
  static displayName = 'PositionContent'
  static propTypes = {
    children: PropTypes.node,
    placement: PositionPropTypes.placement
  }
  static locatorAttribute = 'data-position-content'
}

/**
---
category: components/utilities/deprecated
id: DeprecatedPosition
---
**/
@deprecated('7.0.0', null, 'Use @instructure/ui-position instead')
@testable()
@themeable(theme, styles)
class Position extends Component {
  static Target = PositionTarget
  static Content = PositionContent
  static locatorAttribute = 'data-position'

  static propTypes = {
    /**
     * The children to be rendered within the ``
     */
    children: PropTypes.node,

    /**
     * The target to be used when not using ``
     */

import { LayoutPropTypes } from '@instructure/ui-layout'
import { uid } from '@instructure/uid'
import { themeable } from '@instructure/ui-themeable'
import { testable } from '@instructure/ui-testable'
import { Popover } from '@instructure/ui-popover'
import { element } from '@instructure/ui-prop-types'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
**/
@deprecated('8.0.0', {
  tip: 'renderTip',
  variant: 'color'
})
@testable()
@themeable(theme, styles)
class Tooltip extends Component {
  static propTypes = {
    /**
    * @param {Object} renderProps
    * @param {Boolean} renderProps.focused - Is the Tooltip trigger focused?
    * @param {Function} renderProps.getTriggerProps - Props to be spread onto the trigger element
    */
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
    /**
    * The content to render in the tooltip
    */

import PropTypes from 'prop-types'
import classnames from 'classnames'

import { themeable } from '@instructure/ui-themeable'
import { omitProps, getElementType, deprecated } from '@instructure/ui-react-utils'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components/deprecated
id: DeprecatedText
---
**/
@deprecated('7.0.0', null, 'Use Text from ui-text instead')
@themeable(theme, styles)
class Text extends Component {
  static propTypes = {
    /**
    * the element type to render as
    */
    as: PropTypes.elementType,
    wrap: PropTypes.oneOf([
      'normal',
      'break-word'
    ]),
    weight: PropTypes.oneOf([
      'normal',
      'light',
      'bold'
    ]),

import { safeCloneElement, ensureSingleChild, hack, deprecated } from '@instructure/ui-react-utils'
import { error } from '@instructure/console/macro'
import { testable } from '@instructure/ui-testable'

import truncate from './utils/truncate'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components/deprecated
id: DeprecatedTruncateText
---
**/
@deprecated('7.0.0', null, 'Use @instructure/ui-truncate-text instead.')
@testable()
@themeable(theme, styles)
@hack(['shouldTruncateWhenInvisible'])
class TruncateText extends Component {
  static propTypes = {
    /**
    * The content to be truncated.
    */
    children: PropTypes.node.isRequired,
    /**
    * Number of lines to allow before truncating. `auto` will fit to parent
    */
    maxLines: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /**
    * Where to place the ellipsis within the string
    */