@atlaskit/user-picker 8.8.6 → 9.0.2

package/dist/es2019/components/ExternalUserOption/SourcesTooltipContent.js

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import Spinner from '@atlaskit/spinner/spinner';
 import { SlackIcon } from '../assets/slack';
@@ -8,49 +9,49 @@ import { GoogleIcon } from '../assets/google';
 import { MicrosoftIcon } from '../assets/microsoft';
 import { GitHubIcon } from '../assets/github';
 import { messages } from '../i18n';
-import { ImageContainer } from './main';
-export const SourcesTooltipContainer = styled.div`
-  padding-bottom: 4px;
-  padding-right: 4px;
-`;
-export const SourceWrapper = styled.div`
-  padding-top: 4px;
-  display: flex;
-  align-items: center;
-`;
+import { imageContainer } from './main';
+export const sourcesTooltipContainer = css({
+  paddingBottom: '4px',
+  paddingRight: '4px'
+});
+export const sourceWrapper = css({
+  paddingTop: '4px',
+  display: 'flex',
+  alignItems: 'center'
+});
 const SUPPORTED_SOURCES = [{
   sourceType: 'jira',
-  icon: /*#__PURE__*/React.createElement(JiraIcon, {
+  icon: jsx(JiraIcon, {
     size: 'xsmall'
   }),
   label: messages.jiraSource
 }, {
   sourceType: 'confluence',
-  icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
+  icon: jsx(ConfluenceIcon, {
     size: 'xsmall'
   }),
   label: messages.confluenceSource
 }, {
   sourceType: 'other-atlassian',
-  icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
+  icon: jsx(AtlassianIcon, {
     size: 'xsmall'
   }),
   label: messages.otherAtlassianSource
 }, {
   sourceType: 'slack',
-  icon: /*#__PURE__*/React.createElement(SlackIcon, null),
+  icon: jsx(SlackIcon, null),
   label: messages.slackProvider
 }, {
   sourceType: 'google',
-  icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
+  icon: jsx(GoogleIcon, null),
   label: messages.googleProvider
 }, {
   sourceType: 'microsoft',
-  icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
+  icon: jsx(MicrosoftIcon, null),
   label: messages.microsoftProvider
 }, {
   sourceType: 'github',
-  icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
+  icon: jsx(GitHubIcon, null),
   label: messages.gitHubProvider
 }];
 export const SourcesTooltipContent = ({
@@ -58,14 +59,19 @@ export const SourcesTooltipContent = ({
   sourcesLoading
 }) => {
   const sourcesToRender = React.useMemo(() => SUPPORTED_SOURCES.filter(supportedSource => sources.includes(supportedSource.sourceType)), [sources]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
+  return jsx(React.Fragment, null, !sourcesLoading && sources.length === 0 ? jsx("span", null, jsx(FormattedMessage, messages.externalUserSourcesError)) : jsx(React.Fragment, null, jsx("span", null, jsx(FormattedMessage, messages.externalUserSourcesHeading)), jsx("div", {
+    css: sourcesTooltipContainer
+  }, sourcesLoading && jsx(Spinner, {
     size: "small",
     appearance: "invert"
   }), !sourcesLoading && sourcesToRender.map(({
     sourceType,
     icon,
     label
-  }) => /*#__PURE__*/React.createElement(SourceWrapper, {
+  }) => jsx("div", {
+    css: sourceWrapper,
     key: sourceType
-  }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)))))));
+  }, jsx("span", {
+    css: imageContainer
+  }, icon), jsx("span", null, jsx(FormattedMessage, label)))))));
 };

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

