@atlaskit/user-picker 10.12.4 → 10.12.6

package/dist/cjs/components/PopupControl.js

@@ -11,38 +11,30 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireDefault(require("react"));
-var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _select = require("@atlaskit/select");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var spacing = (0, _constants.gridSize)();
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var spacing = 8;
 var fontSize = 12;
 var innerHeight = spacing * 2; // 16px
 var lineHeight = innerHeight / fontSize;
 var controlWrapper = (0, _react2.css)({
   display: 'flex',
   flexDirection: 'column',
-  padding: "0px ".concat(spacing, "px ").concat(spacing, "px")
-});
-var getColor = (0, _components.themed)({
-  light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  dark: "var(--ds-text-subtlest, ".concat(_colors.DN90, ")")
+  padding: "0px ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)")
 });
 var getLabelStyle = function getLabelStyle() {
-  var right = 0;
-  var bottom = spacing / 2;
-  var left = 0;
-  var top = spacing * 2.5;
-  var color = getColor();
   return (0, _react2.css)({
-    color: color,
+    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
     fontSize: "".concat(fontSize, "px"),
     fontWeight: 600,
     lineHeight: "".concat(lineHeight),
-    padding: "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px")
+    paddingBottom: "var(--ds-space-050, 4px)",
+    paddingLeft: "var(--ds-space-0, 0px)",
+    paddingRight: "var(--ds-space-0, 0px)",
+    paddingTop: "var(--ds-space-250, 20px)"
   });
 };
 var PopupControl = exports.PopupControl = /*#__PURE__*/function (_React$PureComponent) {
@@ -56,11 +48,11 @@ var PopupControl = exports.PopupControl = /*#__PURE__*/function (_React$PureComp
     key: "render",
     value: function render() {
       var popupTitle = this.props.selectProps.popupTitle;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         css: controlWrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         css: getLabelStyle()
-      }, popupTitle), /*#__PURE__*/_react.default.createElement(_select.components.Control, this.props));
+      }, popupTitle), (0, _react2.jsx)(_select.components.Control, this.props));
     }
   }]);
   return PopupControl;

package/dist/cjs/components/SingleValue.js

