import { clsx } from 'clsx';
import Body from '../body/Body.mjs';
import CheckboxButton from '../checkboxButton/CheckboxButton.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import '@transferwise/icons';
import 'react';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

function Checkbox({
  id,
  checked,
  required,
  disabled,
  readOnly,
  label,
  className,
  secondary,
  onChange,
  onFocus,
  onBlur
}) {
  const classList = clsx('np-checkbox', {
    checkbox: true,
    'checkbox-lg': secondary,
    'checkbox-disabled': disabled
  }, className);
  const innerDisabled = disabled || readOnly;
  return /*#__PURE__*/jsx("div", {
    id: id,
    className: classList,
    children: /*#__PURE__*/jsxs("label", {
      className: clsx('np-checkbox-label', {
        disabled
      }),
      children: [/*#__PURE__*/jsx(CheckboxButton, {
        className: "p-r-2",
        checked: checked,
        disabled: innerDisabled,
        required: !innerDisabled && required,
        onFocus: onFocus,
        onChange: () => onChange(!checked),
        onBlur: onBlur
      }), /*#__PURE__*/jsxs(Body, {
        as: "span",
        className: "np-checkbox__text",
        type: secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE,
        children: [/*#__PURE__*/jsx("span", {
          className: required ? 'has-required' : undefined,
          children: label
        }), secondary && /*#__PURE__*/jsx(Body, {
          as: "span",
          children: secondary
        })]
      })]
    })
  });
}

export { Checkbox as default };
//# sourceMappingURL=Checkbox.mjs.map