@@ -1,29 +1,34 @@
 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 { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
-import { TextWrapper } from '../AvatarItemOption';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
+import { textWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
 import InfoIcon from './InfoIcon';
 import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
 import { SourcesTooltipContent } from './SourcesTooltipContent';
-export const ImageContainer = styled.span`
-  height: 16px;
-  width: 16px;
-  padding-right: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const EmailDomainWrapper = styled.span`
-  font-weight: bold;
-`;
-export class ExternalUserOption extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+export const imageContainer = css({
+  height: '16px',
+  width: '16px',
+  paddingRight: '4px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export const emailDomainWrapper = css({
+  fontWeight: 'bold'
+});
+
+class ExternalUserOptionImpl extends React.PureComponent {
+  constructor(..._args) {
+    super(..._args);
 
     _defineProperty(this, "getPrimaryText", () => {
       const {
@@ -31,9 +36,9 @@ export class ExternalUserOption extends React.PureComponent {
           name
         }
       } = 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)
+        css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
       }, name);
     });
 
@@ -48,9 +53,11 @@ export class ExternalUserOption extends React.PureComponent {
 
       const [emailUser, emailDomain] = email.split('@');
       const emailDomainWithAt = `@${emailDomain}`;
-      return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
-      }, emailUser, /*#__PURE__*/React.createElement(EmailDomainWrapper, null, emailDomainWithAt));
+      return jsx("span", {
+        css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+      }, emailUser, jsx("span", {
+        css: emailDomainWrapper
+      }, emailDomainWithAt));
     });
 
     _defineProperty(this, "renderAvatar", () => {
@@ -61,7 +68,7 @@ export class ExternalUserOption extends React.PureComponent {
         },
         status
       } = this.props;
-      return /*#__PURE__*/React.createElement(SizeableAvatar, {
+      return jsx(SizeableAvatar, {
         appearance: "big",
         src: avatarUrl,
         presence: status,
@@ -69,14 +76,32 @@ export class ExternalUserOption extends React.PureComponent {
       });
     });
 
-    _defineProperty(this, "getSourcesInfoTooltip", () => this.props.user.isExternal ? /*#__PURE__*/React.createElement(Tooltip, {
+    _defineProperty(this, "fireEvent", (eventCreator, ...args) => {
+      const {
+        createAnalyticsEvent
+      } = this.props;
+
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel(eventCreator(...args))(createAnalyticsEvent);
+      }
+    });
+
+    _defineProperty(this, "onShow", () => {
+      const {
+        user
+      } = this.props;
+      this.fireEvent(userInfoEvent, user.sources, user.id);
+    });
+
+    _defineProperty(this, "getSourcesInfoTooltip", () => this.props.user.isExternal ? jsx(Tooltip, {
       content: this.formattedTooltipContent(),
-      position: 'right-start'
-    }, /*#__PURE__*/React.createElement(InfoIcon, null)) : undefined);
+      position: 'right-start',
+      onShow: this.onShow
+    }, jsx(InfoIcon, null)) : undefined);
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ExternalAvatarItemOption, {
+    return jsx(ExternalAvatarItemOption, {
       avatar: this.renderAvatar(),
       primaryText: this.getPrimaryText(),
       secondaryText: this.renderSecondaryText(),
@@ -92,11 +117,13 @@ export class ExternalUserOption extends React.PureComponent {
         sources
       }
     } = this.props;
-    return /*#__PURE__*/React.createElement(ExternalUserSourcesContainer, {
+    return jsx(ExternalUserSourcesContainer, {
       accountId: id,
       shouldFetchSources: Boolean(requiresSourceHydration),
       initialSources: sources
-    }, sourceData => /*#__PURE__*/React.createElement(SourcesTooltipContent, sourceData));
+    }, sourceData => jsx(SourcesTooltipContent, sourceData));
   }
 
-}
+}
+
+export const ExternalUserOption = withAnalyticsEvents()(ExternalUserOptionImpl);

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

@@ -1,22 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/core';
 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 { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '.././i18n';
-import { HighlightText } from '.././HighlightText';
-export const GroupOptionIconWrapper = styled.span`
-  padding: 2px;
-
-  > span {
-    background-color: ${token('color.background.neutral', N20)};
-    border-radius: 50%;
-    padding: 4px;
+import { HighlightText } from '../HighlightText';
+export const groupOptionIconWrapper = css({
+  padding: '2px',
+  '> span': {
+    backgroundColor: token('color.background.neutral', N20),
+    borderRadius: '50%',
+    padding: '4px'
   }
-`;
+});
 export class GroupOption extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -29,15 +30,17 @@ export class GroupOption extends React.PureComponent {
           highlight
         }
       } = this.props;
-      return [/*#__PURE__*/React.createElement(TextWrapper, {
+      return [jsx("span", {
         key: "name",
-        color: isSelected ? token('color.text.selected', B400) : token('color.text', N800)
-      }, /*#__PURE__*/React.createElement(HighlightText, {
+        css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
 
-    _defineProperty(this, "renderAvatar", () => /*#__PURE__*/React.createElement(GroupOptionIconWrapper, null, /*#__PURE__*/React.createElement(PeopleIcon, {
+    _defineProperty(this, "renderAvatar", () => jsx("span", {
+      css: groupOptionIconWrapper
+    }, jsx(PeopleIcon, {
       label: "group-icon",
       size: "medium"
     })));
@@ -46,9 +49,9 @@ export class GroupOption extends React.PureComponent {
       const {
         isSelected
       } = this.props;
-      return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200)
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.groupByline));
+      return jsx("span", {
+        css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+      }, jsx(FormattedMessage, messages.groupByline));
     });
 
     _defineProperty(this, "getLozengeProps", () => typeof this.props.group.lozenge === 'string' ? {
@@ -57,7 +60,7 @@ export class GroupOption 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/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(),