@atlaskit/user-picker 9.0.0 → 9.0.1

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GroupOptionIconWrapper = exports.GroupOption = void 0;
+exports.groupOptionIconWrapper = exports.GroupOption = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -21,13 +21,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -35,21 +33,25 @@ var _tokens = require("@atlaskit/tokens");
 
 var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
-var _AvatarItemOption = require(".././AvatarItemOption");
+var _AvatarItemOption = require("../AvatarItemOption");
 
 var _i18n = require(".././i18n");
 
-var _HighlightText = require(".././HighlightText");
-
-var _templateObject;
+var _HighlightText = require("../HighlightText");
 
 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 GroupOptionIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20));
-
-exports.GroupOptionIconWrapper = GroupOptionIconWrapper;
+var groupOptionIconWrapper = (0, _core.css)({
+  padding: '2px',
+  '> span': {
+    backgroundColor: (0, _tokens.token)('color.background.neutral', _colors.N20),
+    borderRadius: '50%',
+    padding: '4px'
+  }
+});
+exports.groupOptionIconWrapper = groupOptionIconWrapper;
 
 var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(GroupOption, _React$PureComponent);
@@ -72,24 +74,26 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
           _this$props$group = _this$props.group,
           name = _this$props$group.name,
           highlight = _this$props$group.highlight;
-      return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
+      return [(0, _core.jsx)("span", {
         key: "name",
-        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
-      }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800))
+      }, (0, _core.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
-      return /*#__PURE__*/_react.default.createElement(GroupOptionIconWrapper, null, /*#__PURE__*/_react.default.createElement(_people.default, {
+      return (0, _core.jsx)("span", {
+        css: groupOptionIconWrapper
+      }, (0, _core.jsx)(_people.default, {
         label: "group-icon",
         size: "medium"
       }));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
+      return (0, _core.jsx)("span", {
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {
@@ -102,7 +106,7 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(GroupOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         secondaryText: this.renderByline(),
         primaryText: this.getPrimaryText(),

package/dist/cjs/components/MultiValue.js

@@ -25,15 +25,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
 var _select = require("@atlaskit/select");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _AddOptionAvatar = require("./AddOptionAvatar");
 
@@ -47,8 +45,6 @@ var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
 var _excluded = ["children", "innerProps"];
 
-var _templateObject, _templateObject2;
-
 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; } }
@@ -71,10 +67,12 @@ var scrollToValue = function scrollToValue(valueContainer, control) {
 };
 
 exports.scrollToValue = scrollToValue;
-
-var GroupTagContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 2px;\n"])));
-
-var NameWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 5px;\n"])));
+var groupTagContainer = (0, _core.css)({
+  paddingLeft: '2px'
+});
+var nameWrapper = (0, _core.css)({
+  paddingLeft: '5px'
+});
 
 var MultiValue = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MultiValue, _React$Component);
@@ -94,11 +92,11 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props.selectProps;
 
       if ((0, _utils.isEmail)(data)) {
-        return selectProps.emailLabel ? /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
+        return selectProps.emailLabel ? (0, _core.jsx)(_AddOptionAvatar.AddOptionAvatar, {
           isLozenge: true,
           label: selectProps.emailLabel
-        }) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addEmail, function (label) {
-          return /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
+        }) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addEmail, function (label) {
+          return (0, _core.jsx)(_AddOptionAvatar.AddOptionAvatar, {
             isLozenge: true,
             label: label
           });
@@ -106,13 +104,15 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
       }
 
       if ((0, _utils.isGroup)(data)) {
-        return /*#__PURE__*/_react.default.createElement(GroupTagContainer, null, /*#__PURE__*/_react.default.createElement(_people.default, {
+        return (0, _core.jsx)("div", {
+          css: groupTagContainer
+        }, (0, _core.jsx)(_people.default, {
           label: "group-icon",
           size: "small"
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+      return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "multi",
         src: (0, _utils.getAvatarUrl)(data),
         name: label
@@ -156,12 +156,14 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
           children = _this$props3.children,
           innerProps = _this$props3.innerProps,
           rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
+      return (0, _core.jsx)(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
         innerProps: {
           ref: this.containerRef
         },
         cropWithEllipsis: false
-      }), this.getElemBefore(), " ", /*#__PURE__*/_react.default.createElement(NameWrapper, null, children));
+      }), this.getElemBefore(), " ", (0, _core.jsx)("div", {
+        css: nameWrapper
+      }, children));
     }
   }]);
   return MultiValue;

package/dist/cjs/components/PopupControl.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,8 +17,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _components = require("@atlaskit/theme/components");
@@ -31,16 +27,10 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _select = require("@atlaskit/select");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _templateObject, _templateObject2, _templateObject3;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; } }
@@ -50,26 +40,31 @@ var fontSize = 12;
 var innerHeight = spacing * 2; // 16px
 
 var lineHeight = innerHeight / fontSize;
-
-var ControlWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px ", "px ", "px;\n"])), spacing, spacing);
-
+var controlWrapper = (0, _core.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "0px ".concat(spacing, "px ").concat(spacing, "px")
+});
 var getColor = (0, _components.themed)({
   light: (0, _tokens.token)('color.text.subtlest', _colors.N200),
   dark: (0, _tokens.token)('color.text.subtlest', _colors.DN90)
 });
 
