{() => {
    const StyledInput = createComponent(
      ({ hovered }) => ({
        backgroundColor: hovered ? 'lightblue' : 'white',
      }),
      'input',
      ['onMouseEnter', 'onMouseLeave', 'type'],
    )
    class TextInput extends Component {
      render() {
        const { hovered } = this.props
        return (
          <Hoverable hovered={hovered}>
            {({ bind, hovered, ref }) => {
              return <StyledInput {...bind} hovered={hovered} innerRef={ref} />
            }}
          
        )
      }
    }
    return (
      <SpacedGroup direction="vertical">
        <TextInput focused />
        <TextInput />
        <TextInput />
      </SpacedGroup>
    )
  }}
</Playground>