@atlaskit/item - npm Package Compare versions

Comparing version 8.0.9 to 8.0.10

CHANGELOG.md

 # @atlaskit/item
 
+## 8.0.10
+- [patch] Adds missing implicit @babel/runtime dependency [b71751b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b71751b)
+
 ## 8.0.9
@@ -4,0 +7,0 @@ - [patch] Fixing selected style for Item and Fixing focus on Quick search when component is not remounted [9532a1b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/9532a1b)

dist/cjs/components/hoc/withItemClick.js

@@ -1,85 +0,77 @@
-'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 _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _getDisplayName = _interopRequireDefault(require("../../util/getDisplayName"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _safeContextCall = _interopRequireDefault(require("../../util/safeContextCall"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _contextNamespace = require("../../util/contextNamespace");
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _getDisplayName = require('../../util/getDisplayName');
-
-var _getDisplayName2 = _interopRequireDefault(_getDisplayName);
-
-var _safeContextCall = require('../../util/safeContextCall');
-
-var _safeContextCall2 = _interopRequireDefault(_safeContextCall);
-
-var _contextNamespace = require('../../util/contextNamespace');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+// We currently need to keep the dropdown open if an item with `href` is clicked, to avoid the
+// analytics package to track the href value without the event target disappearing. Without this
+// requirement, we could just use a native click event all the way up to DropdownMenuStateless,
+// and could get rid of this HOC and DropdownItemClickManager.
 // HOC that typically wraps @atlaskit/item
 var withItemClick = function withItemClick(WrappedItem) {
-  var _class, _temp2;
+  var _class, _temp;
 
-  return _temp2 = _class = function (_Component) {
-    (0, _inherits3.default)(WithItemClick, _Component);
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_Component) {
+    (0, _inherits2.default)(WithItemClick, _Component);
 
     function WithItemClick() {
-      var _ref;
+      var _getPrototypeOf2;
 
-      var _temp, _this, _ret;
+      var _this;
 
-      (0, _classCallCheck3.default)(this, WithItemClick);
+      (0, _classCallCheck2.default)(this, WithItemClick);
 
-      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 = WithItemClick.__proto__ || (0, _getPrototypeOf2.default)(WithItemClick)).call.apply(_ref, [this].concat(args))), _this), _this.callContextFn = (0, _safeContextCall2.default)(_this, _contextNamespace.clickManagerContext), _this.shouldCloseAfterClick = function () {
+      _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(WithItemClick)).call.apply(_getPrototypeOf2, [this].concat(args)));
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "callContextFn", (0, _safeContextCall.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), _contextNamespace.clickManagerContext));
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "shouldCloseAfterClick", function () {
         return !_this.props.isDisabled && !_this.props.href;
-      }, _this.handleClick = function (event) {
+      });
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClick", function (event) {
         _this.props.onClick(event);
+
         if (_this.shouldCloseAfterClick()) {
           _this.callContextFn('itemClicked');
         }
-      }, _this.handleKeyDown = function (event) {
+      });
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleKeyDown", function (event) {
         if (_this.props.onKeyDown) {
@@ -90,33 +82,25 @@ _this.props.onKeyDown(event);
         }
-      }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+      });
+      return _this;
     }
 
-    (0, _createClass3.default)(WithItemClick, [{
-      key: 'render',
+    (0, _createClass2.default)(WithItemClick, [{
+      key: "render",
       value: function render() {
-        var _props = this.props,
-            children = _props.children,
-            otherProps = (0, _objectWithoutProperties3.default)(_props, ['children']);
-
-
-        return _react2.default.createElement(
-          WrappedItem,
-          (0, _extends3.default)({}, otherProps, {
-            onClick: this.handleClick,
-            onKeyDown: this.handleKeyDown
-          }),
-          children
-        );
+        var _this$props = this.props,
+            children = _this$props.children,
+            otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["children"]);
+        return _react.default.createElement(WrappedItem, (0, _extends2.default)({}, otherProps, {
+          onClick: this.handleClick,
+          onKeyDown: this.handleKeyDown
+        }), children);
       }
     }]);
     return WithItemClick;
-  }(_react.Component), _class.displayName = 'WithItemClick(' + (0, _getDisplayName2.default)(WrappedItem) + ')', _class.defaultProps = {
+  }(_react.Component), (0, _defineProperty3.default)(_class, "displayName", "WithItemClick(".concat((0, _getDisplayName.default)(WrappedItem), ")")), (0, _defineProperty3.default)(_class, "defaultProps", {
     onClick: function onClick() {}
-  }, _class.contextTypes = (0, _defineProperty3.default)({}, _contextNamespace.clickManagerContext, _propTypes2.default.object), _temp2;
+  }), (0, _defineProperty3.default)(_class, "contextTypes", (0, _defineProperty3.default)({}, _contextNamespace.clickManagerContext, _propTypes.default.object)), _temp;
 };
-// We currently need to keep the dropdown open if an item with `href` is clicked, to avoid the
-// analytics package to track the href value without the event target disappearing. Without this
-// requirement, we could just use a native click event all the way up to DropdownMenuStateless,
-// and could get rid of this HOC and DropdownItemClickManager.
 
-exports.default = withItemClick;
+var _default = withItemClick;
+exports.default = _default;

dist/cjs/components/hoc/withItemFocus.js

@@ -1,97 +0,79 @@
-'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 _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _uuid = _interopRequireDefault(require("uuid"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _getDisplayName = _interopRequireDefault(require("../../util/getDisplayName"));
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _safeContextCall = _interopRequireDefault(require("../../util/safeContextCall"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _contextNamespace = require("../../util/contextNamespace");
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _uuid = require('uuid');
-
-var _uuid2 = _interopRequireDefault(_uuid);
-
-var _getDisplayName = require('../../util/getDisplayName');
-
-var _getDisplayName2 = _interopRequireDefault(_getDisplayName);
-
-var _safeContextCall = require('../../util/safeContextCall');
-
-var _safeContextCall2 = _interopRequireDefault(_safeContextCall);
-
-var _contextNamespace = require('../../util/contextNamespace');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// HOC that typically wraps @atlaskit/item
-
 var withItemFocus = function withItemFocus(WrappedComponent) {
-  var _class, _temp2;
+  var _class, _temp;
 
-  return _temp2 = _class = function (_Component) {
-    (0, _inherits3.default)(WithItemFocus, _Component);
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_Component) {
+    (0, _inherits2.default)(WithItemFocus, _Component);
 
     function WithItemFocus() {
-      var _ref;
+      var _getPrototypeOf2;
 
-      var _temp, _this, _ret;
+      var _this;
 
-      (0, _classCallCheck3.default)(this, WithItemFocus);
+      (0, _classCallCheck2.default)(this, WithItemFocus);
 
-      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 = WithItemFocus.__proto__ || (0, _getPrototypeOf2.default)(WithItemFocus)).call.apply(_ref, [this].concat(args))), _this), _this.callContextFn = (0, _safeContextCall2.default)(_this, _contextNamespace.focusManagerContext), _this.isFocusable = function () {
+      _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(WithItemFocus)).call.apply(_getPrototypeOf2, [this].concat(args)));
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "contextId", void 0);
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "callContextFn", (0, _safeContextCall.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), _contextNamespace.focusManagerContext));
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "isFocusable", function () {
         return !_this.props.isDisabled && !_this.props.isHidden;
-      }, _this.handleFocus = function () {
+      });
+      (0, _defineProperty3.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleFocus", function () {
         if (_this.isFocusable()) {
           _this.callContextFn('itemFocused', _this.contextId);
         }
-      }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+      });
+      return _this;
     }
 
