@atlaskit/user-picker 8.3.5 → 8.6.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/user-picker
 
+## 8.6.0
+
+### Minor Changes
+
+- [`d2a8de20d08`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2a8de20d08) - Add support in SmartUserPicker for org id for team search
+
+## 8.5.0
+
+### Minor Changes
+
+- [`b74959620f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b74959620f2) - added hover state for info icon, and updated primary color correspondingly
+  separated avatar item option for external users and applied different css settings
+
+## 8.4.1
+
+### Patch Changes
+
+- [`22928ac80d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22928ac80d0) - Fix: user sources would keep being fetched in a loop as long as the tooltip was displayed
+
+## 8.4.0
+
+### Minor Changes
+
+- [`29dd0cee8cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29dd0cee8cf) - [ux] Add support for Jira and Confluence user sources
+
 ## 8.3.5
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -180,6 +180,7 @@ var createDefaultSmartPickerAttributes = function createDefaultSmartPickerAttrib
       productKey = props.productKey,
       principalId = props.principalId,
       siteId = props.siteId,
+      orgId = props.orgId,
       filterOptions = props.filterOptions;
   var sessionId = state.sessionId,
       query = state.query;
@@ -197,6 +198,7 @@ var createDefaultSmartPickerAttributes = function createDefaultSmartPickerAttrib
     productKey: productKey,
     queryLength: (query || '').length,
     siteId: siteId,
+    orgId: orgId,
     sessionId: sessionId
   };
 };

package/dist/cjs/clients/UserSourceProvider.js

@@ -37,10 +37,10 @@ var useUserSource = function useUserSource(accountId, shouldFetchSources, existi
   var _useContext = (0, _react.useContext)(ExusUserSourceContext),
       fetchUserSource = _useContext.fetchUserSource;
 
-  var _useState = (0, _react.useState)(new Set(existingSources)),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      sources = _useState2[0],
-      setUserSources = _useState2[1];
+      externalSources = _useState2[0],
+      setExternalSources = _useState2[1];
 
   var _useState3 = (0, _react.useState)(true),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
@@ -72,26 +72,33 @@ var useUserSource = function useUserSource(accountId, shouldFetchSources, existi
       return cleanup;
     }
 
-    if (isMounted) {
-      fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(function (externalSources) {
-        setLoading(false);
-        var externalSourceTypes = externalSources.map(function (source) {
-          return source.sourceType;
-        });
-        setUserSources(new Set([].concat((0, _toConsumableArray2.default)(sources), (0, _toConsumableArray2.default)(externalSourceTypes))));
-      }).catch(function (error) {
-        setLoading(false);
-        setError(error);
+    fetchUserSource(accountId, abortController === null || abortController === void 0 ? void 0 : abortController.signal).then(function (externalSources) {
+      if (!isMounted) {
+        return;
+      }
+
+      setLoading(false);
+      var externalSourceTypes = externalSources.map(function (source) {
+        return source.sourceType;
       });
-    }
+      setExternalSources(externalSourceTypes);
+    }).catch(function (error) {
+      if (!isMounted) {
+        return;
+      }
 
+      setLoading(false);
+      setError(error);
+    });
     return cleanup;
-  }, [fetchUserSource, accountId, sources, abortController, shouldFetchSources]);
-  return {
-    sources: Array.from(sources),
-    loading: loading,
-    error: error
-  };
+  }, [fetchUserSource, accountId, abortController, shouldFetchSources]);
+  return (0, _react.useMemo)(function () {
+    return {
+      sources: Array.from(new Set([].concat((0, _toConsumableArray2.default)(existingSources !== null && existingSources !== void 0 ? existingSources : []), (0, _toConsumableArray2.default)(externalSources)))),
+      loading: loading,
+      error: error
+    };
+  }, [error, existingSources, externalSources, loading]);
 };
 
 exports.useUserSource = useUserSource;

package/dist/cjs/components/AddOptionAvatar.js

@@ -23,7 +23,7 @@ var _templateObject;
 
 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;
-}, (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N40));
+}, (0, _tokens.token)('color.background.neutral', _colors.N40));
 
 var AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
@@ -33,7 +33,7 @@ var AddOptionAvatar = function AddOptionAvatar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_email.default, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
-    primaryColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
+    primaryColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
   }));
 };
 

package/dist/cjs/components/AvatarItemOption.js

@@ -39,29 +39,25 @@ var AsyncTooltip = /*#__PURE__*/_react.default.lazy(function () {
 
 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"])), (0, _tokens.token)('color.text.selected', _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.brand', _colors.B400), function (_ref) {
   var secondary = _ref.secondary;
-  return secondary && "color: ".concat((0, _tokens.token)('color.text.selected', _colors.B400), "; font-size: 0.85em;");
+  return secondary && "color: ".concat((0, _tokens.token)('color.text.brand', _colors.B400), "; font-size: 0.85em;");
 });
 
-var AdditionalInfo = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  ", "\n"])), function (_ref2) {
-  var withTooltip = _ref2.withTooltip;
-  return withTooltip && " padding-top: 5px;";
-});
+var AdditionalInfo = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n"])));
 
-var TextWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n"])), function (_ref3) {
-  var color = _ref3.color;
+var TextWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n"])), function (_ref2) {
+  var color = _ref2.color;
   return color;
 });
 
 exports.TextWrapper = TextWrapper;
 
-var AvatarItemOption = function AvatarItemOption(_ref4) {
-  var avatar = _ref4.avatar,
-      primaryText = _ref4.primaryText,
-      secondaryText = _ref4.secondaryText,
-      lozenge = _ref4.lozenge,
-      sourcesInfoTooltip = _ref4.sourcesInfoTooltip;
+var AvatarItemOption = function AvatarItemOption(_ref3) {
+  var avatar = _ref3.avatar,
+      primaryText = _ref3.primaryText,
+      secondaryText = _ref3.secondaryText,
+      lozenge = _ref3.lozenge;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, avatar, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxWidth: '100%',
@@ -70,9 +66,7 @@ var AvatarItemOption = function AvatarItemOption(_ref4) {
       lineHeight: '1.4',
       paddingLeft: '8px'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, null, primaryText), /*#__PURE__*/_react.default.createElement(AdditionalInfo, {
-    withTooltip: Boolean(sourcesInfoTooltip)
-  }, !sourcesInfoTooltip && (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, null, primaryText), /*#__PURE__*/_react.default.createElement(AdditionalInfo, null, (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
@@ -80,7 +74,7 @@ var AvatarItemOption = function AvatarItemOption(_ref4) {
     fallback: /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)
   }, /*#__PURE__*/_react.default.createElement(AsyncTooltip, {
     content: lozenge.tooltip
-  }, /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text))) : /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
+  }, /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text))) : /*#__PURE__*/_react.default.createElement(_lozenge.default, lozenge, lozenge.text)))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
     secondary: true
   }, secondaryText))));
 };

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

@@ -67,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, id);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, label);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalAvatarItemOption = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var OuterWrapper = _styledComponents.default.div(_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 DetailsWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: 100%;\n  min-width: 0;\n  flex: 1 1 100%;\n  line-height: 1.4;\n  padding-left: 8px;\n  align-items: center;\n"])));
+
+var TextSection = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% - 32px);\n  flex: auto;\n"])));
+
+var Text = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: 100%;\n  margin: 0;\n  color: ", ";\n  ", "\n  white-space: nowrap;\n\n  > span {\n    max-width: inherit;\n  }\n"])), (0, _tokens.token)('color.text.selected', _colors.B400), function (_ref) {
+  var secondary = _ref.secondary;
+  return secondary && "color: ".concat((0, _tokens.token)('color.text.selected', _colors.B400), "; font-size: 0.85em;");
+});
+
+var ExternalAvatarItemOption = function ExternalAvatarItemOption(_ref2) {
+  var avatar = _ref2.avatar,
+      primaryText = _ref2.primaryText,
+      secondaryText = _ref2.secondaryText,
+      sourcesInfoTooltip = _ref2.sourcesInfoTooltip;
+  return /*#__PURE__*/_react.default.createElement(OuterWrapper, null, avatar, /*#__PURE__*/_react.default.createElement(DetailsWrapper, null, /*#__PURE__*/_react.default.createElement(TextSection, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, null, primaryText)), secondaryText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Text, {
+    secondary: true
+  }, secondaryText))), /*#__PURE__*/_react.default.createElement("div", null, sourcesInfoTooltip)));
+};
+
+exports.ExternalAvatarItemOption = ExternalAvatarItemOption;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+
+var _default = function _default() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMouseHovered = _useState2[0],
+      setHoverState = _useState2[1];
+
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return setHoverState(true);
+  }, [setHoverState]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return setHoverState(false);
+  }, [setHoverState]);
+  return /*#__PURE__*/_react.default.createElement(Wrapper, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_panel.default, {
+    testId: "source-icon",
+    label: "",
+    size: "large",
+    primaryColor: (0, _tokens.token)('color.text.lowEmphasis', isMouseHovered ? _colors.N200 : _colors.N50)
+  }));
+};
+
+exports.default = _default;

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

@@ -25,23 +25,27 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _colors = require("@atlaskit/theme/colors");
+var _react = _interopRequireDefault(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
+var _reactIntlNext = require("react-intl-next");
 
-var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _AvatarItemOption = require("../AvatarItemOption");
+var _confluenceIcon = require("@atlaskit/logo/confluence-icon");
 
-var _SizeableAvatar = require("../SizeableAvatar");
+var _jiraIcon = require("@atlaskit/logo/jira-icon");
 
-var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _AvatarItemOption = require("../AvatarItemOption");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _SizeableAvatar = require("../SizeableAvatar");
 
 var _slack = require("../assets/slack");
 
@@ -51,23 +55,25 @@ var _microsoft = require("../assets/microsoft");
 
 var _github = require("../assets/github");
 
-var _reactIntlNext = require("react-intl-next");
-
 var _i18n = require("../i18n");
 
 var _ExternalUserSourcesContainer = require("../ExternalUserSourcesContainer");
 
+var _InfoIcon = _interopRequireDefault(require("./InfoIcon"));
+
+var _ExternalAvatarItemOption = require("./ExternalAvatarItemOption");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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 ImageContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 12px;\n  width: 12px;\n  padding-right: 4px;\n"])));
+var ImageContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 16px;\n  width: 16px;\n  padding-right: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 
 exports.ImageContainer = ImageContainer;
 
-var SourcesTooltipContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 4px;\n"])));
+var SourcesTooltipContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 4px;\n  padding-right: 4px;\n"])));
 
 exports.SourcesTooltipContainer = SourcesTooltipContainer;
 
@@ -94,6 +100,18 @@ var SourcesInfoMap = new Map([['slack', {
   key: 'github',
   icon: /*#__PURE__*/_react.default.createElement(_github.GitHubIcon, null),
   label: _i18n.messages.gitHubProvider
+}], ['jira', {
+  key: 'jira',
+  icon: /*#__PURE__*/_react.default.createElement(_jiraIcon.JiraIcon, {
+    size: 'xsmall'
+  }),
+  label: _i18n.messages.jiraSource
+}], ['confluence', {
+  key: 'confluence',
+  icon: /*#__PURE__*/_react.default.createElement(_confluenceIcon.ConfluenceIcon, {
+    size: 'xsmall'
+  }),
+  label: _i18n.messages.confluenceSource
 }]]);
 
 var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
@@ -115,7 +133,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, name);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
@@ -132,7 +150,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
 
       var emailDomainWithAt = "@".concat(emailDomain);
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
-        color: _this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, emailUser, /*#__PURE__*/_react.default.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
@@ -152,12 +170,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       return _this.props.user.isExternal ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: _this.formattedTooltipContent(),
         position: 'right-start'
-      }, /*#__PURE__*/_react.default.createElement(_panel.default, {
-        testId: "source-icon",
-        label: "",
-        size: "large",
-        primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
-      })) : undefined;
+      }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, null)) : undefined;
     });
     return _this;
   }
@@ -165,7 +178,7 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(ExternalUserOption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
+      return /*#__PURE__*/_react.default.createElement(_ExternalAvatarItemOption.ExternalAvatarItemOption, {
         avatar: this.renderAvatar(),
         primaryText: this.getPrimaryText(),
         secondaryText: this.renderSecondaryText(),

package/dist/cjs/components/ExternalUserSourcesContainer.js

@@ -15,8 +15,7 @@ var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
   var children = _ref.children,
       accountId = _ref.accountId,
       shouldFetchSources = _ref.shouldFetchSources,
-      _ref$initialSources = _ref.initialSources,
-      initialSources = _ref$initialSources === void 0 ? [] : _ref$initialSources;
+      initialSources = _ref.initialSources;
 
   var _useUserSource = (0, _UserSourceProvider.useUserSource)(accountId, shouldFetchSources, initialSources),
       sources = _useUserSource.sources,

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

@@ -47,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"])), (0, _tokens.token)('color.background.subtleNeutral.resting', _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.neutral', _colors.N20));
 
 exports.GroupOptionIconWrapper = GroupOptionIconWrapper;
 
@@ -74,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
+        color: isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -88,7 +88,7 @@ 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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+        color: isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {

package/dist/cjs/components/PopupControl.js

@@ -54,8 +54,8 @@ 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)
+  light: (0, _tokens.token)('color.text.subtlest', _colors.N200),
+  dark: (0, _tokens.token)('color.text.subtlest', _colors.DN90)
 });
 
 var getPadding = function getPadding() {

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

@@ -64,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -104,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+        color: isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/UserOption.js

@@ -61,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800)
       }, /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -70,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+          color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
         }, "(", /*#__PURE__*/_react.default.createElement(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -80,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 ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+        color: _this.props.isSelected ? (0, _tokens.token)('color.text.brand', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200)
       }, _this.props.user.byline) : undefined;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

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

@@ -24,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: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }));
 }

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

@@ -24,21 +24,21 @@ 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: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }), /*#__PURE__*/_react.default.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: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }), /*#__PURE__*/_react.default.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: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }), /*#__PURE__*/_react.default.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: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }));
 }

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

@@ -24,21 +24,21 @@ function MicrosoftIcon(props) {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0 0H5.70233V5.7023H0V0Z",
-    fill: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M6.29785 0H12.0002V5.7023H6.29785V0Z",
-    fill: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M0 6.29688H5.70233V11.9992H0V6.29688Z",
-    fill: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M6.29785 6.29688H12.0002V11.9992H6.29785V6.29688Z",
-    fill: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "clip0"
   }, /*#__PURE__*/_react.default.createElement("rect", {
     width: "12",
     height: "11.9999",
-    fill: (0, _tokens.token)('color.text.onBold', 'white')
+    fill: (0, _tokens.token)('color.text.inverse', 'white')
   }))));
 }