@atlaskit/user-picker 8.8.5 → 9.0.1

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

@@ -5,24 +5,29 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
-import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '.././i18n';
-import { HighlightText } from '.././HighlightText';
-export var GroupOptionIconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), token('color.background.neutral', N20));
+import { HighlightText } from '../HighlightText';
+export var groupOptionIconWrapper = css({
+  padding: '2px',
+  '> span': {
+    backgroundColor: token('color.background.neutral', N20),
+    borderRadius: '50%',
+    padding: '4px'
+  }
+});
 export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(GroupOption, _React$PureComponent);
 
@@ -45,16 +50,18 @@ export 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.createElement(TextWrapper, {
+      return [jsx("span", {
         key: "name",
-        color: isSelected ? token('color.text.selected', B400) : token('color.text', N800)
-      }, /*#__PURE__*/React.createElement(HighlightText, {
+        css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderAvatar", function () {
-      return /*#__PURE__*/React.createElement(GroupOptionIconWrapper, null, /*#__PURE__*/React.createElement(PeopleIcon, {
+      return jsx("span", {
+        css: groupOptionIconWrapper
+      }, jsx(PeopleIcon, {
         label: "group-icon",
         size: "medium"
       }));
@@ -62,9 +69,9 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
-      return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.groupByline));
+      return jsx("span", {
+        css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+      }, jsx(FormattedMessage, messages.groupByline));
     });
 
     _defineProperty(_assertThisInitialized(_this), "getLozengeProps", function () {
@@ -79,7 +86,7 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(GroupOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(AvatarItemOption, {
+      return jsx(AvatarItemOption, {
         avatar: this.renderAvatar(),
         secondaryText: this.renderByline(),
         primaryText: this.getPrimaryText(),

package/dist/esm/components/MultiValue.js

@@ -7,19 +7,17 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children", "innerProps"];
 
-var _templateObject, _templateObject2;
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
 import { messages } from './i18n';
@@ -41,8 +39,12 @@ export var scrollToValue = function scrollToValue(valueContainer, control) {
     valueContainer.scrollIntoView(false);
   }
 };
-var GroupTagContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: 2px;\n"])));
-var NameWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-left: 5px;\n"])));
+var groupTagContainer = css({
+  paddingLeft: '2px'
+});
+var nameWrapper = css({
+  paddingLeft: '5px'
+});
 export var MultiValue = /*#__PURE__*/function (_React$Component) {
   _inherits(MultiValue, _React$Component);
 
@@ -63,11 +65,11 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props.selectProps;
 
       if (isEmail(data)) {
-        return selectProps.emailLabel ? /*#__PURE__*/React.createElement(AddOptionAvatar, {
+        return selectProps.emailLabel ? jsx(AddOptionAvatar, {
           isLozenge: true,
           label: selectProps.emailLabel
-        }) : /*#__PURE__*/React.createElement(FormattedMessage, messages.addEmail, function (label) {
-          return /*#__PURE__*/React.createElement(AddOptionAvatar, {
+        }) : jsx(FormattedMessage, messages.addEmail, function (label) {
+          return jsx(AddOptionAvatar, {
             isLozenge: true,
             label: label
           });
@@ -75,13 +77,15 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
       }
 
       if (isGroup(data)) {
-        return /*#__PURE__*/React.createElement(GroupTagContainer, null, /*#__PURE__*/React.createElement(PeopleIcon, {
+        return jsx("div", {
+          css: groupTagContainer
+        }, jsx(PeopleIcon, {
           label: "group-icon",
           size: "small"
         }));
       }
 
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "multi",
         src: getAvatarUrl(data),
         name: label
@@ -127,12 +131,14 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           innerProps = _this$props3.innerProps,
           rest = _objectWithoutProperties(_this$props3, _excluded);
 
-      return /*#__PURE__*/React.createElement(components.MultiValue, _extends({}, rest, {
+      return jsx(components.MultiValue, _extends({}, rest, {
         innerProps: {
           ref: this.containerRef
         },
         cropWithEllipsis: false
-      }), this.getElemBefore(), " ", /*#__PURE__*/React.createElement(NameWrapper, null, children));
+      }), this.getElemBefore(), " ", jsx("div", {
+        css: nameWrapper
+      }, children));
     }
   }]);
 

package/dist/esm/components/PopupControl.js

@@ -3,43 +3,49 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
+/** @jsx jsx */
 import React from 'react';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import { components } from '@atlaskit/select';
-import styled, { css } from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { N200, DN90 } from '@atlaskit/theme/colors';
 var spacing = gridSize();
 var fontSize = 12;
 var innerHeight = spacing * 2; // 16px
 
 var lineHeight = innerHeight / fontSize;
-var ControlWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px ", "px ", "px;\n"])), spacing, spacing);
+var controlWrapper = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "0px ".concat(spacing, "px ").concat(spacing, "px")
+});
 var getColor = themed({
   light: token('color.text.subtlest', N200),
   dark: token('color.text.subtlest', 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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", "px ", "px ", "px ", "px;\n  "])), top, right, bottom, left);
+  var color = getColor();
+  return 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 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  line-height: ", ";\n  ", "\n"])), function (props) {
-  return getColor(props);
-}, fontSize, lineHeight, getPadding);
 export var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(PopupControl, _React$PureComponent);
 
@@ -55,7 +61,11 @@ export var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var popupTitle = this.props.selectProps.popupTitle;
-      return /*#__PURE__*/React.createElement(ControlWrapper, null, /*#__PURE__*/React.createElement(Label, null, popupTitle), /*#__PURE__*/React.createElement(components.Control, this.props));
+      return jsx("div", {
+        css: controlWrapper
+      }, jsx("div", {
+        css: getLabelStyle()
+      }, popupTitle), jsx(components.Control, this.props));
     }
   }]);
 

package/dist/esm/components/SingleValue.js

@@ -1,15 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["ref"];
 
-var _templateObject;
-
+/** @jsx jsx */
 import { AvatarItem } from '@atlaskit/avatar';
-import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
-var AvatarItemComponent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
+var avatarItemComponent = css({
+  border: 'none !important',
+  padding: '0 !important',
+  width: 'auto',
+  overflow: 'hidden',
+
+  /* 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'
+  }
+});
 export var SingleValue = function SingleValue(props) {
   var _props$data = props.data,
       label = _props$data.label,
@@ -17,9 +32,9 @@ export var SingleValue = function SingleValue(props) {
       _props$selectProps = props.selectProps,
       appearance = _props$selectProps.appearance,
       isFocused = _props$selectProps.isFocused;
-  return !isFocused ? /*#__PURE__*/React.createElement(AvatarItem, {
+  return !isFocused ? jsx(AvatarItem, {
     backgroundColor: "transparent",
-    avatar: /*#__PURE__*/React.createElement(SizeableAvatar, {
+    avatar: jsx(SizeableAvatar, {
       src: getAvatarUrl(data),
       appearance: appearance,
       name: label
@@ -29,6 +44,8 @@ export var SingleValue = function SingleValue(props) {
     var ref = _ref.ref,
         props = _objectWithoutProperties(_ref, _excluded);
 
-    return /*#__PURE__*/React.createElement(AvatarItemComponent, props);
+    return jsx("div", _extends({
+      css: avatarItemComponent
+    }, props));
   }) : null;
 };

package/dist/esm/components/SingleValueContainer.js

@@ -6,21 +6,22 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
 
-var _templateObject;
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
-var PlaceholderIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  line-height: 0;\n"])), BORDER_PADDING);
+var placeholderIconContainer = css({
+  paddingLeft: "".concat(BORDER_PADDING, "px"),
+  lineHeight: 0
+});
 
 var showUserAvatar = function showUserAvatar(inputValue, value) {
   return value && value.data && inputValue === value.label;
@@ -52,7 +53,7 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
           value = _this$props$selectPro.value;
 
       if (isFocused || !hasValue) {
-        return /*#__PURE__*/React.createElement(SizeableAvatar, {
+        return jsx(SizeableAvatar, {
           appearance: appearance,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
@@ -71,7 +72,9 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
           children = _this$props2.children,
           valueContainerProps = _objectWithoutProperties(_this$props2, _excluded);
 
-      return /*#__PURE__*/React.createElement(components.ValueContainer, valueContainerProps, /*#__PURE__*/React.createElement(PlaceholderIconContainer, null, this.renderAvatar()), children);
+      return jsx(components.ValueContainer, valueContainerProps, jsx("div", {
+        css: placeholderIconContainer
+      }, this.renderAvatar()), children);
     }
   }]);
 

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

@@ -11,11 +11,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { AvatarItemOption, textWrapper } from '.././AvatarItemOption';
 import { HighlightText } from '.././HighlightText';
 import { messages } from '.././i18n';
 import { SizeableAvatar } from '.././SizeableAvatar';
@@ -39,10 +41,10 @@ export 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.createElement(TextWrapper, {
+      return [jsx("span", {
         key: "name",
-        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
-      }, /*#__PURE__*/React.createElement(HighlightText, {
+        css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
@@ -59,9 +61,9 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -69,9 +71,9 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -82,8 +84,8 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
-      return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
+      return jsx("span", {
+        css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
       }, message);
     });
 
@@ -91,7 +93,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props$team3 = _this.props.team,
           avatarUrl = _this$props$team3.avatarUrl,
           name = _this$props$team3.name;
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         name: name
@@ -110,7 +112,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(TeamOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(AvatarItemOption, {
+      return jsx(AvatarItemOption, {
         avatar: this.renderAvatar(),
         secondaryText: this.renderByline(),
         primaryText: this.getPrimaryText(),

package/dist/esm/components/UserOption.js

@@ -10,10 +10,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
+import { jsx } from '@emotion/core';
 import React from 'react';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
+import { AvatarItemOption, textWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
 import { SizeableAvatar } from './SizeableAvatar';
 import { hasValue } from './utils';
@@ -38,19 +40,19 @@ export 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.createElement(TextWrapper, {
+      var result = [jsx("span", {
         key: "name",
-        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
-      }, /*#__PURE__*/React.createElement(HighlightText, {
+        css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
 
       if (hasValue(publicName) && name.trim() !== publicName.trim()) {
-        result.push( /*#__PURE__*/React.createElement(React.Fragment, {
+        result.push(jsx(React.Fragment, {
           key: "publicName"
-        }, ' ', /*#__PURE__*/React.createElement(TextWrapper, {
-          color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
-        }, "(", /*#__PURE__*/React.createElement(HighlightText, {
+        }, ' ', jsx("span", {
+          css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+        }, "(", jsx(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
       }
@@ -59,8 +61,8 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function () {
-      return _this.props.user.byline ? /*#__PURE__*/React.createElement(TextWrapper, {
-        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
+      return _this.props.user.byline ? jsx("span", {
+        css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
       }, _this.props.user.byline) : undefined;
     });
 
@@ -70,7 +72,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           avatarUrl = _this$props$user2.avatarUrl,
           name = _this$props$user2.name,
           status = _this$props.status;
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         presence: status,
@@ -90,7 +92,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(UserOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(AvatarItemOption, {
+      return jsx(AvatarItemOption, {
         avatar: this.renderAvatar(),
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),

package/dist/esm/components/i18n.js

@@ -62,7 +62,7 @@ export var messages = defineMessages({
   },
   externalUserSourcesHeading: {
     id: 'fabric.elements.user-picker.external.sourced.from',
-    defaultMessage: 'Also found in:',
+    defaultMessage: 'Found in:',
     description: 'From where the external user is coming'
   },
   externalUserSourcesError: {

package/dist/esm/index.js

@@ -1,6 +1,5 @@
 export { isValidEmail } from './components/emailValidation';
 export { UserPicker as default } from './components/UserPicker';
-export { getUserRecommendations, hydrateDefaultValues, SmartUserPicker, setSmartUserPickerEnv } from './components/smart-user-picker/index';
 export { PopupUserPicker } from './components/PopupUserPicker';
 export { isEmail, isExternalUser, isTeam, isUser } from './components/utils';
 export { // Constants

package/dist/esm/version.json

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

package/dist/types/analytics.d.ts

@@ -1,6 +1,5 @@
 import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import { UserPickerProps, UserPickerState } from './types';
-import { SmartUserPickerProps } from './components/smart-user-picker/index';
 export declare type UserPickerSession = {
     id: string;
     start: number;
@@ -15,9 +14,6 @@ export interface EventCreator {
     (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession): AnalyticsEventPayload;
     (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession, ...args: any[]): AnalyticsEventPayload;
 }
-export interface SmartEventCreator {
-    (props: SmartUserPickerProps, ...args: any[]): AnalyticsEventPayload;
-}
 export declare const focusEvent: EventCreator;
 export declare const clearEvent: EventCreator;
 export declare const deleteEvent: EventCreator;
@@ -25,9 +21,3 @@ export declare const cancelEvent: EventCreator;
 export declare const selectEvent: EventCreator;
 export declare const searchedEvent: EventCreator;
 export declare const failedEvent: EventCreator;
-export declare const preparedUsersLoadedEvent: SmartEventCreator;
-export declare const mountedWithPrefetchEvent: SmartEventCreator;
-export declare const filterUsersEvent: SmartEventCreator;
-export declare const requestUsersEvent: SmartEventCreator;
-export declare const successfulRequestUsersEvent: SmartEventCreator;
-export declare const failedRequestUsersEvent: SmartEventCreator;

package/dist/types/components/AvatarItemOption.d.ts

@@ -1,6 +1,7 @@
-import React, { ReactNode } from 'react';
+/** @jsx jsx */
+import { ReactNode } from 'react';
 import { LozengeProps } from '../types';
-export declare const TextWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const textWrapper: (color?: string | undefined) => import("@emotion/utils").SerializedStyles;
 export declare type AvatarItemOptionProps = {
     avatar: ReactNode;
     primaryText?: ReactNode;

package/dist/types/components/BaseUserPicker.d.ts

@@ -51,7 +51,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Pick<BaseUserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Pick<BaseUserPickerProps, "placeholder" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Pick<BaseUserPickerProps, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps"> & Partial<Pick<Pick<BaseUserPickerProps, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "SelectComponent" | "pickerProps">, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

package/dist/types/components/EmailOption/main.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { Email } from '../../types';
 import { EmailValidationResponse } from '../emailValidation';

package/dist/types/components/ExternalUserOption/ExternalAvatarItemOption.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { ReactNode } from 'react';
 export declare type ExternalAvatarItemOptionProps = {
     avatar: ReactNode;

package/dist/types/components/ExternalUserOption/SourcesTooltipContent.d.ts

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
 import { ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
-export declare const SourcesTooltipContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const SourceWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const sourcesTooltipContainer: import("@emotion/utils").SerializedStyles;
+export declare const sourceWrapper: import("@emotion/utils").SerializedStyles;
 export declare const SourcesTooltipContent: React.FC<ExternalUserSourcesData>;

package/dist/types/components/ExternalUserOption/main.d.ts

@@ -1,7 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
 import { ExternalUser } from '../../types';
-export declare const ImageContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
-export declare const EmailDomainWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const imageContainer: import("@emotion/utils").SerializedStyles;
+export declare const emailDomainWrapper: import("@emotion/utils").SerializedStyles;
 export declare type ExternalUserOptionProps = {
     user: ExternalUser;
     status?: string;