@atlaskit/user-picker 10.21.0 → 10.21.2

package/dist/cjs/components/ValueContainerWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 /**
  * Conditional wrapper for the ValueContainer in Select. Provides a workaround
@@ -16,7 +17,9 @@ var ValueContainerWrapper = function ValueContainerWrapper(_ref) {
   var children = _ref.children,
     isEnabled = _ref.isEnabled,
     onMouseDown = _ref.onMouseDown;
-  return isEnabled ? (0, _react.jsx)("div", {
+  return isEnabled ?
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  (0, _react.jsx)("div", {
     css: (0, _react.css)({
       flexGrow: 1
     }),

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "10.21.0";
+const packageVersion = "10.21.2";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/AddOptionAvatar.js

@@ -1,11 +1,13 @@
 /** @jsx jsx */
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import React from 'react';
 const getEmailAvatarWrapperStyle = isLozenge => {
   const padding = isLozenge ? `${"var(--ds-space-0, 0px)"}` : `${"var(--ds-space-050, 4px)"}`;
   return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     padding: padding,
     backgroundColor: `var(--ds-background-neutral, ${N40})`,
     borderRadius: '50%',
@@ -17,11 +19,14 @@ export const AddOptionAvatar = ({
   isLozenge,
   label
 }) => {
-  return jsx("div", {
-    css: getEmailAvatarWrapperStyle(isLozenge)
-  }, jsx(EmailIcon, {
-    label: label,
-    size: isLozenge ? 'small' : 'medium',
-    primaryColor: `var(--ds-text-subtle, ${N500})`
-  }));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: getEmailAvatarWrapperStyle(isLozenge)
+    }, jsx(EmailIcon, {
+      label: label,
+      size: isLozenge ? 'small' : 'medium',
+      primaryColor: `var(--ds-text-subtle, ${N500})`
+    }))
+  );
 };

package/dist/es2019/components/AvatarItemOption.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { isLozengeText } from './utils';
@@ -16,7 +17,9 @@ const wrapper = isDisabled => css({
   outline: 'none',
   margin: 0,
   width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   cursor: isDisabled ? 'not-allowed' : 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   opacity: isDisabled ? "var(--ds-opacity-disabled, 0.4)" : undefined
 });
 const optionWrapper = css({
@@ -35,6 +38,7 @@ const getTextStyle = isSecondary => {
     overflowX: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     ...secondaryCssArgs
   });
 };
