@atlaskit/user-picker 7.16.4 → 7.16.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/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/index.js

@@ -5,46 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "en_ZZ", {
-  enumerable: true,
-  get: function get() {
-    return _en_ZZ.default;
-  }
-});
-Object.defineProperty(exports, "cs", {
-  enumerable: true,
-  get: function get() {
-    return _cs.default;
-  }
-});
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _zh_TW.default;
   }
 });
-Object.defineProperty(exports, "en", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _en.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "en_GB", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _en_GB.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "nl", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _nl.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -65,16 +53,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _hu.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -101,12 +89,6 @@ 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() {
@@ -125,12 +107,6 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ro", {
-  enumerable: true,
-  get: function get() {
-    return _ro.default;
-  }
-});
 Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
@@ -143,6 +119,12 @@ Object.defineProperty(exports, "sk", {
     return _sk.default;
   }
 });
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
+  }
+});
 Object.defineProperty(exports, "sv", {
   enumerable: true,
   get: function get() {
@@ -173,32 +155,46 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "en_ZZ", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _en_ZZ.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _en.default;
+  }
+});
+Object.defineProperty(exports, "en_GB", {
+  enumerable: true,
+  get: function get() {
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "is", {
+  enumerable: true,
+  get: function get() {
+    return _is.default;
+  }
+});
+Object.defineProperty(exports, "ro", {
+  enumerable: true,
+  get: function get() {
+    return _ro.default;
   }
 });
 
-var _en_ZZ = _interopRequireDefault(require("./en_ZZ"));
+var _zh = _interopRequireDefault(require("./zh"));
+
+var _zh_TW = _interopRequireDefault(require("./zh_TW"));
 
 var _cs = _interopRequireDefault(require("./cs"));
 
 var _da = _interopRequireDefault(require("./da"));
 
-var _de = _interopRequireDefault(require("./de"));
-
-var _en = _interopRequireDefault(require("./en"));
-
-var _en_GB = _interopRequireDefault(require("./en_GB"));
-
-var _es = _interopRequireDefault(require("./es"));
+var _nl = _interopRequireDefault(require("./nl"));
 
 var _et = _interopRequireDefault(require("./et"));
 
@@ -206,9 +202,9 @@ var _fi = _interopRequireDefault(require("./fi"));
 
 var _fr = _interopRequireDefault(require("./fr"));
 
-var _hu = _interopRequireDefault(require("./hu"));
+var _de = _interopRequireDefault(require("./de"));
 
-var _is = _interopRequireDefault(require("./is"));
+var _hu = _interopRequireDefault(require("./hu"));
 
 var _it = _interopRequireDefault(require("./it"));
 
@@ -218,20 +214,18 @@ var _ko = _interopRequireDefault(require("./ko"));
 
 var _nb = _interopRequireDefault(require("./nb"));
 
-var _nl = _interopRequireDefault(require("./nl"));
-
 var _pl = _interopRequireDefault(require("./pl"));
 
 var _pt_BR = _interopRequireDefault(require("./pt_BR"));
 
 var _pt_PT = _interopRequireDefault(require("./pt_PT"));
 
-var _ro = _interopRequireDefault(require("./ro"));
-
 var _ru = _interopRequireDefault(require("./ru"));
 
 var _sk = _interopRequireDefault(require("./sk"));
 
+var _es = _interopRequireDefault(require("./es"));
+
 var _sv = _interopRequireDefault(require("./sv"));
 
 var _th = _interopRequireDefault(require("./th"));
@@ -242,6 +236,12 @@ var _uk = _interopRequireDefault(require("./uk"));
 
 var _vi = _interopRequireDefault(require("./vi"));
 
-var _zh = _interopRequireDefault(require("./zh"));
+var _en_ZZ = _interopRequireDefault(require("./en_ZZ"));
+
+var _en = _interopRequireDefault(require("./en"));
+
+var _en_GB = _interopRequireDefault(require("./en_GB"));
+
+var _is = _interopRequireDefault(require("./is"));
 
-var _zh_TW = _interopRequireDefault(require("./zh_TW"));
+var _ro = _interopRequireDefault(require("./ro"));

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/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.4",
+	"version": "7.16.5",
 	"sideEffects": false
 }

package/dist/es2019/components/PopupControl.js

@@ -1,11 +1,40 @@
 import React from 'react';
-import { Label } from '@atlaskit/field-base';
+import { themed } from '@atlaskit/theme/components';
+import { gridSize } from '@atlaskit/theme/constants';
 import { components } from '@atlaskit/select';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { N200, DN90 } from '@atlaskit/theme/colors';
+const spacing = gridSize();
+const fontSize = 12;
+const innerHeight = spacing * 2; // 16px
+
+const lineHeight = innerHeight / fontSize;
 const ControlWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0px 8px 8px;
+  padding: 0px ${spacing}px ${spacing}px;
+`;
+const getColor = themed({
+  light: N200,
+  dark: DN90
+});
+
+const getPadding = () => {
+  const right = 0;
+  const bottom = spacing / 2;
+  const left = 0;
+  const top = spacing * 2.5;
+  return css`
+    padding: ${top}px ${right}px ${bottom}px ${left}px;
+  `;
+};
+
+const Label = styled.div`
+  color: ${props => getColor(props)};
+  font-size: ${fontSize}px;
+  font-weight: 600;
+  line-height: ${lineHeight};
+  ${getPadding}
 `;
 export class PopupControl extends React.PureComponent {
   render() {
@@ -14,9 +43,7 @@ export class PopupControl extends React.PureComponent {
         popupTitle
       }
     } = this.props;
-    return /*#__PURE__*/React.createElement(ControlWrapper, null, /*#__PURE__*/React.createElement(Label, {
-      label: popupTitle
-    }), /*#__PURE__*/React.createElement(components.Control, this.props));
+    return /*#__PURE__*/React.createElement(ControlWrapper, null, /*#__PURE__*/React.createElement(Label, null, popupTitle), /*#__PURE__*/React.createElement(components.Control, this.props));
   }
 
 }

package/dist/es2019/i18n/fi.js

@@ -7,6 +7,8 @@
 // Finnish
 export 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/es2019/i18n/fr.js

@@ -7,6 +7,8 @@
 // French
 export 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',
@@ -18,7 +20,7 @@ export 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/es2019/i18n/index.js

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

package/dist/es2019/i18n/uk.js

@@ -7,6 +7,8 @@
 // Ukrainian
 export 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/es2019/i18n/zh_TW.js

@@ -7,6 +7,8 @@
 // undefined
 export 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/es2019/version.json

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

package/dist/esm/components/PopupControl.js

@@ -5,17 +5,40 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
-import { Label } from '@atlaskit/field-base';
+import { themed } from '@atlaskit/theme/components';
+import { gridSize } from '@atlaskit/theme/constants';
 import { components } from '@atlaskit/select';
-import styled from 'styled-components';
-var ControlWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px 8px 8px;\n"])));
+import styled, { css } from 'styled-components';
+import { N200, DN90 } from '@atlaskit/theme/colors';
+var spacing = gridSize();
+var fontSize = 12;
+var innerHeight = spacing * 2; // 16px
+
+var lineHeight = innerHeight / fontSize;
+var ControlWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0px ", "px ", "px;\n"])), spacing, spacing);
+var getColor = themed({
+  light: N200,
+  dark: DN90
+});
+
+var getPadding = function getPadding() {
+  var right = 0;
+  var bottom = spacing / 2;
+  var left = 0;
+  var top = spacing * 2.5;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", "px ", "px ", "px ", "px;\n  "])), top, right, bottom, left);
+};
+
+var Label = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  line-height: ", ";\n  ", "\n"])), function (props) {
+  return getColor(props);
+}, fontSize, lineHeight, getPadding);
 export var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(PopupControl, _React$PureComponent);
 
@@ -31,9 +54,7 @@ export var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var popupTitle = this.props.selectProps.popupTitle;
-      return /*#__PURE__*/React.createElement(ControlWrapper, null, /*#__PURE__*/React.createElement(Label, {
-        label: popupTitle
-      }), /*#__PURE__*/React.createElement(components.Control, this.props));
+      return /*#__PURE__*/React.createElement(ControlWrapper, null, /*#__PURE__*/React.createElement(Label, null, popupTitle), /*#__PURE__*/React.createElement(components.Control, this.props));
     }
   }]);
 

package/dist/esm/i18n/fi.js

@@ -7,6 +7,8 @@
 // Finnish
 export 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/esm/i18n/fr.js

@@ -7,6 +7,8 @@
 // French
 export 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',
@@ -18,7 +20,7 @@ export 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/esm/i18n/index.js

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

package/dist/esm/i18n/uk.js

@@ -7,6 +7,8 @@
 // Ukrainian
 export 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/esm/i18n/zh_TW.js

@@ -7,6 +7,8 @@
 // undefined
 export 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/esm/version.json

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

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

@@ -1,5 +1,7 @@
 declare const _default: {
     'fabric.elements.user-picker.email.add': string;
+    'fabric.elements.user-picker.email.add.potential': string;
+    'fabric.elements.user-picker.email.select.to.add': string;
     'fabric.elements.user-picker.external.sourced.from': string;
     'fabric.elements.user-picker.github.provider': string;
     'fabric.elements.user-picker.google.provider': string;

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

@@ -1,5 +1,7 @@
 declare const _default: {
     'fabric.elements.user-picker.email.add': string;
+    'fabric.elements.user-picker.email.add.potential': string;
+    'fabric.elements.user-picker.email.select.to.add': string;
     'fabric.elements.user-picker.external.sourced.from': string;
     'fabric.elements.user-picker.github.provider': string;
     'fabric.elements.user-picker.google.provider': string;

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

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

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

@@ -1,5 +1,7 @@
 declare const _default: {
     'fabric.elements.user-picker.email.add': string;
+    'fabric.elements.user-picker.email.add.potential': string;
+    'fabric.elements.user-picker.email.select.to.add': string;
     'fabric.elements.user-picker.external.sourced.from': string;
     'fabric.elements.user-picker.github.provider': string;
     'fabric.elements.user-picker.google.provider': string;

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

@@ -1,5 +1,7 @@
 declare const _default: {
     'fabric.elements.user-picker.email.add': string;
+    'fabric.elements.user-picker.email.add.potential': string;
+    'fabric.elements.user-picker.email.select.to.add': string;
     'fabric.elements.user-picker.external.sourced.from': string;
     'fabric.elements.user-picker.github.provider': string;
     'fabric.elements.user-picker.google.provider': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "7.16.4",
+  "version": "7.16.5",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,6 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/field-base": "^15.0.0",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",