How to use the @pluralsight/ps-design-system-theme.withTheme function in @pluralsight/ps-design-system-theme

words: props => {
    const imgWidth = formatImageWidth(props)
    const actionBarWidth = formatActionBarWidth(props)

    return compose(
      css(stylesheet['.psds-row__words']),
      css({ maxWidth: `calc(100% - ${imgWidth} - ${actionBarWidth})` })
    )
  }
}

const ActionBar = props => (
  <div>
)

const ActionBarAction = withTheme(
  React.forwardRef((props, ref) =&gt; {
    // eslint-disable-next-line react/prop-types
    const { icon, ...rest } = props
    const filteredProps = filterReactProps(rest, { tagName: 'button' })

    return (
      <button>
        {icon}
      </button>
    )
  })
)

ActionBarAction.displayName = 'Row.Action'
ActionBarAction.propTypes = { icon: PropTypes.element.isRequired }
</div>

Drawer.propTypes = {
  base: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
  isOpen: PropTypes.bool,
  onToggle: PropTypes.func,
  startOpen: PropTypes.bool,
  themeName: PropTypes.oneOf(Object.values(themeNames)),
  toggleButtonAriaLabel: PropTypes.string
}

Drawer.defaultProps = {
  startOpen: false
}

export default withTheme(Drawer)

return (
    <div aria-label="{`${percent}">
  )
}
ProgressBar.propTypes = {
  progress: PropTypes.number
}

const Text = props =&gt; <span>
Text.displayName = 'Row.Text'

const TextLink = withTheme(props =&gt; {
  const { children, truncated } = props

  const anchor = React.Children.only(children)
  const anchorText = anchor.props.children
  const childIsString = typeof anchorText === 'string'

  return (
    <span>
      <a>
         {c}}
        &gt;</a></span></span></div>

{anchorText}
        
      
    
  )
})
TextLink.displayName = 'Row.TextLink'
TextLink.defaultProps = {
  truncated: false
}
TextLink.propTypes = {
  children: PropTypes.oneOfType([elementOfType('a')]).isRequired,
  truncated: PropTypes.bool
}

const Title = withTheme(({ truncated, children, ...rest }) => {
  const childIsString = typeof children === 'string'

  const wrapAsLink = c => React.cloneElement(c, { truncated })
  const wrapWithShave = child => (
     {c}}
    >
      {child}
    
  )

  return (
    <div>
      {childIsString ? wrapWithShave(children) : wrapAsLink(children)}
    </div>

visible: false,
  visibleOnFocus: true
}

Halo.propTypes = {
  className: PropTypes.string,
  error: PropTypes.bool,
  gapSize: PropTypes.oneOf(Object.values(vars.gapSizes)),
  inline: PropTypes.bool,
  shape: PropTypes.oneOf(Object.values(vars.shapes)),
  themeName: PropTypes.string,
  visible: PropTypes.bool,
  visibleOnFocus: PropTypes.bool
}

export default withTheme(Halo)

const Image = props => (
  <div>
)
Image.displayName = 'Row.Image'
Image.propTypes = { src: PropTypes.string.isRequired }

const ImageLink = props =&gt; (
  <span>
)
ImageLink.displayName = 'Row.ImageLink'

const Metadata = withTheme(props =&gt; (
  <div>
))
Metadata.propTypes = {
  size: PropTypes.any
}

const MetadataDatum = props =&gt; (
  <span>
)

const MetadataDot = props =&gt; (
  </span></div></span></div>

}

const LinearProgress = props => (
  <div>
    <div>
  </div>
)

LinearProgress.propTypes = {
  value: PropTypes.number
}
LinearProgress.defaultProps = {
  value: 0
}

export default withTheme(LinearProgress)
</div>