var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import styled, { css } from 'react-emotion';
import { Icon } from '@bitbloq/ui';
var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 3px;\n  width: 14px;\n  height: 14px;\n  background-color: white;\n  border-style: solid;\n  border-width: 1px;\n  border-color: #c0c3c9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  ", " &:hover {\n    border-color: #5d6069;\n  }\n"], ["\n  border-radius: 3px;\n  width: 14px;\n  height: 14px;\n  background-color: white;\n  border-style: solid;\n  border-width: 1px;\n  border-color: #c0c3c9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  ",
    " &:hover {\n    border-color: #5d6069;\n  }\n"])), function (props) {
    return props.checked && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-color: #5d6069;\n      background-color: #5d6069;\n      color: white;\n    "], ["\n      border-color: #5d6069;\n      background-color: #5d6069;\n      color: white;\n    "])));
});
var Checkbox = /** @class */ (function (_super) {
    __extends(Checkbox, _super);
    function Checkbox() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Checkbox.prototype.render = function () {
        var _a = this.props, className = _a.className, checked = _a.checked, onChange = _a.onChange;
        return (React.createElement(Container, { className: className, checked: checked, onClick: function () { return onChange(!checked); } }, checked && React.createElement(Icon, { name: "tick" })));
    };
    return Checkbox;
}(React.Component));
export default Checkbox;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Checkbox.js.map