@atlaskit/user-picker 8.0.0 → 8.3.0

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-next';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
-import { HighlightText } from './HighlightText';
-import { messages } from './i18n';
-import { SizeableAvatar } from './SizeableAvatar';
+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/UserPicker.js

@@ -23,6 +23,7 @@ import { getComponents } from './components';
 import { getCreatableProps } from './creatable';
 import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
+import { ExusUserSourceProvider } from './../clients/UserSourceProvider';
 export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(UserPickerWithoutAnalytics, _React$Component);
 
@@ -48,7 +49,8 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
           menuPosition = _this$props.menuPosition,
           menuShouldBlockScroll = _this$props.menuShouldBlockScroll,
           captureMenuScroll = _this$props.captureMenuScroll,
-          closeMenuOnScroll = _this$props.closeMenuOnScroll;
+          closeMenuOnScroll = _this$props.closeMenuOnScroll,
+          loadUserSource = _this$props.loadUserSource;
       var width = this.props.width;
       var SelectComponent = allowEmail ? CreatableSelect : Select;
       var creatableProps = suggestEmailsForDomain ? getCreatableSuggestedEmailProps(suggestEmailsForDomain, isValidEmail) : getCreatableProps(isValidEmail);
@@ -62,13 +64,15 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel
       }) : _objectSpread({}, defaultPickerProps);
-      return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
+      return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(ExusUserSourceProvider, {
+        fetchUserSource: loadUserSource
+      }, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
         width: width,
         SelectComponent: SelectComponent,
         styles: getStyles(width, isMulti, this.props.styles),
         components: getComponents(isMulti, anchor),
         pickerProps: pickerProps
-      })));
+      }))));
     }
   }]);
 

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')
   }))));
 }

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export function SlackIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: "12",
@@ -11,33 +12,33 @@ export function SlackIcon(props) {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M2.51653 7.5688C2.51653 8.26133 1.9508 8.82706 1.25826 8.82706C0.565731 8.82706 0 8.26133 0 7.5688C0 6.87627 0.565731 6.31055 1.25826 6.31055H2.51653V7.5688Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M3.15039 7.5688C3.15039 6.87627 3.71612 6.31055 4.40865 6.31055C5.10119 6.31055 5.66692 6.87627 5.66692 7.5688V10.7193C5.66692 11.4119 5.10119 11.9776 4.40865 11.9776C3.71612 11.9776 3.15039 11.4119 3.15039 10.7193V7.5688Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M4.40865 2.51651C3.71612 2.51651 3.15039 1.95079 3.15039 1.25826C3.15039 0.565728 3.71612 0 4.40865 0C5.10119 0 5.66692 0.565728 5.66692 1.25826V2.51651H4.40865Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M4.4088 3.15039C5.10133 3.15039 5.66706 3.71612 5.66706 4.40865C5.66706 5.10118 5.10133 5.6669 4.4088 5.6669H1.25826C0.565731 5.6669 0 5.10118 0 4.40865C0 3.71612 0.565731 3.15039 1.25826 3.15039H4.4088Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M9.46094 4.40865C9.46094 3.71612 10.0267 3.15039 10.7192 3.15039C11.4117 3.15039 11.9775 3.71612 11.9775 4.40865C11.9775 5.10118 11.4117 5.6669 10.7192 5.6669H9.46094V4.40865Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M8.8261 4.40878C8.8261 5.10131 8.26036 5.66704 7.56783 5.66704C6.8753 5.66704 6.30957 5.10131 6.30957 4.40878V1.25826C6.30957 0.565728 6.8753 0 7.56783 0C8.26036 0 8.8261 0.565728 8.8261 1.25826V4.40878Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M7.56881 9.46094C8.26134 9.46094 8.82707 10.0267 8.82707 10.7192C8.82707 11.4117 8.26134 11.9775 7.56881 11.9775C6.87628 11.9775 6.31055 11.4117 6.31055 10.7192V9.46094H7.56881Z",
-    fill: "white"
+    fill: token('color.text.onBold', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M7.56881 8.82706C6.87628 8.82706 6.31055 8.26133 6.31055 7.5688C6.31055 6.87627 6.87628 6.31055 7.56881 6.31055H10.7193C11.4119 6.31055 11.9776 6.87627 11.9776 7.5688C11.9776 8.26133 11.4119 8.82706 10.7193 8.82706H7.56881Z",
-    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')
   }))));
 }

