"use strict";

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

var _react = _interopRequireDefault(require("react"));

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

var _randomstring = _interopRequireDefault(require("randomstring"));

var _primitives = require("../../../primitives");

var _typography = require("../../../mixins/typography");

var _branding = require("../../../mixins/branding");

var _checkbox = require("../../icon/checkbox");

var _focus = require("../../../mixins/focus");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var ClickableBox = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "ClickableBox",
  componentId: "ecm0f5-0"
})(["cursor:pointer;position:relative;", " &:focus-within{box-shadow:", ",", " ", ";}border-radius:", ";"], (0, _focus.getBaseFocusState)({
  hoverTransition: false,
  activeTransition: false
}), _focus.focusedBoxShadow, _focus.focusedBorderShadow, _focus.focusedBorderColor, _focus.focusedBorderRadius);
ClickableBox.displayName = 'ClickableBox';

var CheckboxContainer = _styledComponents["default"].div.withConfig({
  displayName: "CheckboxContainer",
  componentId: "ecm0f5-1"
})(["position:absolute;left:-10px;top:2px;"]);

var Label = _styledComponents["default"].label.attrs(function () {
  return {
    fontSize: 'f1'
  };
}).withConfig({
  displayName: "Label",
  componentId: "ecm0f5-2"
})(["color:", ";cursor:pointer;font-size:", ";font-family:", ";font-weight:", ";display:flex;align-items:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:34px;margin-top:14px;margin-bottom:14px;z-index:-1;"], (0, _branding.getPaletteColor)('greyscale-black'), _typography.getFontSize, _typography.getFontFamily, _typography.getFontWeight);

var Wrapper = _styledComponents["default"].div.withConfig({
  displayName: "Wrapper",
  componentId: "ecm0f5-3"
})(["transform:scale(1);"]);

var InvisibleInput = _styledComponents["default"].input.withConfig({
  displayName: "InvisibleInput",
  componentId: "ecm0f5-4"
})(["height:0;width:0;margin:0;padding:0;opacity:0;"]);

var CheckboxStandalone = function CheckboxStandalone(_ref) {
  var selected = _ref.selected,
      onClick = _ref.onClick,
      required = _ref.required,
      label = _ref.label,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled;

  var randomIdentifier = _randomstring["default"].generate({
    length: 7,
    charset: 'alphabetic'
  });

  return _react["default"].createElement(Wrapper, null, _react["default"].createElement(ClickableBox, {
    stacked: "row",
    align: "center",
    selected: selected,
    onClick: disabled ? undefined : onClick
  }, _react["default"].createElement(InvisibleInput, {
    id: randomIdentifier,
    type: "checkbox",
    checked: selected,
    required: required,
    readOnly: true,
    disabled: disabled
  }), _react["default"].createElement(Label, {
    htmlFor: randomIdentifier
  }, label), _react["default"].createElement(CheckboxContainer, null, _react["default"].createElement(_checkbox.Checkbox, {
    selected: selected
  }))));
};

exports.CheckboxStandalone = CheckboxStandalone;