import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { forwardRef } from 'react';
import '../../form-skeletons/utils/index.esm.js';
import { useAriaFormField } from '../../form-skeletons/hooks/useAriaFormField.esm.js';
import '../../form-skeletons/hooks/useAriaFormGroupField.esm.js';
import { FormHint, FormError } from './styled-primitives/StyledFormElements.esm.js';
import { StyledCheckbox, StyledCheckboxLabel } from './styled-primitives/StyledCheckbox.esm.js';

var baseCss = function baseCss(_theme) {
  return {
    display: "flex",
    alignItems: "baseline"
  };
};

var checkboxContainerCss = function checkboxContainerCss(theme) {
  return {
    marginRight: theme.space[4]
  };
};

var CheckboxFieldBlock = forwardRef(function CheckboxFieldBlock(props, ref) {
  var id = props.id,
      label = props.label,
      labelSize = props.labelSize,
      error = props.error,
      hint = props.hint,
      className = props.className,
      validationMode = props.validationMode,
      required = props.required,
      rest = _objectWithoutProperties(props, ["id", "label", "labelSize", "error", "hint", "className", "validationMode", "required"]);

  var fieldData = useAriaFormField(id, {
    required: required,
    hasError: !!error,
    hasHint: !!hint,
    validationMode: validationMode
  });
  return jsx("div", {
    css: baseCss,
    className: className
  }, jsx("div", {
    css: checkboxContainerCss
  }, jsx(StyledCheckbox, _extends({
    ref: ref
  }, fieldData.controlProps, rest))), jsx("div", null, jsx(StyledCheckboxLabel, _extends({
    required: fieldData.controlProps.required,
    labelSize: labelSize
  }, fieldData.labelProps), label), jsx(FormHint, fieldData.hintProps, hint), jsx(FormError, fieldData.errorProps, error)));
});
CheckboxFieldBlock.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxFieldBlock"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/CheckboxFieldBlock.tsx"] = {
    name: "CheckboxFieldBlock",
    docgenInfo: CheckboxFieldBlock.__docgenInfo,
    path: "src/components/form/components/CheckboxFieldBlock.tsx"
  };
}

export { CheckboxFieldBlock };
//# sourceMappingURL=CheckboxFieldBlock.esm.js.map
