@atlaskit/user-picker 9.6.2 → 9.6.3

package/dist/cjs/components/PopupControl.js

@@ -27,7 +27,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _select = require("@atlaskit/select");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -40,7 +40,7 @@ var fontSize = 12;
 var innerHeight = spacing * 2; // 16px
 
 var lineHeight = innerHeight / fontSize;
-var controlWrapper = (0, _core.css)({
+var controlWrapper = (0, _react2.css)({
   display: 'flex',
   flexDirection: 'column',
   padding: "0px ".concat(spacing, "px ").concat(spacing, "px")
@@ -56,7 +56,7 @@ var getLabelStyle = function getLabelStyle() {
   var left = 0;
   var top = spacing * 2.5;
   var color = getColor();
-  return (0, _core.css)({
+  return (0, _react2.css)({
     color: color,
     fontSize: "".concat(fontSize, "px"),
     fontWeight: 600,
@@ -79,11 +79,11 @@ var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var popupTitle = this.props.selectProps.popupTitle;
-      return (0, _core.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: controlWrapper
-      }, (0, _core.jsx)("div", {
+      }, (0, _react2.jsx)("div", {
         css: getLabelStyle()
-      }, popupTitle), (0, _core.jsx)(_select.components.Control, this.props));
+      }, popupTitle), (0, _react2.jsx)(_select.components.Control, this.props));
     }
   }]);
   return PopupControl;

package/dist/cjs/components/SingleValue.js

@@ -13,14 +13,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _avatar = require("@atlaskit/avatar");
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _SizeableAvatar = require("./SizeableAvatar");
 
 var _utils = require("./utils");
 
 var _excluded = ["ref"];
-var avatarItemComponent = (0, _core.css)({
+var avatarItemComponent = (0, _react.css)({
   border: 'none !important',
   padding: '0 !important',
   width: 'auto',
@@ -46,9 +46,9 @@ var SingleValue = function SingleValue(props) {
       _props$selectProps = props.selectProps,
       appearance = _props$selectProps.appearance,
       isFocused = _props$selectProps.isFocused;
-  return !isFocused ? (0, _core.jsx)(_avatar.AvatarItem, {
+  return !isFocused ? (0, _react.jsx)(_avatar.AvatarItem, {
     backgroundColor: "transparent",
-    avatar: (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
+    avatar: (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
       src: (0, _utils.getAvatarUrl)(data),
       appearance: appearance,
       name: label
@@ -57,7 +57,7 @@ var SingleValue = function SingleValue(props) {
   }, function (_ref) {
     var ref = _ref.ref,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react.jsx)("div", (0, _extends2.default)({
       css: avatarItemComponent
     }, props));
   }) : null;

package/dist/cjs/components/SingleValueContainer.js

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _select = require("@atlaskit/select");
 
@@ -39,7 +39,7 @@ 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; } }
 
-var placeholderIconContainer = (0, _core.css)({
+var placeholderIconContainer = (0, _react2.css)({
   paddingLeft: "".concat(_styles.BORDER_PADDING, "px"),
   lineHeight: 0
 });
@@ -73,7 +73,7 @@ var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
           value = _this$props$selectPro.value;
 
       if (isFocused || !hasValue) {
-        return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
+        return (0, _react2.jsx)(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
@@ -90,7 +90,7 @@ var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           children = _this$props2.children,
           valueContainerProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      return (0, _core.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _core.jsx)("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

@@ -27,9 +27,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -64,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 [(0, _core.jsx)("span", {
+      return [(0, _react.jsx)("span", {
         key: "name",
         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, {
+      }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
@@ -83,9 +83,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, (0, _core.jsx)(_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
               }
@@ -93,9 +93,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, (0, _core.jsx)(_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
               }
@@ -105,7 +105,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
-      return (0, _core.jsx)("span", {
+      return (0, _react.jsx)("span", {
         css: (0, _AvatarItemOption.textWrapper)(isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
       }, message);
     });
@@ -113,7 +113,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props$team3 = _this.props.team,
           avatarUrl = _this$props$team3.avatarUrl,
           name = _this$props$team3.name;
-      return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
+      return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         name: name
@@ -131,7 +131,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
         return undefined;
       }
 
-      return (0, _core.jsx)("span", {
+      return (0, _react.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.team.byline);
     });
@@ -141,7 +141,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(TeamOption, [{
     key: "render",
     value: function render() {
-      return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
+      return (0, _react.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         isDisabled: this.props.team.isDisabled,
         lozenge: this.getLozengeProps(),
@@ -151,6 +151,6 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
   return TeamOption;
-}(_react.default.PureComponent);
+}(_react2.default.PureComponent);
 
 exports.TeamOption = TeamOption;

package/dist/cjs/components/UserOption.js

@@ -25,9 +25,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _AvatarItemOption = require("./AvatarItemOption");
 
@@ -61,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 = [(0, _core.jsx)("span", {
+      var result = [(0, _react.jsx)("span", {
         key: "name",
         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, {
+      }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
 
       if ((0, _utils.hasValue)(publicName) && name.trim() !== publicName.trim()) {
-        result.push((0, _core.jsx)(_react.default.Fragment, {
+        result.push((0, _react.jsx)(_react2.default.Fragment, {
           key: "publicName"
-        }, ' ', (0, _core.jsx)("span", {
+        }, ' ', (0, _react.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, {
+        }, "(", (0, _react.jsx)(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
       }
@@ -81,7 +81,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
       return result;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
-      return _this.props.user.byline ? (0, _core.jsx)("span", {
+      return _this.props.user.byline ? (0, _react.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;
     });
@@ -91,7 +91,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           avatarUrl = _this$props$user2.avatarUrl,
           name = _this$props$user2.name,
           status = _this$props.status;
-      return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
+      return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         presence: status,
@@ -109,7 +109,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(UserOption, [{
     key: "render",
     value: function render() {
-      return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
+      return (0, _react.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
         lozenge: this.getLozengeProps(),
         isDisabled: this.props.user.isDisabled,
@@ -119,6 +119,6 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
   return UserOption;
-}(_react.default.PureComponent);
+}(_react2.default.PureComponent);
 
 exports.UserOption = UserOption;

package/dist/cjs/version.json

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

package/dist/es2019/components/AddOptionAvatar.js

@@ -3,7 +3,7 @@ import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 const getEmailAvatarWrapperStyle = isLozenge => {
   const padding = isLozenge ? 0 : 4;

package/dist/es2019/components/AvatarItemOption.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { token } from '@atlaskit/tokens';
 import { isLozengeText } from './utils';

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { HighlightText } from '../HighlightText';

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import { N50, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import Spinner from '@atlaskit/spinner/spinner';
 import { SlackIcon } from '../assets/slack';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import PeopleIcon from '@atlaskit/icon/glyph/people';

package/dist/es2019/components/MultiValue.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
 import { messages } from './i18n';

package/dist/es2019/components/PopupControl.js

@@ -4,7 +4,7 @@ import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import { components } from '@atlaskit/select';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N200, DN90 } from '@atlaskit/theme/colors';
 const spacing = gridSize();
 const fontSize = 12;

package/dist/es2019/components/SingleValue.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { AvatarItem } from '@atlaskit/avatar';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
 const avatarItemComponent = css({

package/dist/es2019/components/SingleValueContainer.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

package/dist/es2019/components/UserOption.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';

package/dist/es2019/version.json

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

package/dist/esm/components/AddOptionAvatar.js

@@ -3,7 +3,7 @@ import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge) {
   var padding = isLozenge ? 0 : 4;

package/dist/esm/components/AvatarItemOption.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { token } from '@atlaskit/tokens';
 import { isLozengeText } from './utils';

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { HighlightText } from '../HighlightText';

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

@@ -15,7 +15,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';

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

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 

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

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import { N50, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import Spinner from '@atlaskit/spinner/spinner';
 import { SlackIcon } from '../assets/slack';

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import PeopleIcon from '@atlaskit/icon/glyph/people';

package/dist/esm/components/MultiValue.js

@@ -17,7 +17,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
 import { messages } from './i18n';

package/dist/esm/components/PopupControl.js

@@ -14,7 +14,7 @@ import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import { components } from '@atlaskit/select';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N200, DN90 } from '@atlaskit/theme/colors';
 var spacing = gridSize();
 var fontSize = 12;

package/dist/esm/components/SingleValue.js

@@ -4,7 +4,7 @@ var _excluded = ["ref"];
 
 /** @jsx jsx */
 import { AvatarItem } from '@atlaskit/avatar';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
 var avatarItemComponent = css({

package/dist/esm/components/SingleValueContainer.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';

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

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

package/dist/esm/components/UserOption.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';

package/dist/esm/version.json

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

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

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { LozengeProps } from '../types';
-export declare const textWrapper: (color?: string | undefined) => import("@emotion/utils").SerializedStyles;
+export declare const textWrapper: (color?: string | undefined) => import("@emotion/react").SerializedStyles;
 export declare type AvatarItemOptionProps = {
     avatar: ReactNode;
     isDisabled?: boolean;
@@ -9,4 +10,4 @@ export declare type AvatarItemOptionProps = {
     primaryText?: ReactNode;
     secondaryText?: ReactNode;
 };
-export declare const AvatarItemOption: ({ avatar, isDisabled, lozenge, primaryText, secondaryText, }: AvatarItemOptionProps) => JSX.Element;
+export declare const AvatarItemOption: ({ avatar, isDisabled, lozenge, primaryText, secondaryText, }: AvatarItemOptionProps) => jsx.JSX.Element;