@atlaskit/user-picker 7.16.6 → 8.2.1

package/dist/esm/components/AvatarItemOption.js

@@ -5,12 +5,21 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React from 'react';
 import styled from 'styled-components';
 import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Lozenge from '@atlaskit/lozenge';
-import Tooltip from '@atlaskit/tooltip';
+var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
+  '@atlaskit/tooltip').then(function (module) {
+    return {
+      default: module.default
+    };
+  });
+});
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  line-height: 1;\n  outline: none;\n  margin: 0;\n  width: 100%;\n  cursor: pointer;\n"])));
-var Text = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), B400, function (_ref) {
+var Text = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), token('color.text.selected', B400), function (_ref) {
   var secondary = _ref.secondary;
-  return secondary && "color: ".concat(B400, "; font-size: 0.85em;");
+  return secondary && "color: ".concat(token('color.text.selected', B400), "; font-size: 0.85em;");
 });
 var AdditionalInfo = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  float: right;\n  ", "\n"])), function (_ref2) {
   var withTooltip = _ref2.withTooltip;
@@ -36,13 +45,15 @@ export var AvatarItemOption = function AvatarItemOption(_ref4) {
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, {
     withTooltip: Boolean(sourcesInfoTooltip)
-  }, !sourcesInfoTooltip && lozenge && lozenge.text && (lozenge.tooltip ?
+  }, !sourcesInfoTooltip && (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
   /*#__PURE__*/
   // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
   // Lozenge text) or tooltip won't work
-  React.createElement(Tooltip, {
+  React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)
+  }, /*#__PURE__*/React.createElement(AsyncTooltip, {
     content: lozenge.tooltip
-  }, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
     secondary: true
   }, secondaryText))));
 };

package/dist/esm/components/BaseUserPicker.js

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import debounce from 'lodash/debounce';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
 import { messages } from './i18n';

package/dist/esm/components/ClearIndicator.js

@@ -17,7 +17,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { components } from '@atlaskit/select';
-import Tooltip from '@atlaskit/tooltip';
+var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
+  '@atlaskit/tooltip').then(function (module) {
+    return {
+      default: module.default
+    };
+  });
+});
 export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ClearIndicator, _React$PureComponent);
 
@@ -56,13 +64,16 @@ export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var clearValueLabel = this.props.selectProps.clearValueLabel;
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: clearValueLabel
-      }, /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
+      var Indicator = /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
         innerProps: _objectSpread(_objectSpread({}, this.props.innerProps), {}, {
           onMouseDown: this.handleMouseDown
         })
-      })));
+      }));
+      return clearValueLabel ? /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: Indicator
+      }, /*#__PURE__*/React.createElement(AsyncTooltip, {
+        content: clearValueLabel
+      }, Indicator)) : Indicator;
     }
   }]);
 

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

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncEmailOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/email-option" */
+  './main').then(function (module) {
+    return {
+      default: module.EmailOption
+    };
+  });
+});
+export default AsyncEmailOption;

package/dist/esm/components/{EmailOption.js → EmailOption/main.js}

@@ -11,11 +11,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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
-import { AddOptionAvatar } from './AddOptionAvatar';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { messages } from './i18n';
+import { token } from '@atlaskit/tokens';
+import { AddOptionAvatar } from '../AddOptionAvatar';
+import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import { messages } from '../i18n';
 
 var getAddEmailMessage = function getAddEmailMessage(validity) {
   return validity === 'POTENTIAL' ? messages.continueToAddEmail : messages.selectToAddEmail;
@@ -47,13 +48,13 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var id = _this.props.email.id;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? B400 : N800
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
       }, id);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function (label) {
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: _this.props.isSelected ? B400 : N200
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, label);
     });
 

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

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncExternalUserOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/external-user-option" */
+  './main').then(function (module) {
+    return {
+      default: module.ExternalUserOption
+    };
+  });
+});
+export default AsyncExternalUserOption;

package/dist/esm/components/{ExternalUserOption.js → ExternalUserOption/main.js}

@@ -15,18 +15,19 @@ 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; } }
 
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { SizeableAvatar } from './SizeableAvatar';
+import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import { SizeableAvatar } from '../SizeableAvatar';
 import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import Tooltip from '@atlaskit/tooltip';
 import styled from 'styled-components';
