content: import _extends from "@babel/runtime/helpers/esm/extends";
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { refType } from '@material-ui/utils';
  import SwitchBase from '../internal/SwitchBase';
  import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
  import CheckBoxIcon from '../internal/svg-icons/CheckBox';
  import { fade } from '../styles/colorManipulator';
  import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
  import capitalize from '../utils/capitalize';
  import withStyles from '../styles/withStyles';
  export var styles = function styles(theme) {
    return {
      /* Styles applied to the root element. */
      root: {
        color: theme.palette.text.secondary
      },
  
      /* Pseudo-class applied to the root element if `checked={true}`. */
      checked: {},
  
      /* Pseudo-class applied to the root element if `disabled={true}`. */
      disabled: {},
  
      /* Pseudo-class applied to the root element if `indeterminate={true}`. */
      indeterminate: {},
  
      /* Styles applied to the root element if `color="primary"`. */
      colorPrimary: {
        '&$checked': {
          color: theme.palette.primary.main,
          '&:hover': {
            backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
            // Reset on touch devices, it doesn't add specificity
            '@media (hover: none)': {
              backgroundColor: 'transparent'
            }
          }
        },
        '&$disabled': {
          color: theme.palette.action.disabled
        }
      },
  
      /* Styles applied to the root element if `color="secondary"`. */
      colorSecondary: {
        '&$checked': {
          color: theme.palette.secondary.main,
          '&:hover': {
            backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
            // Reset on touch devices, it doesn't add specificity
            '@media (hover: none)': {
              backgroundColor: 'transparent'
            }
          }
        },
        '&$disabled': {
          color: theme.palette.action.disabled
        }
      }
    };
  };
  var defaultCheckedIcon = React.createElement(CheckBoxIcon, null);
  var defaultIcon = React.createElement(CheckBoxOutlineBlankIcon, null);
  var defaultIndeterminateIcon = React.createElement(IndeterminateCheckBoxIcon, null);
  var Checkbox = React.forwardRef(function Checkbox(props, ref) {
    var _props$checkedIcon = props.checkedIcon,
        checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,
        classes = props.classes,
        _props$color = props.color,
        color = _props$color === void 0 ? 'secondary' : _props$color,
        _props$icon = props.icon,
        icon = _props$icon === void 0 ? defaultIcon : _props$icon,
        _props$indeterminate = props.indeterminate,
        indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
        _props$indeterminateI = props.indeterminateIcon,
        indeterminateIcon = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,
        inputProps = props.inputProps,
        _props$size = props.size,
        size = _props$size === void 0 ? 'medium' : _props$size,
        other = _objectWithoutProperties(props, ["checkedIcon", "classes", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"]);
  
    return React.createElement(SwitchBase, _extends({
      type: "checkbox",
      classes: {
        root: clsx(classes.root, classes["color".concat(capitalize(color))], indeterminate && classes.indeterminate),
        checked: classes.checked,
        disabled: classes.disabled
      },
      color: color,
      inputProps: _extends({
        'data-indeterminate': indeterminate
      }, inputProps),
      icon: React.cloneElement(indeterminate ? indeterminateIcon : icon, {
        fontSize: size === 'small' ? 'small' : 'default'
      }),
      checkedIcon: React.cloneElement(indeterminate ? indeterminateIcon : checkedIcon, {
        fontSize: size === 'small' ? 'small' : 'default'
      }),
      ref: ref
    }, other));
  });
  process.env.NODE_ENV !== "production" ? Checkbox.propTypes = {
    /**
     * If `true`, the component is checked.
     */
    checked: PropTypes.bool,
  
    /**
     * The icon to display when the component is checked.
     */
    checkedIcon: PropTypes.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object.isRequired,
  
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color: PropTypes.oneOf(['primary', 'secondary', 'default']),
  
    /**
     * If `true`, the checkbox will be disabled.
     */
    disabled: PropTypes.bool,
  
    /**
     * If `true`, the ripple effect will be disabled.
     */
    disableRipple: PropTypes.bool,
  
    /**
     * The icon to display when the component is unchecked.
     */
    icon: PropTypes.node,
  
    /**
     * The id of the `input` element.
     */
    id: PropTypes.string,
  
    /**
     * If `true`, the component appears indeterminate.
     * This does not set the native input element to indeterminate due
     * to inconsistent behavior across browsers.
     * However, we set a `data-indeterminate` attribute on the input.
     */
    indeterminate: PropTypes.bool,
  
    /**
     * The icon to display when the component is indeterminate.
     */
    indeterminateIcon: PropTypes.node,
  
    /**
     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
     */
    inputProps: PropTypes.object,
  
    /**
     * Pass a ref to the `input` element.
     */
    inputRef: refType,
  
    /**
     * Callback fired when the state is changed.
     *
     * @param {object} event The event source of the callback.
     * You can pull out the new checked state by accessing `event.target.checked` (boolean).
     */
    onChange: PropTypes.func,
  
    /**
     * If `true`, the `input` element will be required.
     */
    required: PropTypes.bool,
  
    /**
     * The size of the checkbox.
     * `small` is equivalent to the dense checkbox styling.
     */
    size: PropTypes.oneOf(['small', 'medium']),
  
    /**
     * The input component prop `type`.
     */
    type: PropTypes.string,
  
    /**
     * The value of the component. The DOM API casts this to a string.
     */
    value: PropTypes.any
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiCheckbox'
  })(Checkbox);