import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default from 'react';
import { StyledLabel } from './StyledFormElements.esm.js';
import { baseFormControlStyles } from '../../styles/index.esm.js';

var StyledCheckbox = React__default.forwardRef(function StyledCheckbox(props, ref) {
  return jsx(React__default.Fragment, null, jsx("input", _extends({
    ref: ref,
    css: styledCheckboxCss
  }, props, {
    type: "checkbox"
  })), jsx("span", {
    "aria-hidden": "true",
    css: styledCheckboxBoxCss
  }, jsx(Checkmark, null)));
});
function StyledCheckboxLabel(props) {
  return jsx(StyledLabel, _extends({
    labelSize: "L",
    css: {
      marginBottom: 0
    }
  }, props));
}
var CHECKBOX_BOX_SIZE = "20px";

var styledCheckboxCss = function styledCheckboxCss(theme) {
  return [{
    opacity: 0,
    cursor: "pointer",
    width: CHECKBOX_BOX_SIZE,
    height: CHECKBOX_BOX_SIZE,
    flexShrink: 0,
    margin: 0,
    padding: 0,
    "&:focus + span::before": baseFormControlStyles.focusedStyles(theme),
    "&:checked + span": {
      color: theme.colors.white
    },
    "&:checked + span::before": {
      backgroundColor: theme.colors.purple[60],
      borderColor: theme.colors.purple[60]
    },
    "&:checked:disabled + span": {
      color: theme.colors.grey[40]
    },
    "&:disabled": {
      cursor: "not-allowed"
    },
    "&:disabled + span": {
      cursor: "not-allowed"
    },
    "&:disabled + span::before": [baseFormControlStyles.disabledStyles(theme), {
      borderColor: theme.colors.grey[30]
    }],
    "&[aria-invalid='true']": baseFormControlStyles.errorStyles(theme),
    "&[aria-invalid='true']:focus + span::before": baseFormControlStyles.focusedErrorStyles(theme)
  }];
};

var styledCheckboxBoxCss = function styledCheckboxBoxCss(theme) {
  return {
    cursor: "pointer",
    position: "relative",
    left: "-".concat(CHECKBOX_BOX_SIZE),
    pointerEvents: "none",
    color: "transparent",
    ":before": {
      cursor: "pointer",
      backgroundColor: theme.colors.white,
      border: "2px solid ".concat(theme.colors.grey[30]),
      borderRadius: "3px",
      content: "\"\"",
      display: "block",
      boxSizing: "border-box",
      height: CHECKBOX_BOX_SIZE,
      marginRight: theme.space[3],
      position: "absolute",
      top: 0,
      left: 0,
      transition: "0.1s ease-in-out",
      width: CHECKBOX_BOX_SIZE
    }
  };
};

function Checkmark() {
  return jsx("svg", {
    "aria-hidden": true,
    css: {
      pointerEvents: "none",
      position: "absolute",
      top: 0,
      left: 0,
      zIndex: 1
    },
    width: "20",
    height: "20",
    viewBox: "0 0 20 20",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, jsx("path", {
    d: "M7.32505 15.1584L4.19049 10.8791C3.87533 10.423 3.95905 9.80199 4.38373 9.44564L4.38374 9.44564C4.80842 9.08929 5.43452 9.11468 5.82896 9.50424L9.49899 13.3343C10.0964 13.9243 10.0568 14.9003 9.41361 15.44L9.4136 15.44C8.7704 15.9797 7.80237 15.8492 7.32505 15.1584Z",
    fill: "currentColor"
  }), jsx("path", {
    d: "M7.58182 15.4296C6.92843 14.8813 6.86426 13.8988 7.44078 13.2703L14.7221 5.33129C15.0919 4.92814 15.7135 4.88754 16.1326 5.23917L16.1326 5.23917C16.5517 5.59081 16.6196 6.21003 16.2868 6.64418L9.73285 15.1935C9.21392 15.8704 8.23522 15.9779 7.58182 15.4296L7.58182 15.4296Z",
    fill: "currentColor"
  }), jsx("path", {
    d: "M7.747 11.5322C8.1138 11.9724 8.38279 12.2658 8.8474 11.7523C9.31202 11.2388 8.70068 13.0483 8.70068 13.0483L7.18457 12.5593L7.747 11.5322Z",
    fill: "currentColor"
  }));
}

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

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

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

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

export { StyledCheckbox, StyledCheckboxLabel };
//# sourceMappingURL=StyledCheckbox.esm.js.map
