'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-f9c7d71b.js');
var utilities = require('./utilities-d51a0c2d.js');
var InputWrapper = require('./InputWrapper.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Checkbox = function (_a) {
    var userProvidedId = _a.id, _b = _a.description, description = _b === void 0 ? '' : _b, _c = _a.wrapperProps, wrapperProps = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.valid, valid = _e === void 0 ? null : _e, _f = _a.errorMessage, errorMessage = _f === void 0 ? '' : _f, _g = _a.customCss, customCss = _g === void 0 ? '' : _g, objectLabel = _a.objectLabel, onChange = _a.onChange, props = _tslib.__rest(_a, ["id", "description", "wrapperProps", "className", "valid", "errorMessage", "customCss", "objectLabel", "onChange"]);
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(userProvidedId);
    var descriptionId = "desc-" + id;
    var errorId = "err-" + id;
    var isValidLabel = function (label, ariaLabel) {
        if (label && !ariaLabel) {
            if (typeof label === 'string' && label.length > 0) {
                return true;
            }
        }
        else if (ariaLabel) {
            if (ariaLabel.length > 0) {
                return true;
            }
        }
        return false;
    };
    var label = !isValidLabel(props.label, props.ariaLabel)
        ? 'The label or ariaLabel prop is required and must be a string of a least length 1.'
        : props.label;
    var _h = React__default['default'].useState(props.checked), checked = _h[0], setChecked = _h[1];
    var prevChecked = utilities.usePrevious(props.checked);
    var handleChange = function (e) {
        setChecked(!checked);
        if (onChange) {
            onChange(e.target.checked, e);
        }
    };
    React__default['default'].useEffect(function () {
        if (props.checked !== prevChecked && props.checked !== checked) {
            setChecked(props.checked);
        }
    }, [checked, props.checked, prevChecked]);
    return (jsxRuntime.jsxs(InputWrapper.InputWrapper, _tslib.__assign({ customCss: resolvedCss, className: className, label: label, description: description, errorMessage: errorMessage, id: id, descriptionId: descriptionId, errorId: errorId, childLabel: true }, wrapperProps, { children: [jsxRuntime.jsx(Input, _tslib.__assign({ type: "checkbox", "aria-describedby": description ? descriptionId + " " + errorId : "" + errorId, "aria-invalid": valid === false, "data-valid": valid, id: id, "data-checked": checked, onChange: handleChange, "aria-label": props.ariaLabel }, props), void 0),
            jsxRuntime.jsx(Label, _tslib.__assign({ htmlFor: id }, { children: jsxRuntime.jsx("span", { children: objectLabel || label }, void 0) }), void 0)] }), void 0));
};
var Label = css.styled('label')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  margin-bottom: 2px;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  margin-top: -2px;\n  display: flex;\n  span {\n    padding-top: 6px;\n    overflow-wrap: anywhere;\n  }\n  &:before {\n    position: relative;\n    top: 4px;\n    margin-right: 5px;\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    cursor: pointer;\n    height: 20px;\n    min-width: 20px;\n    max-width: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 5px;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n    margin: auto 5px auto 0;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: calc(50% - 1px);\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: ", ";\n    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n    transform: scale(0);\n  }\n"], ["\n  margin-bottom: 2px;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  margin-top: -2px;\n  display: flex;\n  span {\n    padding-top: 6px;\n    overflow-wrap: anywhere;\n  }\n  &:before {\n    position: relative;\n    top: 4px;\n    margin-right: 5px;\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    cursor: pointer;\n    height: 20px;\n    min-width: 20px;\n    max-width: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 5px;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n    margin: auto 5px auto 0;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: calc(50% - 1px);\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: ", ";\n    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n    transform: scale(0);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var Input = css.styled('input')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  top: -3px;\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &[data-checked='true'] ~ label {\n    border-color: ", ";\n  }\n  &[data-valid='true'] ~ label:before {\n    border-color: ", ";\n  }\n  &[data-valid='false'] ~ label:before {\n    border-color: ", ";\n  }\n  &:focus ~ label:before,\n  &:active ~ label:before {\n    border-color: ", ";\n    outline: none;\n  }\n  &[data-checked='true'] ~ label:after {\n    transform: scale(1);\n  }\n  &:disabled ~ label:before {\n    background-color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  &:disabled ~ label {\n    cursor: not-allowed;\n  }\n"], ["\n  position: relative;\n  top: -3px;\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &[data-checked='true'] ~ label {\n    border-color: ", ";\n  }\n  &[data-valid='true'] ~ label:before {\n    border-color: ", ";\n  }\n  &[data-valid='false'] ~ label:before {\n    border-color: ", ";\n  }\n  &:focus ~ label:before,\n  &:active ~ label:before {\n    border-color: ", ";\n    outline: none;\n  }\n  &[data-checked='true'] ~ label:after {\n    transform: scale(1);\n  }\n  &:disabled ~ label:before {\n    background-color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  &:disabled ~ label {\n    cursor: not-allowed;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.secondary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
});
var templateObject_1, templateObject_2;

exports.Checkbox = Checkbox;
//# sourceMappingURL=Checkbox.js.map