-    (0, _createClass3.default)(WithItemFocus, [{
-      key: 'componentDidMount',
+    (0, _createClass2.default)(WithItemFocus, [{
+      key: "componentDidMount",
       value: function componentDidMount() {
@@ -102,9 +84,8 @@ if (!this.isFocusable()) {
 
-        this.contextId = (0, _uuid2.default)();
-
-        this.callContextFn('registerItem', this.contextId, _reactDom2.default.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
+        this.contextId = (0, _uuid.default)();
+        this.callContextFn('registerItem', this.contextId, _reactDom.default.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
         );
       }
     }, {
-      key: 'componentDidUpdate',
+      key: "componentDidUpdate",
       value: function componentDidUpdate() {
@@ -115,7 +96,7 @@ if (!this.isFocusable()) {
 
-        this.callContextFn('updateItem', this.contextId, _reactDom2.default.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
+        this.callContextFn('updateItem', this.contextId, _reactDom.default.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
         );
       }
     }, {
-      key: 'componentWillUnmount',
+      key: "componentWillUnmount",
       value: function componentWillUnmount() {
@@ -127,23 +108,18 @@ if (this.isFocusable()) {
     }, {
-      key: 'render',
+      key: "render",
       value: function render() {
-        var _props = this.props,
-            children = _props.children,
-            otherProps = (0, _objectWithoutProperties3.default)(_props, ['children']);
-
-
-        return _react2.default.createElement(
-          WrappedComponent,
-          (0, _extends3.default)({
-            onFocus: this.handleFocus,
-            role: 'menuitem'
-          }, otherProps),
-          children
-        );
+        var _this$props = this.props,
+            children = _this$props.children,
+            otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["children"]);
+        return _react.default.createElement(WrappedComponent, (0, _extends2.default)({
+          onFocus: this.handleFocus,
+          role: "menuitem"
+        }, otherProps), children);
       }
     }]);
     return WithItemFocus;
-  }(_react.Component), _class.displayName = 'WithItemFocus(' + (0, _getDisplayName2.default)(WrappedComponent) + ')', _class.contextTypes = (0, _defineProperty3.default)({}, _contextNamespace.focusManagerContext, _propTypes2.default.object), _temp2;
+  }(_react.Component), (0, _defineProperty3.default)(_class, "displayName", "WithItemFocus(".concat((0, _getDisplayName.default)(WrappedComponent), ")")), (0, _defineProperty3.default)(_class, "contextTypes", (0, _defineProperty3.default)({}, _contextNamespace.focusManagerContext, _propTypes.default.object)), _temp;
 };
 
-exports.default = withItemFocus;
+var _default = withItemFocus;
+exports.default = _default;

dist/cjs/components/Item.js

@@ -1,68 +0,60 @@
-'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 _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 _getPrototypeOf2 = _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 _Item = _interopRequireDefault(require("../styled/Item"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _ItemParts = require("../styled/ItemParts");
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var Item =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2.default)(Item, _Component);
 
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _Item = require('../styled/Item');
-
-var _Item2 = _interopRequireDefault(_Item);
-
-var _ItemParts = require('../styled/ItemParts');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Item = function (_Component) {
-  (0, _inherits3.default)(Item, _Component);
-
+  // eslint-disable-next-line react/sort-comp
   function Item(props) {
-    (0, _classCallCheck3.default)(this, Item);
+    var _this;
 
-    // The type of element rendered at the root of render() can vary based on the `href`
+    (0, _classCallCheck2.default)(this, Item);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Item).call(this, props)); // The type of element rendered at the root of render() can vary based on the `href`
     // and `linkComponent` props provided. We generate this component here to avoid re-
     // generating the component inside render(). This is for performance reasons, and also
     // allows us to avoid generating a new `ref` for the root element each render().
-    var _this = (0, _possibleConstructorReturn3.default)(this, (Item.__proto__ || (0, _getPrototypeOf2.default)(Item)).call(this, props));
 
-    _this.setRef = function (ref) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "rootComponent", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "ref", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setRef", function (ref) {
       _this.ref = ref;
-    };
-
-    _this.href = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "href", function () {
       return _this.props.isDisabled ? null : _this.props.href;
-    };
-
-    _this.rootComponent = (0, _Item2.default)({
+    });
+    _this.rootComponent = (0, _Item.default)({
       href: _this.href(),
@@ -73,7 +65,5 @@ linkComponent: props.linkComponent
   }
-  // eslint-disable-next-line react/sort-comp
 
-
-  (0, _createClass3.default)(Item, [{
-    key: 'componentDidMount',
+  (0, _createClass2.default)(Item, [{
+    key: "componentDidMount",
     value: function componentDidMount() {
@@ -85,38 +75,26 @@ if (this.ref && this.props.autoFocus) {
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          onClick = _props.onClick,
-          onKeyDown = _props.onKeyDown,
-          isCompact = _props.isCompact,
-          isDisabled = _props.isDisabled,
-          isDragging = _props.isDragging,
-          isHidden = _props.isHidden,
-          isSelected = _props.isSelected,
-          onMouseEnter = _props.onMouseEnter,
-          onMouseLeave = _props.onMouseLeave,
-          role = _props.role,
-          dnd = _props.dnd,
-          otherProps = (0, _objectWithoutProperties3.default)(_props, ['onClick', 'onKeyDown', 'isCompact', 'isDisabled', 'isDragging', 'isHidden', 'isSelected', 'onMouseEnter', 'onMouseLeave', 'role', 'dnd']);
+      var _this$props = this.props,
+          _onClick = _this$props.onClick,
+          _onKeyDown = _this$props.onKeyDown,
+          isCompact = _this$props.isCompact,
+          isDisabled = _this$props.isDisabled,
+          isDragging = _this$props.isDragging,
+          isHidden = _this$props.isHidden,
+          isSelected = _this$props.isSelected,
+          onMouseEnter = _this$props.onMouseEnter,
+          onMouseLeave = _this$props.onMouseLeave,
+          role = _this$props.role,
+          dnd = _this$props.dnd,
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["onClick", "onKeyDown", "isCompact", "isDisabled", "isDragging", "isHidden", "isSelected", "onMouseEnter", "onMouseLeave", "role", "dnd"]);
       var Root = this.rootComponent;
-
       var dragHandleProps = dnd && dnd.dragHandleProps || null;
-
       var patchedEventHandlers = {
-        onClick: function (_onClick) {
-          function onClick(_x) {
-            return _onClick.apply(this, arguments);
-          }
-
-          onClick.toString = function () {
-            return _onClick.toString();
-          };
-
-          return onClick;
-        }(function (event) {
+        onClick: function onClick(event) {
           var original = function original() {
-            if (!isDisabled && onClick) {
-              onClick(event);
+            if (!isDisabled && _onClick) {
+              _onClick(event);
             }
@@ -128,9 +106,8 @@ };
             return;
-          }
-
-          // Drag and drop has its own disabled mechansim
+          } // Drag and drop has its own disabled mechansim
           // So not checking for isDisabled
-          dragHandleProps.onClick(event);
 
-          // if default is prevent - do not fire the onClick prop
+
+          dragHandleProps.onClick(event); // if default is prevent - do not fire the onClick prop
+
           if (event.defaultPrevented) {
@@ -141,25 +118,15 @@ return;
           original();
-        }),
+        },
         onMouseDown: function onMouseDown(event) {
           if (dragHandleProps && dragHandleProps.onMouseDown) {
             dragHandleProps.onMouseDown(event);
-          }
+          } // We want to prevent the item from getting focus when clicked
 
-          // We want to prevent the item from getting focus when clicked
+
           event.preventDefault();
         },
-        onKeyDown: function (_onKeyDown) {
-          function onKeyDown(_x2) {
-            return _onKeyDown.apply(this, arguments);
-          }
-
-          onKeyDown.toString = function () {
-            return _onKeyDown.toString();
-          };
-
-          return onKeyDown;
-        }(function (event) {
+        onKeyDown: function onKeyDown(event) {
           var original = function original() {
-            if (!isDisabled && onKeyDown) {
-              onKeyDown(event);
+            if (!isDisabled && _onKeyDown) {
+              _onKeyDown(event);
             }
@@ -173,10 +140,9 @@ };
 
-          dragHandleProps.onKeyDown(event);
+          dragHandleProps.onKeyDown(event); // if default is prevent - do not fire other handlers
 
-          // if default is prevent - do not fire other handlers
           if (event.defaultPrevented) {
             return;
-          }
+          } // not allowing keyboard events on the element while dragging
 
-          // not allowing keyboard events on the element while dragging
+
           if (isDragging) {
@@ -187,3 +153,3 @@ return;
           original();
-        })
+        }
       };
@@ -199,48 +165,27 @@
 
-      return _react2.default.createElement(
-        Root,
-        (0, _extends3.default)({
-          'aria-disabled': isDisabled,
-          href: this.href(),
-          isCompact: isCompact,
-          isDisabled: isDisabled,
-          isDragging: isDragging,
-          isHidden: isHidden,
-          isSelected: isSelected,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          role: role,
-          tabIndex: isDisabled || isHidden || this.props.href ? null : 0,
-          target: this.props.target,
-          title: this.props.title,
-          innerRef: patchedInnerRef
-        }, dnd && dnd.draggableProps, dragHandleProps, patchedEventHandlers, otherProps),
-        !!this.props.elemBefore && _react2.default.createElement(
-          _ItemParts.Before,
-          { isCompact: isCompact },
-          this.props.elemBefore
-        ),
-        _react2.default.createElement(
-          _ItemParts.ContentWrapper,
-          null,
-          _react2.default.createElement(
-            _ItemParts.Content,
-            { allowMultiline: this.props.shouldAllowMultiline },
-            this.props.children
-          ),
-          !!this.props.description && _react2.default.createElement(
-            _ItemParts.Description,
-            {
-              isCompact: this.props.isCompact,
-              isDisabled: this.props.isDisabled
-            },
-            this.props.description
-          )
-        ),
-        !!this.props.elemAfter && _react2.default.createElement(
-          _ItemParts.After,
-          { isCompact: isCompact },
-          this.props.elemAfter
-        )
-      );
+      return _react.default.createElement(Root, (0, _extends2.default)({
+        "aria-disabled": isDisabled,
+        href: this.href(),
+        isCompact: isCompact,
+        isDisabled: isDisabled,
+        isDragging: isDragging,
+        isHidden: isHidden,
+        isSelected: isSelected,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        role: role,
+        tabIndex: isDisabled || isHidden || this.props.href ? null : 0,
+        target: this.props.target,
+        title: this.props.title,
+        innerRef: patchedInnerRef
+      }, dnd && dnd.draggableProps, dragHandleProps, patchedEventHandlers, otherProps), !!this.props.elemBefore && _react.default.createElement(_ItemParts.Before, {
+        isCompact: isCompact
+      }, this.props.elemBefore), _react.default.createElement(_ItemParts.ContentWrapper, null, _react.default.createElement(_ItemParts.Content, {
+        allowMultiline: this.props.shouldAllowMultiline
+      }, this.props.children), !!this.props.description && _react.default.createElement(_ItemParts.Description, {
+        isCompact: this.props.isCompact,
+        isDisabled: this.props.isDisabled
+      }, this.props.description)), !!this.props.elemAfter && _react.default.createElement(_ItemParts.After, {
+        isCompact: isCompact
+      }, this.props.elemAfter));
     }
@@ -251,3 +196,4 @@ }]);
 
-Item.defaultProps = {
+exports.default = Item;
+(0, _defineProperty2.default)(Item, "defaultProps", {
   autoFocus: false,
@@ -260,3 +206,2 @@ description: '',
   shouldAllowMultiline: false
-};
-exports.default = Item;
+});

dist/cjs/components/ItemGroup.js

@@ -1,96 +0,92 @@
-'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 _getPrototypeOf3 = _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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _react = _interopRequireWildcard(require("react"));
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _reactAddonsTextContent = _interopRequireDefault(require("react-addons-text-content"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _ItemGroup = require("../styled/ItemGroup");
 
-var _react = require('react');
+var ItemGroup =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2.default)(ItemGroup, _Component);
 
-var _react2 = _interopRequireDefault(_react);
+  function ItemGroup() {
+    var _getPrototypeOf2;
 
-var _reactAddonsTextContent = require('react-addons-text-content');
+    var _this;
 
-var _reactAddonsTextContent2 = _interopRequireDefault(_reactAddonsTextContent);
+    (0, _classCallCheck2.default)(this, ItemGroup);
 
-var _ItemGroup = require('../styled/ItemGroup');
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ItemGroup = function (_Component) {
-  (0, _inherits3.default)(ItemGroup, _Component);
-
-  function ItemGroup() {
-    (0, _classCallCheck3.default)(this, ItemGroup);
-    return (0, _possibleConstructorReturn3.default)(this, (ItemGroup.__proto__ || (0, _getPrototypeOf2.default)(ItemGroup)).apply(this, arguments));
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ItemGroup)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "headingAfterElement", void 0);
+    return _this;
   }
 
-  (0, _createClass3.default)(ItemGroup, [{
-    key: 'render',
+  (0, _createClass2.default)(ItemGroup, [{
+    key: "render",
     // eslint-disable-line react/sort-comp
-
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          children = _props.children,
-          elemAfter = _props.elemAfter,
-          isCompact = _props.isCompact,
-          title = _props.title,
-          label = _props.label,
-          innerRef = _props.innerRef,
-          role = _props.role;
+      var _this$props = this.props,
+          children = _this$props.children,
+          elemAfter = _this$props.elemAfter,
+          isCompact = _this$props.isCompact,
+          title = _this$props.title,
+          label = _this$props.label,
+          innerRef = _this$props.innerRef,
+          role = _this$props.role;
 
-
       var ariaLabel = function () {
         if (label) {
-          return (0, _reactAddonsTextContent2.default)(label);
+          return (0, _reactAddonsTextContent.default)(label);
         }
+
         if (title) {
-          return (0, _reactAddonsTextContent2.default)(title);
+          return (0, _reactAddonsTextContent.default)(title);
         }
+
         return '';
       }();
-      return _react2.default.createElement(
-        'div',
-        { 'aria-label': ariaLabel, role: role, ref: innerRef },
-        title ? _react2.default.createElement(
-          _ItemGroup.GroupTitle,
-          { 'aria-hidden': 'true', isCompact: isCompact },
-          _react2.default.createElement(
-            _ItemGroup.GroupTitleText,
-            null,
-            title
-          ),
-          elemAfter ? _react2.default.createElement(
-            _ItemGroup.GroupTitleAfter,
-            {
-              innerRef: function innerRef(r) {
-                _this2.headingAfterElement = r;
-              }
-            },
-            elemAfter
-          ) : null
-        ) : null,
-        children
-      );
+
+      return _react.default.createElement("div", {
+        "aria-label": ariaLabel,
+        role: role,
+        ref: innerRef
+      }, title ? _react.default.createElement(_ItemGroup.GroupTitle, {
+        "aria-hidden": "true",
+        isCompact: isCompact
+      }, _react.default.createElement(_ItemGroup.GroupTitleText, null, title), elemAfter ? _react.default.createElement(_ItemGroup.GroupTitleAfter, {
+        innerRef: function innerRef(r) {
+          _this2.headingAfterElement = r;
+        }
+      }, elemAfter) : null) : null, children);
     }
@@ -101,5 +97,5 @@ }]);
 
-ItemGroup.defaultProps = {
+exports.default = ItemGroup;
+(0, _defineProperty2.default)(ItemGroup, "defaultProps", {
   role: 'group'
-};
-exports.default = ItemGroup;
+});

dist/cjs/index.js

@@ -1,46 +0,33 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _Item = require('./components/Item');
-
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Item).default;
+    return _Item.default;
   }
 });
-
-var _ItemGroup = require('./components/ItemGroup');
-
-Object.defineProperty(exports, 'ItemGroup', {
+Object.defineProperty(exports, "ItemGroup", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_ItemGroup).default;
+    return _ItemGroup.default;
   }
 });
-
-var _withItemClick = require('./components/hoc/withItemClick');
-
-Object.defineProperty(exports, 'withItemClick', {
+Object.defineProperty(exports, "withItemClick", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_withItemClick).default;
+    return _withItemClick.default;
   }
 });
-
-var _withItemFocus = require('./components/hoc/withItemFocus');
-
-Object.defineProperty(exports, 'withItemFocus', {
+Object.defineProperty(exports, "withItemFocus", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_withItemFocus).default;
+    return _withItemFocus.default;
   }
 });
-
-var _theme = require('./util/theme');
-
-Object.defineProperty(exports, 'itemThemeNamespace', {
+Object.defineProperty(exports, "itemThemeNamespace", {
   enumerable: true,
@@ -52,2 +39,10 @@ get: function get() {
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Item = _interopRequireDefault(require("./components/Item"));
+
+var _ItemGroup = _interopRequireDefault(require("./components/ItemGroup"));
+
+var _withItemClick = _interopRequireDefault(require("./components/hoc/withItemClick"));
+
+var _withItemFocus = _interopRequireDefault(require("./components/hoc/withItemFocus"));
+
+var _theme = require("./util/theme");

dist/cjs/styled/Item.js

@@ -1,40 +0,21 @@
-'use strict';
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ItemBase = undefined;
+exports.default = exports.ItemBase = void 0;
 
-var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+var _theme = require("@atlaskit/theme");
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n    background-color: ', ';\n    color: ', ';\n    fill: ', ';\n    text-decoration: none;\n\n    &:focus {\n      color: ', ';\n    }\n  '], ['\n    background-color: ', ';\n    color: ', ';\n    fill: ', ';\n    text-decoration: none;\n\n    &:focus {\n      color: ', ';\n    }\n  ']),
-    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  '], ['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  ']),
-    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n        height: ', 'px;\n      '], ['\n        height: ', 'px;\n      ']),
-    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n      ', ' box-shadow: 0 4px 8px -2px ', ',\n        0 0 1px ', ';\n    '], ['\n      ', ' box-shadow: 0 4px 8px -2px ', ',\n        0 0 1px ', ';\n    ']),
-    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n    &:focus {\n      box-shadow: 0 0 0 2px\n        ', ' inset;\n      text-decoration: none;\n    }\n  '], ['\n    &:focus {\n      box-shadow: 0 0 0 2px\n        ', ' inset;\n      text-decoration: none;\n    }\n  ']),
-    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n      cursor: not-allowed;\n      ', ' ', ';\n    '], ['\n      cursor: not-allowed;\n      ', ' ', ';\n    ']),
-    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n      ', ' &:hover {\n        ', ';\n      }\n\n      &:active {\n        ', ';\n      }\n\n      ', ';\n    '], ['\n      ', ' &:hover {\n        ', ';\n      }\n\n      &:active {\n        ', ';\n      }\n\n      ', ';\n    ']),
-    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n    &:hover {\n      ', ';\n    }\n\n    &:active {\n      ', ';\n    }\n\n    ', ';\n  '], ['\n    &:hover {\n      ', ';\n    }\n\n    &:active {\n      ', ';\n    }\n\n    ', ';\n  ']),
-    _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n  && {\n    align-items: center;\n    border-radius: ', 'px;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: ', ';\n    flex: none;\n    ', ' ', ' ', ' ', ' &:focus {\n      /* focus shadow drawn by getInteractiveStyles */\n\n      outline: none;\n      /* relative position prevents bgcolor of a hovered element from\n      obfuscating focus ring of a focused sibling element */\n      position: relative;\n    }\n  }\n'], ['\n  && {\n    align-items: center;\n    border-radius: ', 'px;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: ', ';\n    flex: none;\n    ', ' ', ' ', ' ', ' &:focus {\n      /* focus shadow drawn by getInteractiveStyles */\n\n      outline: none;\n      /* relative position prevents bgcolor of a hovered element from\n      obfuscating focus ring of a focused sibling element */\n      position: relative;\n    }\n  }\n']),
-    _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n      ', ';\n    '], ['\n      ', ';\n    ']),
-    _templateObject11 = (0, _taggedTemplateLiteral3.default)(['\n    ', ';\n  '], ['\n    ', ';\n  ']);
+var _theme2 = require("../util/theme");
 
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _theme = require('@atlaskit/theme');
-
-var _theme2 = require('../util/theme');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var getItemState = function getItemState(stateName) {
   return function (_ref) {
     var theme = _ref.theme;
-
     var stateStyles = (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], stateName);
-    return (0, _styledComponents.css)(_templateObject, stateStyles.background, stateStyles.text, stateStyles.background, stateStyles.text);
+    return (0, _styledComponents.css)(["\n    background-color: ", ";\n    color: ", ";\n    fill: ", ";\n    text-decoration: none;\n\n    &:focus {\n      color: ", ";\n    }\n  "], stateStyles.background, stateStyles.text, stateStyles.background, stateStyles.text);
   };
@@ -47,3 +28,2 @@ };
       description = _ref2.description;
-
   var paddingKey = isCompact ? 'compact' : 'default';
@@ -53,19 +33,17 @@
       _getThemeStyle$bottom = _getThemeStyle.bottom,
-      bottom = _getThemeStyle$bottom === undefined ? 0 : _getThemeStyle$bottom,
+      bottom = _getThemeStyle$bottom === void 0 ? 0 : _getThemeStyle$bottom,
       _getThemeStyle$left = _getThemeStyle.left,
-      left = _getThemeStyle$left === undefined ? 0 : _getThemeStyle$left,
+      left = _getThemeStyle$left === void 0 ? 0 : _getThemeStyle$left,
       _getThemeStyle$right = _getThemeStyle.right,
-      right = _getThemeStyle$right === undefined ? 0 : _getThemeStyle$right,
+      right = _getThemeStyle$right === void 0 ? 0 : _getThemeStyle$right,
       _getThemeStyle$top = _getThemeStyle.top,
-      top = _getThemeStyle$top === undefined ? 0 : _getThemeStyle$top;
+      top = _getThemeStyle$top === void 0 ? 0 : _getThemeStyle$top;
 
   var adjustedTop = typeof top === 'function' ? top() : top;
-  var adjustedBottom = typeof bottom === 'function' ? bottom() : bottom;
+  var adjustedBottom = typeof bottom === 'function' ? bottom() : bottom; // Subtract the 1px padding-bottom added to the content and description elements
+  // to maintain original height
 
-  // Subtract the 1px padding-bottom added to the content and description elements
-  // to maintain original height
   adjustedTop = Math.max(description ? adjustedTop - 1 : adjustedTop, 0);
   adjustedBottom = Math.max(adjustedBottom - 1, 0);
-
-  return (0, _styledComponents.css)(_templateObject2, adjustedTop, right, adjustedBottom, left);
+  return (0, _styledComponents.css)(["\n    padding: ", "px ", "px ", "px ", "px;\n  "], adjustedTop, right, adjustedBottom, left);
 };
@@ -76,9 +54,8 @@
       theme = _ref3.theme;
-
   var heightKey = isCompact ? 'compact' : 'default';
   var height = (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], heightKey, 'height');
-  return height ? (0, _styledComponents.css)(_templateObject3, height) : '';
-};
+  return height ? (0, _styledComponents.css)(["\n        height: ", "px;\n      "], height) : '';
+}; // This function is responsible for drawing any focus styles for the element
 
-// This function is responsible for drawing any focus styles for the element
+
 var getInteractiveStyles = function getInteractiveStyles(_ref4) {
@@ -91,30 +68,27 @@ var theme = _ref4.theme,
   if (isDragging) {
-    return (0, _styledComponents.css)(_templateObject4, getItemState('dragging'), _theme.colors.N60A, _theme.colors.N60A);
+    return (0, _styledComponents.css)(["\n      ", " box-shadow: 0 4px 8px -2px ", ",\n        0 0 1px ", ";\n    "], getItemState('dragging'), _theme.colors.N60A, _theme.colors.N60A);
   }
 
-  var standardFocus = (0, _styledComponents.css)(_templateObject5, (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'outline', 'focus'));
+  var standardFocus = (0, _styledComponents.css)(["\n    &:focus {\n      box-shadow: 0 0 0 2px\n        ", " inset;\n      text-decoration: none;\n    }\n  "], (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'outline', 'focus'));
 
   if (isDisabled) {
-    return (0, _styledComponents.css)(_templateObject6, getItemState('disabled'), standardFocus);
+    return (0, _styledComponents.css)(["\n      cursor: not-allowed;\n      ", " ", ";\n    "], getItemState('disabled'), standardFocus);
   }
 
   if (isSelected) {
-    return (0, _styledComponents.css)(_templateObject7, getItemState('selected'), getItemState('hover'), getItemState('active'), standardFocus);
+    return (0, _styledComponents.css)(["\n      ", " &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", ";\n      }\n\n      ", ";\n    "], getItemState('selected'), getItemState('hover'), getItemState('active'), standardFocus);
   }
 
-  return (0, _styledComponents.css)(_templateObject8, getItemState('hover'), getItemState('active'), standardFocus);
-};
-
-// This is the main item style. It is defined as a basic style variable so it can
+  return (0, _styledComponents.css)(["\n    &:hover {\n      ", ";\n    }\n\n    &:active {\n      ", ";\n    }\n\n    ", ";\n  "], getItemState('hover'), getItemState('active'), standardFocus);
+}; // This is the main item style. It is defined as a basic style variable so it can
 // later be applied to different component types (span / a / custom link component)
 
-var ItemBase = exports.ItemBase = function ItemBase(_ref5) {
+
+var ItemBase = function ItemBase(_ref5) {
   var theme = _ref5.theme;
-  return (0, _styledComponents.css)(_templateObject9, (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'borderRadius'), function (_ref6) {
+  return (0, _styledComponents.css)(["\n  && {\n    align-items: center;\n    border-radius: ", "px;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: ", ";\n    flex: none;\n    ", " ", " ", " ", " &:focus {\n      /* focus shadow drawn by getInteractiveStyles */\n\n      outline: none;\n      /* relative position prevents bgcolor of a hovered element from\n      obfuscating focus ring of a focused sibling element */\n      position: relative;\n    }\n  }\n"], (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'borderRadius'), function (_ref6) {
     var isHidden = _ref6.isHidden;
     return isHidden ? 'none' : 'flex';
   }, getItemState('default'), getPadding, getInteractiveStyles, getHeightStyles);
-};
-
-// Given some optional link-related props, returns the relevant styled
+}; // Given some optional link-related props, returns the relevant styled
 // component. For links, it styles the linkComponent if provided, otherwise
@@ -124,2 +98,6 @@ // falling back to a styled <a> tag. If no href is present, a styled <span>
 // simplify this by taking advantage of the withComponent() functionality.
+
+
+exports.ItemBase = ItemBase;
+
 var styledRootElement = function styledRootElement(_ref7) {
@@ -130,10 +108,22 @@ var href = _ref7.href,
   if (linkComponent) {
-    return (0, _styledComponents2.default)(linkComponent)(_templateObject10, ItemBase);
+    return (0, _styledComponents.default)(linkComponent).withConfig({
+      displayName: "Item",
+      componentId: "z6qfkt-0"
+    })(["\n      ", ";\n    "], ItemBase);
   }
+
   if (href) {
-    return _styledComponents2.default.a(_templateObject10, ItemBase);
+    return _styledComponents.default.a.withConfig({
+      displayName: "Item",
+      componentId: "z6qfkt-1"
+    })(["\n      ", ";\n    "], ItemBase);
   }
-  return _styledComponents2.default.span(_templateObject11, ItemBase);
+
+  return _styledComponents.default.span.withConfig({
+    displayName: "Item",
+    componentId: "z6qfkt-2"
+  })(["\n    ", ";\n  "], ItemBase);
 };
 
-exports.default = styledRootElement;
+var _default = styledRootElement;
+exports.default = _default;

dist/cjs/styled/ItemGroup.js

@@ -1,29 +0,17 @@
-'use strict';
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GroupTitleText = exports.GroupTitleAfter = exports.GroupTitle = undefined;
+exports.GroupTitleText = exports.GroupTitleAfter = exports.GroupTitle = void 0;
 
-var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+var _theme = require("../util/theme");
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  '], ['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  ']),
-    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  align-items: center;\n  color: ', ';\n  display: flex;\n  flex: 1 1 auto;\n  ', ';\n'], ['\n  align-items: center;\n  color: ', ';\n  display: flex;\n  flex: 1 1 auto;\n  ', ';\n']),
-    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  flex: 0 0 auto;\n  margin-right: -', 'px;\n'], ['\n  flex: 0 0 auto;\n  margin-right: -', 'px;\n']),
-    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  flex: 1 1 auto;\n  font-size: ', 'px;\n  line-height: 1;\n  text-transform: uppercase;\n  /* Required for children to truncate */\n  min-width: 0;\n'], ['\n  flex: 1 1 auto;\n  font-size: ', 'px;\n  line-height: 1;\n  text-transform: uppercase;\n  /* Required for children to truncate */\n  min-width: 0;\n']);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _theme = require('../util/theme');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var getPadding = function getPadding(_ref) {
   var isCompact = _ref.isCompact,
       theme = _ref.theme;
-
   var paddingType = isCompact ? 'compact' : 'default';
@@ -33,28 +21,39 @@
       _getThemeStyle$bottom = _getThemeStyle.bottom,
-      bottom = _getThemeStyle$bottom === undefined ? 0 : _getThemeStyle$bottom,
+      bottom = _getThemeStyle$bottom === void 0 ? 0 : _getThemeStyle$bottom,
       _getThemeStyle$left = _getThemeStyle.left,
-      left = _getThemeStyle$left === undefined ? 0 : _getThemeStyle$left,
+      left = _getThemeStyle$left === void 0 ? 0 : _getThemeStyle$left,
       _getThemeStyle$right = _getThemeStyle.right,
-      right = _getThemeStyle$right === undefined ? 0 : _getThemeStyle$right,
+      right = _getThemeStyle$right === void 0 ? 0 : _getThemeStyle$right,
       _getThemeStyle$top = _getThemeStyle.top,
-      top = _getThemeStyle$top === undefined ? 0 : _getThemeStyle$top;
+      top = _getThemeStyle$top === void 0 ? 0 : _getThemeStyle$top;
 
-  return (0, _styledComponents.css)(_templateObject, top, right, bottom, left);
-};
+  return (0, _styledComponents.css)(["\n    padding: ", "px ", "px ", "px ", "px;\n  "], top, right, bottom, left);
+}; // eslint-disable-next-line import/prefer-default-export
 
-// eslint-disable-next-line import/prefer-default-export
-var GroupTitle = _styledComponents2.default.div(_templateObject2, function (_ref2) {
+
+var GroupTitle = _styledComponents.default.div.withConfig({
+  displayName: "ItemGroup__GroupTitle",
+  componentId: "ofbfv9-0"
+})(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex: 1 1 auto;\n  ", ";\n"], function (_ref2) {
   var theme = _ref2.theme;
   return (0, _theme.getThemeStyle)(theme[_theme.themeNamespace], 'secondaryText', 'default');
 }, getPadding);
+
+exports.GroupTitle = GroupTitle;
 GroupTitle.displayName = 'ItemGroupTitle';
 
-var GroupTitleAfter = _styledComponents2.default.div(_templateObject3, _theme.gridSize / 2);
+var GroupTitleAfter = _styledComponents.default.div.withConfig({
+  displayName: "ItemGroup__GroupTitleAfter",
+  componentId: "ofbfv9-1"
+})(["\n  flex: 0 0 auto;\n  margin-right: -", "px;\n"], _theme.gridSize / 2);
+
+exports.GroupTitleAfter = GroupTitleAfter;
 GroupTitleAfter.displayName = 'ItemGroupTitleAfter';
 
-var GroupTitleText = _styledComponents2.default.div(_templateObject4, _theme.smallFontSize);
-GroupTitleText.displayName = 'ItemGroupTitleText';
+var GroupTitleText = _styledComponents.default.div.withConfig({
+  displayName: "ItemGroup__GroupTitleText",
+  componentId: "ofbfv9-2"
+})(["\n  flex: 1 1 auto;\n  font-size: ", "px;\n  line-height: 1;\n  text-transform: uppercase;\n  /* Required for children to truncate */\n  min-width: 0;\n"], _theme.smallFontSize);
 
-exports.GroupTitle = GroupTitle;
-exports.GroupTitleAfter = GroupTitleAfter;
-exports.GroupTitleText = GroupTitleText;
+exports.GroupTitleText = GroupTitleText;
+GroupTitleText.displayName = 'ItemGroupTitleText';

dist/cjs/styled/ItemParts.js

@@ -1,66 +0,70 @@
-'use strict';
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Description = exports.Content = exports.ContentWrapper = exports.After = exports.Before = exports.InputWrapper = undefined;
+exports.Description = exports.Content = exports.ContentWrapper = exports.After = exports.Before = exports.InputWrapper = void 0;
 
-var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+var _theme = require("@atlaskit/theme");
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  margin: 0 2px;\n'], ['\n  display: flex;\n  margin: 0 2px;\n']),
-    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n'], ['\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n']),
-    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n    margin-right: ', 'px;\n  '], ['\n    margin-right: ', 'px;\n  ']),
-    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  ', ';\n'], ['\n  ', ';\n']),
-    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n    margin-left: ', 'px;\n  '], ['\n    margin-left: ', 'px;\n  ']),
-    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin: 0;\n  overflow: hidden;\n\n  &:first-child {\n    margin: 0;\n  }\n'], ['\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin: 0;\n  overflow: hidden;\n\n  &:first-child {\n    margin: 0;\n  }\n']),
-    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n  display: block;\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: ', ';\n  line-height: ', ';\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n'], ['\n  display: block;\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: ', ';\n  line-height: ', ';\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n']),
-    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n      color: ', ';\n    '], ['\n      color: ', ';\n    ']),
-    _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n    color: ', ';\n\n    /* This detects hover on the grandparent. Saves us having to maintain isHovered\n       state in the grandparent. */\n    *:hover > * > & {\n      color: ', ';\n    }\n\n    *:active > * > & {\n      color: ', ';\n    }\n  '], ['\n    color: ', ';\n\n    /* This detects hover on the grandparent. Saves us having to maintain isHovered\n       state in the grandparent. */\n    *:hover > * > & {\n      color: ', ';\n    }\n\n    *:active > * > & {\n      color: ', ';\n    }\n  ']),
-    _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n    font-size: ', 'px;\n    line-height: ', ';\n    /* Fix windows line-height issue */\n    padding-bottom: 1px;\n  '], ['\n    font-size: ', 'px;\n    line-height: ', ';\n    /* Fix windows line-height issue */\n    padding-bottom: 1px;\n  ']),
-    _templateObject11 = (0, _taggedTemplateLiteral3.default)(['\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ', ' ', ';\n'], ['\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ', ' ', ';\n']);
+var _theme2 = require("../util/theme");
 
-require('react');
+// Checkbox/Radio wrapper -- sits left of the children
+var InputWrapper = _styledComponents.default.span.withConfig({
+  displayName: "ItemParts__InputWrapper",
+  componentId: "sc-14xek3m-0"
+})(["\n  display: flex;\n  margin: 0 2px;\n"]); // Elements injected before/after the children
 
-var _styledComponents = require('styled-components');
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+exports.InputWrapper = InputWrapper;
 
-var _theme = require('@atlaskit/theme');
+var BeforeAfterBase = _styledComponents.default.span.withConfig({
+  displayName: "ItemParts__BeforeAfterBase",
+  componentId: "sc-14xek3m-1"
+})(["\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n"]);
 
-var _theme2 = require('../util/theme');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Checkbox/Radio wrapper -- sits left of the children
-var InputWrapper = exports.InputWrapper = _styledComponents2.default.span(_templateObject);
-
-// Elements injected before/after the children
-var BeforeAfterBase = _styledComponents2.default.span(_templateObject2);
-
 var getBeforeSpacing = function getBeforeSpacing(_ref) {
   var isCompact = _ref.isCompact,
       theme = _ref.theme;
-
   var spaceKey = isCompact ? 'compact' : 'default';
   var space = (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], spaceKey, 'beforeItemSpacing');
-  return (0, _styledComponents.css)(_templateObject3, space);
+  return (0, _styledComponents.css)(["\n    margin-right: ", "px;\n  "], space);
 };
-var Before = exports.Before = (0, _styledComponents2.default)(BeforeAfterBase)(_templateObject4, getBeforeSpacing);
 
+var Before = (0, _styledComponents.default)(BeforeAfterBase).withConfig({
+  displayName: "ItemParts__Before",
+  componentId: "sc-14xek3m-2"
+})(["\n  ", ";\n"], getBeforeSpacing);
+exports.Before = Before;
+
 var getAfterSpacing = function getAfterSpacing(_ref2) {
   var isCompact = _ref2.isCompact,
       theme = _ref2.theme;
-
   var spaceKey = isCompact ? 'compact' : 'default';
   var space = (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], spaceKey, 'afterItemSpacing');
-  return (0, _styledComponents.css)(_templateObject5, space);
+  return (0, _styledComponents.css)(["\n    margin-left: ", "px;\n  "], space);
 };
-var After = exports.After = (0, _styledComponents2.default)(BeforeAfterBase)(_templateObject4, getAfterSpacing);
 
-// Alignment and layout for the children
-var ContentWrapper = exports.ContentWrapper = _styledComponents2.default.span(_templateObject6);
+var After = (0, _styledComponents.default)(BeforeAfterBase).withConfig({
+  displayName: "ItemParts__After",
+  componentId: "sc-14xek3m-3"
+})(["\n  ", ";\n"], getAfterSpacing); // Alignment and layout for the children
 
-var Content = exports.Content = _styledComponents2.default.span(_templateObject7, function (_ref3) {
+exports.After = After;
+
+var ContentWrapper = _styledComponents.default.span.withConfig({
+  displayName: "ItemParts__ContentWrapper",
+  componentId: "sc-14xek3m-4"
+})(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin: 0;\n  overflow: hidden;\n\n  &:first-child {\n    margin: 0;\n  }\n"]);
+
+exports.ContentWrapper = ContentWrapper;
+
+var Content = _styledComponents.default.span.withConfig({
+  displayName: "ItemParts__Content",
+  componentId: "sc-14xek3m-5"
+})(["\n  display: block;\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: ", ";\n  line-height: ", ";\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n"], function (_ref3) {
   var allowMultiline = _ref3.allowMultiline;
@@ -70,2 +74,4 @@ return allowMultiline ? 'normal' : 'nowrap';
 
+exports.Content = Content;
+
 var getColorStyle = function getColorStyle(_ref4) {
@@ -76,6 +82,6 @@ var isDisabled = _ref4.isDisabled,
   if (isDisabled) {
-    return (0, _styledComponents.css)(_templateObject8, (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'secondaryText', 'disabled'));
+    return (0, _styledComponents.css)(["\n      color: ", ";\n    "], (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'secondaryText', 'disabled'));
   }
 
-  return (0, _styledComponents.css)(_templateObject9, (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'secondaryText', 'default'), function () {
+  return (0, _styledComponents.css)(["\n    color: ", ";\n\n    /* This detects hover on the grandparent. Saves us having to maintain isHovered\n       state in the grandparent. */\n    *:hover > * > & {\n      color: ", ";\n    }\n\n    *:active > * > & {\n      color: ", ";\n    }\n  "], (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'secondaryText', 'default'), function () {
     return (0, _theme2.getThemeStyle)(theme[_theme2.themeNamespace], 'secondaryText', 'hover');
@@ -89,9 +95,13 @@ }, function () {
   var isCompact = _ref5.isCompact;
-
   var descriptionFontSize = isCompact ? _theme2.compactSmallFontSize : _theme2.smallFontSize;
   var lineHeight = isCompact ? _theme2.compactLineHeight : 14 / descriptionFontSize;
-  return (0, _styledComponents.css)(_templateObject10, descriptionFontSize, lineHeight);
-};
+  return (0, _styledComponents.css)(["\n    font-size: ", "px;\n    line-height: ", ";\n    /* Fix windows line-height issue */\n    padding-bottom: 1px;\n  "], descriptionFontSize, lineHeight);
+}; // Description is a block element below the children, like a subtitle
 
-// Description is a block element below the children, like a subtitle
-var Description = exports.Description = _styledComponents2.default.span(_templateObject11, getColorStyle, getDescriptionFontStyles);
+
+var Description = _styledComponents.default.span.withConfig({
+  displayName: "ItemParts__Description",
+  componentId: "sc-14xek3m-6"
+})(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", " ", ";\n"], getColorStyle, getDescriptionFontStyles);
+
+exports.Description = Description;

dist/cjs/util/contextNamespace.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,9 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.clickManagerContext = exports.selectionManagerContext = exports.selectionCacheContext = exports.focusManagerContext = void 0;
+
 var prefix = function prefix(key) {
-  return '@atlaskit-private-do-not-use/dropdown-menu:' + key;
+  return "@atlaskit-private-do-not-use/dropdown-menu:".concat(key);
 };
 
-var focusManagerContext = exports.focusManagerContext = prefix('focus-manager');
-var selectionCacheContext = exports.selectionCacheContext = prefix('selection-cache');
-var selectionManagerContext = exports.selectionManagerContext = prefix('selection-manager');
-var clickManagerContext = exports.clickManagerContext = prefix('click-manager');
+var focusManagerContext = prefix('focus-manager');
+exports.focusManagerContext = focusManagerContext;
+var selectionCacheContext = prefix('selection-cache');
+exports.selectionCacheContext = selectionCacheContext;
+var selectionManagerContext = prefix('selection-manager');
+exports.selectionManagerContext = selectionManagerContext;
+var clickManagerContext = prefix('click-manager');
+exports.clickManagerContext = clickManagerContext;

dist/cjs/util/getDisplayName.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
 // from https://facebook.github.io/react/docs/higher-order-components.html
-
 var getDisplayName = function getDisplayName(WrappedComponent) {
@@ -14,2 +14,3 @@ return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-exports.default = getDisplayName;
+var _default = getDisplayName;
+exports.default = _default;

dist/cjs/util/safeContextCall.js

@@ -6,2 +6,3 @@ "use strict";
 });
+exports.default = void 0;
 
@@ -11,10 +12,6 @@ // There are cases where the context is not available, such as when a dropdown item is used
 // the context functions if they are available.
-exports.default = function (instance, contextKey) {
+var _default = function _default(instance, contextKey) {
   return function (fnToCall) {
     var _instance$context$con;
 
-    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
     if (!instance.context[contextKey]) {
@@ -24,4 +21,10 @@ return null;
 
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
     return (_instance$context$con = instance.context[contextKey])[fnToCall].apply(_instance$context$con, args);
   };
-};
+};
+
+exports.default = _default;

dist/cjs/util/theme.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.getThemeStyle = exports.themeWithKeys = exports.defaultTheme = exports.gridSize = exports.compactLineHeight = exports.compactSmallFontSize = exports.smallFontSize = exports.themeNamespace = undefined;
+exports.getThemeStyle = exports.themeWithKeys = exports.defaultTheme = exports.gridSize = exports.compactLineHeight = exports.compactSmallFontSize = exports.smallFontSize = exports.themeNamespace = void 0;
 
-var _theme = require('@atlaskit/theme');
+var _theme = require("@atlaskit/theme");
 
-var themeNamespace = exports.themeNamespace = '@atlaskit-shared-theme/item';
+var themeNamespace = '@atlaskit-shared-theme/item'; // Used for Group titles and Item descriptions
 
-// Used for Group titles and Item descriptions
-
-var smallFontSize = exports.smallFontSize = 12;
-var compactSmallFontSize = exports.compactSmallFontSize = 10;
-var compactLineHeight = exports.compactLineHeight = 1.2;
-var gridSize = exports.gridSize = (0, _theme.gridSize)();
-
-var defaultTheme = exports.defaultTheme = {
+exports.themeNamespace = themeNamespace;
+var smallFontSize = 12;
+exports.smallFontSize = smallFontSize;
+var compactSmallFontSize = 10;
+exports.compactSmallFontSize = compactSmallFontSize;
+var compactLineHeight = 1.2;
+exports.compactLineHeight = compactLineHeight;
+var gridSize = (0, _theme.gridSize)();
+exports.gridSize = gridSize;
+var defaultTheme = {
   afterItemSpacing: {
@@ -83,21 +85,27 @@ compact: (0, _theme.gridSize)(),
 };
+exports.defaultTheme = defaultTheme;
 
 var isValidCssValue = function isValidCssValue(value) {
   return value !== undefined && value !== null && value !== '';
-};
+}; // Returns the theme that contains the requested theme key(s), preferring the user-supplied
+// theme if it is provided.
 
-// Returns the theme that contains the requested theme key(s), preferring the user-supplied
-// theme if it is provided.
-var themeWithKeys = exports.themeWithKeys = function themeWithKeys(maybeTheme, key, parentKey) {
+
+var themeWithKeys = function themeWithKeys(maybeTheme, key, parentKey) {
   if (parentKey) {
     return maybeTheme && maybeTheme[parentKey] && isValidCssValue(maybeTheme[parentKey][key]) ? maybeTheme : defaultTheme;
   }
+
   return maybeTheme && isValidCssValue(maybeTheme[key]) ? maybeTheme : defaultTheme;
-};
+}; // Returns the theme value for the requested key(s), falling back to the default theme if the
+// user-supplied theme doesn't exist or doesn't contain the requested key(s)
 
-// Returns the theme value for the requested key(s), falling back to the default theme if the
-// user-supplied theme doesn't exist or doesn't contain the requested key(s)
-var getThemeStyle = exports.getThemeStyle = function getThemeStyle(maybeTheme, key, parentKey) {
+
+exports.themeWithKeys = themeWithKeys;
+
+var getThemeStyle = function getThemeStyle(maybeTheme, key, parentKey) {
   var theme = themeWithKeys(maybeTheme, key, parentKey);
   return parentKey ? theme[parentKey][key] : theme[key];
-};
+};
+
+exports.getThemeStyle = getThemeStyle;

dist/esm/components/hoc/withItemClick.js

@@ -1,10 +0,10 @@
-import _defineProperty from 'babel-runtime/helpers/defineProperty';
-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";
 // We currently need to keep the dropdown open if an item with `href` is clicked, to avoid the
@@ -14,6 +14,4 @@ // analytics package to track the href value without the event target disappearing. Without this
 // and could get rid of this HOC and DropdownItemClickManager.
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import getDisplayName from '../../util/getDisplayName';
@@ -25,26 +23,37 @@ import safeContextCall from '../../util/safeContextCall';
 var withItemClick = function withItemClick(WrappedItem) {
-  var _class, _temp2;
+  var _class, _temp;
 
-  return _temp2 = _class = function (_Component) {
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_Component) {
     _inherits(WithItemClick, _Component);
 
     function WithItemClick() {
-      var _ref;
+      var _getPrototypeOf2;
 
-      var _temp, _this, _ret;
+      var _this;
 
       _classCallCheck(this, WithItemClick);
 
-      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 = WithItemClick.__proto__ || _Object$getPrototypeOf(WithItemClick)).call.apply(_ref, [this].concat(args))), _this), _this.callContextFn = safeContextCall(_this, clickManagerContext), _this.shouldCloseAfterClick = function () {
+      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(WithItemClick)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "callContextFn", safeContextCall(_assertThisInitialized(_assertThisInitialized(_this)), clickManagerContext));
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shouldCloseAfterClick", function () {
         return !_this.props.isDisabled && !_this.props.href;
-      }, _this.handleClick = function (event) {
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (event) {
         _this.props.onClick(event);
+
         if (_this.shouldCloseAfterClick()) {
           _this.callContextFn('itemClicked');
         }
-      }, _this.handleKeyDown = function (event) {
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (event) {
         if (_this.props.onKeyDown) {
@@ -55,20 +64,18 @@ _this.props.onKeyDown(event);
         }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
+      });
+
+      return _this;
     }
 
     _createClass(WithItemClick, [{
-      key: 'render',
+      key: "render",
       value: function render() {
-        var _props = this.props,
-            children = _props.children,
-            otherProps = _objectWithoutProperties(_props, ['children']);
+        var _this$props = this.props,
+            children = _this$props.children,
+            otherProps = _objectWithoutProperties(_this$props, ["children"]);
 
-        return React.createElement(
-          WrappedItem,
-          _extends({}, otherProps, {
-            onClick: this.handleClick,
-            onKeyDown: this.handleKeyDown
-          }),
-          children
-        );
+        return React.createElement(WrappedItem, _extends({}, otherProps, {
+          onClick: this.handleClick,
+          onKeyDown: this.handleKeyDown
+        }), children);
       }
@@ -78,7 +85,7 @@ }]);
     return WithItemClick;
-  }(Component), _class.displayName = 'WithItemClick(' + getDisplayName(WrappedItem) + ')', _class.defaultProps = {
+  }(Component), _defineProperty(_class, "displayName", "WithItemClick(".concat(getDisplayName(WrappedItem), ")")), _defineProperty(_class, "defaultProps", {
     onClick: function onClick() {}
-  }, _class.contextTypes = _defineProperty({}, clickManagerContext, PropTypes.object), _temp2;
+  }), _defineProperty(_class, "contextTypes", _defineProperty({}, clickManagerContext, PropTypes.object)), _temp;
 };
 
 export default withItemClick;

dist/esm/components/hoc/withItemFocus.js

@@ -1,9 +0,10 @@
-import _defineProperty from 'babel-runtime/helpers/defineProperty';
-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';
@@ -13,3 +14,2 @@ import PropTypes from 'prop-types';
 import uuid from 'uuid';
-
 import getDisplayName from '../../util/getDisplayName';
@@ -19,32 +19,42 @@ import safeContextCall from '../../util/safeContextCall';
 
-// HOC that typically wraps @atlaskit/item
-
 var withItemFocus = function withItemFocus(WrappedComponent) {
-  var _class, _temp2;
+  var _class, _temp;
 
-  return _temp2 = _class = function (_Component) {
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_Component) {
     _inherits(WithItemFocus, _Component);
 
     function WithItemFocus() {
-      var _ref;
+      var _getPrototypeOf2;
 
-      var _temp, _this, _ret;
+      var _this;
 
       _classCallCheck(this, WithItemFocus);
 
-      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 = WithItemFocus.__proto__ || _Object$getPrototypeOf(WithItemFocus)).call.apply(_ref, [this].concat(args))), _this), _this.callContextFn = safeContextCall(_this, focusManagerContext), _this.isFocusable = function () {
+      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(WithItemFocus)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "contextId", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "callContextFn", safeContextCall(_assertThisInitialized(_assertThisInitialized(_this)), focusManagerContext));
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isFocusable", function () {
         return !_this.props.isDisabled && !_this.props.isHidden;
-      }, _this.handleFocus = function () {
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleFocus", function () {
         if (_this.isFocusable()) {
           _this.callContextFn('itemFocused', _this.contextId);
         }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
+      });
+
+      return _this;
     }
 
     _createClass(WithItemFocus, [{
-      key: 'componentDidMount',
+      key: "componentDidMount",
       value: function componentDidMount() {
@@ -56,3 +66,2 @@ if (!this.isFocusable()) {
         this.contextId = uuid();
-
         this.callContextFn('registerItem', this.contextId, ReactDOM.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
@@ -62,3 +71,3 @@ );
     }, {
-      key: 'componentDidUpdate',
+      key: "componentDidUpdate",
       value: function componentDidUpdate() {
@@ -73,3 +82,3 @@ if (!this.isFocusable()) {
     }, {
-      key: 'componentWillUnmount',
+      key: "componentWillUnmount",
       value: function componentWillUnmount() {
@@ -81,16 +90,12 @@ if (this.isFocusable()) {
     }, {
-      key: 'render',
+      key: "render",
       value: function render() {
-        var _props = this.props,
-            children = _props.children,
-            otherProps = _objectWithoutProperties(_props, ['children']);
+        var _this$props = this.props,
+            children = _this$props.children,
+            otherProps = _objectWithoutProperties(_this$props, ["children"]);
 
-        return React.createElement(
-          WrappedComponent,
-          _extends({
-            onFocus: this.handleFocus,
-            role: 'menuitem'
-          }, otherProps),
-          children
-        );
+        return React.createElement(WrappedComponent, _extends({
+          onFocus: this.handleFocus,
+          role: "menuitem"
+        }, otherProps), children);
       }
@@ -100,5 +105,5 @@ }]);
     return WithItemFocus;
-  }(Component), _class.displayName = 'WithItemFocus(' + getDisplayName(WrappedComponent) + ')', _class.contextTypes = _defineProperty({}, focusManagerContext, PropTypes.object), _temp2;
+  }(Component), _defineProperty(_class, "displayName", "WithItemFocus(".concat(getDisplayName(WrappedComponent), ")")), _defineProperty(_class, "contextTypes", _defineProperty({}, focusManagerContext, PropTypes.object)), _temp;
 };
 
 export default withItemFocus;

dist/esm/components/Item.js

@@ -1,32 +0,41 @@
-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';
-
 import styledRootElement from '../styled/Item';
 import { Before, After, Content, ContentWrapper, Description } from '../styled/ItemParts';
 
-var Item = function (_Component) {
+var Item =
+/*#__PURE__*/
+function (_Component) {
   _inherits(Item, _Component);
 
+  // eslint-disable-next-line react/sort-comp
   function Item(props) {
+    var _this;
+
     _classCallCheck(this, Item);
 
-    // The type of element rendered at the root of render() can vary based on the `href`
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Item).call(this, props)); // The type of element rendered at the root of render() can vary based on the `href`
     // and `linkComponent` props provided. We generate this component here to avoid re-
     // generating the component inside render(). This is for performance reasons, and also
     // allows us to avoid generating a new `ref` for the root element each render().
-    var _this = _possibleConstructorReturn(this, (Item.__proto__ || _Object$getPrototypeOf(Item)).call(this, props));
 
-    _this.setRef = function (ref) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rootComponent", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "ref", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setRef", function (ref) {
       _this.ref = ref;
-    };
+    });
 
-    _this.href = function () {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "href", function () {
       return _this.props.isDisabled ? null : _this.props.href;
-    };
+    });
 
@@ -39,7 +48,5 @@ _this.rootComponent = styledRootElement({
   }
-  // eslint-disable-next-line react/sort-comp
 
-
   _createClass(Item, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
@@ -51,39 +58,27 @@ if (this.ref && this.props.autoFocus) {
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          onClick = _props.onClick,
-          onKeyDown = _props.onKeyDown,
-          isCompact = _props.isCompact,
-          isDisabled = _props.isDisabled,
-          isDragging = _props.isDragging,
-          isHidden = _props.isHidden,
-          isSelected = _props.isSelected,
-          onMouseEnter = _props.onMouseEnter,
-          onMouseLeave = _props.onMouseLeave,
-          role = _props.role,
-          dnd = _props.dnd,
-          otherProps = _objectWithoutProperties(_props, ['onClick', 'onKeyDown', 'isCompact', 'isDisabled', 'isDragging', 'isHidden', 'isSelected', 'onMouseEnter', 'onMouseLeave', 'role', 'dnd']);
+      var _this$props = this.props,
+          _onClick = _this$props.onClick,
+          _onKeyDown = _this$props.onKeyDown,
+          isCompact = _this$props.isCompact,
+          isDisabled = _this$props.isDisabled,
+          isDragging = _this$props.isDragging,
+          isHidden = _this$props.isHidden,
+          isSelected = _this$props.isSelected,
+          onMouseEnter = _this$props.onMouseEnter,
+          onMouseLeave = _this$props.onMouseLeave,
+          role = _this$props.role,
+          dnd = _this$props.dnd,
+          otherProps = _objectWithoutProperties(_this$props, ["onClick", "onKeyDown", "isCompact", "isDisabled", "isDragging", "isHidden", "isSelected", "onMouseEnter", "onMouseLeave", "role", "dnd"]);
 
       var Root = this.rootComponent;
-
       var dragHandleProps = dnd && dnd.dragHandleProps || null;
-
       var patchedEventHandlers = {
-        onClick: function (_onClick) {
-          function onClick(_x) {
-            return _onClick.apply(this, arguments);
-          }
-
-          onClick.toString = function () {
-            return _onClick.toString();
-          };
-
-          return onClick;
-        }(function (event) {
+        onClick: function onClick(event) {
           var original = function original() {
-            if (!isDisabled && onClick) {
-              onClick(event);
+            if (!isDisabled && _onClick) {
+              _onClick(event);
             }
@@ -95,9 +90,8 @@ };
             return;
-          }
-
-          // Drag and drop has its own disabled mechansim
+          } // Drag and drop has its own disabled mechansim
           // So not checking for isDisabled
-          dragHandleProps.onClick(event);
 
-          // if default is prevent - do not fire the onClick prop
+
+          dragHandleProps.onClick(event); // if default is prevent - do not fire the onClick prop
+
           if (event.defaultPrevented) {
@@ -108,25 +102,15 @@ return;
           original();
-        }),
+        },
         onMouseDown: function onMouseDown(event) {
           if (dragHandleProps && dragHandleProps.onMouseDown) {
             dragHandleProps.onMouseDown(event);
-          }
+          } // We want to prevent the item from getting focus when clicked
 
-          // We want to prevent the item from getting focus when clicked
+
           event.preventDefault();
         },
-        onKeyDown: function (_onKeyDown) {
-          function onKeyDown(_x2) {
-            return _onKeyDown.apply(this, arguments);
-          }
-
-          onKeyDown.toString = function () {
-            return _onKeyDown.toString();
-          };
-
-          return onKeyDown;
-        }(function (event) {
+        onKeyDown: function onKeyDown(event) {
           var original = function original() {
-            if (!isDisabled && onKeyDown) {
-              onKeyDown(event);
+            if (!isDisabled && _onKeyDown) {
+              _onKeyDown(event);
             }
@@ -140,10 +124,9 @@ };
 
-          dragHandleProps.onKeyDown(event);
+          dragHandleProps.onKeyDown(event); // if default is prevent - do not fire other handlers
 
-          // if default is prevent - do not fire other handlers
           if (event.defaultPrevented) {
             return;
-          }
+          } // not allowing keyboard events on the element while dragging
 
-          // not allowing keyboard events on the element while dragging
+
           if (isDragging) {
@@ -154,3 +137,3 @@ return;
           original();
-        })
+        }
       };
@@ -166,48 +149,27 @@
 
-      return React.createElement(
-        Root,
-        _extends({
-          'aria-disabled': isDisabled,
-          href: this.href(),
-          isCompact: isCompact,
-          isDisabled: isDisabled,
-          isDragging: isDragging,
-          isHidden: isHidden,
-          isSelected: isSelected,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          role: role,
-          tabIndex: isDisabled || isHidden || this.props.href ? null : 0,
-          target: this.props.target,
-          title: this.props.title,
-          innerRef: patchedInnerRef
-        }, dnd && dnd.draggableProps, dragHandleProps, patchedEventHandlers, otherProps),
-        !!this.props.elemBefore && React.createElement(
-          Before,
-          { isCompact: isCompact },
-          this.props.elemBefore
-        ),
-        React.createElement(
-          ContentWrapper,
-          null,
-          React.createElement(
-            Content,
-            { allowMultiline: this.props.shouldAllowMultiline },
-            this.props.children
-          ),
-          !!this.props.description && React.createElement(
-            Description,
-            {
-              isCompact: this.props.isCompact,
-              isDisabled: this.props.isDisabled
-            },
-            this.props.description
-          )
-        ),
-        !!this.props.elemAfter && React.createElement(
-          After,
-          { isCompact: isCompact },
-          this.props.elemAfter
-        )
-      );
+      return React.createElement(Root, _extends({
+        "aria-disabled": isDisabled,
+        href: this.href(),
+        isCompact: isCompact,
+        isDisabled: isDisabled,
+        isDragging: isDragging,
+        isHidden: isHidden,
+        isSelected: isSelected,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        role: role,
+        tabIndex: isDisabled || isHidden || this.props.href ? null : 0,
+        target: this.props.target,
+        title: this.props.title,
+        innerRef: patchedInnerRef
+      }, dnd && dnd.draggableProps, dragHandleProps, patchedEventHandlers, otherProps), !!this.props.elemBefore && React.createElement(Before, {
+        isCompact: isCompact
+      }, this.props.elemBefore), React.createElement(ContentWrapper, null, React.createElement(Content, {
+        allowMultiline: this.props.shouldAllowMultiline
+      }, this.props.children), !!this.props.description && React.createElement(Description, {
+        isCompact: this.props.isCompact,
+        isDisabled: this.props.isDisabled
+      }, this.props.description)), !!this.props.elemAfter && React.createElement(After, {
+        isCompact: isCompact
+      }, this.props.elemAfter));
     }
@@ -219,3 +181,3 @@ }]);
 
-Item.defaultProps = {
+_defineProperty(Item, "defaultProps", {
   autoFocus: false,
@@ -228,3 +190,4 @@ description: '',
   shouldAllowMultiline: false
-};
-export default Item;
+});
+
+export { Item as default };

dist/esm/components/ItemGroup.js

@@ -1,37 +0,50 @@
-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 _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import textContent from 'react-addons-text-content';
-
 import { GroupTitle, GroupTitleText, GroupTitleAfter } from '../styled/ItemGroup';
 
-var ItemGroup = function (_Component) {
+var ItemGroup =
+/*#__PURE__*/
+function (_Component) {
   _inherits(ItemGroup, _Component);
 
   function ItemGroup() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     _classCallCheck(this, ItemGroup);
 
-    return _possibleConstructorReturn(this, (ItemGroup.__proto__ || _Object$getPrototypeOf(ItemGroup)).apply(this, arguments));
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ItemGroup)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "headingAfterElement", void 0);
+
+    return _this;
   }
 
   _createClass(ItemGroup, [{
-    key: 'render',
+    key: "render",
     // eslint-disable-line react/sort-comp
-
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          children = _props.children,
-          elemAfter = _props.elemAfter,
-          isCompact = _props.isCompact,
-          title = _props.title,
-          label = _props.label,
-          innerRef = _props.innerRef,
-          role = _props.role;
+      var _this$props = this.props,
+          children = _this$props.children,
+          elemAfter = _this$props.elemAfter,
+          isCompact = _this$props.isCompact,
+          title = _this$props.title,
+          label = _this$props.label,
+          innerRef = _this$props.innerRef,
+          role = _this$props.role;
 
-
       var ariaLabel = function () {
@@ -41,30 +54,22 @@ if (label) {
         }
+
         if (title) {
           return textContent(title);
         }
+
         return '';
       }();
-      return React.createElement(
-        'div',
-        { 'aria-label': ariaLabel, role: role, ref: innerRef },
-        title ? React.createElement(
-          GroupTitle,
-          { 'aria-hidden': 'true', isCompact: isCompact },
-          React.createElement(
-            GroupTitleText,
-            null,
-            title
-          ),
-          elemAfter ? React.createElement(
-            GroupTitleAfter,
-            {
-              innerRef: function innerRef(r) {
-                _this2.headingAfterElement = r;
-              }
-            },
-            elemAfter
-          ) : null
-        ) : null,
-        children
-      );
+
+      return React.createElement("div", {
+        "aria-label": ariaLabel,
+        role: role,
+        ref: innerRef
+      }, title ? React.createElement(GroupTitle, {
+        "aria-hidden": "true",
+        isCompact: isCompact
+      }, React.createElement(GroupTitleText, null, title), elemAfter ? React.createElement(GroupTitleAfter, {
+        innerRef: function innerRef(r) {
+          _this2.headingAfterElement = r;
+        }
+      }, elemAfter) : null) : null, children);
     }
@@ -76,5 +81,6 @@ }]);
 
-ItemGroup.defaultProps = {
+_defineProperty(ItemGroup, "defaultProps", {
   role: 'group'
-};
-export default ItemGroup;
+});
+
+export { ItemGroup as default };

dist/esm/index.js

@@ -5,3 +5,2 @@ export { default } from './components/Item';
 export { default as withItemFocus } from './components/hoc/withItemFocus';
-
 export { themeNamespace as itemThemeNamespace } from './util/theme';

dist/esm/styled/Item.js

@@ -1,15 +0,1 @@
-import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
-
-var _templateObject = _taggedTemplateLiteral(['\n    background-color: ', ';\n    color: ', ';\n    fill: ', ';\n    text-decoration: none;\n\n    &:focus {\n      color: ', ';\n    }\n  '], ['\n    background-color: ', ';\n    color: ', ';\n    fill: ', ';\n    text-decoration: none;\n\n    &:focus {\n      color: ', ';\n    }\n  ']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  '], ['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  ']),
-    _templateObject3 = _taggedTemplateLiteral(['\n        height: ', 'px;\n      '], ['\n        height: ', 'px;\n      ']),
-    _templateObject4 = _taggedTemplateLiteral(['\n      ', ' box-shadow: 0 4px 8px -2px ', ',\n        0 0 1px ', ';\n    '], ['\n      ', ' box-shadow: 0 4px 8px -2px ', ',\n        0 0 1px ', ';\n    ']),
-    _templateObject5 = _taggedTemplateLiteral(['\n    &:focus {\n      box-shadow: 0 0 0 2px\n        ', ' inset;\n      text-decoration: none;\n    }\n  '], ['\n    &:focus {\n      box-shadow: 0 0 0 2px\n        ', ' inset;\n      text-decoration: none;\n    }\n  ']),
-    _templateObject6 = _taggedTemplateLiteral(['\n      cursor: not-allowed;\n      ', ' ', ';\n    '], ['\n      cursor: not-allowed;\n      ', ' ', ';\n    ']),
-    _templateObject7 = _taggedTemplateLiteral(['\n      ', ' &:hover {\n        ', ';\n      }\n\n      &:active {\n        ', ';\n      }\n\n      ', ';\n    '], ['\n      ', ' &:hover {\n        ', ';\n      }\n\n      &:active {\n        ', ';\n      }\n\n      ', ';\n    ']),
-    _templateObject8 = _taggedTemplateLiteral(['\n    &:hover {\n      ', ';\n    }\n\n    &:active {\n      ', ';\n    }\n\n    ', ';\n  '], ['\n    &:hover {\n      ', ';\n    }\n\n    &:active {\n      ', ';\n    }\n\n    ', ';\n  ']),
-    _templateObject9 = _taggedTemplateLiteral(['\n  && {\n    align-items: center;\n    border-radius: ', 'px;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: ', ';\n    flex: none;\n    ', ' ', ' ', ' ', ' &:focus {\n      /* focus shadow drawn by getInteractiveStyles */\n\n      outline: none;\n      /* relative position prevents bgcolor of a hovered element from\n      obfuscating focus ring of a focused sibling element */\n      position: relative;\n    }\n  }\n'], ['\n  && {\n    align-items: center;\n    border-radius: ', 'px;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: ', ';\n    flex: none;\n    ', ' ', ' ', ' ', ' &:focus {\n      /* focus shadow drawn by getInteractiveStyles */\n\n      outline: none;\n      /* relative position prevents bgcolor of a hovered element from\n      obfuscating focus ring of a focused sibling element */\n      position: relative;\n    }\n  }\n']),
-    _templateObject10 = _taggedTemplateLiteral(['\n      ', ';\n    '], ['\n      ', ';\n    ']),
-    _templateObject11 = _taggedTemplateLiteral(['\n    ', ';\n  '], ['\n    ', ';\n  ']);
-
 import styled, { css } from 'styled-components';
@@ -22,5 +8,4 @@ import { colors } from '@atlaskit/theme';
     var theme = _ref.theme;
-
     var stateStyles = getThemeStyle(theme[themeNamespace], stateName);
-    return css(_templateObject, stateStyles.background, stateStyles.text, stateStyles.background, stateStyles.text);
+    return css(["\n    background-color: ", ";\n    color: ", ";\n    fill: ", ";\n    text-decoration: none;\n\n    &:focus {\n      color: ", ";\n    }\n  "], stateStyles.background, stateStyles.text, stateStyles.background, stateStyles.text);
   };
@@ -33,3 +18,2 @@ };
       description = _ref2.description;
-
   var paddingKey = isCompact ? 'compact' : 'default';
@@ -39,19 +23,17 @@
       _getThemeStyle$bottom = _getThemeStyle.bottom,
-      bottom = _getThemeStyle$bottom === undefined ? 0 : _getThemeStyle$bottom,
+      bottom = _getThemeStyle$bottom === void 0 ? 0 : _getThemeStyle$bottom,
       _getThemeStyle$left = _getThemeStyle.left,
-      left = _getThemeStyle$left === undefined ? 0 : _getThemeStyle$left,
+      left = _getThemeStyle$left === void 0 ? 0 : _getThemeStyle$left,
       _getThemeStyle$right = _getThemeStyle.right,
-      right = _getThemeStyle$right === undefined ? 0 : _getThemeStyle$right,
+      right = _getThemeStyle$right === void 0 ? 0 : _getThemeStyle$right,
       _getThemeStyle$top = _getThemeStyle.top,
-      top = _getThemeStyle$top === undefined ? 0 : _getThemeStyle$top;
+      top = _getThemeStyle$top === void 0 ? 0 : _getThemeStyle$top;
 
   var adjustedTop = typeof top === 'function' ? top() : top;
-  var adjustedBottom = typeof bottom === 'function' ? bottom() : bottom;
+  var adjustedBottom = typeof bottom === 'function' ? bottom() : bottom; // Subtract the 1px padding-bottom added to the content and description elements
+  // to maintain original height
 
-  // Subtract the 1px padding-bottom added to the content and description elements
-  // to maintain original height
   adjustedTop = Math.max(description ? adjustedTop - 1 : adjustedTop, 0);
   adjustedBottom = Math.max(adjustedBottom - 1, 0);
-
-  return css(_templateObject2, adjustedTop, right, adjustedBottom, left);
+  return css(["\n    padding: ", "px ", "px ", "px ", "px;\n  "], adjustedTop, right, adjustedBottom, left);
 };
