curls/dist/es/Input/Input.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

function _extends() {
  _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i]
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]
          }
        }
      }
      return target
    }
  return _extends.apply(this, arguments)
}

import {css} from '@emotion/core'
import {useStyles} from '@style-hooks/core'
import createComponent from '../createComponent'
import {useBox} from '../Box'
import {useText} from '../Text'
import {pushCss} from '../utils'
import * as styles from './styles'
const defaultStyles = {
  name: 'ykfo6',
  styles:
    "-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:none;&:focus{outline:0;}&[type='number']::-webkit-inner-spin-button,&[type='number']::-webkit-outer-spin-button{height:auto;}&[type='search']{-webkit-appearance:none;outline-offset:-2px;}",
}
export const useInput = props =>
    useStyles(
      'input',
      styles,
      pushCss(
        _extends(
          {
            __inputStyles: true,
          },
          props
        ),
        defaultStyles
      )
    ),
  Input = createComponent('input', props => useBox(useText(useInput(props))))

if (process.env.NODE_ENV !== 'production') {
  const typePropTypes = require('../Text/propTypes').default,
    boxPropTypes = require('../Box/propTypes').default,
    flexPropTypes = require('../Flex/propTypes').default

  Input.displayName = 'Input'
  Input.propTypes = _extends({}, boxPropTypes, flexPropTypes, typePropTypes)
}