package/dist/esm/components/i18n.js

@@ -65,6 +65,11 @@ export var messages = defineMessages({
     defaultMessage: 'Found in:',
     description: 'From where the external user is coming'
   },
+  externalUserSourcesError: {
+    id: 'fabric.elements.user-picker.external.sourced.error',
+    defaultMessage: "We can't connect you right now.",
+    description: "Error message when we can't fetch a user's import sources"
+  },
   slackProvider: {
     id: 'fabric.elements.user-picker.slack.provider',
     defaultMessage: 'Slack',

package/dist/esm/components/styles.js

@@ -7,6 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { AVATAR_SIZES, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import memoizeOne from 'memoize-one';
 import { getAvatarSize } from './utils';
 import { mergeStyles } from '@atlaskit/select';
@@ -28,14 +29,14 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? css.borderColor : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : N40,
-        backgroundColor: state.isFocused ? css['backgroundColor'] : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? N10 : N20,
+        borderColor: state.isFocused ? token('color.border.neutral', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : token('color.border.neutral', N40),
+        backgroundColor: state.isFocused ? token('color.background.default', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? token('color.background.subtleBorderedNeutral.resting', N10) : token('color.background.subtleNeutral.resting', N20),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? css[':hover'].borderColor : B100 : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? R50 : N30 : N40,
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? R50 : state.isFocused ? css[':hover'] ? css[':hover'].backgroundColor : N0 : state.isDisabled ? N10 : N30
+          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focus', css[':hover'].borderColor) : token('color.border.focus', B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? token('color.iconBorder.danger', R50) : token('color.border.neutral', N30) : token('color.border.neutral', N40),
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? token('color.background.subtleDanger.resting', R50) : state.isFocused ? css[':hover'] ? token('color.background.default', css[':hover'].backgroundColor) : token('color.background.default', N0) : state.isDisabled ? token('color.background.disabled', N10) : token('color.background.default', N30)
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -59,7 +60,7 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         paddingTop: 0,
         padding: 0,
         ':hover': {
-          color: R400
+          color: token('color.text.danger', R400)
         }
       });
     },
@@ -157,14 +158,14 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         paddingLeft: isMulti ? 0 : AVATAR_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: N100,
+          color: token('color.text.lowEmphasis', N100),
           opacity: 1
           /* Firefox */
 
         },
         '& input:-ms-input-placeholder': {
           /* Internet Explorer 10-11 */
-          color: N100
+          color: token('color.text.lowEmphasis', N100)
         }
       });
     }

package/dist/esm/version.json

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

package/dist/types/clients/UserSourceProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LoadUserSource, UserSource } from '../types';
+export interface UserSourceContext {
+    fetchUserSource?: LoadUserSource;
+}
+export declare const ExusUserSourceProvider: React.FC<UserSourceContext>;
+export declare const useUserSource: (accountId: string, existingSources?: UserSource[] | undefined) => {
+    sources: UserSource[];
+    loading: boolean;
+    error: string | null;
+};

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncEmailOption: React.LazyExoticComponent<typeof import("./main").EmailOption>;
+export default AsyncEmailOption;

