@atlaskit/user-picker 7.16.4 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @atlaskit/user-picker
 
+## 8.1.0
+
+### Minor Changes
+
+- [`c48834ce234`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c48834ce234) - [ux] Instrumented `@atlaskit/user-picker` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 8.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+## 7.16.6
+
+### Patch Changes
+
+- [`d194015e2a9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d194015e2a9) - Remove bulk import for colors
+
+## 7.16.5
+
+### Patch Changes
+
+- [`b3d1a103c04`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3d1a103c04) - Remove field-base deprecated dependency
+
 ## 7.16.4
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.failedRequestUsersEvent = exports.successfulRequestUsersEvent = exports.requestUsersEvent = exports.filterUsersEvent = exports.mountedWithPrefetchEvent = exports.preparedUsersLoadedEvent = exports.failedEvent = exports.searchedEvent = exports.selectEvent = exports.cancelEvent = exports.deleteEvent = exports.clearEvent = exports.focusEvent = exports.createAndFireEventInElementsChannel = exports.startSession = void 0;
+exports.successfulRequestUsersEvent = exports.startSession = exports.selectEvent = exports.searchedEvent = exports.requestUsersEvent = exports.preparedUsersLoadedEvent = exports.mountedWithPrefetchEvent = exports.focusEvent = exports.filterUsersEvent = exports.failedRequestUsersEvent = exports.failedEvent = exports.deleteEvent = exports.createAndFireEventInElementsChannel = exports.clearEvent = exports.cancelEvent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/components/AddOptionAvatar.js

@@ -13,15 +13,17 @@ var _email = _interopRequireDefault(require("@atlaskit/icon/glyph/email"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var EmailAvatarWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  padding: ", "px;\n\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var EmailAvatarWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.isLozenge ? 0 : 4;
-}, _colors.N40);
+}, (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N40));
 
 var AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
@@ -31,7 +33,7 @@ var AddOptionAvatar = function AddOptionAvatar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_email.default, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
-    primaryColor: _colors.N500
+    primaryColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
   }));
 };
 

package/dist/cjs/components/AvatarItemOption.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AvatarItemOption = exports.TextWrapper = void 0;
+exports.TextWrapper = exports.AvatarItemOption = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -23,9 +25,9 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var Wrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), _colors.B400, function (_ref) {
+var Text = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), (0, _tokens.token)('color.text.selected', _colors.B400), function (_ref) {
   var secondary = _ref.secondary;
-  return secondary && "color: ".concat(_colors.B400, "; font-size: 0.85em;");
+  return secondary && "color: ".concat((0, _tokens.token)('color.text.selected', _colors.B400), "; font-size: 0.85em;");
 });
 
 var AdditionalInfo = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  ", "\n"])), function (_ref2) {

package/dist/cjs/components/BaseUserPicker.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BaseUserPicker = exports.BaseUserPickerWithoutAnalytics = void 0;
+exports.BaseUserPickerWithoutAnalytics = exports.BaseUserPicker = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,7 +29,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _analytics = require("../analytics");
 
@@ -508,7 +508,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         isLoading: count > 0 || resolving || isLoading,
         loadingMessage: loadingMessage,
         menuPlacement: "auto",
-        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.placeholder),
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.placeholder),
         addMoreMessage: addMoreMessage,
         classNamePrefix: "fabric-user-picker",
         hoveringClearIndicator: hoveringClearIndicator,

package/dist/cjs/components/EmailOption.js

@@ -23,10 +23,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _AddOptionAvatar = require("./AddOptionAvatar");
 
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -65,12 +67,12 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var id = _this.props.email.id;
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? _colors.B400 : _colors.N800
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
       }, id);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? _colors.B400 : _colors.N200
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       }, label);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {
@@ -94,7 +96,7 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           label = _this$props.label,
           emailValidity = _this$props.emailValidity;
-      return label !== undefined ? this.renderOption(label) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
+      return label !== undefined ? this.renderOption(label) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
         return _this2.renderOption(label);
       });
     }

package/dist/cjs/components/ExternalUserOption.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExternalUserOption = exports.EmailDomainWrapper = exports.SourceWrapper = exports.SourcesTooltipContainer = exports.ImageContainer = void 0;
+exports.SourcesTooltipContainer = exports.SourceWrapper = exports.ImageContainer = exports.ExternalUserOption = exports.EmailDomainWrapper = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -27,6 +27,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -47,7 +49,7 @@ var _microsoft = require("./assets/microsoft");
 
 var _github = require("./assets/github");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("./i18n");
 
@@ -109,7 +111,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       var name = _this.props.user.name;
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? _colors.B400 : _colors.N800
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
       }, name);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
@@ -126,7 +128,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
 
       var emailDomainWithAt = "@".concat(emailDomain);
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? _colors.B400 : _colors.N200
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       }, emailUser, /*#__PURE__*/_react.default.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
@@ -151,7 +153,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react.default.createElement(_panel.default, {
         label: "",
         size: "large",
-        primaryColor: _colors.N200
+        primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       })) : undefined;
     });
     return _this;
@@ -170,7 +172,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "formattedTooltipContent",
     value: function formattedTooltipContent() {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, this.props.user.sources.map(function (s) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, this.props.user.sources.map(function (s) {
         return SourcesInfoMap.get(s);
       }).filter(function (s) {
         return s;
@@ -180,7 +182,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
             label = _ref.label;
         return /*#__PURE__*/_react.default.createElement(SourceWrapper, {
           key: key
-        }, /*#__PURE__*/_react.default.createElement(ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, label)));
+        }, /*#__PURE__*/_react.default.createElement(ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, label)));
       })));
     }
   }]);

package/dist/cjs/components/GroupOption.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GroupOption = exports.GroupOptionIconWrapper = void 0;
+exports.GroupOptionIconWrapper = exports.GroupOption = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,12 +25,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -45,7 +47,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 GroupOptionIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), _colors.N20);
+var GroupOptionIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n\n  > span {\n    background-color: ", ";\n    border-radius: 50%;\n    padding: 4px;\n  }\n"])), (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20));
 
 exports.GroupOptionIconWrapper = GroupOptionIconWrapper;
 
@@ -72,7 +74,7 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$group.highlight;
       return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: isSelected ? _colors.B400 : _colors.N800
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -86,8 +88,8 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? _colors.B400 : _colors.N200
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.groupByline));
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {

package/dist/cjs/components/MessagesIntlProvider.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18nUtil = require("../util/i18n-util");
 
@@ -61,11 +61,12 @@ var MessagesIntlProvider = function MessagesIntlProvider(props) {
   var mergedMessages = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, intl.messages), messages);
   }, [intl.messages, messages]);
-  return /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    locale: intl.locale,
     messages: mergedMessages
   }, children);
 };
 
-var _default = (0, _reactIntl.injectIntl)(MessagesIntlProvider);
+var _default = (0, _reactIntlNext.injectIntl)(MessagesIntlProvider);
 
 exports.default = _default;

package/dist/cjs/components/MultiValue.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MultiValue = exports.scrollToValue = void 0;
+exports.scrollToValue = exports.MultiValue = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,7 +29,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _select = require("@atlaskit/select");
 
@@ -95,7 +95,7 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
         return selectProps.emailLabel ? /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
           isLozenge: true,
           label: selectProps.emailLabel
-        }) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addEmail, function (label) {
+        }) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addEmail, function (label) {
           return /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
             isLozenge: true,
             label: label

package/dist/cjs/components/MultiValueContainer.js

@@ -29,7 +29,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("./i18n");
 
@@ -74,11 +74,13 @@ var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       return value && value.length > 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addPlaceholder", function (placeholder) {
-      return _react.default.Children.map(_this.props.children, function (child) {
+      var children = _react.default.Children.map(_this.props.children, function (child) {
         return (0, _utils.isChildInput)(child) && _this.showPlaceholder() ? /*#__PURE__*/_react.default.cloneElement(child, {
           placeholder: placeholder
         }) : child;
       });
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderChildren", function () {
       var _this$props$selectPro = _this.props.selectProps,
@@ -90,7 +92,7 @@ var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addMore, function (addMore) {
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
           return _this.addPlaceholder(addMore);
         });
       }

package/dist/cjs/components/PopupControl.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,19 +23,52 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _fieldBase = require("@atlaskit/field-base");
+var _components = require("@atlaskit/theme/components");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _constants = require("@atlaskit/theme/constants");
 
 var _select = require("@atlaskit/select");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var _templateObject;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var ControlWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px 8px 8px;\n"])));
+var spacing = (0, _constants.gridSize)();
+var fontSize = 12;
+var innerHeight = spacing * 2; // 16px
+
+var lineHeight = innerHeight / fontSize;
+
+var ControlWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px ", "px ", "px;\n"])), spacing, spacing);
+
+var getColor = (0, _components.themed)({
+  light: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', _colors.DN90)
+});
+
+var getPadding = function getPadding() {
+  var right = 0;
+  var bottom = spacing / 2;
+  var left = 0;
+  var top = spacing * 2.5;
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px ", "px ", "px ", "px;\n  "])), top, right, bottom, left);
+};
+
+var Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  line-height: ", ";\n  ", "\n"])), function (props) {
+  return getColor(props);
+}, fontSize, lineHeight, getPadding);
 
 var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(PopupControl, _React$PureComponent);
@@ -49,9 +84,7 @@ var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var popupTitle = this.props.selectProps.popupTitle;
-      return /*#__PURE__*/_react.default.createElement(ControlWrapper, null, /*#__PURE__*/_react.default.createElement(_fieldBase.Label, {
-        label: popupTitle
-      }), /*#__PURE__*/_react.default.createElement(_select.components.Control, this.props));
+      return /*#__PURE__*/_react.default.createElement(ControlWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, popupTitle), /*#__PURE__*/_react.default.createElement(_select.components.Control, this.props));
     }
   }]);
   return PopupControl;

package/dist/cjs/components/PopupUserPicker.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupUserPicker = exports.PopupUserPickerWithoutAnalytics = void 0;
+exports.PopupUserPickerWithoutAnalytics = exports.PopupUserPicker = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/dist/cjs/components/TeamOption.js

@@ -25,9 +25,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _AvatarItemOption = require("./AvatarItemOption");
 
@@ -62,7 +64,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$team.highlight;
       return [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? _colors.B400 : _colors.N800
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -79,9 +81,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -89,9 +91,9 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -102,7 +104,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: isSelected ? _colors.B400 : _colors.N200
+        color: isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/UserOption.js

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -59,7 +61,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
           highlight = _this$props$user.highlight;
       var result = [/*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
         key: "name",
-        color: _this.props.isSelected ? _colors.B400 : _colors.N800
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -68,7 +70,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
         result.push( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
           key: "publicName"
         }, ' ', /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-          color: _this.props.isSelected ? _colors.B400 : _colors.N200
+          color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
         }, "(", /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -78,7 +80,7 @@ var UserOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
       return _this.props.user.byline ? /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? _colors.B400 : _colors.N200
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
       }, _this.props.user.byline) : undefined;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/UserPicker.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserPicker = exports.UserPickerWithoutAnalytics = void 0;
+exports.UserPickerWithoutAnalytics = exports.UserPicker = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

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

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 function GitHubIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     width: "12",
@@ -22,6 +24,6 @@ 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: (0, _tokens.token)('color.text.onBold', 'white')
   }));
 }