import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { checkboxClassnames } from './constants';
import { Icon } from './Icon';
import { IconWrapper, Input, Wrapper } from './styles';
import { useLogic } from './useLogic';
export const Checkbox = forwardRef((props, ref) => {
    const { onChange, color, isChecked, indeterminate, isError, disabled, restProps, className, role, style, name, inputRef, value, id, } = useLogic(props);
    return (_jsxs(Wrapper, { role: role, "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, "$isIndeterminate": indeterminate, className: className, style: style, ref: ref, ...restProps, children: [_jsx(Input, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : isChecked, "aria-disabled": disabled, name: name, ref: inputRef, value: value, id: id, className: checkboxClassnames.input }), _jsx(IconWrapper, { className: checkboxClassnames.iconWrapper, children: _jsx(Icon, { className: checkboxClassnames.icon, color: color }) })] }));
});