-var getPadding = function getPadding() {
+var getLabelStyle = function getLabelStyle() {
   var right = 0;
   var bottom = spacing / 2;
   var left = 0;
   var top = spacing * 2.5;
-  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px ", "px ", "px ", "px;\n  "])), top, right, bottom, left);
+  var color = getColor();
+  return (0, _core.css)({
+    color: color,
+    fontSize: "".concat(fontSize, "px"),
+    fontWeight: 600,
+    lineHeight: "".concat(lineHeight),
+    padding: "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px")
+  });
 };
 
-var Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  line-height: ", ";\n  ", "\n"])), function (props) {
-  return getColor(props);
-}, fontSize, lineHeight, getPadding);
-
 var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(PopupControl, _React$PureComponent);
 
@@ -84,7 +79,11 @@ var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var popupTitle = this.props.selectProps.popupTitle;
-      return /*#__PURE__*/_react.default.createElement(ControlWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, popupTitle), /*#__PURE__*/_react.default.createElement(_select.components.Control, this.props));
+      return (0, _core.jsx)("div", {
+        css: controlWrapper
+      }, (0, _core.jsx)("div", {
+        css: getLabelStyle()
+      }, popupTitle), (0, _core.jsx)(_select.components.Control, this.props));
     }
   }]);
   return PopupControl;

package/dist/cjs/components/SingleValue.js

@@ -7,25 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SingleValue = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _avatar = require("@atlaskit/avatar");
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _SizeableAvatar = require("./SizeableAvatar");
 
 var _utils = require("./utils");
 
 var _excluded = ["ref"];
+var avatarItemComponent = (0, _core.css)({
+  border: 'none !important',
+  padding: '0 !important',
+  width: 'auto',
+  overflow: 'hidden',
 
-var _templateObject;
-
-var AvatarItemComponent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: none !important;\n  padding: 0 !important;\n  width: auto;\n  overflow: hidden;\n  /* IE 11 needs this prop explicitly to flex items */\n  flex: 1 1 auto;\n  min-width: 100px;\n\n  & > span {\n    box-sizing: border-box;\n  }\n\n  &:hover {\n    width: auto;\n    padding: 0;\n    border: none;\n  }\n"])));
+  /* IE 11 needs this prop explicitly to flex items */
+  flex: '1 1 auto',
+  minWidth: '100px',
+  '& > span': {
+    boxSizing: 'border-box'
+  },
+  '&:hover': {
+    width: 'auto',
+    padding: 0,
+    border: 'none'
+  }
+});
 
 var SingleValue = function SingleValue(props) {
   var _props$data = props.data,
@@ -34,9 +46,9 @@ var SingleValue = function SingleValue(props) {
       _props$selectProps = props.selectProps,
       appearance = _props$selectProps.appearance,
       isFocused = _props$selectProps.isFocused;
-  return !isFocused ? /*#__PURE__*/_react.default.createElement(_avatar.AvatarItem, {
+  return !isFocused ? (0, _core.jsx)(_avatar.AvatarItem, {
     backgroundColor: "transparent",
-    avatar: /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+    avatar: (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
       src: (0, _utils.getAvatarUrl)(data),
       appearance: appearance,
       name: label
@@ -45,7 +57,9 @@ var SingleValue = function SingleValue(props) {
   }, function (_ref) {
     var ref = _ref.ref,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return /*#__PURE__*/_react.default.createElement(AvatarItemComponent, props);
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: avatarItemComponent
+    }, props));
   }) : null;
 };
 

package/dist/cjs/components/SingleValueContainer.js

@@ -23,11 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _select = require("@atlaskit/select");
 
@@ -37,13 +35,14 @@ var _styles = require("./styles");
 
 var _excluded = ["children"];
 
-var _templateObject;
-
 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 PlaceholderIconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: ", "px;\n  line-height: 0;\n"])), _styles.BORDER_PADDING);
+var placeholderIconContainer = (0, _core.css)({
+  paddingLeft: "".concat(_styles.BORDER_PADDING, "px"),
+  lineHeight: 0
+});
 
 var showUserAvatar = function showUserAvatar(inputValue, value) {
   return value && value.data && inputValue === value.label;
@@ -74,7 +73,7 @@ var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
           value = _this$props$selectPro.value;
 
       if (isFocused || !hasValue) {
-        return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+        return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
@@ -91,7 +90,9 @@ var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       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(PlaceholderIconContainer, null, this.renderAvatar()), children);
+      return (0, _core.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _core.jsx)("div", {
+        css: placeholderIconContainer
+      }, this.renderAvatar()), children);
     }
   }]);
   return SingleValueContainer;

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