@@ -62,9 +44,8 @@
       theme = _ref3.theme;
-
   var heightKey = isCompact ? 'compact' : 'default';
   var height = getThemeStyle(theme[themeNamespace], heightKey, 'height');
-  return height ? css(_templateObject3, height) : '';
-};
+  return height ? css(["\n        height: ", "px;\n      "], height) : '';
+}; // This function is responsible for drawing any focus styles for the element
 
-// This function is responsible for drawing any focus styles for the element
+
 var getInteractiveStyles = function getInteractiveStyles(_ref4) {
@@ -77,30 +58,27 @@ var theme = _ref4.theme,
   if (isDragging) {
-    return css(_templateObject4, getItemState('dragging'), colors.N60A, colors.N60A);
+    return css(["\n      ", " box-shadow: 0 4px 8px -2px ", ",\n        0 0 1px ", ";\n    "], getItemState('dragging'), colors.N60A, colors.N60A);
   }
 
-  var standardFocus = css(_templateObject5, getThemeStyle(theme[themeNamespace], 'outline', 'focus'));
+  var standardFocus = css(["\n    &:focus {\n      box-shadow: 0 0 0 2px\n        ", " inset;\n      text-decoration: none;\n    }\n  "], getThemeStyle(theme[themeNamespace], 'outline', 'focus'));
 
   if (isDisabled) {
-    return css(_templateObject6, getItemState('disabled'), standardFocus);
+    return css(["\n      cursor: not-allowed;\n      ", " ", ";\n    "], getItemState('disabled'), standardFocus);
   }
 
   if (isSelected) {
-    return css(_templateObject7, getItemState('selected'), getItemState('hover'), getItemState('active'), standardFocus);
+    return css(["\n      ", " &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", ";\n      }\n\n      ", ";\n    "], getItemState('selected'), getItemState('hover'), getItemState('active'), standardFocus);
   }
 
-  return css(_templateObject8, getItemState('hover'), getItemState('active'), standardFocus);
-};
-
-// This is the main item style. It is defined as a basic style variable so it can
+  return css(["\n    &:hover {\n      ", ";\n    }\n\n    &:active {\n      ", ";\n    }\n\n    ", ";\n  "], getItemState('hover'), getItemState('active'), standardFocus);
+}; // This is the main item style. It is defined as a basic style variable so it can
 // later be applied to different component types (span / a / custom link component)
 
