"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.RadioLabel = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _injectE2E = _interopRequireDefault(require("../../Tools/injectE2E"));

var _interpolation = require("../../Tools/interpolation");

//  strict
var toId = function toId(name) {
  return "".concat(name != null ? name : '' || '', "-checkbox");
};

var Wrapper =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "sc-1rjvnx3-0"
})(["\n  display: flex;\n"]);

var RadioButton =
/*#__PURE__*/
_styledComponents.default.span.withConfig({
  componentId: "sc-1rjvnx3-1"
})(["\n  margin-right: 0.5rem;\n  background: ", ";\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: 16px;\n  width: 16px;\n"], (0, _interpolation.theme)('inputBackgroundColor'), (0, _interpolation.theme)('inputBorderColor'));

var Input =
/*#__PURE__*/
_styledComponents.default.input.attrs(_injectE2E.default).withConfig({
  componentId: "sc-1rjvnx3-2"
})(["\n  position: absolute;\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  visibility: visible;\n  white-space: nowrap;\n  width: 1px;\n  user-select: none;\n\n  &:focus ~ label ", " {\n    box-shadow: 0 0 0 2px ", ";\n    outline: 1px solid transparent;\n  }\n\n  &:checked ~ label ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-color: ", ";\n\n    &::before {\n      border-radius: 51%;\n      content: '';\n      display: inline-block;\n      height: 8px;\n      width: 8px;\n      position: relative;\n      background: ", ";\n    }\n  }\n"], RadioButton, (0, _interpolation.theme)('inputActiveColor'), RadioButton, (0, _interpolation.theme)('inputCheckedColor'), (0, _interpolation.theme)('inputCheckedColor'));

var RadioLabel =
/*#__PURE__*/
_styledComponents.default.label.withConfig({
  componentId: "sc-1rjvnx3-3"
})(["\n  position: relative;\n  left: 1px;\n  display: flex;\n  align-items: center;\n  min-height: 1rem;\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", ";\n"], (0, _interpolation.theme)('fontPrimary'), (0, _interpolation.fontSize)('md'));

exports.RadioLabel = RadioLabel;

var Radio = function Radio(_ref) {
  var className = _ref.className,
      ref = _ref.forwardRef,
      input = _ref.input,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["className", "forwardRef", "input"]);
  return React.createElement(Wrapper, {
    className: className
  }, React.createElement(Input, (0, _extends2.default)({}, input, rest, {
    id: toId(rest.value),
    ref: ref,
    type: "radio"
  })), React.createElement(RadioLabel, {
    htmlFor: toId(rest.value)
  }, React.createElement(RadioButton, null), rest.label));
};

var RadioWithRef = function RadioWithRef(props, ref) {
  return React.createElement(Radio, (0, _extends2.default)({}, props, {
    forwardRef: ref
  }));
};

var _default = React.forwardRef(RadioWithRef);

exports.default = _default;