@@ -13,6 +13,7 @@ var _select = require("@atlaskit/select");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 var _excluded = ["ref"];
+/** @jsx jsx */
 var avatarItemComponent = (0, _react.css)({
   border: 'none !important',
   padding: '0 !important',
@@ -35,9 +36,9 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     _props$selectProps = props.selectProps,
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
-  return !isFocused ? /*#__PURE__*/React.createElement(_select.components.SingleValue, props, /*#__PURE__*/React.createElement(_avatar.AvatarItem, {
+  return !isFocused ? (0, _react.jsx)(_select.components.SingleValue, props, (0, _react.jsx)(_avatar.AvatarItem, {
     backgroundColor: "transparent",
-    avatar: /*#__PURE__*/React.createElement(_SizeableAvatar.SizeableAvatar, {
+    avatar: (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
       src: (0, _utils.getAvatarUrl)(data),
       appearance: appearance,
       name: label
@@ -46,7 +47,7 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
   }, function (_ref) {
     var ref = _ref.ref,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    return (0, _react.jsx)("div", (0, _extends2.default)({
       css: avatarItemComponent
     }, props));
   })) : null;

package/dist/cjs/components/SingleValueContainer.js

@@ -20,7 +20,7 @@ var _SizeableAvatar = require("./SizeableAvatar");
 var _styles = require("./styles");
 var _excluded = ["children"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var placeholderIconContainer = (0, _react2.css)({
   paddingLeft: "".concat(_styles.BORDER_PADDING, "px"),
   lineHeight: 0,
@@ -48,7 +48,7 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
         inputValue = _this$props$selectPro.inputValue,
         value = _this$props$selectPro.value;
       if (isFocused || !hasValue) {
-        return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+        return (0, _react2.jsx)(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
@@ -63,7 +63,7 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
       var _this$props2 = this.props,
         children = _this$props2.children,
         valueContainerProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, valueContainerProps, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _react2.jsx)("div", {
         css: placeholderIconContainer
       }, this.renderAvatar()), children);
     }

package/dist/cjs/components/TeamOption/main.js

@@ -14,14 +14,15 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _colors = require("@atlaskit/theme/colors");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _HighlightText = require("../HighlightText");
 var _i18n = require("../i18n");
 var _SizeableAvatar = require("../SizeableAvatar");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(TeamOption, _React$PureComponent);
   var _super = _createSuper(TeamOption);
@@ -36,10 +37,10 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       var _this$props$team = _this.props.team,
         name = _this$props$team.name,
         highlight = _this$props$team.highlight;
-      return [/*#__PURE__*/_react.default.createElement("span", {
+      return [(0, _react.jsx)("span", {
         key: "name",
         css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text, ".concat(_colors.N800, ")"))
-      }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+      }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
@@ -56,9 +57,9 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -66,9 +67,9 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -78,7 +79,7 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _react.jsx)("span", {
         css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
         "data-testid": "user-picker-team-secondary-text"
       }, message);
@@ -87,7 +88,7 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       var _this$props$team3 = _this.props.team,
         avatarUrl = _this$props$team3.avatarUrl,
         name = _this$props$team3.name;
-      return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+      return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         name: name
@@ -103,7 +104,7 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       if (!((_this$props$team4 = _this.props.team) !== null && _this$props$team4 !== void 0 && _this$props$team4.byline)) {
         return undefined;
       }
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _react.jsx)("span", {
         css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
       }, _this.props.team.byline);
     });
@@ -112,7 +113,7 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
   (0, _createClass2.default)(TeamOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return (0, _react.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         isDisabled: this.props.team.isDisabled,
         lozenge: this.getLozengeProps(),
@@ -122,4 +123,4 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
     }
   }]);
   return TeamOption;
-}(_react.default.PureComponent);
+}(_react2.default.PureComponent);

package/dist/cjs/components/UserOption.js

@@ -13,13 +13,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _colors = require("@atlaskit/theme/colors");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _AvatarItemOption = require("./AvatarItemOption");
 var _HighlightText = require("./HighlightText");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(UserOption, _React$PureComponent);
   var _super = _createSuper(UserOption);
@@ -35,25 +36,25 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         name = _this$props$user.name,
         publicName = _this$props$user.publicName,
         highlight = _this$props$user.highlight;
-      var result = [/*#__PURE__*/_react.default.createElement("span", {
+      var result = [(0, _react.jsx)("span", {
         key: "name",
         css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text, ".concat(_colors.N800, ")"))
-      }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+      }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
       if ((0, _utils.hasValue)(publicName) && name.trim() !== publicName.trim()) {
-        result.push( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        result.push((0, _react.jsx)(_react2.default.Fragment, {
           key: "publicName"
-        }, ' ', /*#__PURE__*/_react.default.createElement("span", {
+        }, ' ', (0, _react.jsx)("span", {
           css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
-        }, "(", /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+        }, "(", (0, _react.jsx)(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
       }
       return result;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
-      return _this.props.user.byline ? /*#__PURE__*/_react.default.createElement("span", {
+      return _this.props.user.byline ? (0, _react.jsx)("span", {
         css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
       }, _this.props.user.byline) : undefined;
     });
@@ -63,7 +64,7 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         avatarUrl = _this$props$user2.avatarUrl,
         name = _this$props$user2.name,
         status = _this$props.status;
-      return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+      return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         presence: status,
@@ -80,7 +81,7 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
   (0, _createClass2.default)(UserOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return (0, _react.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         lozenge: this.getLozengeProps(),
         isDisabled: this.props.user.isDisabled,
@@ -90,4 +91,4 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
     }
   }]);
   return UserOption;
-}(_react.default.PureComponent);
+}(_react2.default.PureComponent);

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "10.12.4";
+const packageVersion = "10.12.6";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/AddOptionAvatar.js

@@ -1,7 +1,8 @@
+/** @jsx jsx */
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 const getEmailAvatarWrapperStyle = isLozenge => {
   const padding = isLozenge ? 0 : 4;
   return css({
@@ -16,9 +17,9 @@ export const AddOptionAvatar = ({
   isLozenge,
   label
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: getEmailAvatarWrapperStyle(isLozenge)
-  }, /*#__PURE__*/React.createElement(EmailIcon, {
+  }, jsx(EmailIcon, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
     primaryColor: `var(--ds-text-subtle, ${N500})`

package/dist/es2019/components/AvatarItemOption.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { isLozengeText } from './utils';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
@@ -58,25 +59,25 @@ export const AvatarItemOption = ({
       if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
         // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
         // Lozenge text) or tooltip won't work
-        return /*#__PURE__*/React.createElement(React.Suspense, {
-          fallback: /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)
-        }, /*#__PURE__*/React.createElement(AsyncTooltip, {
+        return jsx(React.Suspense, {
+          fallback: jsx(Lozenge, lozenge, lozenge.text)
+        }, jsx(AsyncTooltip, {
           content: lozenge.tooltip
-        }, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)));
+        }, jsx(Lozenge, lozenge, lozenge.text)));
       }
-      return /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text);
+      return jsx(Lozenge, lozenge, lozenge.text);
     }
     return lozenge;
   };
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: wrapper(isDisabled)
-  }, avatar, /*#__PURE__*/React.createElement("div", {
+  }, avatar, jsx("div", {
     css: optionWrapper
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", null, jsx("div", {
     css: getTextStyle()
-  }, primaryText), secondaryText && /*#__PURE__*/React.createElement("div", {
+  }, primaryText), secondaryText && jsx("div", {
     css: getTextStyle(true)
-  }, secondaryText))), lozenge && /*#__PURE__*/React.createElement("div", {
+  }, secondaryText))), lozenge && jsx("div", {
     css: additionalInfo
   }, renderLozenge()));
 };

package/dist/es2019/components/CustomOption/main.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { HighlightText } from '../HighlightText';
@@ -14,14 +16,14 @@ export class CustomOption extends React.PureComponent {
           highlight
         }
       } = this.props;
-      return [/*#__PURE__*/React.createElement("span", {
+      return [jsx("span", {
         key: "name",
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
-      }, /*#__PURE__*/React.createElement(HighlightText, {
+      }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
-    _defineProperty(this, "getBylineComponent", (isSelected, message) => /*#__PURE__*/React.createElement("span", {
+    _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
       css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
       "data-testid": "user-picker-custom-secondary-text"
     }, message));
@@ -39,7 +41,7 @@ export class CustomOption extends React.PureComponent {
           name
         }
       } = this.props;
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         name: name
@@ -50,7 +52,7 @@ export class CustomOption extends React.PureComponent {
     } : this.props.data.lozenge);
   }
   render() {
-    return /*#__PURE__*/React.createElement(AvatarItemOption, {
+    return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
       isDisabled: this.props.data.isDisabled,
       lozenge: this.getLozengeProps(),

package/dist/es2019/components/EmailOption/main.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
+import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
@@ -18,19 +20,19 @@ export class EmailOption extends React.PureComponent {
           id
         }
       } = this.props;
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         key: "name",
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, id);
     });
     _defineProperty(this, "renderSecondaryText", label => {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
         "data-testid": "user-picker-email-secondary-text"
       }, label);
     });
-    _defineProperty(this, "renderOption", label => /*#__PURE__*/React.createElement(AvatarItemOption, {
-      avatar: /*#__PURE__*/React.createElement(AddOptionAvatar, {
+    _defineProperty(this, "renderOption", label => jsx(AvatarItemOption, {
+      avatar: jsx(AddOptionAvatar, {
         label: label
       }),
       lozenge: this.getLozengeProps(),
@@ -44,6 +46,6 @@ export class EmailOption extends React.PureComponent {
       label,
       emailValidity
     } = this.props;
-    return label !== undefined ? this.renderOption(label) : /*#__PURE__*/React.createElement(FormattedMessage, getAddEmailMessage(emailValidity), label => this.renderOption(label));
+    return label !== undefined ? this.renderOption(label) : jsx(FormattedMessage, getAddEmailMessage(emailValidity), label => this.renderOption(label));
   }
 }

package/dist/es2019/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -1,4 +1,6 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 const outerWrapper = isDisabled => css({
   alignItems: 'center',
@@ -49,14 +51,14 @@ export const ExternalAvatarItemOption = ({
   primaryText,
   secondaryText,
   sourcesInfoTooltip
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: outerWrapper(isDisabled)
-}, avatar, /*#__PURE__*/React.createElement("div", {
+}, avatar, jsx("div", {
   css: detailsWrapper
-}, /*#__PURE__*/React.createElement("div", {
+}, jsx("div", {
   css: textSection
-}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+}, jsx("div", null, jsx("div", {
   css: getTextStyle()
-}, primaryText)), secondaryText && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+}, primaryText)), secondaryText && jsx("div", null, jsx("div", {
   css: getTextStyle(true)
-}, secondaryText))), /*#__PURE__*/React.createElement("div", null, sourcesInfoTooltip)));
+}, secondaryText))), jsx("div", null, sourcesInfoTooltip)));

package/dist/es2019/components/ExternalUserOption/InfoIcon.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import { N50, N200 } from '@atlaskit/theme/colors';
 const wrapper = css({
@@ -9,11 +10,11 @@ export default (() => {
   const [isMouseHovered, setHoverState] = useState(false);
   const onMouseEnter = useCallback(() => setHoverState(true), [setHoverState]);
   const onMouseLeave = useCallback(() => setHoverState(false), [setHoverState]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: wrapper,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
+  }, jsx(EditorPanelIcon, {
     testId: "source-icon",
     label: "",
     size: "large",

package/dist/es2019/components/ExternalUserOption/SourcesTooltipContent.js

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import Spinner from '@atlaskit/spinner/spinner';
 import { SlackIcon } from '../assets/slack';
@@ -20,37 +21,37 @@ export const sourceWrapper = css({
 });
 const SUPPORTED_SOURCES = [{
   sourceType: 'jira',
-  icon: /*#__PURE__*/React.createElement(JiraIcon, {
+  icon: jsx(JiraIcon, {
     size: 'xsmall'
   }),
   label: messages.jiraSource
 }, {
   sourceType: 'confluence',
-  icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
+  icon: jsx(ConfluenceIcon, {
     size: 'xsmall'
   }),
   label: messages.confluenceSource
 }, {
   sourceType: 'other-atlassian',
-  icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
+  icon: jsx(AtlassianIcon, {
     size: 'xsmall'
   }),
   label: messages.otherAtlassianSource
 }, {
   sourceType: 'slack',
-  icon: /*#__PURE__*/React.createElement(SlackIcon, null),
+  icon: jsx(SlackIcon, null),
   label: messages.slackProvider
 }, {
   sourceType: 'google',
-  icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
+  icon: jsx(GoogleIcon, null),
   label: messages.googleProvider
 }, {
   sourceType: 'microsoft',
-  icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
+  icon: jsx(MicrosoftIcon, null),
   label: messages.microsoftProvider
 }, {
   sourceType: 'github',
-  icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
+  icon: jsx(GitHubIcon, null),
   label: messages.gitHubProvider
 }];
 export const SourcesTooltipContent = ({
@@ -58,19 +59,19 @@ export const SourcesTooltipContent = ({
   sourcesLoading
 }) => {
   const sourcesToRender = React.useMemo(() => SUPPORTED_SOURCES.filter(supportedSource => sources.includes(supportedSource.sourceType)), [sources]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement("div", {
+  return jsx(React.Fragment, null, !sourcesLoading && sources.length === 0 ? jsx("span", null, jsx(FormattedMessage, messages.externalUserSourcesError)) : jsx(React.Fragment, null, jsx("span", null, jsx(FormattedMessage, messages.externalUserSourcesHeading)), jsx("div", {
     css: sourcesTooltipContainer
-  }, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
+  }, sourcesLoading && jsx(Spinner, {
     size: "small",
     appearance: "invert"
   }), !sourcesLoading && sourcesToRender.map(({
     sourceType,
     icon,
     label
-  }) => /*#__PURE__*/React.createElement("div", {
+  }) => jsx("div", {
     css: sourceWrapper,
     key: sourceType
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     css: imageContainer
-  }, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)))))));
+  }, icon), jsx("span", null, jsx(FormattedMessage, label)))))));
 };