import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
//  strict
import * as React from 'react';
import styled from 'styled-components';
import injectE2E from '../../Tools/injectE2E';
import { fontSize, theme } from '../../Tools/interpolation';

var toId = function toId(name) {
  return "".concat(name || '', "-checkbox");
};

var Wrapper =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1im73t0-0"
})(["\n  input:checked + label::before {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  input:focus + label::before {\n    box-shadow: 0 0 0 2px ", ";\n    outline: 1px solid transparent;\n  }\n\n  input:disabled + label::after,\n  input:checked + label::after {\n    opacity: 1;\n    transform: scale(1) rotate(-45deg);\n  }\n\n  input:disabled + label::before {\n    background-color: ", ";\n    border: none;\n  }\n\n  input:disabled + label::after {\n    border-left: 2px solid ", ";\n    border-bottom: 2px solid ", ";\n  }\n"], theme('inputCheckedColor'), theme('inputCheckedColor'), theme('inputActiveColor'), theme('inputCheckboxColorDisabled'), theme('inputCheckboxCheckColorDisabled'), theme('inputCheckboxCheckColorDisabled'));
var Input =
/*#__PURE__*/
styled.input.attrs(injectE2E).withConfig({
  componentId: "sc-1im73t0-1"
})(["\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  visibility: visible;\n  white-space: nowrap;\n  width: 1px;\n"]);
export var CheckboxLabel =
/*#__PURE__*/
styled.label.withConfig({
  componentId: "sc-1im73t0-2"
})(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 1rem;\n  padding-left: 1.5rem;\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", ";\n\n  &::before {\n    background-color: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    content: '';\n    height: 16px;\n    left: 1px;\n    position: absolute;\n    top: calc(50% - 0.5rem);\n    width: 16px;\n    border-radius: 2px;\n  }\n\n  &::after {\n    background: none;\n    border-left: 2px solid ", ";\n    border-bottom: 2px solid ", ";\n    box-sizing: border-box;\n    content: '';\n    height: 5px;\n    left: 5px;\n    margin-top: -3px;\n    position: absolute;\n    opacity: 0;\n    top: 50%;\n    transform: scale(0) rotate(-45deg);\n    width: 9px;\n  }\n"], theme('fontPrimary'), fontSize('md'), theme('inputBackgroundColor'), theme('inputBorderColor'), theme('inputBackgroundColor'), theme('inputBackgroundColor'));

var Checkbox = function Checkbox(_ref) {
  var className = _ref.className,
      ref = _ref.forwardRef,
      input = _ref.input,
      rest = _objectWithoutProperties(_ref, ["className", "forwardRef", "input"]);

  return React.createElement(Wrapper, {
    className: className
  }, React.createElement(Input, _extends({}, input, rest, {
    id: toId(rest.name),
    ref: ref,
    type: "checkbox"
  })), React.createElement(CheckboxLabel, {
    htmlFor: toId(rest.name)
  }, rest.label));
};

var CheckboxWithRef = function CheckboxWithRef(props, ref) {
  return React.createElement(Checkbox, _extends({}, props, {
    forwardRef: ref
  }));
};

export default React.forwardRef(CheckboxWithRef);