text: import _extends from "@babel/runtime/helpers/esm/extends";
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  import * as React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { isFilled, isAdornedStart } from '../InputBase/utils';
  import withStyles from '../styles/withStyles';
  import capitalize from '../utils/capitalize';
  import isMuiElement from '../utils/isMuiElement';
  import FormControlContext from './FormControlContext';
  export const styles = {
    /* Styles applied to the root element. */
    root: {
      display: 'inline-flex',
      flexDirection: 'column',
      position: 'relative',
      // Reset fieldset default style.
      minWidth: 0,
      padding: 0,
      margin: 0,
      border: 0,
      verticalAlign: 'top' // Fix alignment issue on Safari.
  
    },
  
    /* Styles applied to the root element if `margin="normal"`. */
    marginNormal: {
      marginTop: 16,
      marginBottom: 8
    },
  
    /* Styles applied to the root element if `margin="dense"`. */
    marginDense: {
      marginTop: 8,
      marginBottom: 4
    },
  
    /* Styles applied to the root element if `fullWidth={true}`. */
    fullWidth: {
      width: '100%'
    }
  };
  /**
   * Provides context such as filled/focused/error/required for form inputs.
   * Relying on the context provides high flexibility and ensures that the state always stays
   * consistent across the children of the `FormControl`.
   * This context is used by the following components:
   *
   *  - FormLabel
   *  - FormHelperText
   *  - Input
   *  - InputLabel
   *
   * You can find one composition example below and more going to [the demos](/components/text-fields/#components).
   *
   * ```jsx
   * <FormControl>
   *   <InputLabel htmlFor="my-input">Email address</InputLabel>
   *   <Input id="my-input" aria-describedby="my-helper-text" />
   *   <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
   * </FormControl>
   * ```
   *
   * ⚠️Only one input can be used within a FormControl.
   */
  
  const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, ref) {
    const {
      children,
      classes,
      className,
      color = 'primary',
      component: Component = 'div',
      disabled = false,
      error = false,
      fullWidth = false,
      focused: visuallyFocused,
      hiddenLabel = false,
      margin = 'none',
      required = false,
      size,
      variant = 'standard'
    } = props,
          other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "error", "fullWidth", "focused", "hiddenLabel", "margin", "required", "size", "variant"]);
  
    const [adornedStart, setAdornedStart] = React.useState(() => {
      // We need to iterate through the children and find the Input in order
      // to fully support server-side rendering.
      let initialAdornedStart = false;
  
      if (children) {
        React.Children.forEach(children, child => {
          if (!isMuiElement(child, ['Input', 'Select'])) {
            return;
          }
  
          const input = isMuiElement(child, ['Select']) ? child.props.input : child;
  
          if (input && isAdornedStart(input.props)) {
            initialAdornedStart = true;
          }
        });
      }
  
      return initialAdornedStart;
    });
    const [filled, setFilled] = React.useState(() => {
      // We need to iterate through the children and find the Input in order
      // to fully support server-side rendering.
      let initialFilled = false;
  
      if (children) {
        React.Children.forEach(children, child => {
          if (!isMuiElement(child, ['Input', 'Select'])) {
            return;
          }
  
          if (isFilled(child.props, true)) {
            initialFilled = true;
          }
        });
      }
  
      return initialFilled;
    });
    const [_focused, setFocused] = React.useState(false);
    const focused = visuallyFocused !== undefined ? visuallyFocused : _focused;
  
    if (disabled && focused) {
      setFocused(false);
    }
  
    let registerEffect;
  
    if (process.env.NODE_ENV !== 'production') {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      const registeredInput = React.useRef(false);
  
      registerEffect = () => {
        if (registeredInput.current) {
          console.error(['Material-UI: There are multiple InputBase components inside a FormControl.', 'This is not supported. It might cause infinite rendering loops.', 'Only use one InputBase.'].join('\n'));
        }
  
        registeredInput.current = true;
        return () => {
          registeredInput.current = false;
        };
      };
    }
  
    const onFilled = React.useCallback(() => {
      setFilled(true);
    }, []);
    const onEmpty = React.useCallback(() => {
      setFilled(false);
    }, []);
    const childContext = {
      adornedStart,
      setAdornedStart,
      color,
      disabled,
      error,
      filled,
      focused,
      fullWidth,
      hiddenLabel,
      margin: (size === 'small' ? 'dense' : undefined) || margin,
      onBlur: () => {
        setFocused(false);
      },
      onEmpty,
      onFilled,
      onFocus: () => {
        setFocused(true);
      },
      registerEffect,
      required,
      variant
    };
    return /*#__PURE__*/React.createElement(FormControlContext.Provider, {
      value: childContext
    }, /*#__PURE__*/React.createElement(Component, _extends({
      className: clsx(classes.root, className, margin !== 'none' && classes[`margin${capitalize(margin)}`], fullWidth && classes.fullWidth),
      ref: ref
    }, other), children));
  });
  process.env.NODE_ENV !== "production" ? FormControl.propTypes = {
    // ----------------------------- Warning --------------------------------
    // | These PropTypes are generated from the TypeScript type definitions |
    // |     To update them edit the d.ts file and run "yarn proptypes"     |
    // ----------------------------------------------------------------------
  
    /**
     * The contents of the form control.
     */
    children: PropTypes.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color: PropTypes.oneOf(['primary', 'secondary']),
  
    /**
     * The component used for the root node.
     * Either a string to use a HTML element or a component.
     */
    component: PropTypes
    /* @typescript-to-proptypes-ignore */
    .elementType,
  
    /**
     * If `true`, the label, input and helper text should be displayed in a disabled state.
     */
    disabled: PropTypes.bool,
  
    /**
     * If `true`, the label should be displayed in an error state.
     */
    error: PropTypes.bool,
  
    /**
     * If `true`, the component will be displayed in focused state.
     */
    focused: PropTypes.bool,
  
    /**
     * If `true`, the component will take up the full width of its container.
     */
    fullWidth: PropTypes.bool,
  
    /**
     * If `true`, the label will be hidden.
     * This is used to increase density for a `FilledInput`.
     * Be sure to add `aria-label` to the `input` element.
     */
    hiddenLabel: PropTypes.bool,
  
    /**
     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
     */
    margin: PropTypes.oneOf(['dense', 'none', 'normal']),
  
    /**
     * If `true`, the label will indicate that the input is required.
     */
    required: PropTypes.bool,
  
    /**
     * The size of the text field.
     */
    size: PropTypes.oneOf(['medium', 'small']),
  
    /**
     * The variant to use.
     */
    variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiFormControl'
  })(FormControl);