+
 export var ItemBase = function ItemBase(_ref5) {
   var theme = _ref5.theme;
-  return css(_templateObject9, getThemeStyle(theme[themeNamespace], 'borderRadius'), function (_ref6) {
+  return css(["\n  && {\n    align-items: center;\n    border-radius: ", "px;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: ", ";\n    flex: none;\n    ", " ", " ", " ", " &:focus {\n      /* focus shadow drawn by getInteractiveStyles */\n\n      outline: none;\n      /* relative position prevents bgcolor of a hovered element from\n      obfuscating focus ring of a focused sibling element */\n      position: relative;\n    }\n  }\n"], getThemeStyle(theme[themeNamespace], 'borderRadius'), function (_ref6) {
     var isHidden = _ref6.isHidden;
     return isHidden ? 'none' : 'flex';
   }, getItemState('default'), getPadding, getInteractiveStyles, getHeightStyles);
-};
-
-// Given some optional link-related props, returns the relevant styled
+}; // Given some optional link-related props, returns the relevant styled
 // component. For links, it styles the linkComponent if provided, otherwise
@@ -110,2 +88,3 @@ // falling back to a styled <a> tag. If no href is present, a styled <span>
 // simplify this by taking advantage of the withComponent() functionality.
+
 var styledRootElement = function styledRootElement(_ref7) {
@@ -116,10 +95,21 @@ var href = _ref7.href,
   if (linkComponent) {
-    return styled(linkComponent)(_templateObject10, ItemBase);
+    return styled(linkComponent).withConfig({
+      displayName: "Item",
+      componentId: "z6qfkt-0"
+    })(["\n      ", ";\n    "], ItemBase);
   }
+
   if (href) {
-    return styled.a(_templateObject10, ItemBase);
+    return styled.a.withConfig({
+      displayName: "Item",
+      componentId: "z6qfkt-1"
+    })(["\n      ", ";\n    "], ItemBase);
   }
-  return styled.span(_templateObject11, ItemBase);
+
+  return styled.span.withConfig({
+    displayName: "Item",
+    componentId: "z6qfkt-2"
+  })(["\n    ", ";\n  "], ItemBase);
 };
 
 export default styledRootElement;

dist/esm/styled/ItemGroup.js

@@ -1,8 +0,1 @@
-import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
-
-var _templateObject = _taggedTemplateLiteral(['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  '], ['\n    padding: ', 'px ', 'px ', 'px ', 'px;\n  ']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  align-items: center;\n  color: ', ';\n  display: flex;\n  flex: 1 1 auto;\n  ', ';\n'], ['\n  align-items: center;\n  color: ', ';\n  display: flex;\n  flex: 1 1 auto;\n  ', ';\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  flex: 0 0 auto;\n  margin-right: -', 'px;\n'], ['\n  flex: 0 0 auto;\n  margin-right: -', 'px;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  flex: 1 1 auto;\n  font-size: ', 'px;\n  line-height: 1;\n  text-transform: uppercase;\n  /* Required for children to truncate */\n  min-width: 0;\n'], ['\n  flex: 1 1 auto;\n  font-size: ', 'px;\n  line-height: 1;\n  text-transform: uppercase;\n  /* Required for children to truncate */\n  min-width: 0;\n']);
-
 import styled, { css } from 'styled-components';
@@ -14,3 +7,2 @@ import { getThemeStyle, gridSize, smallFontSize, themeNamespace } from '../util/theme';
       theme = _ref.theme;
-
   var paddingType = isCompact ? 'compact' : 'default';
@@ -20,15 +12,18 @@
       _getThemeStyle$bottom = _getThemeStyle.bottom,
-      bottom = _getThemeStyle$bottom === undefined ? 0 : _getThemeStyle$bottom,
+      bottom = _getThemeStyle$bottom === void 0 ? 0 : _getThemeStyle$bottom,
       _getThemeStyle$left = _getThemeStyle.left,
-      left = _getThemeStyle$left === undefined ? 0 : _getThemeStyle$left,
+      left = _getThemeStyle$left === void 0 ? 0 : _getThemeStyle$left,
       _getThemeStyle$right = _getThemeStyle.right,
-      right = _getThemeStyle$right === undefined ? 0 : _getThemeStyle$right,
+      right = _getThemeStyle$right === void 0 ? 0 : _getThemeStyle$right,
       _getThemeStyle$top = _getThemeStyle.top,
-      top = _getThemeStyle$top === undefined ? 0 : _getThemeStyle$top;
+      top = _getThemeStyle$top === void 0 ? 0 : _getThemeStyle$top;
 
-  return css(_templateObject, top, right, bottom, left);
-};
+  return css(["\n    padding: ", "px ", "px ", "px ", "px;\n  "], top, right, bottom, left);
+}; // eslint-disable-next-line import/prefer-default-export
 
