How to use the @pluralsight/ps-design-system-theme/react.js.names function in @pluralsight/ps-design-system-theme

}
        `}
      
    )
  }
}

ReactExample.propTypes = {
  codes: PropTypes.arrayOf(PropTypes.string),
  decorateCodes: PropTypes.func,
  includes: PropTypes.object,
  /* eslint-disable react/no-unused-prop-types */
  outputChildStyle: PropTypes.object,
  outputStyle: PropTypes.object,
  /* eslint-enable react/no-unused-prop-types */
  themeName: PropTypes.oneOf(Object.keys(Theme.names)),
  themeToggle: PropTypes.bool
}

ReactExample.defaultProps = {
  orient: 'horizontal',
  themeName: Theme.defaultName,
  themeToggle: false
}

export default ReactExample

// TODO: combine fns
  function handleKeyUp(evt) {
    if (!isEscape(evt)) return
    props.onClose(evt)
  }

  const content = (
    
      
        <div>
          {!props.disableCloseButton &amp;&amp; isFunction(props.onClose) &amp;&amp; (
            
          )}

          {props.children}
        </div>
      
    
  )

  return props.modal ? (

const getOutputClassName = (props, state) =>
  `output ${state.themeName === Theme.names.light ? 'outputLight' : ''} ${
    props.orient === 'vertical' ? 'outputVertical' : 'outputHorizontal'
  }`

handleThemeSelect(evt, index) {
    const themeName = Theme.names[Object.keys(Theme.names)[index]]
    this.setState({ themeName })
  }

const InAppExample = _ => (
  <div>
    
      Page title}&gt;
        
          Menu Item
          Menu Item
          Menu Item
          Menu Item
        
        <div>
          
          
            All the things
          
        </div>
      
      <code>
        {`All the things`}</code></div>