@atlaskit/user-picker 7.16.1 → 7.16.5

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/user-picker
 
+## 7.16.5
+
+### Patch Changes
+
+- [`b3d1a103c04`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3d1a103c04) - Remove field-base deprecated dependency
+
+## 7.16.4
+
+### Patch Changes
+
+- [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
+
+## 7.16.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.16.2
+
+### Patch Changes
+
+- [`8ea7c48af73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ea7c48af73) - [ux] Email options now only show email icon
+
 ## 7.16.1
 
 ### Patch Changes

package/dist/cjs/components/AddOptionAvatar.js

@@ -11,42 +11,28 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _email = _interopRequireDefault(require("@atlaskit/icon/glyph/email"));
 
-var _mention = _interopRequireDefault(require("@atlaskit/icon/glyph/mention"));
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2;
-
-var AddOptionAvatarWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  padding: 2px;\n\n  background-color: ", ";\n  border-radius: 50%;\n"])), _colors.N50);
+var _templateObject;
 
-var EmailAvatarWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  padding: 2px;\n\n  background-color: ", ";\n  border-radius: 50%;\n"])), _colors.N40);
+var EmailAvatarWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  padding: ", "px;\n\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.isLozenge ? 0 : 4;
+}, _colors.N40);
 
 var AddOptionAvatar = function AddOptionAvatar(_ref) {
-  var size = _ref.size,
-      label = _ref.label,
-      suggestion = _ref.suggestion,
-      invalidOption = _ref.invalidOption;
-
-  if (invalidOption) {
-    return /*#__PURE__*/_react.default.createElement(AddOptionAvatarWrapper, null, /*#__PURE__*/_react.default.createElement(_mention.default, {
-      label: label,
-      size: size,
-      primaryColor: suggestion ? _colors.N200 : 'white'
-    }));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(EmailAvatarWrapper, null, /*#__PURE__*/_react.default.createElement(_email.default, {
+  var isLozenge = _ref.isLozenge,
+      label = _ref.label;
+  return /*#__PURE__*/_react.default.createElement(EmailAvatarWrapper, {
+    isLozenge: isLozenge
+  }, /*#__PURE__*/_react.default.createElement(_email.default, {
     label: label,
-    size: size,
-    primaryColor: _colors.N200
+    size: isLozenge ? 'small' : 'medium',
+    primaryColor: _colors.N500
   }));
 };
 
-exports.AddOptionAvatar = AddOptionAvatar;
-AddOptionAvatar.defaultProps = {
-  size: 'large'
-};
+exports.AddOptionAvatar = AddOptionAvatar;

package/dist/cjs/components/EmailOption.js

@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntl = require("react-intl");
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _AddOptionAvatar = require("./AddOptionAvatar");
 
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -59,15 +61,25 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
         text: _this.props.email.lozenge
       } : _this.props.email.lozenge;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label, validity, suggestion) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderPrimaryText", function () {
+      var id = _this.props.email.id;
+      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
+        key: "name",
+        color: _this.props.isSelected ? _colors.B400 : _colors.N800
+      }, id);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
+      return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.TextWrapper, {
+        color: _this.props.isSelected ? _colors.B400 : _colors.N200
+      }, label);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {
       return /*#__PURE__*/_react.default.createElement(_AvatarItemOption.AvatarItemOption, {
         avatar: /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
-          suggestion: suggestion,
-          invalidOption: suggestion && validity !== 'VALID',
           label: label
         }),
-        primaryText: _this.props.email.id,
-        secondaryText: label,
+        primaryText: _this.renderPrimaryText(),
+        secondaryText: _this.renderSecondaryText(label),
         lozenge: _this.getLozengeProps()
       });
     });
@@ -81,10 +93,9 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
 
       var _this$props = this.props,
           label = _this$props.label,
-          emailValidity = _this$props.emailValidity,
-          email = _this$props.email;
-      return label !== undefined ? this.renderOption(label, emailValidity, email.suggestion) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
-        return _this2.renderOption(label, emailValidity, email.suggestion);
+          emailValidity = _this$props.emailValidity;
+      return label !== undefined ? this.renderOption(label) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
+        return _this2.renderOption(label);
       });
     }
   }]);

package/dist/cjs/components/MultiValue.js

@@ -93,11 +93,11 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
 
       if ((0, _utils.isEmail)(data)) {
         return selectProps.emailLabel ? /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
-          size: "small",
+          isLozenge: true,
           label: selectProps.emailLabel
         }) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addEmail, function (label) {
           return /*#__PURE__*/_react.default.createElement(_AddOptionAvatar.AddOptionAvatar, {
-            size: "small",
+            isLozenge: true,
             label: label
           });
         });

package/dist/cjs/components/PopupControl.js

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

package/dist/cjs/components/creatable.js

@@ -55,7 +55,7 @@ var isOptionDisabled = function isOptionDisabled() {
   };
 };
 
-var getCreatableProps = (0, _memoizeOne.default)(function (isValidEmail) {
+function creatableProps(isValidEmail) {
   return {
     allowCreateWhileLoading: true,
     createOptionPosition: 'first',
@@ -64,5 +64,8 @@ var getCreatableProps = (0, _memoizeOne.default)(function (isValidEmail) {
     formatCreateLabel: formatCreateLabel,
     isOptionDisabled: isOptionDisabled(isValidEmail)
   };
-});
+} // ignoring the 'clear' memoizeOne function object property
+
+
+var getCreatableProps = (0, _memoizeOne.default)(creatableProps);
 exports.getCreatableProps = getCreatableProps;

package/dist/cjs/i18n/cs.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Czech
 var _default = {
   'fabric.elements.user-picker.email.add': 'Přidat uživatele',
+  'fabric.elements.user-picker.email.add.potential': 'Zadejte e-mailovou adresu.',
+  'fabric.elements.user-picker.email.select.to.add': 'Vyberte e-mailovou adresu.',
   'fabric.elements.user-picker.external.sourced.from': 'Nalezen v:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/da.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Danish
 var _default = {
   'fabric.elements.user-picker.email.add': 'Tilføj bruger',
+  'fabric.elements.user-picker.email.add.potential': 'Indtast en e-mailadresse',
+  'fabric.elements.user-picker.email.select.to.add': 'Vælg en e-mailadresse',
   'fabric.elements.user-picker.external.sourced.from': 'Fundet i:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/de.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // German
 var _default = {
   'fabric.elements.user-picker.email.add': 'Benutzer hinzufügen',
+  'fabric.elements.user-picker.email.add.potential': 'Geben Sie eine E-Mail-Adresse ein',
+  'fabric.elements.user-picker.email.select.to.add': 'Wählen Sie eine E-Mail-Adresse aus',
   'fabric.elements.user-picker.external.sourced.from': 'Gefunden in:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/en_ZZ.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by i18n-tools.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+// English (Instrumented)
+var _default = {
+  'fabric.elements.user-picker.email.add': '⁣⁢Add user⁠؜؜⁠؜؜⁠⁠‌⁠⁣⁤',
+  'fabric.elements.user-picker.email.add.potential': '⁣⁢Enter an email address؜‍‍⁡⁡‍⁡‌⁡‍؜⁣⁤',
+  'fabric.elements.user-picker.email.select.to.add': '⁣⁢Select an email address⁡‍⁠⁠⁠⁠⁠⁠⁡‍⁠؜⁠⁠‌‌⁣⁤',
+  'fabric.elements.user-picker.external.sourced.from': '⁣⁢Found in:‌⁡‌⁠؜⁡؜؜‌⁣⁤',
+  'fabric.elements.user-picker.github.provider': '⁣⁢GitHub‍‍؜⁠؜؜⁡‍⁡⁣⁤',
+  'fabric.elements.user-picker.google.provider': '⁣⁢Google‍⁡؜‍‍؜⁡‍؜⁠‍⁠؜‌‍⁣⁤',
+  'fabric.elements.user-picker.group.byline': '⁣⁢Admin-managed group⁡؜⁡⁡‍؜‌‍⁠⁡⁣⁤',
+  'fabric.elements.user-picker.guest.lozenge.text': '⁣⁢GUEST‍‌‌‍‍‍؜⁣⁤',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.group': '⁣⁢Guest groups can only access certain spaces and have limited access to user info.⁡⁡⁡؜‌‍⁠؜⁠‍⁠‍‍⁡⁣⁤',
+  'fabric.elements.user-picker.guest.lozenge.tooltip.user': '⁣⁢Guests can only access certain spaces and have limited access to user info.⁠؜‌‌‍⁡‍‍⁠⁣⁤',
+  'fabric.elements.user-picker.member.lozenge.text': '⁣⁢MEMBER‍؜⁠⁡؜؜‍⁡‌⁠⁠‌⁣⁤',
+  'fabric.elements.user-picker.microsoft.provider': '⁣⁢Microsoft‍‍؜⁡⁠‍⁠‌‌‍⁣⁤',
+  'fabric.elements.user-picker.multi.remove-item': '⁣⁢Remove⁠⁡⁠‍؜⁠‍‍‌⁡⁣⁤',
+  'fabric.elements.user-picker.placeholder': '⁣⁢Enter people or teams...‌؜‌‍‍‍؜؜⁣⁤',
+  'fabric.elements.user-picker.placeholder.add-more': '⁣⁢add more people...⁠⁡⁡‌⁠⁡⁠‌‍‌⁠‍⁣⁤',
+  'fabric.elements.user-picker.single.clear': '⁣⁢Clear⁡؜؜‌⁠⁡‌؜؜‍⁣⁤',
+  'fabric.elements.user-picker.slack.provider': '⁣⁢Slack؜‍‌⁠‌⁡؜⁡؜⁡⁣⁤',
+  'fabric.elements.user-picker.team.member.50plus': '⁣⁢Team • 50+ members؜‍⁠‍⁡؜؜⁣⁤',
+  'fabric.elements.user-picker.team.member.50plus.including.you': '⁣⁢Team • 50+ members, including you⁡‍⁡؜⁡⁡⁡‌⁣⁤',
+  'fabric.elements.user-picker.team.member.count': '{count, plural, one {⁣⁢Team • {count} member⁡‍‌‌؜⁠⁠‌؜⁡؜⁠‌⁡⁣⁤} other {⁣⁢Team • {count} members⁡‍‌‌؜⁠⁠‌؜⁡؜⁠‌⁡⁣⁤}}',
+  'fabric.elements.user-picker.team.member.count.including.you': '{count, plural, one {⁣⁢Team • {count} member, including you‌‌‍‍‌‍⁡‌‍⁠‌؜⁠⁡⁣⁤} other {⁣⁢Team • {count} members, including you‌‌‍‍‌‍⁡‌‍⁠‌؜⁠⁡⁣⁤}}'
+};
+exports.default = _default;

package/dist/cjs/i18n/es.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Spanish
 var _default = {
   'fabric.elements.user-picker.email.add': 'Añadir usuario',
+  'fabric.elements.user-picker.email.add.potential': 'Indica una dirección de correo electrónico',
+  'fabric.elements.user-picker.email.select.to.add': 'Selecciona una dirección de correo electrónico',
   'fabric.elements.user-picker.external.sourced.from': 'Encontrado en:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/fi.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Finnish
 var _default = {
   'fabric.elements.user-picker.email.add': 'Lisää käyttäjä',
+  'fabric.elements.user-picker.email.add.potential': 'Anna sähköpostiosoite',
+  'fabric.elements.user-picker.email.select.to.add': 'Valitse sähköpostiosoite',
   'fabric.elements.user-picker.external.sourced.from': 'Löydetty kohteesta:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/fr.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // French
 var _default = {
   'fabric.elements.user-picker.email.add': 'Ajoutez un utilisateur',
+  'fabric.elements.user-picker.email.add.potential': 'Saisissez une adresse e-mail',
+  'fabric.elements.user-picker.email.select.to.add': 'Sélectionnez une adresse e-mail',
   'fabric.elements.user-picker.external.sourced.from': 'Trouvé dans :',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',
@@ -25,7 +27,7 @@ var _default = {
   'fabric.elements.user-picker.microsoft.provider': 'Microsoft',
   'fabric.elements.user-picker.multi.remove-item': 'Supprimer',
   'fabric.elements.user-picker.placeholder': 'Saisissez des personnes ou des équipes…',
-  'fabric.elements.user-picker.placeholder.add-more': 'ajouter davantage de personnes…',
+  'fabric.elements.user-picker.placeholder.add-more': 'ajouter plus de personnes…',
   'fabric.elements.user-picker.single.clear': 'Effacer',
   'fabric.elements.user-picker.slack.provider': 'Slack',
   'fabric.elements.user-picker.team.member.50plus': 'Équipe • Plus de 50 membres',

package/dist/cjs/i18n/hu.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Hungarian
 var _default = {
   'fabric.elements.user-picker.email.add': 'Felhasználó hozzáadása',
+  'fabric.elements.user-picker.email.add.potential': 'Adj meg egy e-mail-címet',
+  'fabric.elements.user-picker.email.select.to.add': 'E-mail-cím kiválasztása',
   'fabric.elements.user-picker.external.sourced.from': 'Itt található:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/index.js

@@ -155,6 +155,12 @@ 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() {
@@ -230,6 +236,8 @@ var _uk = _interopRequireDefault(require("./uk"));
 
 var _vi = _interopRequireDefault(require("./vi"));
 
+var _en_ZZ = _interopRequireDefault(require("./en_ZZ"));
+
 var _en = _interopRequireDefault(require("./en"));
 
 var _en_GB = _interopRequireDefault(require("./en_GB"));

package/dist/cjs/i18n/it.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Italian
 var _default = {
   'fabric.elements.user-picker.email.add': 'Aggiungi utente',
+  'fabric.elements.user-picker.email.add.potential': 'Inserisci un indirizzo e-mail',
+  'fabric.elements.user-picker.email.select.to.add': 'Seleziona un indirizzo e-mail',
   'fabric.elements.user-picker.external.sourced.from': 'Trovato in:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/ja.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Japanese
 var _default = {
   'fabric.elements.user-picker.email.add': 'ユーザーを追加',
+  'fabric.elements.user-picker.email.add.potential': 'メール アドレスを入力',
+  'fabric.elements.user-picker.email.select.to.add': 'メール アドレスを選択',
   'fabric.elements.user-picker.external.sourced.from': 'ユーザーのソース元: ',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/ko.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Korean
 var _default = {
   'fabric.elements.user-picker.email.add': '사용자 추가',
+  'fabric.elements.user-picker.email.add.potential': '이메일 주소 입력',
+  'fabric.elements.user-picker.email.select.to.add': '이메일 주소 선택',
   'fabric.elements.user-picker.external.sourced.from': '찾은 위치:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/nb.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Norwegian Bokmål
 var _default = {
   'fabric.elements.user-picker.email.add': 'Legg til bruker',
+  'fabric.elements.user-picker.email.add.potential': 'Oppgi en e-postadresse',
+  'fabric.elements.user-picker.email.select.to.add': 'Velg en e-postadresse',
   'fabric.elements.user-picker.external.sourced.from': 'Funnet på:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/nl.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Dutch
 var _default = {
   'fabric.elements.user-picker.email.add': 'Gebruiker toevoegen',
+  'fabric.elements.user-picker.email.add.potential': 'Voer een e-mailadres in',
+  'fabric.elements.user-picker.email.select.to.add': 'Selecteer een e-mailadres',
   'fabric.elements.user-picker.external.sourced.from': 'Gevonden in:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/pl.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Polish
 var _default = {
   'fabric.elements.user-picker.email.add': 'Dodaj użytkownika',
+  'fabric.elements.user-picker.email.add.potential': 'Wprowadź adres e-mail',
+  'fabric.elements.user-picker.email.select.to.add': 'Wybierz adres e-mail',
   'fabric.elements.user-picker.external.sourced.from': 'Znaleziono w:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/pt_BR.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Portuguese (Brazil)
 var _default = {
   'fabric.elements.user-picker.email.add': 'Incluir usuário',
+  'fabric.elements.user-picker.email.add.potential': 'Insira um endereço de e-mail',
+  'fabric.elements.user-picker.email.select.to.add': 'Selecione um endereço de e-mail',
   'fabric.elements.user-picker.external.sourced.from': 'Encontrado em:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/ru.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Russian
 var _default = {
   'fabric.elements.user-picker.email.add': 'Добавить пользователя',
+  'fabric.elements.user-picker.email.add.potential': 'Введите адрес электронной почты',
+  'fabric.elements.user-picker.email.select.to.add': 'Выберите адрес электронной почты',
   'fabric.elements.user-picker.external.sourced.from': 'Найден в:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/sv.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Swedish
 var _default = {
   'fabric.elements.user-picker.email.add': 'Lägg till användare',
+  'fabric.elements.user-picker.email.add.potential': 'Ange en e-postadress',
+  'fabric.elements.user-picker.email.select.to.add': 'Välj en e-postadress',
   'fabric.elements.user-picker.external.sourced.from': 'Hittades i:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/th.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Thai
 var _default = {
   'fabric.elements.user-picker.email.add': 'เพิ่มผู้ใช้',
+  'fabric.elements.user-picker.email.add.potential': 'ป้อนที่อยู่อีเมล',
+  'fabric.elements.user-picker.email.select.to.add': 'เลือกที่อยู่อีเมล',
   'fabric.elements.user-picker.external.sourced.from': 'พบใน:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/tr.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Turkish
 var _default = {
   'fabric.elements.user-picker.email.add': 'Kullanıcı ekleyin',
+  'fabric.elements.user-picker.email.add.potential': 'Bir e-posta adresi girin',
+  'fabric.elements.user-picker.email.select.to.add': 'Bir e-posta adresi seçin',
   'fabric.elements.user-picker.external.sourced.from': 'Bulunduğu yer:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/uk.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Ukrainian
 var _default = {
   'fabric.elements.user-picker.email.add': 'Додайте користувача',
+  'fabric.elements.user-picker.email.add.potential': 'Введіть адресу електронної пошти',
+  'fabric.elements.user-picker.email.select.to.add': 'Виберіть адресу електронної пошти',
   'fabric.elements.user-picker.external.sourced.from': 'Знайдено в:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/vi.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Vietnamese
 var _default = {
   'fabric.elements.user-picker.email.add': 'Thêm người dùng',
+  'fabric.elements.user-picker.email.add.potential': 'Nhập địa chỉ email',
+  'fabric.elements.user-picker.email.select.to.add': 'Chọn địa chỉ email',
   'fabric.elements.user-picker.external.sourced.from': 'Tìm thấy trong:',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/zh.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // Chinese
 var _default = {
   'fabric.elements.user-picker.email.add': '添加用户',
+  'fabric.elements.user-picker.email.add.potential': '输入电子邮件地址',
+  'fabric.elements.user-picker.email.select.to.add': '选择电子邮件地址',
   'fabric.elements.user-picker.external.sourced.from': '发现位置：',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/i18n/zh_TW.js

@@ -14,6 +14,8 @@ exports.default = void 0;
 // undefined
 var _default = {
   'fabric.elements.user-picker.email.add': '新增使用者',
+  'fabric.elements.user-picker.email.add.potential': '輸入電子郵件地址',
+  'fabric.elements.user-picker.email.select.to.add': '選取電子郵件地址',
   'fabric.elements.user-picker.external.sourced.from': '尋找位置：',
   'fabric.elements.user-picker.github.provider': 'GitHub',
   'fabric.elements.user-picker.google.provider': 'Google',

package/dist/cjs/version.json

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

package/dist/es2019/components/AddOptionAvatar.js

@@ -1,42 +1,25 @@
 import EmailIcon from '@atlaskit/icon/glyph/email';
-import MentionIcon from '@atlaskit/icon/glyph/mention';
-import { N40, N50, N200 } from '@atlaskit/theme/colors';
+import { N40, N500 } from '@atlaskit/theme/colors';
 import React from 'react';
 import styled from 'styled-components';
-const AddOptionAvatarWrapper = styled.span`
-  color: black;
-  padding: 2px;
-
-  background-color: ${N50};
-  border-radius: 50%;
-`;
 const EmailAvatarWrapper = styled.span`
   color: black;
-  padding: 2px;
+  padding: ${props => props.isLozenge ? 0 : 4}px;
 
   background-color: ${N40};
   border-radius: 50%;
+  display: flex;
+  align-items: center;
 `;
 export const AddOptionAvatar = ({
-  size,
-  label,
-  suggestion,
-  invalidOption
+  isLozenge,
+  label
 }) => {
-  if (invalidOption) {
-    return /*#__PURE__*/React.createElement(AddOptionAvatarWrapper, null, /*#__PURE__*/React.createElement(MentionIcon, {
-      label: label,
-      size: size,
-      primaryColor: suggestion ? N200 : 'white'
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement(EmailAvatarWrapper, null, /*#__PURE__*/React.createElement(EmailIcon, {
+  return /*#__PURE__*/React.createElement(EmailAvatarWrapper, {
+    isLozenge: isLozenge
+  }, /*#__PURE__*/React.createElement(EmailIcon, {
     label: label,
-    size: size,
-    primaryColor: N200
+    size: isLozenge ? 'small' : 'medium',
+    primaryColor: N500
   }));
-};
-AddOptionAvatar.defaultProps = {
-  size: 'large'
 };