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

const ErrorPage = props => {
  const themeName = useTheme()
  const allProps = {
    ...props,
    themeName
  }
  return (
    <div>
      {allProps.iconId &amp;&amp; icons[allProps.iconId] &amp;&amp; (
        <div>{icons[allProps.iconId]()}</div>
      )}
      <div>
        
          <h1>{allProps.text}</h1>
        
      </div>
      <div>
        </div></div>

({ children, open, tagName, toggle, getButtonAriaLabel, ...rest }, ref) => {
    const themeName = useTheme()
    const TagName = tagName
    return (
      
        <button aria-label="{getButtonAriaLabel()}">
          <div>
            <span>{children}</span>
            </div></button>

export default function Note(props) {
  const themeName = useTheme()
  const [isHovered, setIsHovered] = React.useState(false)

  const handleMouseOver = (...args) => {
    setIsHovered(true)
    if (props.onMouseOver) props.onMouseOver(...args)
  }

  const handleMouseOut = (...args) => {
    setIsHovered(false)
    if (props.onMouseOut) props.onMouseOut(...args)
  }

  const hasActions = !!props.actionBar && props.actionBar.length > 0
  const hasAside = !!props.avatar
  const hasHeading = !!props.heading
  const hasMetadata = !!props.metadata && props.metadata.length > 0

const ListItem = React.forwardRef((props, ref) => {
  const themeName = useTheme()
  const tagName = props.href ? 'a' : 'button'
  const allProps = {
    ...props,
    themeName
  }
  return React.createElement(
    tagName,
    filterReactProps(
      {
        ...props,
        ...styles.listItem(allProps),
        'aria-selected': allProps.active,
        ref,
        role: 'tab',
        tabIndex: '-1'
      },

const Button = React.forwardRef((props, ref) => {
  const themeName = useTheme()
  if (!ref) ref = React.useRef()
  const nonLoadingWidth = React.useMemo(() => {
    if (props.loading && ref && ref.current) {
      return ref.current.offsetWidth
    }
  }, [props.loading, ref])

  const tagName = props.href ? 'a' : 'button'
  const isLoadingWithNoText = !!nonLoadingWidth
  const allProps = {
    ...props,
    isLoadingWithNoText,
    iconOnly: React.Children.count(props.children) <= 0,
    themeName
  }

const GroupHeader = forwardRef(({ children, tagName, ...rest }, ref) => {
  const themeName = useTheme()
  const TagName = tagName

  return (
    
      <div>
        <span>{children}</span>
      </div>
    
  )
})

({ active, children, header, itemType, ...rest }, ref) => {
    const themeName = useTheme()
    return (
      <li>
        <div>
          {cloneElement(header, { active })}
        </div>
        {children &amp;&amp; <ul>{children}</ul>}
      </li>
    )
  }
)

const P = (props, context) => {
  const themeName = useTheme()

  return (
    <p>
      {props.children}
    </p>
  )
}

export default function EmptyState(props) {
  const [hasRenderedOnce, setHasRenderedOnce] = useState(false)
  const { ref, width } = useResizeObserver()
  const themeName = useTheme()

  useEffect(() => {
    setHasRenderedOnce(true)
  }, [])

  const hasPropSizeOverride = !!props.size
  const observableSize =
    width <= renderSmallIfElementLessThan ? vars.sizes.small : vars.sizes.large

  const size = hasPropSizeOverride ? props.size : observableSize
  const ctx = { size, themeName }

  return (

Tier1.Header = forwardRef(({ active, children, icon, ...rest }, ref) => {
  const themeName = useTheme()
  const TagName = rest.href ? 'a' : rest.onClick ? 'button' : 'span'
  return (
    
      {icon &&
        cloneElement(icon, {
          size: Icon.sizes.medium,
          ...styles.itemIcon(themeName),
          ...(active ? { 'data-active': true } : {})
        })}
      <span>{children}</span>