-// eslint-disable-next-line import/prefer-default-export
-var GroupTitle = styled.div(_templateObject2, function (_ref2) {
+
+var GroupTitle = styled.div.withConfig({
+  displayName: "ItemGroup__GroupTitle",
+  componentId: "ofbfv9-0"
+})(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex: 1 1 auto;\n  ", ";\n"], function (_ref2) {
   var theme = _ref2.theme;
@@ -38,9 +33,12 @@ return getThemeStyle(theme[themeNamespace], 'secondaryText', 'default');
 GroupTitle.displayName = 'ItemGroupTitle';
-
-var GroupTitleAfter = styled.div(_templateObject3, gridSize / 2);
+var GroupTitleAfter = styled.div.withConfig({
+  displayName: "ItemGroup__GroupTitleAfter",
+  componentId: "ofbfv9-1"
+})(["\n  flex: 0 0 auto;\n  margin-right: -", "px;\n"], gridSize / 2);
 GroupTitleAfter.displayName = 'ItemGroupTitleAfter';
-
-var GroupTitleText = styled.div(_templateObject4, smallFontSize);
+var GroupTitleText = styled.div.withConfig({
+  displayName: "ItemGroup__GroupTitleText",
+  componentId: "ofbfv9-2"
+})(["\n  flex: 1 1 auto;\n  font-size: ", "px;\n  line-height: 1;\n  text-transform: uppercase;\n  /* Required for children to truncate */\n  min-width: 0;\n"], smallFontSize);
 GroupTitleText.displayName = 'ItemGroupTitleText';
-
 export { GroupTitle, GroupTitleAfter, GroupTitleText };

dist/esm/styled/ItemParts.js

@@ -1,25 +0,14 @@
-import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
-
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  margin: 0 2px;\n'], ['\n  display: flex;\n  margin: 0 2px;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n'], ['\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n    margin-right: ', 'px;\n  '], ['\n    margin-right: ', 'px;\n  ']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  ', ';\n'], ['\n  ', ';\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n    margin-left: ', 'px;\n  '], ['\n    margin-left: ', 'px;\n  ']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin: 0;\n  overflow: hidden;\n\n  &:first-child {\n    margin: 0;\n  }\n'], ['\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin: 0;\n  overflow: hidden;\n\n  &:first-child {\n    margin: 0;\n  }\n']),
-    _templateObject7 = _taggedTemplateLiteral(['\n  display: block;\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: ', ';\n  line-height: ', ';\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n'], ['\n  display: block;\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: ', ';\n  line-height: ', ';\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n']),
-    _templateObject8 = _taggedTemplateLiteral(['\n      color: ', ';\n    '], ['\n      color: ', ';\n    ']),
-    _templateObject9 = _taggedTemplateLiteral(['\n    color: ', ';\n\n    /* This detects hover on the grandparent. Saves us having to maintain isHovered\n       state in the grandparent. */\n    *:hover > * > & {\n      color: ', ';\n    }\n\n    *:active > * > & {\n      color: ', ';\n    }\n  '], ['\n    color: ', ';\n\n    /* This detects hover on the grandparent. Saves us having to maintain isHovered\n       state in the grandparent. */\n    *:hover > * > & {\n      color: ', ';\n    }\n\n    *:active > * > & {\n      color: ', ';\n    }\n  ']),
-    _templateObject10 = _taggedTemplateLiteral(['\n    font-size: ', 'px;\n    line-height: ', ';\n    /* Fix windows line-height issue */\n    padding-bottom: 1px;\n  '], ['\n    font-size: ', 'px;\n    line-height: ', ';\n    /* Fix windows line-height issue */\n    padding-bottom: 1px;\n  ']),
-    _templateObject11 = _taggedTemplateLiteral(['\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ', ' ', ';\n'], ['\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ', ' ', ';\n']);
-
-import 'react';
 import styled, { css } from 'styled-components';
 import { fontSize } from '@atlaskit/theme';
-import { getThemeStyle, themeNamespace, smallFontSize, compactSmallFontSize, compactLineHeight } from '../util/theme';
+import { getThemeStyle, themeNamespace, smallFontSize, compactSmallFontSize, compactLineHeight } from '../util/theme'; // Checkbox/Radio wrapper -- sits left of the children
 
-// Checkbox/Radio wrapper -- sits left of the children
-export var InputWrapper = styled.span(_templateObject);
+export var InputWrapper = styled.span.withConfig({
+  displayName: "ItemParts__InputWrapper",
+  componentId: "sc-14xek3m-0"
+})(["\n  display: flex;\n  margin: 0 2px;\n"]); // Elements injected before/after the children
 
-// Elements injected before/after the children
-var BeforeAfterBase = styled.span(_templateObject2);
+var BeforeAfterBase = styled.span.withConfig({
+  displayName: "ItemParts__BeforeAfterBase",
+  componentId: "sc-14xek3m-1"
+})(["\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n"]);
 
@@ -29,23 +18,33 @@ var getBeforeSpacing = function getBeforeSpacing(_ref) {
       theme = _ref.theme;
-
   var spaceKey = isCompact ? 'compact' : 'default';
   var space = getThemeStyle(theme[themeNamespace], spaceKey, 'beforeItemSpacing');
-  return css(_templateObject3, space);
+  return css(["\n    margin-right: ", "px;\n  "], space);
 };
-export var Before = styled(BeforeAfterBase)(_templateObject4, getBeforeSpacing);
 
+export var Before = styled(BeforeAfterBase).withConfig({
+  displayName: "ItemParts__Before",
+  componentId: "sc-14xek3m-2"
+})(["\n  ", ";\n"], getBeforeSpacing);
+
 var getAfterSpacing = function getAfterSpacing(_ref2) {
   var isCompact = _ref2.isCompact,
       theme = _ref2.theme;
-
   var spaceKey = isCompact ? 'compact' : 'default';
   var space = getThemeStyle(theme[themeNamespace], spaceKey, 'afterItemSpacing');
-  return css(_templateObject5, space);
+  return css(["\n    margin-left: ", "px;\n  "], space);
 };
-export var After = styled(BeforeAfterBase)(_templateObject4, getAfterSpacing);
 
-// Alignment and layout for the children
-export var ContentWrapper = styled.span(_templateObject6);
+export var After = styled(BeforeAfterBase).withConfig({
+  displayName: "ItemParts__After",
+  componentId: "sc-14xek3m-3"
+})(["\n  ", ";\n"], getAfterSpacing); // Alignment and layout for the children
 
-export var Content = styled.span(_templateObject7, function (_ref3) {
+export var ContentWrapper = styled.span.withConfig({
+  displayName: "ItemParts__ContentWrapper",
+  componentId: "sc-14xek3m-4"
+})(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin: 0;\n  overflow: hidden;\n\n  &:first-child {\n    margin: 0;\n  }\n"]);
+export var Content = styled.span.withConfig({
+  displayName: "ItemParts__Content",
+  componentId: "sc-14xek3m-5"
+})(["\n  display: block;\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: ", ";\n  line-height: ", ";\n  /* Fix windows line-height issue */\n  padding-bottom: 1px;\n"], function (_ref3) {
   var allowMultiline = _ref3.allowMultiline;
@@ -60,6 +59,6 @@ return allowMultiline ? 'normal' : 'nowrap';
   if (isDisabled) {
-    return css(_templateObject8, getThemeStyle(theme[themeNamespace], 'secondaryText', 'disabled'));
+    return css(["\n      color: ", ";\n    "], getThemeStyle(theme[themeNamespace], 'secondaryText', 'disabled'));
   }
 
-  return css(_templateObject9, getThemeStyle(theme[themeNamespace], 'secondaryText', 'default'), function () {
+  return css(["\n    color: ", ";\n\n    /* This detects hover on the grandparent. Saves us having to maintain isHovered\n       state in the grandparent. */\n    *:hover > * > & {\n      color: ", ";\n    }\n\n    *:active > * > & {\n      color: ", ";\n    }\n  "], getThemeStyle(theme[themeNamespace], 'secondaryText', 'default'), function () {
     return getThemeStyle(theme[themeNamespace], 'secondaryText', 'hover');
@@ -73,9 +72,11 @@ }, function () {
   var isCompact = _ref5.isCompact;
-
   var descriptionFontSize = isCompact ? compactSmallFontSize : smallFontSize;
   var lineHeight = isCompact ? compactLineHeight : 14 / descriptionFontSize;
-  return css(_templateObject10, descriptionFontSize, lineHeight);
-};
+  return css(["\n    font-size: ", "px;\n    line-height: ", ";\n    /* Fix windows line-height issue */\n    padding-bottom: 1px;\n  "], descriptionFontSize, lineHeight);
+}; // Description is a block element below the children, like a subtitle
 
-// Description is a block element below the children, like a subtitle
-export var Description = styled.span(_templateObject11, getColorStyle, getDescriptionFontStyles);
+
+export var Description = styled.span.withConfig({
+  displayName: "ItemParts__Description",
+  componentId: "sc-14xek3m-6"
+})(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", " ", ";\n"], getColorStyle, getDescriptionFontStyles);

dist/esm/util/contextNamespace.js

 var prefix = function prefix(key) {
-  return '@atlaskit-private-do-not-use/dropdown-menu:' + key;
+  return "@atlaskit-private-do-not-use/dropdown-menu:".concat(key);
 };
@@ -4,0 +4,0 @@

dist/esm/util/getDisplayName.js

@@ -1,4 +0,2 @@
-
 // from https://facebook.github.io/react/docs/higher-order-components.html
-
 var getDisplayName = function getDisplayName(WrappedComponent) {
@@ -5,0 +3,0 @@ return WrappedComponent.displayName || WrappedComponent.name || 'Component';

dist/esm/util/safeContextCall.js

@@ -1,2 +0,1 @@
-
 // There are cases where the context is not available, such as when a dropdown item is used
@@ -9,6 +8,2 @@ // inside @atlaskit/navigation. For this reason we have this helper function which safely calls
 
-    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
     if (!instance.context[contextKey]) {
@@ -18,4 +13,8 @@ return null;
 
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
     return (_instance$context$con = instance.context[contextKey])[fnToCall].apply(_instance$context$con, args);
   };
 });

dist/esm/util/theme.js

 import { colors, gridSize as akGridSize, borderRadius } from '@atlaskit/theme';
+export var themeNamespace = '@atlaskit-shared-theme/item'; // Used for Group titles and Item descriptions
 
-export var themeNamespace = '@atlaskit-shared-theme/item';
-
-// Used for Group titles and Item descriptions
 export var smallFontSize = 12;
@@ -10,3 +8,2 @@ export var compactSmallFontSize = 10;
 export var gridSize = akGridSize();
-
 export var defaultTheme = {
@@ -78,6 +75,6 @@ afterItemSpacing: {
   return value !== undefined && value !== null && value !== '';
-};
+}; // Returns the theme that contains the requested theme key(s), preferring the user-supplied
+// theme if it is provided.
 
-// Returns the theme that contains the requested theme key(s), preferring the user-supplied
-// theme if it is provided.
+
 export var themeWithKeys = function themeWithKeys(maybeTheme, key, parentKey) {
@@ -87,7 +84,7 @@ if (parentKey) {
   }
+
   return maybeTheme && isValidCssValue(maybeTheme[key]) ? maybeTheme : defaultTheme;
-};
+}; // Returns the theme value for the requested key(s), falling back to the default theme if the
+// user-supplied theme doesn't exist or doesn't contain the requested key(s)
 
-// Returns the theme value for the requested key(s), falling back to the default theme if the
-// user-supplied theme doesn't exist or doesn't contain the requested key(s)
 export var getThemeStyle = function getThemeStyle(maybeTheme, key, parentKey) {
@@ -94,0 +91,0 @@ var theme = themeWithKeys(maybeTheme, key, parentKey);

dist/package.json

 {
 	"name": "@atlaskit/item",
-	"version": "8.0.9",
+	"version": "8.0.10",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/item",
-  "version": "8.0.9",
+  "version": "8.0.10",
   "description": "A generic item component to be used within other components",
@@ -21,3 +21,4 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@atlaskit/theme": "^6.0.2",
+    "@atlaskit/theme": "^6.1.1",
+    "@babel/runtime": "^7.0.0",
     "prop-types": "^15.5.10",
@@ -33,8 +34,8 @@ "react-addons-text-content": "^0.0.4",
   "devDependencies": {
-    "@atlaskit/avatar": "^14.0.11",
+    "@atlaskit/avatar": "^14.1.2",
     "@atlaskit/build-utils": "^2.0.0",
     "@atlaskit/docs": "^5.0.8",
-    "@atlaskit/icon": "^14.0.0",
-    "@atlaskit/lozenge": "^6.1.7",
-    "@atlaskit/tooltip": "^12.1.1",
+    "@atlaskit/icon": "^14.0.2",
+    "@atlaskit/lozenge": "^6.2.2",
+    "@atlaskit/tooltip": "^12.1.4",
     "enzyme": "https://registry.npmjs.org/@pgleeson/enzyme/-/enzyme-3.3.7.tgz",
@@ -55,2 +56,2 @@ "polished": "1.5.0",
   ]
-}
+}

No alert changes

Worsened metrics

Total package byte prevSize

142248

decreased by-3.92%

Dependency count

8

increased by14.29%

Lines of code

1471

decreased by-5.64%

Dependency changes

• + Added@babel/runtime@^7.0.0

• Updated@atlaskit/theme@^6.1.1