import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';

import Icon from '../icon/Icon';

const Checkbox = ({ id, className, checked, indeterminate, ...rest }) => {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current.indeterminate = indeterminate;
    }, [indeterminate]);

    return (
        <label htmlFor={id} className={className}>
            <input ref={inputRef} id={id} type="checkbox" className="pm-checkbox" checked={checked} {...rest} />
            <span className="pm-checkbox-fakecheck">
                <Icon className="pm-checkbox-fakecheck-img" name="on" />
            </span>
        </label>
    );
};

Checkbox.propTypes = {
    id: PropTypes.string,
    className: PropTypes.string,
    checked: PropTypes.bool.isRequired,
    indeterminate: PropTypes.bool
};

Checkbox.defaultProps = {
    indeterminate: false
};

export default Checkbox;

@@ -112,16 +112,70 @@
 n/Icon';
+%0Aimport %7B classnames %7D from '../../helpers/component';
 %0A%0Aconst 
@@ -226,16 +226,40 @@
 rminate,
+ color, backgroundColor,
  ...rest
@@ -635,16 +635,63 @@
 kecheck%22
+ style=%7B%7B background: backgroundColor, color %7D%7D
 %3E%0A      
@@ -708,33 +708,46 @@
 %3CIcon className=
-%22
+%7Bclassnames(%5B'
 pm-checkbox-fake
@@ -755,17 +755,50 @@
 heck-img
-%22
+', color && 'fill-currentColor'%5D)%7D
  name=%22o
@@ -870,24 +870,92 @@
 opTypes = %7B%0A
+    backgroundColor: PropTypes.string,%0A    color: PropTypes.string,%0A
     id: Prop

Handle colors