@@ -45,6 +49,7 @@ export const textWrapper = color => css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   display: 'inline',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   color
 });
 export const AvatarItemOption = ({
@@ -69,15 +74,18 @@ export const AvatarItemOption = ({
     }
     return lozenge;
   };
-  return jsx("span", {
-    css: wrapper(isDisabled)
-  }, avatar, jsx("div", {
-    css: optionWrapper
-  }, jsx("div", null, jsx("div", {
-    css: getTextStyle()
-  }, primaryText), secondaryText && jsx("div", {
-    css: getTextStyle(true)
-  }, secondaryText))), lozenge && jsx("div", {
-    css: additionalInfo
-  }, renderLozenge()));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("span", {
+      css: wrapper(isDisabled)
+    }, avatar, jsx("div", {
+      css: optionWrapper
+    }, jsx("div", null, jsx("div", {
+      css: getTextStyle()
+    }, primaryText), secondaryText && jsx("div", {
+      css: getTextStyle(true)
+    }, secondaryText))), lozenge && jsx("div", {
+      css: additionalInfo
+    }, renderLozenge()))
+  );
 };

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
@@ -17,13 +18,16 @@ export class CustomOption extends React.PureComponent {
         }
       } = this.props;
       return [jsx("span", {
-        key: "name",
+        key: "name"
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        ,
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
     });
     _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
       "data-testid": "user-picker-custom-secondary-text"
     }, message));

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

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
@@ -21,12 +22,15 @@ export class EmailOption extends React.PureComponent {
         }
       } = this.props;
       return jsx("span", {
-        key: "name",
+        key: "name"
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        ,
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, id);
     });
     _defineProperty(this, "renderSecondaryText", label => {
       return jsx("span", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
         "data-testid": "user-picker-email-secondary-text"
       }, label);

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 const outerWrapper = isDisabled => css({
@@ -10,7 +11,9 @@ const outerWrapper = isDisabled => css({
   outline: 'none',
   margin: 0,
   width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   cursor: isDisabled ? 'not-allowed' : 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   opacity: isDisabled ? "var(--ds-opacity-disabled, 0.4)" : undefined
 });
 const detailsWrapper = css({
@@ -36,10 +39,12 @@ const getTextStyle = isSecondary => {
     maxWidth: '100%',
     margin: 0,
     color: `var(--ds-text-selected, ${B400})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     ...{
       secondaryCssArgs
     },
     whiteSpace: 'nowrap',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> span': {
       maxWidth: 'inherit'
     }
@@ -51,7 +56,9 @@ export const ExternalAvatarItemOption = ({
   primaryText,
   secondaryText,
   sourcesInfoTooltip
-}) => jsx("div", {
+}) =>
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+jsx("div", {
   css: outerWrapper(isDisabled)
 }, avatar, jsx("div", {
   css: detailsWrapper

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
 import { N50, N200 } from '@atlaskit/theme/colors';

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

@@ -2,6 +2,7 @@
 import { Box, xcss } from '@atlaskit/primitives';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import Spinner from '@atlaskit/spinner/spinner';
@@ -14,6 +15,8 @@ const sourcesTooltipContainer = xcss({
   paddingBottom: 'space.050',
   paddingRight: 'space.050'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const sourceWrapper = css({
   paddingTop: "var(--ds-space-050, 4px)",
   display: 'flex',

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -12,6 +13,8 @@ import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
 import InfoIcon from './InfoIcon';
 import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
 import { SourcesTooltipContent } from './SourcesTooltipContent';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const imageContainer = css({
   height: '16px',
   width: '16px',
@@ -20,6 +23,8 @@ export const imageContainer = css({
   alignItems: 'center',
   justifyContent: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const emailDomainWrapper = css({
   fontWeight: 'bold'
 });
@@ -33,7 +38,9 @@ class ExternalUserOptionImpl extends React.PureComponent {
         }
       } = this.props;
       return jsx("span", {
-        key: "name",
+        key: "name"
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        ,
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, name);
     });
@@ -49,6 +56,7 @@ class ExternalUserOptionImpl extends React.PureComponent {
 
       // Render byline if present
       if (byline) {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         return jsx("span", {
           css: textWrapper(textColor)
         }, byline);
@@ -58,11 +66,14 @@ class ExternalUserOptionImpl extends React.PureComponent {
       if (email) {
         const [emailUser, emailDomain] = email.split('@');
         const emailDomainWithAt = `@${emailDomain}`;
-        return jsx("span", {
-          css: textWrapper(textColor)
-        }, emailUser, jsx("span", {
-          css: emailDomainWrapper
-        }, emailDomainWithAt));
+        return (
+          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          jsx("span", {
+            css: textWrapper(textColor)
+          }, emailUser, jsx("span", {
+            css: emailDomainWrapper
+          }, emailDomainWithAt))
+        );
       }
     });
     _defineProperty(this, "renderAvatar", () => {

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

@@ -2,14 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
 import { HighlightText } from '../HighlightText';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const groupOptionIconWrapper = css({
   padding: "var(--ds-space-025, 2px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> span': {
     backgroundColor: `var(--ds-background-neutral, ${N20})`,
     borderRadius: '50%',
@@ -28,7 +32,9 @@ export class GroupOption extends React.PureComponent {
         }
       } = this.props;
       return [jsx("span", {
-        key: "name",
+        key: "name"
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        ,
         css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
@@ -45,6 +51,7 @@ export class GroupOption extends React.PureComponent {
         isSelected
       } = this.props;
       return jsx("span", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
         "data-testid": "user-picker-group-secondary-text"
       }, jsx(FormattedMessage, messages.groupByline));

package/dist/es2019/components/Menu.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { components } from '@atlaskit/select';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const getFooterStyle = () => {
   return css({
@@ -9,7 +10,9 @@ const getFooterStyle = () => {
 };
 export class Menu extends React.Component {
   render() {
-    return jsx(components.Menu, this.props, this.props.selectProps.header, this.props.children, this.props.selectProps.footer && jsx("div", {
+    return jsx(components.Menu, this.props, this.props.selectProps.header, this.props.children, this.props.selectProps.footer &&
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("div", {
       css: getFooterStyle()
     }, this.props.selectProps.footer));
   }

package/dist/es2019/components/MultiValue.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';

package/dist/es2019/components/PopupControl.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { components } from '@atlaskit/select';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 const spacing = 8;
@@ -16,6 +17,7 @@ const getLabelStyle = () => css({
   color: `var(--ds-text-subtlest, ${N200})`,
   fontSize: `${fontSize}px`,
   fontWeight: 600,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   lineHeight: `${lineHeight}`,
   paddingBottom: "var(--ds-space-050, 4px)",
   paddingLeft: "var(--ds-space-0, 0px)",

package/dist/es2019/components/SingleValue.js

@@ -1,16 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { AvatarItem } from '@atlaskit/avatar';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
 const avatarItemComponent = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   border: 'none !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   padding: `${"var(--ds-space-0, 0px)"} !important`,
   width: 'auto',
   overflow: 'hidden',
   minWidth: '100px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > span': {
     boxSizing: 'border-box'
   },

package/dist/es2019/components/SingleValueContainer.js

@@ -1,12 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { components } from '@atlaskit/select';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import React from 'react';
 import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
 import ValueContainerWrapper from './ValueContainerWrapper';
 const placeholderIconContainer = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   paddingLeft: BORDER_PADDING,
   lineHeight: 0,
   gridArea: '1/1/2/2'
@@ -39,7 +41,9 @@ export class SingleValueContainer extends React.Component {
     _defineProperty(this, "Wrapper", ({
       children
     }) => {
-      return this.onValueContainerClick ? jsx("div", {
+      return this.onValueContainerClick ?
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      jsx("div", {
         css: css({
           flexGrow: 1
         }),

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
@@ -20,7 +21,9 @@ export class TeamOption extends React.PureComponent {
         }
       } = this.props;
       return [jsx("span", {
-        key: "name",
+        key: "name"
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        ,
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
@@ -63,6 +66,7 @@ export class TeamOption extends React.PureComponent {
       }
     });
     _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
       "data-testid": "user-picker-team-secondary-text"
     }, message));
@@ -87,6 +91,7 @@ export class TeamOption extends React.PureComponent {
         return undefined;
       }
       return jsx("span", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
       }, this.props.team.byline);
     });

package/dist/es2019/components/UserOption.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from './AvatarItemOption';
@@ -19,7 +20,9 @@ export class UserOption extends React.PureComponent {
         }
       } = this.props;
       const result = [jsx("span", {
-        key: "name",
+        key: "name"
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        ,
         css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text, ${N800})`)
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
@@ -28,6 +31,7 @@ export class UserOption extends React.PureComponent {
         result.push(jsx(React.Fragment, {
           key: "publicName"
         }, ' ', jsx("span", {
+          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
         }, "(", jsx(HighlightText, {
           highlights: highlight && highlight.publicName
@@ -36,6 +40,7 @@ export class UserOption extends React.PureComponent {
       return result;
     });
     _defineProperty(this, "renderSecondaryText", () => this.props.user.byline ? jsx("span", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
     }, this.props.user.byline) : undefined);
     _defineProperty(this, "renderAvatar", () => {

package/dist/es2019/components/UserPicker.js

@@ -68,7 +68,9 @@ export class UserPickerWithoutAnalytics extends React.Component {
       fetchUserSource: loadUserSource
     }, /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
       width: width,
-      SelectComponent: SelectComponent,
+      SelectComponent: SelectComponent
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
       styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles),
       components: getComponents(isMulti, anchor),
       pickerProps: pickerProps

package/dist/es2019/components/ValueContainerWrapper.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 
 /**
@@ -11,7 +12,9 @@ const ValueContainerWrapper = ({
   isEnabled,
   onMouseDown
 }) => {
-  return isEnabled ? jsx("div", {
+  return isEnabled ?
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  jsx("div", {
     css: css({
       flexGrow: 1
     }),

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.21.0";
+var packageVersion = "10.21.2";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/AddOptionAvatar.js

@@ -1,11 +1,13 @@
 /** @jsx jsx */
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import React from 'react';
 var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge) {
   var padding = isLozenge ? "var(--ds-space-0, 0px)" : "var(--ds-space-050, 4px)";
   return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     padding: padding,
     backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
     borderRadius: '50%',
@@ -16,11 +18,14 @@ var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge)
 export var AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
     label = _ref.label;
-  return jsx("div", {
-    css: getEmailAvatarWrapperStyle(isLozenge)
-  }, jsx(EmailIcon, {
-    label: label,
-    size: isLozenge ? 'small' : 'medium',
-    primaryColor: "var(--ds-text-subtle, ".concat(N500, ")")
-  }));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: getEmailAvatarWrapperStyle(isLozenge)
+    }, jsx(EmailIcon, {
+      label: label,
+      size: isLozenge ? 'small' : 'medium',
+      primaryColor: "var(--ds-text-subtle, ".concat(N500, ")")
+    }))
+  );
 };