@atlaskit/user-picker 7.16.4 → 8.1.0

package/dist/es2019/components/EmailOption.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
 import { messages } from './i18n';
@@ -24,13 +25,13 @@ export class EmailOption extends React.PureComponent {
       } = this.props;
       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)
       }, id);
     });
 
     _defineProperty(this, "renderSecondaryText", label => {
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: this.props.isSelected ? B400 : N200
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, label);
     });
 

package/dist/es2019/components/ExternalUserOption.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
 import { SizeableAvatar } from './SizeableAvatar';
@@ -10,7 +11,7 @@ import { SlackIcon } from './assets/slack';
 import { GoogleIcon } from './assets/google';
 import { MicrosoftIcon } from './assets/microsoft';
 import { GitHubIcon } from './assets/github';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 export const ImageContainer = styled.span`
   height: 12px;
@@ -57,7 +58,7 @@ export class ExternalUserOption extends React.PureComponent {
       } = this.props;
       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)
       }, name);
     });
 
@@ -73,7 +74,7 @@ export class ExternalUserOption extends React.PureComponent {
       const [emailUser, emailDomain] = email.split('@');
       const emailDomainWithAt = `@${emailDomain}`;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: this.props.isSelected ? B400 : N200
+        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, emailUser, /*#__PURE__*/React.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
 
@@ -102,7 +103,7 @@ export class ExternalUserOption extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
         label: "",
         size: "large",
-        primaryColor: N200
+        primaryColor: token('color.text.lowEmphasis', N200)
       })) : undefined;
     });
   }

package/dist/es2019/components/GroupOption.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
 import { messages } from './i18n';
@@ -11,7 +12,7 @@ export const GroupOptionIconWrapper = styled.span`
   padding: 2px;
 
   > span {
-    background-color: ${N20};
+    background-color: ${token('color.background.subtleNeutral.resting', N20)};
     border-radius: 50%;
     padding: 4px;
   }
@@ -30,7 +31,7 @@ export class GroupOption extends React.PureComponent {
       } = this.props;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: isSelected ? B400 : N800
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -46,7 +47,7 @@ export class GroupOption extends React.PureComponent {
         isSelected
       } = this.props;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? B400 : N200
+        color: isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.groupByline));
     });
 

package/dist/es2019/components/MessagesIntlProvider.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { IntlProvider, injectIntl } from 'react-intl';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 import { getMessagesForLocale } from '../util/i18n-util';
 const EMPTY = {};
 
@@ -35,6 +35,7 @@ const MessagesIntlProvider = props => {
     };
   }, [intl.messages, messages]);
   return /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: intl.locale,
     messages: mergedMessages
   }, children);
 };

package/dist/es2019/components/MultiValue.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
 import styled from 'styled-components';
 import { AddOptionAvatar } from './AddOptionAvatar';

package/dist/es2019/components/MultiValueContainer.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { components } from '@atlaskit/select';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
 export class MultiValueContainer extends React.PureComponent {
@@ -47,9 +47,12 @@ export class MultiValueContainer extends React.PureComponent {
       return value && value.length > 0;
     });
 
-    _defineProperty(this, "addPlaceholder", placeholder => React.Children.map(this.props.children, child => isChildInput(child) && this.showPlaceholder() ? /*#__PURE__*/React.cloneElement(child, {
-      placeholder
-    }) : child));
+    _defineProperty(this, "addPlaceholder", placeholder => {
+      const children = React.Children.map(this.props.children, child => isChildInput(child) && this.showPlaceholder() ? /*#__PURE__*/React.cloneElement(child, {
+        placeholder
+      }) : child);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    });
 
     _defineProperty(this, "renderChildren", () => {
       const {

package/dist/es2019/components/PopupControl.js

@@ -1,11 +1,41 @@
 import React from 'react';
-import { Label } from '@atlaskit/field-base';
+import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+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: token('color.text.lowEmphasis', N200),
+  dark: token('color.text.lowEmphasis', 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 +44,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/components/TeamOption.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
 import { messages } from './i18n';
@@ -20,7 +21,7 @@ export class TeamOption extends React.PureComponent {
       } = this.props;
       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))];
@@ -63,7 +64,7 @@ export class TeamOption extends React.PureComponent {
     });
 
     _defineProperty(this, "getBylineComponent", (isSelected, message) => /*#__PURE__*/React.createElement(TextWrapper, {
-      color: isSelected ? B400 : N200
+      color: isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
     }, message));
 
     _defineProperty(this, "renderAvatar", () => {

package/dist/es2019/components/UserOption.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -19,7 +20,7 @@ export class UserOption extends React.PureComponent {
       } = this.props;
       const 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))];
