import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useOneUIConfig } from "../../context/OneUIProvider";
import Styles from "./CheckBox.module.scss";
/**
 * A simple checkbox with nissan guidelines
 *
 * This component displays a checkbox that users can click to toggle between checked and unchecked states.
 * It shows a label next to the checkbox and supports custom sizing and grouping.
 **/
export default function CheckBox({ checked, onToggle, label, className = "", size = undefined, groupId, value, ...props }) {
    const Checkbox = useOneUIConfig("component.checkbox.Component", "span");
    return (_jsxs("label", { className: `${Styles.container} ${className}`, style: { fontSize: size }, onClick: (e) => {
            onToggle(!checked);
            e.preventDefault();
        }, children: [_jsx(Checkbox, { ...props, className: `${checked ? Styles.checked : ""} ${label ? Styles.wContent : ""}` }), _jsx("input", { type: "checkbox", name: groupId, id: value, checked: checked, readOnly: true }), label] }));
}
//# sourceMappingURL=CheckBox.js.map