@@ -27,6 +27,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
+var _core = require("@emotion/core");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -62,10 +64,10 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props$team = _this.props.team,
           name = _this$props$team.name,
           highlight = _this$props$team.highlight;
-      return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
+      return [(0, _core.jsx)("span", {
         key: "name",
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
-      }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800))
+      }, (0, _core.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
@@ -81,9 +83,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } 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, _core.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, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -91,9 +93,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, (0, _core.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, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -103,15 +105,15 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+      return (0, _core.jsx)("span", {
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
       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, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         name: name
@@ -128,7 +130,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(TeamOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         secondaryText: this.renderByline(),
         primaryText: this.getPrimaryText(),

package/dist/cjs/components/UserOption.js

@@ -25,6 +25,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
+var _core = require("@emotion/core");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -59,19 +61,19 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           name = _this$props$user.name,
           publicName = _this$props$user.publicName,
           highlight = _this$props$user.highlight;
-      var result = [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
+      var result = [(0, _core.jsx)("span", {
         key: "name",
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
-      }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800))
+      }, (0, _core.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, _core.jsx)(_react.default.Fragment, {
           key: "publicName"
-        }, ' ', /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-          color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
-        }, "(", /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
+        }, ' ', (0, _core.jsx)("span", {
+          css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
+        }, "(", (0, _core.jsx)(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
       }
@@ -79,8 +81,8 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
       return result;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
-      return _this.props.user.byline ? /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
+      return _this.props.user.byline ? (0, _core.jsx)("span", {
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
       }, _this.props.user.byline) : undefined;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
@@ -89,7 +91,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           avatarUrl = _this$props$user2.avatarUrl,
           name = _this$props$user2.name,
           status = _this$props.status;
-      return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
+      return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         presence: status,
@@ -107,7 +109,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(UserOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.0.0",
+	"version": "9.0.1",
 	"sideEffects": false
 }

package/dist/es2019/components/AddOptionAvatar.js

@@ -1,23 +1,28 @@
+/** @jsx jsx */
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React from 'react';
-import styled from 'styled-components';
-const EmailAvatarWrapper = styled.span`
-  padding: ${props => props.isLozenge ? 0 : 4}px;
+import { css, jsx } from '@emotion/core';
+
+const getEmailAvatarWrapperStyle = isLozenge => {
+  const padding = isLozenge ? 0 : 4;
+  return css({
+    padding: `${padding}px`,
+    backgroundColor: token('color.background.neutral', N40),
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center'
+  });
+};
 
-  background-color: ${token('color.background.neutral', N40)};
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-`;
 export const AddOptionAvatar = ({
   isLozenge,
   label
 }) => {
-  return /*#__PURE__*/React.createElement(EmailAvatarWrapper, {
-    isLozenge: isLozenge
-  }, /*#__PURE__*/React.createElement(EmailIcon, {
+  return jsx("div", {
+    css: getEmailAvatarWrapperStyle(isLozenge)
+  }, jsx(EmailIcon, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
     primaryColor: token('color.text.subtle', N500)