-import { SlackIcon } from './assets/slack';
-import { GoogleIcon } from './assets/google';
-import { MicrosoftIcon } from './assets/microsoft';
-import { GitHubIcon } from './assets/github';
-import { FormattedMessage } from 'react-intl';
-import { messages } from './i18n';
+import { SlackIcon } from '../assets/slack';
+import { GoogleIcon } from '../assets/google';
+import { MicrosoftIcon } from '../assets/microsoft';
+import { GitHubIcon } from '../assets/github';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../i18n';
 export var ImageContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 12px;\n  width: 12px;\n  padding-right: 4px;\n"])));
 export var SourcesTooltipContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-bottom: 4px;\n"])));
 export var SourceWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: 4px;\n  display: flex;\n  align-items: center;\n"])));
@@ -68,7 +69,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       var name = _this.props.user.name;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? B400 : N800
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
       }, name);
     });
 
@@ -86,7 +87,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
 
       var emailDomainWithAt = "@".concat(emailDomain);
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: _this.props.isSelected ? B400 : N200
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, emailUser, /*#__PURE__*/React.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
 
@@ -113,7 +114,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
         label: "",
         size: "large",
-        primaryColor: N200
+        primaryColor: token('color.text.lowEmphasis', N200)
       })) : undefined;
     });
 

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

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncGroupOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/group-option" */
+  './main').then(function (module) {
+    return {
+      default: module.GroupOption
+    };
+  });
+});
+export default AsyncGroupOption;

package/dist/esm/components/{GroupOption.js → GroupOption/main.js}

@@ -14,14 +14,15 @@ 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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 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 { 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"])), N20);
+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.subtleNeutral.resting', N20));
 export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(GroupOption, _React$PureComponent);
 
@@ -46,7 +47,7 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$group.highlight;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: isSelected ? B400 : N800
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -62,7 +63,7 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? B400 : N200
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.groupByline));
     });
 

package/dist/esm/components/MessagesIntlProvider.js

@@ -6,7 +6,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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React, { useMemo } from 'react';
-import { IntlProvider, injectIntl } from 'react-intl';
+import { useIntl, IntlProvider } from 'react-intl-next';
 import { getMessagesForLocale } from '../util/i18n-util';
 var EMPTY = {};
 
@@ -35,15 +35,16 @@ var useI18n = function useI18n(locale) {
 };
 
 var MessagesIntlProvider = function MessagesIntlProvider(props) {
-  var intl = props.intl,
-      children = props.children;
+  var intl = useIntl();
+  var children = props.children;
   var messages = useI18n(intl.locale);
   var mergedMessages = useMemo(function () {
     return _objectSpread(_objectSpread({}, intl.messages), messages);
   }, [intl.messages, messages]);
   return /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: intl.locale,
     messages: mergedMessages
   }, children);
 };
 
-export default injectIntl(MessagesIntlProvider);
+export default MessagesIntlProvider;

package/dist/esm/components/MultiValue.js

@@ -16,7 +16,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; } }
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
 import styled from 'styled-components';
 import { AddOptionAvatar } from './AddOptionAvatar';

package/dist/esm/components/MultiValueContainer.js

@@ -18,7 +18,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { components } from '@atlaskit/select';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
 export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
