@atlaskit/checkbox - npm Package Compare versions

Comparing version 5.0.3 to 5.0.4

CHANGELOG.md

 # @atlaskit/checkbox
 
+## 5.0.4
+- [patch] Adds missing implicit @babel/runtime dependency [b71751b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b71751b)
+
 ## 5.0.3
@@ -4,0 +7,0 @@ - [patch] Fixed bug where checkbox would use state isChecked value when passing false to isChecked as props [eaf8d16](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/eaf8d16)

dist/cjs/Checkbox.js

@@ -1,73 +0,62 @@
-'use strict';
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CheckboxWithoutAnalytics = undefined;
+exports.default = exports.CheckboxWithoutAnalytics = void 0;
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _react = _interopRequireWildcard(require("react"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _styledComponents = require("styled-components");
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _CheckboxIcon = _interopRequireDefault(require("./CheckboxIcon"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _package = require("../package.json");
 
-var _react = require('react');
+var _Checkbox = require("./styled/Checkbox");
 
-var _react2 = _interopRequireDefault(_react);
-
-var _analyticsNext = require('@atlaskit/analytics-next');
-
-var _styledComponents = require('styled-components');
-
-var _CheckboxIcon = require('./CheckboxIcon');
-
-var _CheckboxIcon2 = _interopRequireDefault(_CheckboxIcon);
-
-var _package = require('../package.json');
-
-var _Checkbox = require('./styled/Checkbox');
-
-require('./types');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var emptyTheme = {};
 
-var Checkbox = function (_Component) {
-  (0, _inherits3.default)(Checkbox, _Component);
+var Checkbox =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2.default)(Checkbox, _Component);
 
   function Checkbox() {
-    var _ref;
+    var _getPrototypeOf2;
 
-    var _temp, _this, _ret;
+    var _this;
 
-    (0, _classCallCheck3.default)(this, Checkbox);
+    (0, _classCallCheck2.default)(this, Checkbox);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Checkbox.__proto__ || (0, _getPrototypeOf2.default)(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Checkbox)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
       isActive: false,
@@ -78,19 +67,31 @@ isFocused: false,
       isChecked: _this.props.isChecked !== undefined ? _this.props.isChecked : _this.props.defaultChecked
-    }, _this.actionKeys = [' '], _this.getProp = function (key) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "checkbox", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "actionKeys", [' ']);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "getProp", function (key) {
       return key in _this.props ? _this.props[key] : _this.state[key];
-    }, _this.onChange = function (event) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onChange", function (event) {
       if (_this.props.isDisabled) return null;
       event.persist();
+
       if (event.target.checked !== undefined) {
-        _this.setState({ isChecked: event.target.checked });
+        _this.setState({
+          isChecked: event.target.checked
+        });
       }
+
       if (_this.props.onChange) {
         _this.props.onChange(event);
       }
+
       return true;
-    }, _this.blur = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "blur", function () {
       if (_this.checkbox && _this.checkbox.blur) _this.checkbox.blur();
-    }, _this.focus = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "focus", function () {
       if (_this.checkbox && _this.checkbox.focus) _this.checkbox.focus();
-    }, _this.onBlur = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onBlur", function () {
       return _this.setState({
@@ -103,28 +104,52 @@ // onBlur is called after onMouseDown if the checkbox was focused, however
       });
-    }, _this.onFocus = function () {
-      return _this.setState({ isFocused: true });
-    }, _this.onMouseLeave = function () {
-      return _this.setState({ isActive: false, isHovered: false });
-    }, _this.onMouseEnter = function () {
-      return _this.setState({ isHovered: true });
-    }, _this.onMouseUp = function () {
-      return _this.setState({ isActive: false, isMouseDown: false });
-    }, _this.onMouseDown = function () {
-      return _this.setState({ isActive: true, isMouseDown: true });
-    }, _this.onKeyDown = function (event) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onFocus", function () {
+      return _this.setState({
+        isFocused: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onMouseLeave", function () {
+      return _this.setState({
+        isActive: false,
+        isHovered: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onMouseEnter", function () {
+      return _this.setState({
+        isHovered: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onMouseUp", function () {
+      return _this.setState({
+        isActive: false,
+        isMouseDown: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onMouseDown", function () {
+      return _this.setState({
+        isActive: true,
+        isMouseDown: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onKeyDown", function (event) {
       if (_this.actionKeys.includes(event.key)) {
-        _this.setState({ isActive: true });
+        _this.setState({
+          isActive: true
+        });
       }
-    }, _this.onKeyUp = function (event) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onKeyUp", function (event) {
       if (_this.actionKeys.includes(event.key)) {
-        _this.setState({ isActive: false });
+        _this.setState({
+          isActive: false
+        });
       }
-    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    });
+    return _this;
   }
 
-  (0, _createClass3.default)(Checkbox, [{
-    key: 'componentDidMount',
+  (0, _createClass2.default)(Checkbox, [{
+    key: "componentDidMount",
     value: function componentDidMount() {
-      var isIndeterminate = this.props.isIndeterminate;
-      // there is no HTML attribute for indeterminate, and thus no prop equivalent.
+      var isIndeterminate = this.props.isIndeterminate; // there is no HTML attribute for indeterminate, and thus no prop equivalent.
       // it must be set via the ref.
@@ -134,2 +159,3 @@
         this.checkbox.indeterminate = !!isIndeterminate;
+
         if (this.props.inputRef) {
@@ -141,7 +167,6 @@ this.props.inputRef(this.checkbox);
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var isIndeterminate = this.props.isIndeterminate;
 
-
       if (prevProps.isIndeterminate !== isIndeterminate && this.checkbox) {
@@ -151,77 +176,56 @@ this.checkbox.indeterminate = !!isIndeterminate;
     }
-
-    // expose blur/focus to consumers via ref
-
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          isDisabled = _props.isDisabled,
-          isInvalid = _props.isInvalid,
-          isIndeterminate = _props.isIndeterminate,
-          label = _props.label,
-          name = _props.name,
-          value = _props.value,
-          onChange = _props.onChange,
-          props = (0, _objectWithoutProperties3.default)(_props, ['isDisabled', 'isInvalid', 'isIndeterminate', 'label', 'name', 'value', 'onChange']);
-
+      var _this$props = this.props,
+          isDisabled = _this$props.isDisabled,
+          isInvalid = _this$props.isInvalid,
+          isIndeterminate = _this$props.isIndeterminate,
+          label = _this$props.label,
+          name = _this$props.name,
+          value = _this$props.value,
+          onChange = _this$props.onChange,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["isDisabled", "isInvalid", "isIndeterminate", "label", "name", "value", "onChange"]);
       var isChecked = this.getProp('isChecked');
-      var _state = this.state,
-          isFocused = _state.isFocused,
-          isActive = _state.isActive,
-          isHovered = _state.isHovered;
+      var _this$state = this.state,
+          isFocused = _this$state.isFocused,
+          isActive = _this$state.isActive,
+          isHovered = _this$state.isHovered;
+      return _react.default.createElement(_styledComponents.ThemeProvider, {
+        theme: emptyTheme
+      }, _react.default.createElement(_Checkbox.Label, (0, _extends2.default)({}, props, {
+        isDisabled: isDisabled,
+        onMouseDown: this.onMouseDown,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+        onMouseUp: this.onMouseUp
+      }), _react.default.createElement(_Checkbox.CheckboxWrapper, null, _react.default.createElement(_Checkbox.HiddenCheckbox, {
+        disabled: isDisabled,
+        checked: isChecked,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        onFocus: this.onFocus,
+        onKeyUp: this.onKeyUp,
+        onKeyDown: this.onKeyDown,
+        type: "checkbox",
+        value: value,
+        name: name,
+        innerRef: function innerRef(r) {
+          return _this2.checkbox = r;
+        } // eslint-disable-line
 
-
-      return _react2.default.createElement(
-        _styledComponents.ThemeProvider,
-        { theme: emptyTheme },
-        _react2.default.createElement(
-          _Checkbox.Label,
-          (0, _extends3.default)({}, props, {
-            isDisabled: isDisabled,
-            onMouseDown: this.onMouseDown,
-            onMouseEnter: this.onMouseEnter,
-            onMouseLeave: this.onMouseLeave,
-            onMouseUp: this.onMouseUp
-          }),
-          _react2.default.createElement(
-            _Checkbox.CheckboxWrapper,
-            null,
-            _react2.default.createElement(_Checkbox.HiddenCheckbox, {
-              disabled: isDisabled,
-              checked: isChecked,
-              onChange: this.onChange,
-              onBlur: this.onBlur,
-              onFocus: this.onFocus,
-              onKeyUp: this.onKeyUp,
-              onKeyDown: this.onKeyDown,
-              type: 'checkbox',
-              value: value,
-              name: name,
-              innerRef: function innerRef(r) {
-                return _this2.checkbox = r;
-              } // eslint-disable-line
-            }),
-            _react2.default.createElement(_CheckboxIcon2.default, {
-              isChecked: isChecked,
-              isDisabled: isDisabled,
-              isFocused: isFocused,
-              isActive: isActive,
-              isHovered: isHovered,
-              isInvalid: isInvalid,
-              isIndeterminate: isIndeterminate,
-              primaryColor: 'inherit',
-              secondaryColor: 'inherit',
-              label: ''
-            })
-          ),
-          _react2.default.createElement(
-            _Checkbox.LabelText,
-            null,
-            label
-          )
-        )
-      );
+      }), _react.default.createElement(_CheckboxIcon.default, {
+        isChecked: isChecked,
+        isDisabled: isDisabled,
+        isFocused: isFocused,
+        isActive: isActive,
+        isHovered: isHovered,
+        isInvalid: isInvalid,
+        isIndeterminate: isIndeterminate,
+        primaryColor: "inherit",
+        secondaryColor: "inherit",
+        label: ""
+      })), _react.default.createElement(_Checkbox.LabelText, null, label)));
     }
@@ -232,3 +236,4 @@ }]);
 
-Checkbox.defaultProps = {
+exports.CheckboxWithoutAnalytics = Checkbox;
+(0, _defineProperty2.default)(Checkbox, "defaultProps", {
   isDisabled: false,
@@ -238,8 +243,6 @@ isInvalid: false,
   isIndeterminate: false
-};
-exports.CheckboxWithoutAnalytics = Checkbox;
-
+});
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
-exports.default = (0, _analyticsNext.withAnalyticsContext)({
+var _default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'checkbox',
@@ -252,3 +255,2 @@ packageName: _package.name,
     actionSubject: 'checkbox',
-
     attributes: {
@@ -260,2 +262,4 @@ componentName: 'checkbox',
   })
-})(Checkbox));
+})(Checkbox));
+
+exports.default = _default;

dist/cjs/CheckboxIcon.js

@@ -1,91 +0,75 @@
-'use strict';
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _react = _interopRequireWildcard(require("react"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _checkboxIndeterminate = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox-indeterminate"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _Checkbox = require("./styled/Checkbox");
 
-var _react = require('react');
+var CheckboxIcon =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2.default)(CheckboxIcon, _Component);
 
-var _react2 = _interopRequireDefault(_react);
-
-var _checkbox = require('@atlaskit/icon/glyph/checkbox');
-
-var _checkbox2 = _interopRequireDefault(_checkbox);
-
-var _checkboxIndeterminate = require('@atlaskit/icon/glyph/checkbox-indeterminate');
-
-var _checkboxIndeterminate2 = _interopRequireDefault(_checkboxIndeterminate);
-
-var _Checkbox = require('./styled/Checkbox');
-
-require('./types');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var CheckboxIcon = function (_Component) {
-  (0, _inherits3.default)(CheckboxIcon, _Component);
-
   function CheckboxIcon() {
-    (0, _classCallCheck3.default)(this, CheckboxIcon);
-    return (0, _possibleConstructorReturn3.default)(this, (CheckboxIcon.__proto__ || (0, _getPrototypeOf2.default)(CheckboxIcon)).apply(this, arguments));
+    (0, _classCallCheck2.default)(this, CheckboxIcon);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CheckboxIcon).apply(this, arguments));
   }
 
-  (0, _createClass3.default)(CheckboxIcon, [{
-    key: 'render',
+  (0, _createClass2.default)(CheckboxIcon, [{
+    key: "render",
     value: function render() {
-      var _props = this.props,
-          isChecked = _props.isChecked,
-          isDisabled = _props.isDisabled,
-          isInvalid = _props.isInvalid,
-          isActive = _props.isActive,
-          isFocused = _props.isFocused,
-          isHovered = _props.isHovered,
-          isIndeterminate = _props.isIndeterminate,
-          primaryColor = _props.primaryColor,
-          secondaryColor = _props.secondaryColor;
-
-      return _react2.default.createElement(
-        _Checkbox.IconWrapper,
-        {
-          isChecked: isChecked,
-          isDisabled: isDisabled,
-          isFocused: isFocused,
-          isActive: isActive,
-          isHovered: isHovered,
-          isInvalid: isInvalid
-        },
-        isIndeterminate ? _react2.default.createElement(_checkboxIndeterminate2.default, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
-          isHovered: isHovered,
-          isActive: isActive,
-          label: ''
-        }) : _react2.default.createElement(_checkbox2.default, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
-          isHovered: isHovered,
-          isActive: isActive,
-          label: ''
-        })
-      );
+      var _this$props = this.props,
+          isChecked = _this$props.isChecked,
+          isDisabled = _this$props.isDisabled,
+          isInvalid = _this$props.isInvalid,
+          isActive = _this$props.isActive,
+          isFocused = _this$props.isFocused,
+          isHovered = _this$props.isHovered,
+          isIndeterminate = _this$props.isIndeterminate,
+          primaryColor = _this$props.primaryColor,
+          secondaryColor = _this$props.secondaryColor;
+      return _react.default.createElement(_Checkbox.IconWrapper, {
+        isChecked: isChecked,
+        isDisabled: isDisabled,
+        isFocused: isFocused,
+        isActive: isActive,
+        isHovered: isHovered,
+        isInvalid: isInvalid
+      }, isIndeterminate ? _react.default.createElement(_checkboxIndeterminate.default, {
+        primaryColor: primaryColor,
+        secondaryColor: secondaryColor,
+        isHovered: isHovered,
+        isActive: isActive,
+        label: ""
+      }) : _react.default.createElement(_checkbox.default, {
+        primaryColor: primaryColor,
+        secondaryColor: secondaryColor,
+        isHovered: isHovered,
+        isActive: isActive,
+        label: ""
+      }));
     }
@@ -96,7 +80,7 @@ }]);
 
-CheckboxIcon.defaultProps = {
+exports.default = CheckboxIcon;
+(0, _defineProperty2.default)(CheckboxIcon, "defaultProps", {
   primaryColor: 'inherit',
   secondaryColor: 'inherit',
   isIndeterminate: false
-};
-exports.default = CheckboxIcon;
+});

dist/cjs/index.js

@@ -1,25 +0,23 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _Checkbox = require('./Checkbox');
-
-Object.defineProperty(exports, 'Checkbox', {
+Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Checkbox).default;
+    return _Checkbox.default;
   }
 });
-
-var _CheckboxIcon = require('./CheckboxIcon');
-
-Object.defineProperty(exports, 'CheckboxIcon', {
+Object.defineProperty(exports, "CheckboxIcon", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_CheckboxIcon).default;
+    return _CheckboxIcon.default;
   }
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _CheckboxIcon = _interopRequireDefault(require("./CheckboxIcon"));

dist/cjs/styled/Checkbox.js

@@ -1,39 +0,33 @@
-'use strict';
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconWrapper = exports.CheckboxWrapper = exports.LabelText = exports.Label = exports.HiddenCheckbox = undefined;
+exports.IconWrapper = exports.CheckboxWrapper = exports.LabelText = exports.Label = exports.HiddenCheckbox = void 0;
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+var _theme = require("@atlaskit/theme");
 
-var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+var HiddenCheckbox = _styledComponents.default.input.withConfig({
+  displayName: "Checkbox__HiddenCheckbox",
+  componentId: "sc-1asqokg-0"
+})(["\n  left: 50%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  top: 50%;\n"]);
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  left: 50%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  top: 50%;\n'], ['\n  left: 50%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  top: 50%;\n']),
-    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  align-items: flex-start;\n  display: flex;\n  color: ', ';\n  ', ';\n'], ['\n  align-items: flex-start;\n  display: flex;\n  color: ', ';\n  ', ';\n']),
-    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n          cursor: not-allowed;\n        '], ['\n          cursor: not-allowed;\n        ']),
-    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  stroke: ', ';\n  stroke-width: 2px;\n'], ['\n  stroke: ', ';\n  stroke-width: 2px;\n']),
-    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  stroke: currentColor;\n  stroke-width: 2px;\n'], ['\n  stroke: currentColor;\n  stroke-width: 2px;\n']),
-    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n  padding: 2px 4px;\n'], ['\n  padding: 2px 4px;\n']),
-    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  flex-shrink: 0;\n  position: relative;\n'], ['\n  display: flex;\n  flex-shrink: 0;\n  position: relative;\n']),
-    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n  line-height: 0;\n  flex-shrink: 0;\n  color: ', ';\n  fill: ', ';\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ', ';\n  }\n'], ['\n  line-height: 0;\n  flex-shrink: 0;\n  color: ', ';\n  fill: ', ';\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ', ';\n  }\n']);
+exports.HiddenCheckbox = HiddenCheckbox;
+var disabledColor = (0, _theme.themed)({
+  light: _theme.colors.N80,
+  dark: _theme.colors.N80
+});
 
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _theme = require('@atlaskit/theme');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var HiddenCheckbox = exports.HiddenCheckbox = _styledComponents2.default.input(_templateObject);
-
-var disabledColor = (0, _theme.themed)({ light: _theme.colors.N80, dark: _theme.colors.N80 });
-
-var Label = exports.Label = _styledComponents2.default.label(_templateObject2, function (props
-// $FlowFixMe - theme is not found in props
+var Label = _styledComponents.default.label.withConfig({
+  displayName: "Checkbox__Label",
+  componentId: "sc-1asqokg-1"
+})(["\n  align-items: flex-start;\n  display: flex;\n  color: ", ";\n  ", ";\n"], function (props // $FlowFixMe - theme is not found in props
 ) {
@@ -43,14 +37,27 @@ return props.isDisabled ? disabledColor(props) : _theme.colors.text(props);
   var isDisabled = _ref.isDisabled;
-  return isDisabled ? (0, _styledComponents.css)(_templateObject3) : '';
+  return isDisabled ? (0, _styledComponents.css)(["\n          cursor: not-allowed;\n        "]) : '';
 });
 
-var borderColor = (0, _theme.themed)({ light: _theme.colors.N40, dark: _theme.colors.DN80 });
-var focusBorder = (0, _styledComponents.css)(_templateObject4, (0, _theme.themed)({ light: _theme.colors.B100, dark: _theme.colors.B75 }));
-var invalidBorder = (0, _styledComponents.css)(_templateObject4, (0, _theme.themed)({ light: _theme.colors.R300, dark: _theme.colors.R300 }));
-var activeBorder = (0, _styledComponents.css)(_templateObject5);
-var checkedBorder = (0, _styledComponents.css)(_templateObject5);
-var border = (0, _styledComponents.css)(_templateObject4, function (_ref2) {
+exports.Label = Label;
+var borderColor = (0, _theme.themed)({
+  light: _theme.colors.N40,
+  dark: _theme.colors.DN80
+});
+var focusBorder = (0, _styledComponents.css)(["\n  stroke: ", ";\n  stroke-width: 2px;\n"], (0, _theme.themed)({
+  light: _theme.colors.B100,
+  dark: _theme.colors.B75
+}));
+var invalidBorder = (0, _styledComponents.css)(["\n  stroke: ", ";\n  stroke-width: 2px;\n"], (0, _theme.themed)({
+  light: _theme.colors.R300,
+  dark: _theme.colors.R300
+}));
+var activeBorder = (0, _styledComponents.css)(["\n  stroke: currentColor;\n  stroke-width: 2px;\n"]);
+var checkedBorder = (0, _styledComponents.css)(["\n  stroke: currentColor;\n  stroke-width: 2px;\n"]);
+var border = (0, _styledComponents.css)(["\n  stroke: ", ";\n  stroke-width: 2px;\n"], function (_ref2) {
   var isHovered = _ref2.isHovered,
-      rest = (0, _objectWithoutProperties3.default)(_ref2, ['isHovered']);
-  return isHovered ? (0, _theme.themed)({ light: _theme.colors.N40, dark: _theme.colors.DN200 })(rest) : borderColor(rest);
+      rest = (0, _objectWithoutProperties2.default)(_ref2, ["isHovered"]);
+  return isHovered ? (0, _theme.themed)({
+    light: _theme.colors.N40,
+    dark: _theme.colors.DN200
+  })(rest) : borderColor(rest);
 });
@@ -71,14 +78,25 @@
       isActive = props.isActive,
-      rest = (0, _objectWithoutProperties3.default)(props, ['isChecked', 'isDisabled', 'isActive']);
+      rest = (0, _objectWithoutProperties2.default)(props, ["isChecked", "isDisabled", "isActive"]);
+  var color = (0, _theme.themed)({
+    light: _theme.colors.N10,
+    dark: _theme.colors.DN10
+  });
 
-
-  var color = (0, _theme.themed)({ light: _theme.colors.N10, dark: _theme.colors.DN10 });
-
   if (isDisabled && isChecked) {
-    color = (0, _theme.themed)({ light: _theme.colors.N70, dark: _theme.colors.DN90 });
+    color = (0, _theme.themed)({
+      light: _theme.colors.N70,
+      dark: _theme.colors.DN90
+    });
   } else if (isActive && isChecked && !isDisabled) {
-    color = (0, _theme.themed)({ light: _theme.colors.B400, dark: _theme.colors.DN10 });
+    color = (0, _theme.themed)({
+      light: _theme.colors.B400,
+      dark: _theme.colors.DN10
+    });
   } else if (!isChecked) {
-    color = (0, _theme.themed)({ light: 'transparent', dark: 'transparent' });
+    color = (0, _theme.themed)({
+      light: 'transparent',
+      dark: 'transparent'
+    });
   }
+
   return color(rest);
@@ -92,25 +110,58 @@ };
       isHovered = props.isHovered,
-      rest = (0, _objectWithoutProperties3.default)(props, ['isChecked', 'isDisabled', 'isActive', 'isHovered']);
-  // set the default
+      rest = (0, _objectWithoutProperties2.default)(props, ["isChecked", "isDisabled", "isActive", "isHovered"]); // set the default
 
-  var color = (0, _theme.themed)({ light: _theme.colors.N10, dark: _theme.colors.DN10 });
+  var color = (0, _theme.themed)({
+    light: _theme.colors.N10,
+    dark: _theme.colors.DN10
+  });
 
   if (isDisabled) {
-    color = (0, _theme.themed)({ light: _theme.colors.N20, dark: _theme.colors.DN10 });
+    color = (0, _theme.themed)({
+      light: _theme.colors.N20,
+      dark: _theme.colors.DN10
+    });
   } else if (isActive) {
-    color = (0, _theme.themed)({ light: _theme.colors.B50, dark: _theme.colors.B200 });
+    color = (0, _theme.themed)({
+      light: _theme.colors.B50,
+      dark: _theme.colors.B200
+    });
   } else if (isHovered && isChecked) {
-    color = (0, _theme.themed)({ light: _theme.colors.B300, dark: _theme.colors.B75 });
+    color = (0, _theme.themed)({
+      light: _theme.colors.B300,
+      dark: _theme.colors.B75
+    });
   } else if (isHovered) {
-    color = (0, _theme.themed)({ light: _theme.colors.N30, dark: _theme.colors.DN30 });
+    color = (0, _theme.themed)({
+      light: _theme.colors.N30,
+      dark: _theme.colors.DN30
+    });
   } else if (isChecked) {
-    color = (0, _theme.themed)({ light: _theme.colors.B400, dark: _theme.colors.B400 });
+    color = (0, _theme.themed)({
+      light: _theme.colors.B400,
+      dark: _theme.colors.B400
+    });
   }
+
   return color(rest);
 };
 
-var LabelText = exports.LabelText = _styledComponents2.default.span(_templateObject6);
+var LabelText = _styledComponents.default.span.withConfig({
+  displayName: "Checkbox__LabelText",
+  componentId: "sc-1asqokg-2"
+})(["\n  padding: 2px 4px;\n"]);
 
-var CheckboxWrapper = exports.CheckboxWrapper = _styledComponents2.default.span(_templateObject7);
+exports.LabelText = LabelText;
 
-var IconWrapper = exports.IconWrapper = _styledComponents2.default.span(_templateObject8, getBoxColor, getTickColor, getBorderColor);
+var CheckboxWrapper = _styledComponents.default.span.withConfig({
+  displayName: "Checkbox__CheckboxWrapper",
+  componentId: "sc-1asqokg-3"
+})(["\n  display: flex;\n  flex-shrink: 0;\n  position: relative;\n"]);
+
+exports.CheckboxWrapper = CheckboxWrapper;
+
+var IconWrapper = _styledComponents.default.span.withConfig({
+  displayName: "Checkbox__IconWrapper",
+  componentId: "sc-1asqokg-4"
+})(["\n  line-height: 0;\n  flex-shrink: 0;\n  color: ", ";\n  fill: ", ";\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ", ";\n  }\n"], getBoxColor, getTickColor, getBorderColor);
+
+exports.IconWrapper = IconWrapper;

dist/cjs/types.js

@@ -1,3 +0,3 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
+var _react = require("react");

dist/esm/Checkbox.js

@@ -1,8 +0,10 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
@@ -12,24 +14,25 @@ import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import CheckboxIcon from './CheckboxIcon';
-
 import { name as packageName, version as packageVersion } from '../package.json';
 import { HiddenCheckbox, Label, LabelText, CheckboxWrapper } from './styled/Checkbox';
-import './types';
-
 var emptyTheme = {};
 
-var Checkbox = function (_Component) {
+var Checkbox =
+/*#__PURE__*/
+function (_Component) {
   _inherits(Checkbox, _Component);
 
   function Checkbox() {
-    var _ref;
+    var _getPrototypeOf2;
 
-    var _temp, _this, _ret;
+    var _this;
 
     _classCallCheck(this, Checkbox);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || _Object$getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Checkbox)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
       isActive: false,
@@ -40,19 +43,38 @@ isFocused: false,
       isChecked: _this.props.isChecked !== undefined ? _this.props.isChecked : _this.props.defaultChecked
-    }, _this.actionKeys = [' '], _this.getProp = function (key) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "checkbox", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "actionKeys", [' ']);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getProp", function (key) {
       return key in _this.props ? _this.props[key] : _this.state[key];
-    }, _this.onChange = function (event) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (event) {
       if (_this.props.isDisabled) return null;
       event.persist();
+
       if (event.target.checked !== undefined) {
-        _this.setState({ isChecked: event.target.checked });
+        _this.setState({
+          isChecked: event.target.checked
+        });
       }
+
       if (_this.props.onChange) {
         _this.props.onChange(event);
       }
+
       return true;
-    }, _this.blur = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blur", function () {
       if (_this.checkbox && _this.checkbox.blur) _this.checkbox.blur();
-    }, _this.focus = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focus", function () {
       if (_this.checkbox && _this.checkbox.focus) _this.checkbox.focus();
-    }, _this.onBlur = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onBlur", function () {
       return _this.setState({
@@ -65,28 +87,60 @@ // onBlur is called after onMouseDown if the checkbox was focused, however
       });
-    }, _this.onFocus = function () {
-      return _this.setState({ isFocused: true });
-    }, _this.onMouseLeave = function () {
-      return _this.setState({ isActive: false, isHovered: false });
-    }, _this.onMouseEnter = function () {
-      return _this.setState({ isHovered: true });
-    }, _this.onMouseUp = function () {
-      return _this.setState({ isActive: false, isMouseDown: false });
-    }, _this.onMouseDown = function () {
-      return _this.setState({ isActive: true, isMouseDown: true });
-    }, _this.onKeyDown = function (event) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onFocus", function () {
+      return _this.setState({
+        isFocused: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMouseLeave", function () {
+      return _this.setState({
+        isActive: false,
+        isHovered: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMouseEnter", function () {
+      return _this.setState({
+        isHovered: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMouseUp", function () {
+      return _this.setState({
+        isActive: false,
+        isMouseDown: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMouseDown", function () {
+      return _this.setState({
+        isActive: true,
+        isMouseDown: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyDown", function (event) {
       if (_this.actionKeys.includes(event.key)) {
-        _this.setState({ isActive: true });
+        _this.setState({
+          isActive: true
+        });
       }
-    }, _this.onKeyUp = function (event) {
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyUp", function (event) {
       if (_this.actionKeys.includes(event.key)) {
-        _this.setState({ isActive: false });
+        _this.setState({
+          isActive: false
+        });
       }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    return _this;
   }
 
   _createClass(Checkbox, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
-      var isIndeterminate = this.props.isIndeterminate;
-      // there is no HTML attribute for indeterminate, and thus no prop equivalent.
+      var isIndeterminate = this.props.isIndeterminate; // there is no HTML attribute for indeterminate, and thus no prop equivalent.
       // it must be set via the ref.
@@ -96,2 +150,3 @@
         this.checkbox.indeterminate = !!isIndeterminate;
+
         if (this.props.inputRef) {
@@ -103,7 +158,6 @@ this.props.inputRef(this.checkbox);
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var isIndeterminate = this.props.isIndeterminate;
 
-
       if (prevProps.isIndeterminate !== isIndeterminate && this.checkbox) {
@@ -113,77 +167,57 @@ this.checkbox.indeterminate = !!isIndeterminate;
     }
-
-    // expose blur/focus to consumers via ref
-
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          isDisabled = _props.isDisabled,
-          isInvalid = _props.isInvalid,
-          isIndeterminate = _props.isIndeterminate,
-          label = _props.label,
-          name = _props.name,
-          value = _props.value,
-          onChange = _props.onChange,
-          props = _objectWithoutProperties(_props, ['isDisabled', 'isInvalid', 'isIndeterminate', 'label', 'name', 'value', 'onChange']);
+      var _this$props = this.props,
+          isDisabled = _this$props.isDisabled,
+          isInvalid = _this$props.isInvalid,
+          isIndeterminate = _this$props.isIndeterminate,
+          label = _this$props.label,
+          name = _this$props.name,
+          value = _this$props.value,
+          onChange = _this$props.onChange,
+          props = _objectWithoutProperties(_this$props, ["isDisabled", "isInvalid", "isIndeterminate", "label", "name", "value", "onChange"]);
 
       var isChecked = this.getProp('isChecked');
-      var _state = this.state,
-          isFocused = _state.isFocused,
-          isActive = _state.isActive,
-          isHovered = _state.isHovered;
+      var _this$state = this.state,
+          isFocused = _this$state.isFocused,
+          isActive = _this$state.isActive,
+          isHovered = _this$state.isHovered;
+      return React.createElement(ThemeProvider, {
+        theme: emptyTheme
+      }, React.createElement(Label, _extends({}, props, {
+        isDisabled: isDisabled,
+        onMouseDown: this.onMouseDown,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+        onMouseUp: this.onMouseUp
+      }), React.createElement(CheckboxWrapper, null, React.createElement(HiddenCheckbox, {
+        disabled: isDisabled,
+        checked: isChecked,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        onFocus: this.onFocus,
+        onKeyUp: this.onKeyUp,
+        onKeyDown: this.onKeyDown,
+        type: "checkbox",
+        value: value,
+        name: name,
+        innerRef: function innerRef(r) {
+          return _this2.checkbox = r;
+        } // eslint-disable-line
 
-
-      return React.createElement(
-        ThemeProvider,
-        { theme: emptyTheme },
-        React.createElement(
-          Label,
-          _extends({}, props, {
-            isDisabled: isDisabled,
-            onMouseDown: this.onMouseDown,
-            onMouseEnter: this.onMouseEnter,
-            onMouseLeave: this.onMouseLeave,
-            onMouseUp: this.onMouseUp
-          }),
-          React.createElement(
-            CheckboxWrapper,
-            null,
-            React.createElement(HiddenCheckbox, {
-              disabled: isDisabled,
-              checked: isChecked,
-              onChange: this.onChange,
-              onBlur: this.onBlur,
-              onFocus: this.onFocus,
-              onKeyUp: this.onKeyUp,
-              onKeyDown: this.onKeyDown,
-              type: 'checkbox',
-              value: value,
-              name: name,
-              innerRef: function innerRef(r) {
-                return _this2.checkbox = r;
-              } // eslint-disable-line
-            }),
-            React.createElement(CheckboxIcon, {
-              isChecked: isChecked,
-              isDisabled: isDisabled,
-              isFocused: isFocused,
-              isActive: isActive,
-              isHovered: isHovered,
-              isInvalid: isInvalid,
-              isIndeterminate: isIndeterminate,
-              primaryColor: 'inherit',
-              secondaryColor: 'inherit',
-              label: ''
-            })
-          ),
-          React.createElement(
-            LabelText,
-            null,
-            label
-          )
-        )
-      );
+      }), React.createElement(CheckboxIcon, {
+        isChecked: isChecked,
+        isDisabled: isDisabled,
+        isFocused: isFocused,
+        isActive: isActive,
+        isHovered: isHovered,
+        isInvalid: isInvalid,
+        isIndeterminate: isIndeterminate,
+        primaryColor: "inherit",
+        secondaryColor: "inherit",
+        label: ""
+      })), React.createElement(LabelText, null, label)));
     }
@@ -195,3 +229,3 @@ }]);
 
-Checkbox.defaultProps = {
+_defineProperty(Checkbox, "defaultProps", {
   isDisabled: false,
@@ -201,8 +235,6 @@ isInvalid: false,
   isIndeterminate: false
-};
+});
 
-
 export { Checkbox as CheckboxWithoutAnalytics };
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-
 export default withAnalyticsContext({
@@ -216,3 +248,2 @@ componentName: 'checkbox',
     actionSubject: 'checkbox',
-
     attributes: {
@@ -219,0 +250,0 @@ componentName: 'checkbox',

dist/esm/CheckboxIcon.js

@@ -1,6 +0,7 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
@@ -10,5 +11,6 @@ import Icon from '@atlaskit/icon/glyph/checkbox';
 import { IconWrapper } from './styled/Checkbox';
-import './types';
 
-var CheckboxIcon = function (_Component) {
+var CheckboxIcon =
+/*#__PURE__*/
+function (_Component) {
   _inherits(CheckboxIcon, _Component);
@@ -19,43 +21,38 @@
 
-    return _possibleConstructorReturn(this, (CheckboxIcon.__proto__ || _Object$getPrototypeOf(CheckboxIcon)).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(CheckboxIcon).apply(this, arguments));
   }
 
   _createClass(CheckboxIcon, [{
-    key: 'render',
+    key: "render",
     value: function render() {
-      var _props = this.props,
-          isChecked = _props.isChecked,
-          isDisabled = _props.isDisabled,
-          isInvalid = _props.isInvalid,
-          isActive = _props.isActive,
-          isFocused = _props.isFocused,
-          isHovered = _props.isHovered,
-          isIndeterminate = _props.isIndeterminate,
-          primaryColor = _props.primaryColor,
-          secondaryColor = _props.secondaryColor;
-
-      return React.createElement(
-        IconWrapper,
-        {
-          isChecked: isChecked,
-          isDisabled: isDisabled,
-          isFocused: isFocused,
-          isActive: isActive,
-          isHovered: isHovered,
-          isInvalid: isInvalid
-        },
-        isIndeterminate ? React.createElement(CheckboxIndeterminateIcon, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
-          isHovered: isHovered,
-          isActive: isActive,
-          label: ''
-        }) : React.createElement(Icon, {
-          primaryColor: primaryColor,
-          secondaryColor: secondaryColor,
-          isHovered: isHovered,
-          isActive: isActive,
-          label: ''
-        })
-      );
+      var _this$props = this.props,
+          isChecked = _this$props.isChecked,
+          isDisabled = _this$props.isDisabled,
+          isInvalid = _this$props.isInvalid,
+          isActive = _this$props.isActive,
+          isFocused = _this$props.isFocused,
+          isHovered = _this$props.isHovered,
+          isIndeterminate = _this$props.isIndeterminate,
+          primaryColor = _this$props.primaryColor,
+          secondaryColor = _this$props.secondaryColor;
+      return React.createElement(IconWrapper, {
+        isChecked: isChecked,
+        isDisabled: isDisabled,
+        isFocused: isFocused,
+        isActive: isActive,
+        isHovered: isHovered,
+        isInvalid: isInvalid
+      }, isIndeterminate ? React.createElement(CheckboxIndeterminateIcon, {
+        primaryColor: primaryColor,
+        secondaryColor: secondaryColor,
+        isHovered: isHovered,
+        isActive: isActive,
+        label: ""
+      }) : React.createElement(Icon, {
+        primaryColor: primaryColor,
+        secondaryColor: secondaryColor,
+        isHovered: isHovered,
+        isActive: isActive,
+        label: ""
+      }));
     }
@@ -67,7 +64,8 @@ }]);
 
-CheckboxIcon.defaultProps = {
+_defineProperty(CheckboxIcon, "defaultProps", {
   primaryColor: 'inherit',
   secondaryColor: 'inherit',
   isIndeterminate: false
-};
-export default CheckboxIcon;
+});
+
+export { CheckboxIcon as default };

dist/esm/styled/Checkbox.js

@@ -1,22 +0,16 @@
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
-
-var _templateObject = _taggedTemplateLiteral(['\n  left: 50%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  top: 50%;\n'], ['\n  left: 50%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  top: 50%;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  align-items: flex-start;\n  display: flex;\n  color: ', ';\n  ', ';\n'], ['\n  align-items: flex-start;\n  display: flex;\n  color: ', ';\n  ', ';\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n          cursor: not-allowed;\n        '], ['\n          cursor: not-allowed;\n        ']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  stroke: ', ';\n  stroke-width: 2px;\n'], ['\n  stroke: ', ';\n  stroke-width: 2px;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  stroke: currentColor;\n  stroke-width: 2px;\n'], ['\n  stroke: currentColor;\n  stroke-width: 2px;\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  padding: 2px 4px;\n'], ['\n  padding: 2px 4px;\n']),
-    _templateObject7 = _taggedTemplateLiteral(['\n  display: flex;\n  flex-shrink: 0;\n  position: relative;\n'], ['\n  display: flex;\n  flex-shrink: 0;\n  position: relative;\n']),
-    _templateObject8 = _taggedTemplateLiteral(['\n  line-height: 0;\n  flex-shrink: 0;\n  color: ', ';\n  fill: ', ';\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ', ';\n  }\n'], ['\n  line-height: 0;\n  flex-shrink: 0;\n  color: ', ';\n  fill: ', ';\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ', ';\n  }\n']);
-
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import styled, { css } from 'styled-components';
 import { colors, themed } from '@atlaskit/theme';
-
-export var HiddenCheckbox = styled.input(_templateObject);
-
-var disabledColor = themed({ light: colors.N80, dark: colors.N80 });
-
-export var Label = styled.label(_templateObject2, function (props
-// $FlowFixMe - theme is not found in props
+export var HiddenCheckbox = styled.input.withConfig({
+  displayName: "Checkbox__HiddenCheckbox",
+  componentId: "sc-1asqokg-0"
+})(["\n  left: 50%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  top: 50%;\n"]);
+var disabledColor = themed({
+  light: colors.N80,
+  dark: colors.N80
+});
+export var Label = styled.label.withConfig({
+  displayName: "Checkbox__Label",
+  componentId: "sc-1asqokg-1"
+})(["\n  align-items: flex-start;\n  display: flex;\n  color: ", ";\n  ", ";\n"], function (props // $FlowFixMe - theme is not found in props
 ) {
@@ -26,15 +20,26 @@ return props.isDisabled ? disabledColor(props) : colors.text(props);
   var isDisabled = _ref.isDisabled;
-  return isDisabled ? css(_templateObject3) : '';
+  return isDisabled ? css(["\n          cursor: not-allowed;\n        "]) : '';
 });
-
-var borderColor = themed({ light: colors.N40, dark: colors.DN80 });
-var focusBorder = css(_templateObject4, themed({ light: colors.B100, dark: colors.B75 }));
-var invalidBorder = css(_templateObject4, themed({ light: colors.R300, dark: colors.R300 }));
-var activeBorder = css(_templateObject5);
-var checkedBorder = css(_templateObject5);
-var border = css(_templateObject4, function (_ref2) {
+var borderColor = themed({
+  light: colors.N40,
+  dark: colors.DN80
+});
+var focusBorder = css(["\n  stroke: ", ";\n  stroke-width: 2px;\n"], themed({
+  light: colors.B100,
+  dark: colors.B75
+}));
+var invalidBorder = css(["\n  stroke: ", ";\n  stroke-width: 2px;\n"], themed({
+  light: colors.R300,
+  dark: colors.R300
+}));
+var activeBorder = css(["\n  stroke: currentColor;\n  stroke-width: 2px;\n"]);
+var checkedBorder = css(["\n  stroke: currentColor;\n  stroke-width: 2px;\n"]);
+var border = css(["\n  stroke: ", ";\n  stroke-width: 2px;\n"], function (_ref2) {
   var isHovered = _ref2.isHovered,
-      rest = _objectWithoutProperties(_ref2, ['isHovered']);
+      rest = _objectWithoutProperties(_ref2, ["isHovered"]);
 
-  return isHovered ? themed({ light: colors.N40, dark: colors.DN200 })(rest) : borderColor(rest);
+  return isHovered ? themed({
+    light: colors.N40,
+    dark: colors.DN200
+  })(rest) : borderColor(rest);
 });
@@ -55,13 +60,26 @@
       isActive = props.isActive,
-      rest = _objectWithoutProperties(props, ['isChecked', 'isDisabled', 'isActive']);
+      rest = _objectWithoutProperties(props, ["isChecked", "isDisabled", "isActive"]);
 
-  var color = themed({ light: colors.N10, dark: colors.DN10 });
+  var color = themed({
+    light: colors.N10,
+    dark: colors.DN10
+  });
 
   if (isDisabled && isChecked) {
-    color = themed({ light: colors.N70, dark: colors.DN90 });
+    color = themed({
+      light: colors.N70,
+      dark: colors.DN90
+    });
   } else if (isActive && isChecked && !isDisabled) {
-    color = themed({ light: colors.B400, dark: colors.DN10 });
+    color = themed({
+      light: colors.B400,
+      dark: colors.DN10
+    });
   } else if (!isChecked) {
-    color = themed({ light: 'transparent', dark: 'transparent' });
+    color = themed({
+      light: 'transparent',
+      dark: 'transparent'
+    });
   }
+
   return color(rest);
@@ -75,26 +93,51 @@ };
       isHovered = props.isHovered,
-      rest = _objectWithoutProperties(props, ['isChecked', 'isDisabled', 'isActive', 'isHovered']);
-  // set the default
+      rest = _objectWithoutProperties(props, ["isChecked", "isDisabled", "isActive", "isHovered"]); // set the default
 
 
-  var color = themed({ light: colors.N10, dark: colors.DN10 });
+  var color = themed({
+    light: colors.N10,
+    dark: colors.DN10
+  });
 
   if (isDisabled) {
-    color = themed({ light: colors.N20, dark: colors.DN10 });
+    color = themed({
+      light: colors.N20,
+      dark: colors.DN10
+    });
   } else if (isActive) {
-    color = themed({ light: colors.B50, dark: colors.B200 });
+    color = themed({
+      light: colors.B50,
+      dark: colors.B200
+    });
   } else if (isHovered && isChecked) {
-    color = themed({ light: colors.B300, dark: colors.B75 });
+    color = themed({
+      light: colors.B300,
+      dark: colors.B75
+    });
   } else if (isHovered) {
-    color = themed({ light: colors.N30, dark: colors.DN30 });
+    color = themed({
+      light: colors.N30,
+      dark: colors.DN30
+    });
   } else if (isChecked) {
-    color = themed({ light: colors.B400, dark: colors.B400 });
+    color = themed({
+      light: colors.B400,
+      dark: colors.B400
+    });
   }
+
   return color(rest);
 };
 
-export var LabelText = styled.span(_templateObject6);
-
-export var CheckboxWrapper = styled.span(_templateObject7);
-
-export var IconWrapper = styled.span(_templateObject8, getBoxColor, getTickColor, getBorderColor);
+export var LabelText = styled.span.withConfig({
+  displayName: "Checkbox__LabelText",
+  componentId: "sc-1asqokg-2"
+})(["\n  padding: 2px 4px;\n"]);
+export var CheckboxWrapper = styled.span.withConfig({
+  displayName: "Checkbox__CheckboxWrapper",
+  componentId: "sc-1asqokg-3"
+})(["\n  display: flex;\n  flex-shrink: 0;\n  position: relative;\n"]);
+export var IconWrapper = styled.span.withConfig({
+  displayName: "Checkbox__IconWrapper",
+  componentId: "sc-1asqokg-4"
+})(["\n  line-height: 0;\n  flex-shrink: 0;\n  color: ", ";\n  fill: ", ";\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ", ";\n  }\n"], getBoxColor, getTickColor, getBorderColor);

dist/package.json

 {
 	"name": "@atlaskit/checkbox",
-	"version": "5.0.3",
+	"version": "5.0.4",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/checkbox",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "Checkbox component for use in forms",
@@ -22,5 +22,6 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@atlaskit/analytics-next": "^3.0.6",
-    "@atlaskit/icon": "^14.0.0",
-    "@atlaskit/theme": "^6.0.2",
+    "@atlaskit/analytics-next": "^3.0.10",
+    "@atlaskit/icon": "^14.0.2",
+    "@atlaskit/theme": "^6.1.1",
+    "@babel/runtime": "^7.0.0",
     "babel-runtime": "^6.26.0",
@@ -35,3 +36,3 @@ "prop-types": "^15.5.10"
     "@atlaskit/build-utils": "^2.0.0",
-    "@atlaskit/button": "^9.0.13",
+    "@atlaskit/button": "^9.0.15",
     "@atlaskit/docs": "^5.0.8",
@@ -46,2 +47,2 @@ "enzyme": "https://registry.npmjs.org/@pgleeson/enzyme/-/enzyme-3.3.7.tgz",
   ]
-}
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72683

increased by1.42%

Lines of code

842

increased by16.78%

Worsened metrics

Dependency count

8

increased by14.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@^7.0.0

• Updated@atlaskit/analytics-next@^3.0.10

• Updated@atlaskit/icon@^14.0.2

• Updated@atlaskit/theme@^6.1.1