@@ -28,7 +29,7 @@ export class UserOption extends 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), ")")));
@@ -38,7 +39,7 @@ export class UserOption extends React.PureComponent {
     });
 
     _defineProperty(this, "renderSecondaryText", () => 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);
 
     _defineProperty(this, "renderAvatar", () => {

package/dist/es2019/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/es2019/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/es2019/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/es2019/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/es2019/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   placeholder: {
     id: 'fabric.elements.user-picker.placeholder',

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

@@ -5,7 +5,7 @@ import debounce from 'lodash/debounce';
 import uuidV4 from 'uuid/v4';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../../../analytics';
 import { UserType } from '../../../types';
 import { UserPicker } from '../../UserPicker';

package/dist/es2019/components/styles.js

@@ -1,5 +1,6 @@
 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 { token } from '@atlaskit/tokens';
 import memoizeOne from 'memoize-one';
 import { getAvatarSize } from './utils';
 import { mergeStyles } from '@atlaskit/select';
@@ -19,14 +20,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 ? 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': { ...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'] ? 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,
@@ -49,7 +50,7 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       paddingTop: 0,
       padding: 0,
       ':hover': {
-        color: colors.R400
+        color: token('color.text.danger', R400)
       }
     }),
     indicatorsContainer: css => ({ ...css,
@@ -135,14 +136,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: token('color.text.lowEmphasis', N100),
         opacity: 1
         /* Firefox */
 
       },
       '& input:-ms-input-placeholder': {
         /* Internet Explorer 10-11 */
-        color: colors.N100
+        color: token('color.text.lowEmphasis', N100)
       }
     })
   };

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": "8.1.0",
 	"sideEffects": false
 }

package/dist/esm/components/AddOptionAvatar.js

@@ -4,11 +4,12 @@ var _templateObject;
 
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import styled from 'styled-components';
-var EmailAvatarWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: black;\n  padding: ", "px;\n\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var EmailAvatarWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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;
-}, N40);
+}, token('color.background.subtleNeutral.resting', N40));
 export var AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
       label = _ref.label;
@@ -17,6 +18,6 @@ export var AddOptionAvatar = function AddOptionAvatar(_ref) {
   }, /*#__PURE__*/React.createElement(EmailIcon, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
-    primaryColor: N500
+    primaryColor: token('color.text.mediumEmphasis', N500)
   }));
 };

package/dist/esm/components/AvatarItemOption.js

@@ -5,12 +5,13 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React from 'react';
 import styled from 'styled-components';
 import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Lozenge from '@atlaskit/lozenge';
 import Tooltip from '@atlaskit/tooltip';
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  line-height: 1;\n  outline: none;\n  margin: 0;\n  width: 100%;\n  cursor: pointer;\n"])));
-var Text = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), B400, function (_ref) {
+var Text = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  ", "\n"])), token('color.text.selected', B400), function (_ref) {
   var secondary = _ref.secondary;
-  return secondary && "color: ".concat(B400, "; font-size: 0.85em;");
+  return secondary && "color: ".concat(token('color.text.selected', B400), "; font-size: 0.85em;");
 });
 var AdditionalInfo = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  float: right;\n  ", "\n"])), function (_ref2) {
   var withTooltip = _ref2.withTooltip;