text: "use strict";
  
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.default = exports.styles = void 0;
  
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  
  var _react = _interopRequireDefault(require("react"));
  
  var _propTypes = _interopRequireDefault(require("prop-types"));
  
  var _clsx = _interopRequireDefault(require("clsx"));
  
  var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
  
  var _CheckBoxOutlineBlank = _interopRequireDefault(require("../internal/svg-icons/CheckBoxOutlineBlank"));
  
  var _CheckBox = _interopRequireDefault(require("../internal/svg-icons/CheckBox"));
  
  var _colorManipulator = require("../styles/colorManipulator");
  
  var _IndeterminateCheckBox = _interopRequireDefault(require("../internal/svg-icons/IndeterminateCheckBox"));
  
  var _helpers = require("../utils/helpers");
  
  var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
  
  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: (0, _colorManipulator.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: (0, _colorManipulator.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
        }
      }
    };
  };
  
  exports.styles = styles;
  
  var defaultCheckedIcon = _react.default.createElement(_CheckBox.default, null);
  
  var defaultIcon = _react.default.createElement(_CheckBoxOutlineBlank.default, null);
  
  var defaultIndeterminateIcon = _react.default.createElement(_IndeterminateCheckBox.default, null);
  
  var Checkbox = _react.default.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,
        other = (0, _objectWithoutProperties2.default)(props, ["checkedIcon", "classes", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps"]);
    return _react.default.createElement(_SwitchBase.default, (0, _extends2.default)({
      type: "checkbox",
      checkedIcon: indeterminate ? indeterminateIcon : checkedIcon,
      classes: {
        root: (0, _clsx.default)(classes.root, classes["color".concat((0, _helpers.capitalize)(color))], indeterminate && classes.indeterminate),
        checked: classes.checked,
        disabled: classes.disabled
      },
      color: color,
      inputProps: (0, _extends2.default)({
        'data-indeterminate': indeterminate
      }, inputProps),
      icon: indeterminate ? indeterminateIcon : icon,
      ref: ref
    }, other));
  });
  
  process.env.NODE_ENV !== "production" ? Checkbox.propTypes = {
    /**
     * If `true`, the component is checked.
     */
    checked: _propTypes.default.bool,
  
    /**
     * The icon to display when the component is checked.
     */
    checkedIcon: _propTypes.default.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: _propTypes.default.object.isRequired,
  
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color: _propTypes.default.oneOf(['primary', 'secondary', 'default']),
  
    /**
     * If `true`, the switch will be disabled.
     */
    disabled: _propTypes.default.bool,
  
    /**
     * If `true`, the ripple effect will be disabled.
     */
    disableRipple: _propTypes.default.bool,
  
    /**
     * The icon to display when the component is unchecked.
     */
    icon: _propTypes.default.node,
  
    /**
     * The id of the `input` element.
     */
    id: _propTypes.default.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.default.bool,
  
    /**
     * The icon to display when the component is indeterminate.
     */
    indeterminateIcon: _propTypes.default.node,
  
    /**
     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
     */
    inputProps: _propTypes.default.object,
  
    /**
     * This prop can be used to pass a ref callback to the `input` element.
     */
    inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
  
    /**
     * Callback fired when the state is changed.
     *
     * @param {object} event The event source of the callback.
     * You can pull out the new value by accessing `event.target.checked`.
     * @param {boolean} checked The `checked` value of the switch
     */
    onChange: _propTypes.default.func,
  
    /**
     * If `true`, the `input` element will be required.
     */
    required: _propTypes.default.bool,
  
    /**
     * The input component prop `type`.
     */
    type: _propTypes.default.string,
  
    /**
     * The value of the component. The DOM API casts this to a string.
     */
    value: _propTypes.default.any
  } : void 0;
  
  var _default = (0, _withStyles.default)(styles, {
    name: 'MuiCheckbox'
  })(Checkbox);
  
  exports.default = _default;