package/dist/types/components/{EmailOption.d.ts → EmailOption/main.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Email } from '../types';
-import { EmailValidationResponse } from './emailValidation';
+import { Email } from '../../types';
+import { EmailValidationResponse } from '../emailValidation';
 export declare type EmailOptionProps = {
     email: Email;
     isSelected: boolean;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncExternalUserOption: React.LazyExoticComponent<typeof import("./main").ExternalUserOption>;
+export default AsyncExternalUserOption;

package/dist/types/components/{ExternalUserOption.d.ts → ExternalUserOption/main.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExternalUser } from '../types';
+import { ExternalUser } from '../../types';
 export declare const ImageContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare const SourcesTooltipContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const SourceWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { UserSource } from '../types';
+declare type SourcesChildrenFunc = ({ sources, sourcesLoading, sourcesError, }: {
+    sources: UserSource[];
+    sourcesLoading: boolean;
+    sourcesError: string | null;
+}) => ReactNode;
+interface SourcesContainerProps {
+    accountId: string;
+    initialSources: UserSource[];
+    children: SourcesChildrenFunc;
+}
+export declare const ExternalUserSourcesContainer: React.FC<SourcesContainerProps>;
+export {};

package/dist/types/components/GroupOption/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncGroupOption: React.LazyExoticComponent<typeof import("./main").GroupOption>;
+export default AsyncGroupOption;

package/dist/types/components/{GroupOption.d.ts → GroupOption/main.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Group } from '../types';
+import { Group } from '../../types';
 export declare const GroupOptionIconWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare type GroupOptionProps = {
     group: Group;

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

@@ -1,9 +1,3 @@
 import React from 'react';
-import { IntlShape } from 'react-intl-next';
-export interface MessagesIntlProviderProps {
-    intl: IntlShape;
-}
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<MessagesIntlProviderProps>> & {
-    WrappedComponent: React.ComponentType<MessagesIntlProviderProps>;
-};
-export default _default;
+declare const MessagesIntlProvider: React.FC;
+export default MessagesIntlProvider;

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

@@ -1,8 +1,11 @@
+import { OptionProps as AkOptionProps } from '@atlaskit/select';
 import { FC } from 'react';
 import { Option as OptionType } from '../types';
-export declare type OptionProps = {
+export declare type OptionProps = AkOptionProps & {
     data: OptionType;
     isSelected: boolean;
+    isDisabled: boolean;
+    isFocused: boolean;
     status?: string;
     selectProps: {
         emailLabel?: string;

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

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "isMulti" | "offset" | "width" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle"> & Partial<Pick<Pick<PopupUserPickerProps, "placeholder" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isMulti" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "styles" | "value" | "defaultValue" | "offset" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "popupTitle" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">, "isMulti" | "offset" | "width" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

package/dist/types/components/TeamOption/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncTeamOption: React.LazyExoticComponent<typeof import("./main").TeamOption>;
+export default AsyncTeamOption;

package/dist/types/components/{TeamOption.d.ts → TeamOption/main.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Team } from '../types';
+import { Team } from '../../types';
 export declare type TeamOptionProps = {
     team: Team;
     isSelected: boolean;

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

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

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

@@ -64,6 +64,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    externalUserSourcesError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     slackProvider: {
         id: string;
         defaultMessage: string;

package/dist/types/types.d.ts

@@ -39,6 +39,13 @@ export declare type UserPickerProps = WithAnalyticsEventsProps & {
      * sessionId?: user picker session identifier, used to track success metric for users providers
      */
     loadOptions?: LoadOptions;
+    /**
+     * Function used to load user source if they are an external user.
+     * accepts two params:
+     * accountId: account ID of the user to lookup sources
+     * signal: AbortController signal to abort the request if the tooltip is closed
+     */
+    loadUserSource?: LoadUserSource;
     /** Callback for value change events fired whenever a selection is inserted or removed. */
     onChange?: OnChange;
     /** To enable multi user picker. */
@@ -253,6 +260,13 @@ export declare type Option<Data = OptionData> = {
     value: string;
     data: Data;
 };
+export interface UserSourceResult {
+    sourceId: string;
+    sourceType: UserSource;
+}
+export interface LoadUserSource {
+    (accountId: string, signal?: AbortSignal): Promise<UserSourceResult[]>;
+}
 export interface LoadOptions {
     (searchText?: string, sessionId?: string): Promisable<OptionData | OptionData[]> | Iterable<Promisable<OptionData[] | OptionData> | OptionData | OptionData[]>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "8.0.0",
+  "version": "8.3.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,10 +32,12 @@
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/select": "^15.2.0",
+    "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
     "uuid": "^3.1.0"
   },
@@ -51,11 +53,17 @@
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/radio": "^5.3.4",
     "@atlaskit/range": "^5.0.11",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/textfield": "^5.0.0",
     "@atlaskit/util-data-test": "^17.0.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/dom": "^7.7.3",
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^8.0.1",
+    "@testing-library/react-hooks": "^1.0.4",
+    "@testing-library/user-event": "10.4.0",
     "@types/uuid": "^3.4.4",
     "enzyme": "^3.10.0",
     "enzyme-react-intl": "^2.0.6",
@@ -68,5 +76,10 @@
     "fabric",
     "ui"
   ],
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }