@atlaskit/user-picker 7.16.5 → 7.16.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 7.16.6
+
+### Patch Changes
+
+- [`d194015e2a9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d194015e2a9) - Remove bulk import for colors
+
 ## 7.16.5
 
 ### 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/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"));
 

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"));
 

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"));
 

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"));
 

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"));
 

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/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/smart-user-picker/components/index.js

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

package/dist/cjs/components/smart-user-picker/config/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JDOG_CLOUD_ID = exports.getConfig = exports.setSmartUserPickerEnv = void 0;
+exports.setSmartUserPickerEnv = exports.getConfig = exports.JDOG_CLOUD_ID = void 0;
 var env = 'prod';
 var STG_INSTANCE = 'https://api-private.stg.atlassian.com';
 var LOCAL_CONFIG = {

package/dist/cjs/components/smart-user-picker/index.js

@@ -11,16 +11,16 @@ Object.defineProperty(exports, "SmartUserPicker", {
     return _components.default;
   }
 });
-Object.defineProperty(exports, "hydrateDefaultValues", {
+Object.defineProperty(exports, "getUserRecommendations", {
   enumerable: true,
   get: function get() {
-    return _components.hydrateDefaultValues;
+    return _service.getUserRecommendations;
   }
 });
-Object.defineProperty(exports, "getUserRecommendations", {
+Object.defineProperty(exports, "hydrateDefaultValues", {
   enumerable: true,
   get: function get() {
-    return _service.getUserRecommendations;
+    return _components.hydrateDefaultValues;
   }
 });
 Object.defineProperty(exports, "setSmartUserPickerEnv", {

package/dist/cjs/components/styles.js

@@ -2,12 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPopupStyles = exports.getStyles = exports.INDICATOR_WIDTH = exports.AVATAR_PADDING = exports.BORDER_PADDING = void 0;
+exports.getStyles = exports.getPopupStyles = exports.INDICATOR_WIDTH = exports.BORDER_PADDING = exports.AVATAR_PADDING = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -15,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _avatar = require("@atlaskit/avatar");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
@@ -23,10 +21,6 @@ var _utils = require("./utils");
 
 var _select = require("@atlaskit/select");
 
-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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -52,14 +46,14 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? css.borderColor : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : colors.N40,
-        backgroundColor: state.isFocused ? css['backgroundColor'] : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? colors.N10 : colors.N20,
+        borderColor: state.isFocused ? css.borderColor : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : _colors.N40,
+        backgroundColor: state.isFocused ? css['backgroundColor'] : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? _colors.N10 : _colors.N20,
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? css[':hover'].borderColor : colors.B100 : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? colors.R50 : colors.N30 : colors.N40,
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? colors.R50 : state.isFocused ? css[':hover'] ? css[':hover'].backgroundColor : colors.N0 : state.isDisabled ? colors.N10 : colors.N30
+          borderColor: state.isFocused ? css[':hover'] ? css[':hover'].borderColor : _colors.B100 : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? _colors.R50 : _colors.N30 : _colors.N40,
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? _colors.R50 : state.isFocused ? css[':hover'] ? css[':hover'].backgroundColor : _colors.N0 : state.isDisabled ? _colors.N10 : _colors.N30
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -82,7 +76,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
         paddingTop: 0,
         padding: 0,
         ':hover': {
-          color: colors.R400
+          color: _colors.R400
         }
       });
     },
@@ -178,14 +172,14 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
         paddingLeft: isMulti ? 0 : AVATAR_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: colors.N100,
+          color: _colors.N100,
           opacity: 1
           /* Firefox */
 
         },
         '& input:-ms-input-placeholder': {
           /* Internet Explorer 10-11 */
-          color: colors.N100
+          color: _colors.N100
         }
       });
     }

package/dist/cjs/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.getAvatarUrl = exports.callCallback = exports.hasValue = exports.isSingleValue = exports.isChildInput = exports.getAvatarSize = exports.optionToSelectableOptions = exports.getOptions = exports.isIterable = exports.extractOptionValue = exports.optionToSelectableOption = exports.isEmail = exports.isGroup = exports.isTeam = exports.isUser = exports.isExternalUser = void 0;
+exports.optionToSelectableOptions = exports.optionToSelectableOption = exports.isUser = exports.isTeam = exports.isSingleValue = exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 

package/dist/cjs/i18n/index.js

@@ -5,34 +5,46 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "cs", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _cs.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _en.default;
   }
 });
-Object.defineProperty(exports, "nl", {
+Object.defineProperty(exports, "en_GB", {
   enumerable: true,
   get: function get() {
-    return _nl.default;
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "en_ZZ", {
+  enumerable: true,
+  get: function get() {
+    return _en_ZZ.default;
+  }
+});
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -53,16 +65,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _hu.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "is", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _is.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -89,6 +101,12 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
+Object.defineProperty(exports, "nl", {
+  enumerable: true,
+  get: function get() {
+    return _nl.default;
+  }
+});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -107,22 +125,22 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ru", {
+Object.defineProperty(exports, "ro", {
   enumerable: true,
   get: function get() {
-    return _ru.default;
+    return _ro.default;
   }
 });
-Object.defineProperty(exports, "sk", {
+Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
-    return _sk.default;
+    return _ru.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "sk", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _sk.default;
   }
 });
 Object.defineProperty(exports, "sv", {
@@ -155,34 +173,16 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "en_ZZ", {
-  enumerable: true,
-  get: function get() {
-    return _en_ZZ.default;
-  }
-});
-Object.defineProperty(exports, "en", {
-  enumerable: true,
-  get: function get() {
-    return _en.default;
-  }
-});
-Object.defineProperty(exports, "en_GB", {
-  enumerable: true,
-  get: function get() {
-    return _en_GB.default;
-  }
-});
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "ro", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _ro.default;
+    return _zh_TW.default;
   }
 });
 

package/dist/cjs/index.js

@@ -3,88 +3,88 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "isValidEmail", {
+Object.defineProperty(exports, "EmailType", {
   enumerable: true,
   get: function get() {
-    return _emailValidation.isValidEmail;
+    return _types.EmailType;
   }
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "GroupType", {
   enumerable: true,
   get: function get() {
-    return _UserPicker.UserPicker;
+    return _types.GroupType;
   }
 });
-Object.defineProperty(exports, "getUserRecommendations", {
+Object.defineProperty(exports, "PopupUserPicker", {
   enumerable: true,
   get: function get() {
-    return _index.getUserRecommendations;
+    return _PopupUserPicker.PopupUserPicker;
   }
 });
-Object.defineProperty(exports, "hydrateDefaultValues", {
+Object.defineProperty(exports, "SmartUserPicker", {
   enumerable: true,
   get: function get() {
-    return _index.hydrateDefaultValues;
+    return _index.SmartUserPicker;
   }
 });
-Object.defineProperty(exports, "SmartUserPicker", {
+Object.defineProperty(exports, "TeamType", {
   enumerable: true,
   get: function get() {
-    return _index.SmartUserPicker;
+    return _types.TeamType;
   }
 });
-Object.defineProperty(exports, "setSmartUserPickerEnv", {
+Object.defineProperty(exports, "UserType", {
   enumerable: true,
   get: function get() {
-    return _index.setSmartUserPickerEnv;
+    return _types.UserType;
   }
 });
-Object.defineProperty(exports, "PopupUserPicker", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _PopupUserPicker.PopupUserPicker;
+    return _UserPicker.UserPicker;
   }
 });
-Object.defineProperty(exports, "isEmail", {
+Object.defineProperty(exports, "getUserRecommendations", {
   enumerable: true,
   get: function get() {
-    return _utils.isEmail;
+    return _index.getUserRecommendations;
   }
 });
-Object.defineProperty(exports, "isTeam", {
+Object.defineProperty(exports, "hydrateDefaultValues", {
   enumerable: true,
   get: function get() {
-    return _utils.isTeam;
+    return _index.hydrateDefaultValues;
   }
 });
-Object.defineProperty(exports, "isUser", {
+Object.defineProperty(exports, "isEmail", {
   enumerable: true,
   get: function get() {
-    return _utils.isUser;
+    return _utils.isEmail;
   }
 });
-Object.defineProperty(exports, "EmailType", {
+Object.defineProperty(exports, "isTeam", {
   enumerable: true,
   get: function get() {
-    return _types.EmailType;
+    return _utils.isTeam;
   }
 });
-Object.defineProperty(exports, "GroupType", {
+Object.defineProperty(exports, "isUser", {
   enumerable: true,
   get: function get() {
-    return _types.GroupType;
+    return _utils.isUser;
   }
 });
-Object.defineProperty(exports, "TeamType", {
+Object.defineProperty(exports, "isValidEmail", {
   enumerable: true,
   get: function get() {
-    return _types.TeamType;
+    return _emailValidation.isValidEmail;
   }
 });
-Object.defineProperty(exports, "UserType", {
+Object.defineProperty(exports, "setSmartUserPickerEnv", {
   enumerable: true,
   get: function get() {
-    return _types.UserType;
+    return _index.setSmartUserPickerEnv;
   }
 });
 

package/dist/cjs/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EmailType = exports.GroupType = exports.TeamType = exports.UserType = void 0;
+exports.UserType = exports.TeamType = exports.GroupType = exports.EmailType = void 0;
 var UserType = 'user';
 exports.UserType = UserType;
 var TeamType = 'team';

package/dist/cjs/version.json

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

package/dist/es2019/components/styles.js

@@ -1,5 +1,5 @@
 import { AVATAR_SIZES, BORDER_WIDTH } from '@atlaskit/avatar';
-import * as colors from '@atlaskit/theme/colors';
+import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { getAvatarSize } from './utils';
 import { mergeStyles } from '@atlaskit/select';
@@ -19,14 +19,14 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       const isMulti = state.selectProps.isMulti;
       return { ...css,
         width,
-        borderColor: state.isFocused ? css.borderColor : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : colors.N40,
-        backgroundColor: state.isFocused ? css['backgroundColor'] : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? colors.N10 : colors.N20,
+        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,
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': { ...css[':hover'],
-          borderColor: state.isFocused ? css[':hover'] ? css[':hover'].borderColor : colors.B100 : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? colors.R50 : colors.N30 : colors.N40,
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? colors.R50 : state.isFocused ? css[':hover'] ? css[':hover'].backgroundColor : colors.N0 : state.isDisabled ? colors.N10 : colors.N30
+          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
         },
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -49,7 +49,7 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       paddingTop: 0,
       padding: 0,
       ':hover': {
-        color: colors.R400
+        color: R400
       }
     }),
     indicatorsContainer: css => ({ ...css,
@@ -135,14 +135,14 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       paddingLeft: isMulti ? 0 : AVATAR_PADDING,
       '& input::placeholder': {
         /* Chrome, Firefox, Opera, Safari 10.1+ */
-        color: colors.N100,
+        color: N100,
         opacity: 1
         /* Firefox */
 
       },
       '& input:-ms-input-placeholder': {
         /* Internet Explorer 10-11 */
-        color: colors.N100
+        color: N100
       }
     })
   };

package/dist/es2019/version.json

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

package/dist/esm/components/styles.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { AVATAR_SIZES, BORDER_WIDTH } from '@atlaskit/avatar';
-import * as colors from '@atlaskit/theme/colors';
+import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { getAvatarSize } from './utils';
 import { mergeStyles } from '@atlaskit/select';
@@ -28,14 +28,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' : colors.N40,
-        backgroundColor: state.isFocused ? css['backgroundColor'] : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? colors.N10 : colors.N20,
+        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,
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? css[':hover'].borderColor : colors.B100 : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? colors.R50 : colors.N30 : colors.N40,
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? colors.R50 : state.isFocused ? css[':hover'] ? css[':hover'].backgroundColor : colors.N0 : state.isDisabled ? colors.N10 : colors.N30
+          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
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -59,7 +59,7 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         paddingTop: 0,
         padding: 0,
         ':hover': {
-          color: colors.R400
+          color: R400
         }
       });
     },
@@ -157,14 +157,14 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         paddingLeft: isMulti ? 0 : AVATAR_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: colors.N100,
+          color: N100,
           opacity: 1
           /* Firefox */
 
         },
         '& input:-ms-input-placeholder': {
           /* Internet Explorer 10-11 */
-          color: colors.N100
+          color: N100
         }
       });
     }

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "7.16.5",
+  "version": "7.16.6",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -50,11 +50,11 @@
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/field-range": "^9.0.0",
-    "@atlaskit/modal-dialog": "^12.0.0",
+    "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/range": "^5.0.11",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/textfield": "^5.0.0",
-    "@atlaskit/util-data-test": "^16.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",
     "@types/uuid": "^3.4.4",
     "enzyme": "^3.10.0",