import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default from 'react';
import _pt from 'prop-types';
import { useFormFieldSkeleton } from '../../form-skeletons/components/FormFieldSkeleton.esm.js';
import { CheckboxGroupFieldSkeleton, CheckboxGroupFieldSkeletonOption, CheckboxGroupFieldSkeletonOptionLabel, CheckboxGroupFieldSkeletonLabel, CheckboxGroupFieldSkeletonHint, CheckboxGroupFieldSkeletonError } from '../../form-skeletons/components/CheckboxGroupFieldSkeleton.esm.js';
import { styledCheckboxCss } from './CheckboxField.esm.js';
import { FormGroupFieldProvider, formGroupFieldCss, useStyledGroupFieldOptionLabel, INPUT_WIDTH, INPUT_VERTICAL_OFFSET_CALC, useStyledGroupFieldLabel, useStyledGroupFieldHint, useStyledGroupFieldError, FormGroupFieldOptions, FormGroupFieldOptionWrapper } from './FormGroupField.esm.js';

function CheckboxGroupField(_ref) {
  var optionsDirection = _ref.optionsDirection,
      rest = _objectWithoutProperties(_ref, ["optionsDirection"]);

  return jsx(FormGroupFieldProvider, {
    optionsDirection: optionsDirection
  }, jsx(CheckboxGroupFieldSkeleton, _extends({
    css: formGroupFieldCss
  }, rest)));
}
var CheckboxGroupFieldOption = React__default.forwardRef(function CheckboxGroupFieldOption(props, ref) {
  var _useFormFieldSkeleton = useFormFieldSkeleton(),
      hasError = _useFormFieldSkeleton.hasError;

  return jsx(CheckboxGroupFieldSkeletonOption, _extends({
    ref: ref,
    css: styledCheckboxCss(hasError)
  }, props));
});
var CheckboxGroupFieldOptionLabel = function CheckboxGroupFieldOptionLabel(_ref2) {
  var size = _ref2.size,
      rest = _objectWithoutProperties(_ref2, ["size"]);

  var _useFormFieldSkeleton2 = useFormFieldSkeleton(),
      hasError = _useFormFieldSkeleton2.hasError;

  var _useStyledGroupFieldO = useStyledGroupFieldOptionLabel({
    size: size
  }),
      _css = _useStyledGroupFieldO.css,
      styledProps = _objectWithoutProperties(_useStyledGroupFieldO, ["css"]);

  return jsx(CheckboxGroupFieldSkeletonOptionLabel, _extends({
    css: function css(theme) {
      return [_css(theme), {
        "&:before": {
          backgroundColor: theme.colors.white,
          border: hasError ? "1px solid ".concat(theme.colors.red[60]) : "2px solid ".concat(theme.colors.grey[30]),
          borderRadius: "3px",
          content: "\"\"",
          display: "block",
          height: INPUT_WIDTH,
          marginRight: theme.space[3],
          position: "absolute",
          top: 0,
          left: 0,
          transition: "border-color 0.15s ease-in-out, background 0.15s ease-in-out",
          transform: "translate(0, calc(".concat(INPUT_VERTICAL_OFFSET_CALC, "))"),
          width: INPUT_WIDTH
        }
      }];
    }
  }, rest, styledProps));
};
function CheckboxGroupFieldLabel(_ref3) {
  var children = _ref3.children,
      size = _ref3.size,
      isRequired = _ref3.isRequired,
      props = _objectWithoutProperties(_ref3, ["children", "size", "isRequired"]);

  var styledProps = useStyledGroupFieldLabel(children, {
    size: size,
    isRequired: isRequired
  });
  return jsx(CheckboxGroupFieldSkeletonLabel, _extends({}, props, styledProps));
}
function CheckboxGroupFieldHint(props) {
  var styledProps = useStyledGroupFieldHint();
  return jsx(CheckboxGroupFieldSkeletonHint, _extends({}, props, styledProps));
}
function CheckboxGroupFieldError(props) {
  var styledProps = useStyledGroupFieldError(props.children);
  return jsx(CheckboxGroupFieldSkeletonError, _extends({}, props, styledProps));
}
function CheckboxGroupFieldOptions(props) {
  return jsx(FormGroupFieldOptions, props);
}
function CheckboxGroupFieldOptionWrapper(props) {
  return jsx(FormGroupFieldOptionWrapper, props);
}
function CheckboxGroupFieldOptionItem(_ref4) {
  var label = _ref4.label,
      value = _ref4.value,
      rest = _objectWithoutProperties(_ref4, ["label", "value"]);

  return jsx(CheckboxGroupFieldOptionWrapper, null, jsx(CheckboxGroupFieldOption, _extends({
    value: value
  }, rest)), jsx(CheckboxGroupFieldOptionLabel, {
    optionValue: value
  }, label));
}
CheckboxGroupFieldOptionItem.propTypes = {
  label: _pt.node.isRequired
};
CheckboxGroupField.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupField"
};

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

CheckboxGroupFieldOption.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldOption"
};

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

CheckboxGroupFieldOptionLabel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldOptionLabel"
};

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

CheckboxGroupFieldLabel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldLabel"
};

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

CheckboxGroupFieldHint.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldHint"
};

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

CheckboxGroupFieldError.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldError"
};

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

CheckboxGroupFieldOptions.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldOptions"
};

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

CheckboxGroupFieldOptionWrapper.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldOptionWrapper"
};

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

CheckboxGroupFieldOptionItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxGroupFieldOptionItem",
  "props": {
    "label": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
};

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

export { CheckboxGroupField, CheckboxGroupFieldError, CheckboxGroupFieldHint, CheckboxGroupFieldLabel, CheckboxGroupFieldOption, CheckboxGroupFieldOptionItem, CheckboxGroupFieldOptionLabel, CheckboxGroupFieldOptionWrapper, CheckboxGroupFieldOptions };
//# sourceMappingURL=CheckboxGroupField.esm.js.map
