text: // @inheritedComponent ButtonBase
  
  import * as React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { fade, withStyles } from '@material-ui/core/styles';
  import ButtonBase from '@material-ui/core/ButtonBase';
  import { capitalize } from '@material-ui/core/utils';
  
  export const styles = (theme) => ({
    /* Styles applied to the root element. */
    root: {
      ...theme.typography.button,
      borderRadius: theme.shape.borderRadius,
      padding: 11,
      border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
      color: fade(theme.palette.action.active, 0.38),
      '&$selected': {
        color: theme.palette.action.active,
        backgroundColor: fade(theme.palette.action.active, 0.12),
        '&:hover': {
          backgroundColor: fade(theme.palette.action.active, 0.15),
        },
        '& + &': {
          borderLeft: 0,
          marginLeft: 0,
        },
      },
      '&$disabled': {
        color: fade(theme.palette.action.disabled, 0.12),
      },
      '&:hover': {
        textDecoration: 'none',
        // Reset on mouse devices
        backgroundColor: fade(theme.palette.text.primary, 0.05),
        '@media (hover: none)': {
          backgroundColor: 'transparent',
        },
        '&$disabled': {
          backgroundColor: 'transparent',
        },
      },
    },
    /* Pseudo-class applied to the root element if `disabled={true}`. */
    disabled: {},
    /* Pseudo-class applied to the root element if `selected={true}`. */
    selected: {},
    /* Styles applied to the `label` wrapper element. */
    label: {
      width: '100%', // Ensure the correct width for iOS Safari
      display: 'inherit',
      alignItems: 'inherit',
      justifyContent: 'inherit',
    },
    /* Styles applied to the root element if `size="small"`. */
    sizeSmall: {
      padding: 7,
      fontSize: theme.typography.pxToRem(13),
    },
    /* Styles applied to the root element if `size="large"`. */
    sizeLarge: {
      padding: 15,
      fontSize: theme.typography.pxToRem(15),
    },
  });
  
  const ToggleButton = React.forwardRef(function ToggleButton(props, ref) {
    const {
      children,
      classes,
      className,
      disabled = false,
      disableFocusRipple = false,
      onChange,
      onClick,
      selected,
      size = 'medium',
      value,
      ...other
    } = props;
  
    const handleChange = (event) => {
      if (onClick) {
        onClick(event, value);
        if (event.isDefaultPrevented()) {
          return;
        }
      }
  
      if (onChange) {
        onChange(event, value);
      }
    };
  
    return (
      <ButtonBase
        className={clsx(
          classes.root,
          {
            [classes.disabled]: disabled,
            [classes.selected]: selected,
            [classes[`size${capitalize(size)}`]]: size !== 'medium',
          },
          className,
        )}
        disabled={disabled}
        focusRipple={!disableFocusRipple}
        ref={ref}
        onClick={handleChange}
        onChange={onChange}
        value={value}
        aria-pressed={selected}
        {...other}
      >
        <span className={classes.label}>{children}</span>
      </ButtonBase>
    );
  });
  
  ToggleButton.propTypes = {
    // ----------------------------- Warning --------------------------------
    // | These PropTypes are generated from the TypeScript type definitions |
    // |     To update them edit the d.ts file and run "yarn proptypes"     |
    // ----------------------------------------------------------------------
    /**
     * The content of the button.
     */
    children: PropTypes.node,
    /**
     * Override or extend the styles applied to the component.
     */
    classes: PropTypes.object,
    /**
     * @ignore
     */
    className: PropTypes.string,
    /**
     * If `true`, the button will be disabled.
     */
    disabled: PropTypes.bool,
    /**
     * If `true`, the  keyboard focus ripple will be disabled.
     */
    disableFocusRipple: PropTypes.bool,
    /**
     * If `true`, the ripple effect will be disabled.
     *
     * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
     * to highlight the element by applying separate styles with the `focusVisibleClassName`.
     */
    disableRipple: PropTypes.bool,
    /**
     * @ignore
     */
    onChange: PropTypes.func,
    /**
     * @ignore
     */
    onClick: PropTypes.func,
    /**
     * If `true`, the button will be rendered in an active state.
     */
    selected: PropTypes.bool,
    /**
     * The size of the button.
     * The prop defaults to the value injected by the parent ToggleButtonGroup component.
     */
    size: PropTypes.oneOf(['large', 'medium', 'small']),
    /**
     * The value to associate with the button when selected in a
     * ToggleButtonGroup.
     */
    value: PropTypes.any.isRequired,
  };
  
  export default withStyles(styles, { name: 'MuiToggleButton' })(ToggleButton);
  