import React, { forwardRef, useCallback } from "react";
import { Checkmark } from "../icons/Checkmark.js";
import { CheckmarkWrapper, LabelWrapper, TextLabel } from "./Checkbox.styled.js";
const Checkbox = forwardRef(({ color, error, name, onChange, children, css, className, ...inputProps }, ref) => {
    const style = {};
    color && (style["--color"] = color);
    const wrapperProps = { className };
    if (css) {
        wrapperProps.css = css;
    }
    const handleChange = useCallback((e) => {
        if (inputProps.readOnly) {
            e.currentTarget.checked = !e.currentTarget.checked;
            return;
        }
        onChange === null || onChange === void 0 ? void 0 : onChange(e);
    }, [inputProps.readOnly, onChange]);
    return (React.createElement(LabelWrapper, { ...wrapperProps },
        React.createElement("input", { type: "checkbox", name: name, onChange: handleChange, "data-error": error, ref: ref, ...inputProps }),
        React.createElement(CheckmarkWrapper, { css: style },
            React.createElement(Checkmark, null)),
        React.createElement(TextLabel, null, children)));
});
Checkbox.displayName = "Checkbox";
Checkbox.toString = () => LabelWrapper.toString();
const CheckboxCheckmarkWrapperSelector = CheckmarkWrapper.toString();
const CheckboxTextLabelSelector = TextLabel.toString();
export { Checkbox, CheckboxCheckmarkWrapperSelector, CheckboxTextLabelSelector };
//# sourceMappingURL=Checkbox.js.map