@atlaskit/user-picker 9.0.0 → 9.0.1

package/dist/es2019/components/MultiValue.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
 import { messages } from './i18n';
@@ -26,12 +28,12 @@ export const scrollToValue = (valueContainer, control) => {
     valueContainer.scrollIntoView(false);
   }
 };
-const GroupTagContainer = styled.div`
-  padding-left: 2px;
-`;
-const NameWrapper = styled.span`
-  padding-left: 5px;
-`;
+const groupTagContainer = css({
+  paddingLeft: '2px'
+});
+const nameWrapper = css({
+  paddingLeft: '5px'
+});
 export class MultiValue extends React.Component {
   constructor(props) {
     super(props);
@@ -46,23 +48,25 @@ export class MultiValue extends React.Component {
       } = this.props;
 
       if (isEmail(data)) {
-        return selectProps.emailLabel ? /*#__PURE__*/React.createElement(AddOptionAvatar, {
+        return selectProps.emailLabel ? jsx(AddOptionAvatar, {
           isLozenge: true,
           label: selectProps.emailLabel
-        }) : /*#__PURE__*/React.createElement(FormattedMessage, messages.addEmail, label => /*#__PURE__*/React.createElement(AddOptionAvatar, {
+        }) : jsx(FormattedMessage, messages.addEmail, label => jsx(AddOptionAvatar, {
           isLozenge: true,
           label: label
         }));
       }
 
       if (isGroup(data)) {
-        return /*#__PURE__*/React.createElement(GroupTagContainer, null, /*#__PURE__*/React.createElement(PeopleIcon, {
+        return jsx("div", {
+          css: groupTagContainer
+        }, jsx(PeopleIcon, {
           label: "group-icon",
           size: "small"
         }));
       }
 
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "multi",
         src: getAvatarUrl(data),
         name: label
@@ -110,12 +114,14 @@ export class MultiValue extends React.Component {
       innerProps,
       ...rest
     } = this.props;
-    return /*#__PURE__*/React.createElement(components.MultiValue, _extends({}, rest, {
+    return jsx(components.MultiValue, _extends({}, rest, {
       innerProps: {
         ref: this.containerRef
       },
       cropWithEllipsis: false
-    }), this.getElemBefore(), " ", /*#__PURE__*/React.createElement(NameWrapper, null, children));
+    }), this.getElemBefore(), " ", jsx("div", {
+      css: nameWrapper
+    }, children));
   }
 
 }

package/dist/es2019/components/PopupControl.js

@@ -1,42 +1,41 @@
+/** @jsx jsx */
 import React from 'react';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import { components } from '@atlaskit/select';
-import styled, { css } from 'styled-components';
+import { css, jsx } from '@emotion/core';
 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 ${spacing}px ${spacing}px;
-`;
+const controlWrapper = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: `0px ${spacing}px ${spacing}px`
+});
 const getColor = themed({
   light: token('color.text.subtlest', N200),
   dark: token('color.text.subtlest', DN90)
 });
 
-const getPadding = () => {
+const getLabelStyle = () => {
   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 color = getColor();
+  return css({
+    color,
+    fontSize: `${fontSize}px`,
+    fontWeight: 600,
+    lineHeight: `${lineHeight}`,
+    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() {
     const {
@@ -44,7 +43,11 @@ export class PopupControl extends React.PureComponent {
         popupTitle
       }
     } = this.props;
-    return /*#__PURE__*/React.createElement(ControlWrapper, null, /*#__PURE__*/React.createElement(Label, null, popupTitle), /*#__PURE__*/React.createElement(components.Control, this.props));
+    return jsx("div", {
+      css: controlWrapper
+    }, jsx("div", {
+      css: getLabelStyle()
+    }, popupTitle), jsx(components.Control, this.props));
   }
 
 }

package/dist/es2019/components/SingleValue.js

@@ -1,27 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import { AvatarItem } from '@atlaskit/avatar';
-import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
-const AvatarItemComponent = styled.div`
-  border: none !important;
-  padding: 0 !important;
-  width: auto;
-  overflow: hidden;
-  /* IE 11 needs this prop explicitly to flex items */
-  flex: 1 1 auto;
-  min-width: 100px;
+const avatarItemComponent = css({
+  border: 'none !important',
+  padding: '0 !important',
+  width: 'auto',
+  overflow: 'hidden',
 
-  & > span {
-    box-sizing: border-box;
-  }
-
-  &:hover {
-    width: auto;
-    padding: 0;
-    border: none;
+  /* IE 11 needs this prop explicitly to flex items */
+  flex: '1 1 auto',
+  minWidth: '100px',
+  '& > span': {
+    boxSizing: 'border-box'
+  },
+  '&:hover': {
+    width: 'auto',
+    padding: 0,
+    border: 'none'
   }
-`;
+});
 export const SingleValue = props => {
   const {
     data: {
@@ -33,9 +34,9 @@ export const SingleValue = props => {
       isFocused
     }
   } = props;
-  return !isFocused ? /*#__PURE__*/React.createElement(AvatarItem, {
+  return !isFocused ? jsx(AvatarItem, {
     backgroundColor: "transparent",
-    avatar: /*#__PURE__*/React.createElement(SizeableAvatar, {
+    avatar: jsx(SizeableAvatar, {
       src: getAvatarUrl(data),
       appearance: appearance,
       name: label
@@ -44,5 +45,7 @@ export const SingleValue = props => {
   }, ({
     ref,
     ...props
-  }) => /*#__PURE__*/React.createElement(AvatarItemComponent, props)) : null;
+  }) => jsx("div", _extends({
+    css: avatarItemComponent
+  }, props))) : null;
 };

package/dist/es2019/components/SingleValueContainer.js

@@ -1,13 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
-const PlaceholderIconContainer = styled.div`
-  padding-left: ${BORDER_PADDING}px;
-  line-height: 0;
-`;
+const placeholderIconContainer = css({
+  paddingLeft: `${BORDER_PADDING}px`,
+  lineHeight: 0
+});
 
 const showUserAvatar = (inputValue, value) => value && value.data && inputValue === value.label;
 
@@ -27,7 +29,7 @@ export class SingleValueContainer extends React.Component {
       } = this.props;
 
       if (isFocused || !hasValue) {
-        return /*#__PURE__*/React.createElement(SizeableAvatar, {
+        return jsx(SizeableAvatar, {
           appearance: appearance,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
@@ -42,7 +44,9 @@ export class SingleValueContainer extends React.Component {
       children,
       ...valueContainerProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(components.ValueContainer, valueContainerProps, /*#__PURE__*/React.createElement(PlaceholderIconContainer, null, this.renderAvatar()), children);
+    return jsx(components.ValueContainer, valueContainerProps, jsx("div", {
+      css: placeholderIconContainer
+    }, this.renderAvatar()), children);
   }
 
 }

package/dist/es2019/components/TeamOption/main.js

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { AvatarItemOption, TextWrapper } from '.././AvatarItemOption';
+import { AvatarItemOption, textWrapper } from '.././AvatarItemOption';
 import { HighlightText } from '.././HighlightText';
 import { messages } from '.././i18n';
 import { SizeableAvatar } from '.././SizeableAvatar';
@@ -19,10 +22,10 @@ export class TeamOption extends React.PureComponent {
           highlight
         }
       } = this.props;
-      return [/*#__PURE__*/React.createElement(TextWrapper, {
+      return [jsx("span", {
         key: "name",
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
-      }, /*#__PURE__*/React.createElement(HighlightText, {
+        css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
@@ -41,9 +44,9 @@ export class TeamOption extends React.PureComponent {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, messages.plus50MembersWithYou));
+            return this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithYou));
           } else {
-            return this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.memberCountWithYou, {
+            return this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -51,9 +54,9 @@ export class TeamOption extends React.PureComponent {
           }
         } else {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, messages.plus50MembersWithoutYou));
+            return this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithoutYou));
           } else {
-            return this.getBylineComponent(isSelected, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
+            return this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -63,8 +66,8 @@ export class TeamOption extends React.PureComponent {
       }
     });
 
-    _defineProperty(this, "getBylineComponent", (isSelected, message) => /*#__PURE__*/React.createElement(TextWrapper, {
-      color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
+    _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
+      css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
     }, message));
 
     _defineProperty(this, "renderAvatar", () => {
@@ -74,7 +77,7 @@ export class TeamOption extends React.PureComponent {
           name
         }
       } = this.props;
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         name: name
@@ -87,7 +90,7 @@ export class TeamOption extends React.PureComponent {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(AvatarItemOption, {
+    return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
       secondaryText: this.renderByline(),
       primaryText: this.getPrimaryText(),

package/dist/es2019/components/UserOption.js

@@ -1,8 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
+import { jsx } from '@emotion/core';
 import React from 'react';
-import { AvatarItemOption, TextWrapper } from './AvatarItemOption';
+import { AvatarItemOption, textWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
 import { SizeableAvatar } from './SizeableAvatar';
 import { hasValue } from './utils';
@@ -18,19 +21,19 @@ export class UserOption extends React.PureComponent {
           highlight
         }
       } = this.props;
-      const result = [/*#__PURE__*/React.createElement(TextWrapper, {
+      const result = [jsx("span", {
         key: "name",
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
-      }, /*#__PURE__*/React.createElement(HighlightText, {
+        css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
 
       if (hasValue(publicName) && name.trim() !== publicName.trim()) {
-        result.push( /*#__PURE__*/React.createElement(React.Fragment, {
+        result.push(jsx(React.Fragment, {
           key: "publicName"
-        }, ' ', /*#__PURE__*/React.createElement(TextWrapper, {
-          color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
-        }, "(", /*#__PURE__*/React.createElement(HighlightText, {
+        }, ' ', jsx("span", {
+          css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+        }, "(", jsx(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
       }
@@ -38,8 +41,8 @@ export class UserOption extends React.PureComponent {
       return result;
     });
 
-    _defineProperty(this, "renderSecondaryText", () => this.props.user.byline ? /*#__PURE__*/React.createElement(TextWrapper, {
-      color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
+    _defineProperty(this, "renderSecondaryText", () => this.props.user.byline ? jsx("span", {
+      css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
     }, this.props.user.byline) : undefined);
 
     _defineProperty(this, "renderAvatar", () => {
@@ -50,7 +53,7 @@ export class UserOption extends React.PureComponent {
         },
         status
       } = this.props;
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         presence: status,
@@ -64,7 +67,7 @@ export class UserOption extends React.PureComponent {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(AvatarItemOption, {
+    return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
       primaryText: this.getPrimaryText(),
       secondaryText: this.renderSecondaryText(),

package/dist/es2019/version.json

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

package/dist/esm/components/AddOptionAvatar.js

@@ -1,21 +1,27 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
+/** @jsx jsx */
 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  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;
-}, token('color.background.neutral', N40));
+import { css, jsx } from '@emotion/core';
+
+var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge) {
+  var padding = isLozenge ? 0 : 4;
+  return css({
+    padding: "".concat(padding, "px"),
+    backgroundColor: token('color.background.neutral', N40),
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center'
+  });
+};
+
 export var AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
       label = _ref.label;
-  return /*#__PURE__*/React.createElement(EmailAvatarWrapper, {
-    isLozenge: isLozenge
-  }, /*#__PURE__*/React.createElement(EmailIcon, {
+  return jsx("div", {
+    css: getEmailAvatarWrapperStyle(isLozenge)
+  }, jsx(EmailIcon, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
     primaryColor: token('color.text.subtle', N500)

package/dist/esm/components/AvatarItemOption.js

@@ -1,11 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
-import { B400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+import { css, jsx } from '@emotion/core';
 import Lozenge from '@atlaskit/lozenge';
 var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
   return import(
@@ -16,22 +17,48 @@ var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
     };
   });
 });
-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"])), token('color.text.brand', B400), function (_ref) {
-  var secondary = _ref.secondary;
-  return secondary && "color: ".concat(token('color.text.brand', B400), "; font-size: 0.85em;");
+var wrapper = css({
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  display: 'flex',
+  lineHeight: 1,
+  outline: 'none',
+  margin: 0,
+  width: '100%',
+  cursor: 'pointer'
 });
-var AdditionalInfo = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  float: right;\n"])));
-export var TextWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n"])), function (_ref2) {
-  var color = _ref2.color;
-  return color;
+
+var getTextStyle = function getTextStyle(isSecondary) {
+  var secondaryCssArgs = isSecondary ? {
+    fontSize: '0.85em'
+  } : {};
+  return css(_objectSpread({
+    margin: 0,
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }, secondaryCssArgs));
+};
+
+var additionalInfo = css({
+  float: 'right'
 });
-export var AvatarItemOption = function AvatarItemOption(_ref3) {
-  var avatar = _ref3.avatar,
-      primaryText = _ref3.primaryText,
-      secondaryText = _ref3.secondaryText,
-      lozenge = _ref3.lozenge;
-  return /*#__PURE__*/React.createElement(Wrapper, null, avatar, /*#__PURE__*/React.createElement("div", {
+export var textWrapper = function textWrapper(color) {
+  return css({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'inline-block',
+    color: color
+  });
+};
+export var AvatarItemOption = function AvatarItemOption(_ref) {
+  var avatar = _ref.avatar,
+      primaryText = _ref.primaryText,
+      secondaryText = _ref.secondaryText,
+      lozenge = _ref.lozenge;
+  return jsx("span", {
+    css: wrapper
+  }, avatar, jsx("div", {
     style: {
       maxWidth: '100%',
       minWidth: 0,
@@ -39,15 +66,17 @@ export var AvatarItemOption = function AvatarItemOption(_ref3) {
       lineHeight: '1.4',
       paddingLeft: '8px'
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, null, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
-  /*#__PURE__*/
-  // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
+  }, jsx("div", null, jsx("span", {
+    css: getTextStyle()
+  }, primaryText), jsx("span", {
+    css: additionalInfo
+  }, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ? // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
   // Lozenge text) or tooltip won't work
-  React.createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)
-  }, /*#__PURE__*/React.createElement(AsyncTooltip, {
+  jsx(React.Suspense, {
+    fallback: jsx(Lozenge, lozenge, lozenge.text)
+  }, jsx(AsyncTooltip, {
     content: lozenge.tooltip
-  }, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-    secondary: true
+  }, jsx(Lozenge, lozenge, lozenge.text))) : jsx(Lozenge, lozenge, lozenge.text)))), jsx("div", null, jsx("span", {
+    css: getTextStyle(true)
   }, secondaryText))));
 };

package/dist/esm/components/EmailOption/main.js

@@ -10,12 +10,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
+import { jsx } from '@emotion/core';
 import { AddOptionAvatar } from '../AddOptionAvatar';
-import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
 
 var getAddEmailMessage = function getAddEmailMessage(validity) {
@@ -46,21 +48,21 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "renderPrimaryText", function () {
       var id = _this.props.email.id;
-      return /*#__PURE__*/React.createElement(TextWrapper, {
+      return jsx("span", {
         key: "name",
-        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800)
+        css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
       }, id);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function (label) {
-      return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: _this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
+      return jsx("span", {
+        css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
       }, label);
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderOption", function (label) {
-      return /*#__PURE__*/React.createElement(AvatarItemOption, {
-        avatar: /*#__PURE__*/React.createElement(AddOptionAvatar, {
+      return jsx(AvatarItemOption, {
+        avatar: jsx(AddOptionAvatar, {
           label: label
         }),
         primaryText: _this.renderPrimaryText(),
@@ -80,7 +82,7 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           label = _this$props.label,
           emailValidity = _this$props.emailValidity;
-      return label !== undefined ? this.renderOption(label) : /*#__PURE__*/React.createElement(FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
+      return label !== undefined ? this.renderOption(label) : jsx(FormattedMessage, getAddEmailMessage(emailValidity), function (label) {
         return _this2.renderOption(label);
       });
     }