text: import _extends from "@babel/runtime/helpers/extends";
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
  // @inheritedComponent InputBase
  import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  import { componentPropType } from '@material-ui/utils';
  import InputBase from '../InputBase';
  import withStyles from '../styles/withStyles';
  export const styles = theme => {
    const light = theme.palette.type === 'light';
    const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
    const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
    return {
      /* Styles applied to the root element. */
      root: {
        position: 'relative',
        backgroundColor,
        borderTopLeftRadius: theme.shape.borderRadius,
        borderTopRightRadius: theme.shape.borderRadius,
        transition: theme.transitions.create('background-color', {
          duration: theme.transitions.duration.shorter,
          easing: theme.transitions.easing.easeOut
        }),
        '&:hover': {
          backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            backgroundColor
          }
        },
        '&$focused': {
          backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)'
        },
        '&$disabled': {
          backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
        }
      },
  
      /* Styles applied to the root element if `disableUnderline={false}`. */
      underline: {
        '&:after': {
          borderBottom: `2px solid ${theme.palette.primary[light ? 'dark' : 'light']}`,
          left: 0,
          bottom: 0,
          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
          content: '""',
          position: 'absolute',
          right: 0,
          transform: 'scaleX(0)',
          transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shorter,
            easing: theme.transitions.easing.easeOut
          }),
          pointerEvents: 'none' // Transparent to the hover style.
  
        },
        '&$focused:after': {
          transform: 'scaleX(1)'
        },
        '&$error:after': {
          borderBottomColor: theme.palette.error.main,
          transform: 'scaleX(1)' // error is always underlined in red
  
        },
        '&:before': {
          borderBottom: `1px solid ${bottomLineColor}`,
          left: 0,
          bottom: 0,
          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
          content: '"\\00a0"',
          position: 'absolute',
          right: 0,
          transition: theme.transitions.create('border-bottom-color', {
            duration: theme.transitions.duration.shorter
          }),
          pointerEvents: 'none' // Transparent to the hover style.
  
        },
        '&:hover:not($disabled):not($focused):not($error):before': {
          borderBottom: `1px solid ${theme.palette.text.primary}`
        },
        '&$disabled:before': {
          borderBottom: `1px dotted ${bottomLineColor}`
        }
      },
  
      /* Styles applied to the root element if the component is focused. */
      focused: {},
  
      /* Styles applied to the root element if `disabled={true}`. */
      disabled: {},
  
      /* Styles applied to the root element if `startAdornment` is provided. */
      adornedStart: {
        paddingLeft: 12
      },
  
      /* Styles applied to the root element if `endAdornment` is provided. */
      adornedEnd: {
        paddingRight: 12
      },
  
      /* Styles applied to the root element if `error={true}`. */
      error: {},
  
      /* Styles applied to the root element if `multiline={true}`. */
      multiline: {
        padding: '27px 12px 10px',
        boxSizing: 'border-box' // Prevent padding issue with fullWidth.
  
      },
  
      /* Styles applied to the `input` element. */
      input: {
        padding: '27px 12px 10px'
      },
  
      /* Styles applied to the `input` element if `margin="dense"`. */
      inputMarginDense: {
        paddingTop: 24,
        paddingBottom: 6
      },
  
      /* Styles applied to the `input` element if `multiline={true}`. */
      inputMultiline: {
        padding: 0
      },
  
      /* Styles applied to the `input` element if `startAdornment` is provided. */
      inputAdornedStart: {
        paddingLeft: 0
      },
  
      /* Styles applied to the `input` element if `endAdornment` is provided. */
      inputAdornedEnd: {
        paddingRight: 0
      }
    };
  };
  
  function FilledInput(props) {
    const {
      disableUnderline,
      classes
    } = props,
          other = _objectWithoutPropertiesLoose(props, ["disableUnderline", "classes"]);
  
    return React.createElement(InputBase, _extends({
      classes: _extends({}, classes, {
        root: classNames(classes.root, {
          [classes.underline]: !disableUnderline
        }),
        underline: null
      })
    }, other));
  }
  
  process.env.NODE_ENV !== "production" ? FilledInput.propTypes = {
    /**
     * This property helps users to fill forms faster, especially on mobile devices.
     * The name can be confusing, as it's more like an autofill.
     * You can learn more about it here:
     * https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
     */
    autoComplete: PropTypes.string,
  
    /**
     * If `true`, the input will be focused during the first mount.
     */
    autoFocus: PropTypes.bool,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css-api) below for more details.
     */
    classes: PropTypes.object.isRequired,
  
    /**
     * The CSS class name of the wrapper element.
     */
    className: PropTypes.string,
  
    /**
     * The default input value, useful when not controlling the component.
     */
    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.object, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.object]))]),
  
    /**
     * If `true`, the input will be disabled.
     */
    disabled: PropTypes.bool,
  
    /**
     * If `true`, the input will not have an underline.
     */
    disableUnderline: PropTypes.bool,
  
    /**
     * End `InputAdornment` for this component.
     */
    endAdornment: PropTypes.node,
  
    /**
     * If `true`, the input will indicate an error. This is normally obtained via context from
     * FormControl.
     */
    error: PropTypes.bool,
  
    /**
     * If `true`, the input will take up the full width of its container.
     */
    fullWidth: PropTypes.bool,
  
    /**
     * The id of the `input` element.
     */
    id: PropTypes.string,
  
    /**
     * The component used for the native input.
     * Either a string to use a DOM element or a component.
     */
    inputComponent: componentPropType,
  
    /**
     * Attributes applied to the `input` element.
     */
    inputProps: PropTypes.object,
  
    /**
     * Use that property to pass a ref callback to the native input component.
     */
    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  
    /**
     * If `dense`, will adjust vertical spacing. This is normally obtained via context from
     * FormControl.
     */
    margin: PropTypes.oneOf(['dense', 'none']),
  
    /**
     * If `true`, a textarea element will be rendered.
     */
    multiline: PropTypes.bool,
  
    /**
     * Name attribute of the `input` element.
     */
    name: PropTypes.string,
  
    /**
     * Callback fired when the value is changed.
     *
     * @param {object} event The event source of the callback.
     * You can pull out the new value by accessing `event.target.value`.
     */
    onChange: PropTypes.func,
  
    /**
     * The short hint displayed in the input before the user enters a value.
     */
    placeholder: PropTypes.string,
  
    /**
     * It prevents the user from changing the value of the field
     * (not from interacting with the field).
     */
    readOnly: PropTypes.bool,
  
    /**
     * If `true`, the input will be required.
     */
    required: PropTypes.bool,
  
    /**
     * Number of rows to display when multiline option is set to true.
     */
    rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  
    /**
     * Maximum number of rows to display when multiline option is set to true.
     */
    rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  
    /**
     * Start `InputAdornment` for this component.
     */
    startAdornment: PropTypes.node,
  
    /**
     * Type of the input element. It should be a valid HTML5 input type.
     */
    type: PropTypes.string,
  
    /**
     * The input value, required for a controlled component.
     */
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.object, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.object]))])
  } : void 0;
  InputBase.defaultProps = {
    fullWidth: false,
    inputComponent: 'input',
    multiline: false,
    type: 'text'
  };
  FilledInput.muiName = 'Input';
  export default withStyles(styles, {
    name: 'MuiFilledInput'
  })(FilledInput);