@@ -57,11 +57,12 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "addPlaceholder", function (placeholder) {
-      return React.Children.map(_this.props.children, function (child) {
+      var children = React.Children.map(_this.props.children, function (child) {
         return isChildInput(child) && _this.showPlaceholder() ? /*#__PURE__*/React.cloneElement(child, {
           placeholder: placeholder
         }) : child;
       });
+      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderChildren", function () {

package/dist/esm/components/Option.js

@@ -1,21 +1,32 @@
 import { components } from '@atlaskit/select';
 import React from 'react';
-import { EmailOption } from './EmailOption';
-import { TeamOption } from './TeamOption';
 import { UserOption } from './UserOption';
-import { GroupOption } from './GroupOption';
-import { ExternalUserOption } from './ExternalUserOption';
+import AsyncExternalOption from './ExternalUserOption';
+import AsyncTeamOption from './TeamOption';
+import AsyncGroupOption from './GroupOption';
+import AsyncEmailOption from './EmailOption';
 import { isEmail, isTeam, isUser, isGroup, isExternalUser } from './utils';
 import { isValidEmail } from './emailValidation';
 
-var dataOption = function dataOption(_ref) {
+var defaultOption = function defaultOption(_ref) {
   var data = _ref.data.data,
       isSelected = _ref.isSelected,
-      status = _ref.status,
-      selectProps = _ref.selectProps;
+      status = _ref.status;
+  return /*#__PURE__*/React.createElement(UserOption, {
+    user: data,
+    status: status,
+    isSelected: isSelected
+  });
+};
+
+var dataOption = function dataOption(_ref2) {
+  var data = _ref2.data.data,
+      isSelected = _ref2.isSelected,
+      status = _ref2.status,
+      selectProps = _ref2.selectProps;
 
   if (isExternalUser(data)) {
-    return /*#__PURE__*/React.createElement(ExternalUserOption, {
+    return /*#__PURE__*/React.createElement(AsyncExternalOption, {
       user: data,
       status: status,
       isSelected: isSelected
@@ -31,7 +42,7 @@ var dataOption = function dataOption(_ref) {
   }
 
   if (isEmail(data)) {
-    return /*#__PURE__*/React.createElement(EmailOption, {
+    return /*#__PURE__*/React.createElement(AsyncEmailOption, {
       email: data,
       emailValidity: isValidEmail(data.id),
       isSelected: isSelected,
@@ -40,14 +51,14 @@ var dataOption = function dataOption(_ref) {
   }
 
   if (isTeam(data)) {
-    return /*#__PURE__*/React.createElement(TeamOption, {
+    return /*#__PURE__*/React.createElement(AsyncTeamOption, {
       team: data,
       isSelected: isSelected
     });
   }
 
   if (isGroup(data)) {
-    return /*#__PURE__*/React.createElement(GroupOption, {
+    return /*#__PURE__*/React.createElement(AsyncGroupOption, {
       group: data,
       isSelected: isSelected
     });
@@ -57,5 +68,7 @@ var dataOption = function dataOption(_ref) {
 };
 
 export var Option = function Option(props) {
-  return /*#__PURE__*/React.createElement(components.Option, props, dataOption(props));
+  return /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: defaultOption(props)
+  }, dataOption(props)));
 };

package/dist/esm/components/PopupControl.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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';
@@ -24,8 +25,8 @@ 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 getColor = themed({
-  light: N200,
-  dark: DN90
+  light: token('color.text.lowEmphasis', N200),
+  dark: token('color.text.lowEmphasis', DN90)
 });
 
 var getPadding = function getPadding() {

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

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncTeamOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/team-option" */
+  './main').then(function (module) {
+    return {
+      default: module.TeamOption
+    };
+  });
+});
+export default AsyncTeamOption;

package/dist/esm/components/{TeamOption.js → TeamOption/main.js}

@@ -12,12 +12,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; } }
 
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { HighlightText } from './HighlightText';
-import { messages } from './i18n';
-import { SizeableAvatar } from './SizeableAvatar';
+import { FormattedMessage } from 'react-intl-next';
+import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { HighlightText } from '.././HighlightText';
+import { messages } from '.././i18n';
+import { SizeableAvatar } from '.././SizeableAvatar';
 export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(TeamOption, _React$PureComponent);
 
@@ -40,7 +41,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$team.highlight;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? B400 : N800
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -82,7 +83,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? B400 : N200
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, message);
     });
 

package/dist/esm/components/UserOption.js

@@ -11,6 +11,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; } }
 
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
@@ -39,7 +40,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$user.highlight;
       var result = [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? B400 : N800
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -48,7 +49,7 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
         result.push( /*#__PURE__*/React.createElement(React.Fragment, {
           key: "publicName"
         }, ' ', /*#__PURE__*/React.createElement(TextWrapper, {
-          color: _this.props.isSelected ? B400 : N200
+          color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
         }, "(", /*#__PURE__*/React.createElement(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -59,7 +60,7 @@ 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 ? B400 : N200
+        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, _this.props.user.byline) : undefined;
     });
 

package/dist/esm/components/assets/github.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export function GitHubIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: "12",
@@ -11,6 +12,6 @@ export function GitHubIcon(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.9778 0C5.3635 0 0 5.45261 0 12.179C0 17.5601 3.432 22.1253 8.19114 23.7357C8.78975 23.8484 9.00952 23.4715 9.00952 23.1498C9.00952 22.8594 8.99841 21.9 8.99326 20.8823C5.66103 21.6191 4.95789 19.4454 4.95789 19.4454C4.41303 18.0376 3.62796 17.6633 3.62796 17.6633C2.54122 16.9074 3.70988 16.923 3.70988 16.923C4.91266 17.0089 5.54598 18.178 5.54598 18.178C6.61428 20.0399 8.34803 19.5016 9.03154 19.1904C9.13904 18.4033 9.44945 17.866 9.792 17.5619C7.13157 17.2539 4.33487 16.2096 4.33487 11.5429C4.33487 10.2133 4.80278 9.12682 5.56899 8.27391C5.44463 7.96716 5.03464 6.72844 5.68502 5.05087C5.68502 5.05087 6.69084 4.72354 8.97976 6.29927C9.9352 6.02942 10.9599 5.89409 11.9778 5.88945C12.9957 5.89409 14.0212 6.02942 14.9784 6.29927C17.2645 4.72354 18.269 5.05087 18.269 5.05087C18.9209 6.72844 18.5107 7.96716 18.3864 8.27391C19.1544 9.12682 19.6191 10.2133 19.6191 11.5429C19.6191 16.2207 16.8171 17.2507 14.1499 17.5522C14.5795 17.9301 14.9623 18.6713 14.9623 19.8076C14.9623 21.4371 14.9484 22.7487 14.9484 23.1498C14.9484 23.4739 15.164 23.8537 15.7712 23.7341C20.5277 22.1219 23.9554 17.5582 23.9554 12.179C23.9554 5.45261 18.5927 0 11.9778 0Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }));
 }

package/dist/esm/components/assets/google.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export function GoogleIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: "12",
@@ -11,21 +12,21 @@ export function GoogleIcon(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8.32062 3.21332L10.014 1.55999C8.97396 0.593331 7.62063 0 6.00062 0C3.65396 0 1.62729 1.34666 0.640625 3.30665L2.58062 4.81331C3.06729 3.36665 4.41396 2.31999 6.00062 2.31999C7.12729 2.31999 7.88729 2.80665 8.32062 3.21332Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.76 6.13291C11.76 5.63958 11.72 5.27958 11.6333 4.90625H6V7.13291H9.30667C9.24 7.68624 8.88 8.51957 8.08 9.07957L9.97333 10.5462C11.1067 9.49956 11.76 7.95957 11.76 6.13291V6.13291V6.13291Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M2.58667 7.18662C2.46 6.81329 2.38667 6.41329 2.38667 5.99996C2.38667 5.58663 2.46 5.18663 2.58 4.8133L0.64 3.30664C0.233333 4.11997 0 5.0333 0 5.99996C0 6.96662 0.233333 7.87995 0.64 8.69328L2.58667 7.18662V7.18662Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.00079 12.0008C7.62079 12.0008 8.98079 11.4675 9.97413 10.5475L8.08079 9.08083C7.57413 9.43416 6.89413 9.68082 6.00079 9.68082C4.41413 9.68082 3.06746 8.63416 2.58746 7.1875L0.647461 8.69416C1.63413 10.6542 3.65413 12.0008 6.00079 12.0008V12.0008V12.0008Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }));
 }

package/dist/esm/components/assets/microsoft.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export function MicrosoftIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: "12",
@@ -11,21 +12,21 @@ export function MicrosoftIcon(props) {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0 0H5.70233V5.7023H0V0Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.29785 0H12.0002V5.7023H6.29785V0Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M0 6.29688H5.70233V11.9992H0V6.29688Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.29785 6.29688H12.0002V11.9992H6.29785V6.29688Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "clip0"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "12",
     height: "11.9999",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }))));
 }