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

const Switch = React.forwardRef((props, forwardedRef) => {
  const { checked, children, disabled, error, ...rest } = props

  const ref = React.useRef()
  React.useImperativeHandle(forwardedRef, () => ref.current)

  const themeName = useTheme()
  const [isFocused, setIsFocused] = React.useState(false)

  const handleBlur = combineFns(() => {
    setIsFocused(false)
  }, props.onBlur)

  function handleClick(evt) {
    if (disabled || !isFunction(props.onClick)) return

    props.onClick(!props.checked)
  }

  const handleFocus = combineFns(() => {
    setIsFocused(true)
  }, props.onFocus)

const Checkbox = React.forwardRef((props, forwardedRef) => {
  const themeName = useTheme()

  const ref = React.useRef()
  React.useImperativeHandle(forwardedRef, () => ref.current)

  const square = React.createRef()

  React.useEffect(
    function updateIndetermiateAttr() {
      if (!ref.current) return
      ref.current.indeterminate = props.indeterminate
    },
    [props.indeterminate]
  )

  const handleKeyDown = evt => {
    if (evt.key === 'Enter' || evt.key === ' ') handleClick(evt)

const DataWell = React.forwardRef((props, ref) => {
  const themeName = useTheme()

  return (
    <div>
      
        <div>{props.label}</div>
      

      <div>{props.children}</div>
      <div>{props.subLabel}</div></div>

const Button = React.forwardRef((props, forwardedRef) => {
  const themeName = useTheme()

  const ref = React.useRef()
  React.useImperativeHandle(forwardedRef, () => ref.current)

  const circleRef = React.useRef()

  function handleClick(evt) {
    const value = evt.target.value
    props._onClick(evt, value)

    if (isFunction(props.onClick)) props.onClick(evt, value)
    props._onFocus(evt, value)

    circleRef.current.focus()
  }