text: import * as React from 'react';
  import PropTypes from 'prop-types';
  import { refType } from '@mui/utils';
  import { unstable_composeClasses as composeClasses } from '@mui/base';
  import { alpha } from '@mui/system';
  import SwitchBase from '../internal/SwitchBase';
  import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
  import CheckBoxIcon from '../internal/svg-icons/CheckBox';
  import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
  import capitalize from '../utils/capitalize';
  import useThemeProps from '../styles/useThemeProps';
  import styled, { rootShouldForwardProp } from '../styles/styled';
  import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
  
  const useUtilityClasses = (ownerState) => {
    const { classes, indeterminate, color } = ownerState;
  
    const slots = {
      root: ['root', indeterminate && 'indeterminate', `color${capitalize(color)}`],
    };
  
    const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);
  
    return {
      ...classes, // forward the disabled and checked classes to the SwitchBase
      ...composedClasses,
    };
  };
  
  const CheckboxRoot = styled(SwitchBase, {
    shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes',
    name: 'MuiCheckbox',
    slot: 'Root',
    overridesResolver: (props, styles) => {
      const { ownerState } = props;
  
      return [
        styles.root,
        ownerState.indeterminate && styles.indeterminate,
        ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
      ];
    },
  })(({ theme, ownerState }) => ({
    color: (theme.vars || theme).palette.text.secondary,
    ...(!ownerState.disableRipple && {
      '&:hover': {
        backgroundColor: theme.vars
          ? `rgba(${
              ownerState.color === 'default'
                ? theme.vars.palette.action.activeChannel
                : theme.vars.palette.primary.mainChannel
            } / ${theme.vars.palette.action.hoverOpacity})`
          : alpha(
              ownerState.color === 'default'
                ? theme.palette.action.active
                : theme.palette[ownerState.color].main,
              theme.palette.action.hoverOpacity,
            ),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent',
        },
      },
    }),
    ...(ownerState.color !== 'default' && {
      [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
        color: (theme.vars || theme).palette[ownerState.color].main,
      },
      [`&.${checkboxClasses.disabled}`]: {
        color: (theme.vars || theme).palette.action.disabled,
      },
    }),
  }));
  
  const defaultCheckedIcon = <CheckBoxIcon />;
  const defaultIcon = <CheckBoxOutlineBlankIcon />;
  const defaultIndeterminateIcon = <IndeterminateCheckBoxIcon />;
  
  const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
    const props = useThemeProps({ props: inProps, name: 'MuiCheckbox' });
    const {
      checkedIcon = defaultCheckedIcon,
      color = 'primary',
      icon: iconProp = defaultIcon,
      indeterminate = false,
      indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
      inputProps,
      size = 'medium',
      ...other
    } = props;
  
    const icon = indeterminate ? indeterminateIconProp : iconProp;
    const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
  
    const ownerState = {
      ...props,
      color,
      indeterminate,
      size,
    };
  
    const classes = useUtilityClasses(ownerState);
  
    return (
      <CheckboxRoot
        type="checkbox"
        inputProps={{
          'data-indeterminate': indeterminate,
          ...inputProps,
        }}
        icon={React.cloneElement(icon, {
          fontSize: icon.props.fontSize ?? size,
        })}
        checkedIcon={React.cloneElement(indeterminateIcon, {
          fontSize: indeterminateIcon.props.fontSize ?? size,
        })}
        ownerState={ownerState}
        ref={ref}
        {...other}
        classes={classes}
      />
    );
  });
  
  Checkbox.propTypes /* remove-proptypes */ = {
    // ----------------------------- Warning --------------------------------
    // | These PropTypes are generated from the TypeScript type definitions |
    // |     To update them edit the d.ts file and run "yarn proptypes"     |
    // ----------------------------------------------------------------------
    /**
     * If `true`, the component is checked.
     */
    checked: PropTypes.bool,
    /**
     * The icon to display when the component is checked.
     * @default <CheckBoxIcon />
     */
    checkedIcon: PropTypes.node,
    /**
     * Override or extend the styles applied to the component.
     */
    classes: PropTypes.object,
    /**
     * The color of the component.
     * It supports both default and custom theme colors, which can be added as shown in the
     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
     * @default 'primary'
     */
    color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
      PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']),
      PropTypes.string,
    ]),
    /**
     * The default checked state. Use when the component is not controlled.
     */
    defaultChecked: PropTypes.bool,
    /**
     * If `true`, the component is disabled.
     */
    disabled: PropTypes.bool,
    /**
     * If `true`, the ripple effect is disabled.
     */
    disableRipple: PropTypes.bool,
    /**
     * The icon to display when the component is unchecked.
     * @default <CheckBoxOutlineBlankIcon />
     */
    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`.
     * @default false
     */
    indeterminate: PropTypes.bool,
    /**
     * The icon to display when the component is indeterminate.
     * @default <IndeterminateCheckBoxIcon />
     */
    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 {React.ChangeEvent<HTMLInputElement>} 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 is required.
     */
    required: PropTypes.bool,
    /**
     * The size of the component.
     * `small` is equivalent to the dense checkbox styling.
     * @default 'medium'
     */
    size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
      PropTypes.oneOf(['medium', 'small']),
      PropTypes.string,
    ]),
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
      PropTypes.func,
      PropTypes.object,
    ]),
    /**
     * The value of the component. The DOM API casts this to a string.
     * The browser uses "on" as the default value.
     */
    value: PropTypes.any,
  };
  
  export default Checkbox;
  