@atlaskit/user-picker 11.25.4 → 11.25.5

package/dist/es2019/components/BaseUserPicker.js

@@ -204,6 +204,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
     });
     _defineProperty(this, "handleFocus", event => {
+      var _this$props$openMenuO;
       const {
         value,
         menuIsOpen
@@ -213,7 +214,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
       this.startOptionsShownUfoExperience();
       callCallback(this.props.onFocus, this.getSessionId());
-      if (!this.isMenuOpenOnClickForSingleSelect) {
+      const openMenuOnFocus = (_this$props$openMenuO = this.props.openMenuOnFocus) !== null && _this$props$openMenuO !== void 0 ? _this$props$openMenuO : true;
+      if (!this.isMenuOpenOnClickForSingleSelect && openMenuOnFocus) {
         this.setState({
           menuIsOpen: true
         });
@@ -514,7 +516,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     }), {});
   }
   render() {
-    var _this$props$openMenuO;
+    var _this$props$openMenuO2;
     const {
       isMulti,
       isLoading,
@@ -566,7 +568,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       ...(!this.isMenuOpenOnClickForSingleSelect && {
         menuIsOpen,
         blurInputOnSelect: !isMulti,
-        openMenuOnFocus: (_this$props$openMenuO = this.props.openMenuOnFocus) !== null && _this$props$openMenuO !== void 0 ? _this$props$openMenuO : true
+        openMenuOnFocus: (_this$props$openMenuO2 = this.props.openMenuOnFocus) !== null && _this$props$openMenuO2 !== void 0 ? _this$props$openMenuO2 : true
       })
     };
     const {

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { B400, N800, N200 } from '@atlaskit/theme/colors';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -25,14 +25,14 @@ export class CustomOption extends React.PureComponent {
         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})`)
+        css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, 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})`),
+      css: textWrapper(isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)"),
       "data-testid": "user-picker-custom-secondary-text"
     }, message));
     _defineProperty(this, "renderByline", () => {

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

@@ -5,7 +5,6 @@ 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, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
@@ -28,13 +27,13 @@ export class EmailOption extends React.PureComponent {
         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})`)
+        css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, 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})`),
+        css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)"),
         "data-testid": "user-picker-email-secondary-text"
       }, label);
     });

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

@@ -5,7 +5,6 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
-import { B400 } from '@atlaskit/theme/colors';
 const outerWrapper = isDisabled => css({
   alignItems: 'center',
   boxSizing: 'border-box',
@@ -36,14 +35,14 @@ const textSection = css({
 });
 const getTextStyle = isSecondary => {
   const secondaryCssArgs = isSecondary ? {
-    color: `var(--ds-text-selected, ${B400})`,
+    color: "var(--ds-text-selected, #1868DB)",
     font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
   return css({
     display: 'flex',
     maxWidth: '100%',
     margin: 0,
-    color: `var(--ds-text-selected, ${B400})`,
+    color: "var(--ds-text-selected, #1868DB)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     ...{
       secondaryCssArgs

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

@@ -2,30 +2,20 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useState } from 'react';
+import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
-import EditorPanelIcon from '@atlaskit/icon/core/status-information';
-import { N50, N200 } from '@atlaskit/theme/colors';
 const wrapper = css({
   display: 'flex',
   marginRight: "var(--ds-space-050, 4px)"
 });
 export default (() => {
-  const [isMouseHovered, setHoverState] = useState(false);
-  const onMouseEnter = useCallback(() => setHoverState(true), [setHoverState]);
-  const onMouseLeave = useCallback(() => setHoverState(false), [setHoverState]);
-  return (
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    jsx("div", {
-      css: wrapper,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-    }, jsx(EditorPanelIcon, {
-      testId: "source-icon",
-      label: "",
-      spacing: "spacious",
-      color: `var(--ds-text-subtlest, ${isMouseHovered ? N200 : N50})`
-    }))
-  );
+  return jsx("div", {
+    css: wrapper
+  }, jsx(EditorPanelIcon, {
+    testId: "source-icon",
+    label: "",
+    spacing: "spacious",
+    color: "var(--ds-text-subtlest, #6B6E76)"
+  }));
 });

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

@@ -6,7 +6,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
@@ -47,7 +46,7 @@ class ExternalUserOptionImpl extends React.PureComponent {
         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})`)
+        css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, name);
     });
     _defineProperty(this, "renderSecondaryText", () => {
@@ -58,7 +57,7 @@ class ExternalUserOptionImpl extends React.PureComponent {
       if (!byline && !email) {
         return;
       }
-      const textColor = this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`;
+      const textColor = this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)";
 
       // Render byline if present
       if (byline) {

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

@@ -8,7 +8,6 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
-import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/core/people-group';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
@@ -20,7 +19,7 @@ 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})`,
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     borderRadius: "var(--ds-radius-full, 9999px)",
     padding: "var(--ds-space-050, 4px)"
   }
@@ -40,7 +39,7 @@ export class GroupOption extends React.PureComponent {
         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})`)
+        css: textWrapper(isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -78,7 +77,7 @@ export class GroupOption extends React.PureComponent {
       };
       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})`),
+        css: textWrapper(isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)"),
         "data-testid": "user-picker-group-secondary-text"
       }, group.byline ? group.byline : getGroupByline());
     });

package/dist/es2019/components/PopupControl.js

@@ -5,7 +5,6 @@
 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 { N200 } from '@atlaskit/theme/colors';
 import Control from './Control';
 const controlWrapper = css({
   display: 'flex',
@@ -13,8 +12,8 @@ const controlWrapper = css({
   padding: `0px ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`
 });
 const labelStyle = css({
-  color: `var(--ds-text-subtlest, ${N200})`,
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  color: "var(--ds-text-subtlest, #6B6E76)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   fontWeight: "var(--ds-font-weight-semibold, 600)",
   paddingBottom: "var(--ds-space-050, 4px)",
   paddingLeft: "var(--ds-space-0, 0px)",

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { B400, N800, N200 } from '@atlaskit/theme/colors';
+
 import { Inline } from '@atlaskit/primitives/compiled';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -32,7 +32,7 @@ export class TeamOption extends React.PureComponent {
         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})`)
+        css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, jsx(Inline, {
         alignBlock: "center"
       }, jsx(HighlightText, {
@@ -105,7 +105,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})`),
+      css: textWrapper(isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)"),
       "data-testid": "user-picker-team-secondary-text"
     }, message));
     _defineProperty(this, "renderAvatar", () => {
@@ -152,7 +152,7 @@ export class TeamOption extends React.PureComponent {
       }
       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})`)
+        css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)")
       }, this.props.team.byline);
     });
   }

package/dist/es2019/components/UserOption.js

@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsx jsx
  */
 import { getAppearanceForAppType } from '@atlaskit/avatar';
-import { B400, N800, N200 } 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';
@@ -37,12 +36,12 @@ export class UserOption extends React.PureComponent {
         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})`)
+        css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
       if (hasValue(publicName) && name.trim() !== publicName.trim()) {
-        const color = this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`;
+        const color = this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)";
         result.push(jsx(React.Fragment, {
           key: "publicName"
         }, ' ', jsx("span", {
@@ -57,7 +56,7 @@ export class UserOption extends React.PureComponent {
     });
     _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})`)
+      css: textWrapper(this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)")
     }, this.props.user.byline) : undefined);
     _defineProperty(this, "renderAvatar", () => {
       const {

package/dist/es2019/components/assets/github.js

@@ -11,6 +11,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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }));
 }

package/dist/es2019/components/assets/google.js

@@ -11,21 +11,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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }));
 }

package/dist/es2019/components/assets/microsoft.js

@@ -11,21 +11,21 @@ export function MicrosoftIcon(props) {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0 0H5.70233V5.7023H0V0Z",
-    fill: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.29785 0H12.0002V5.7023H6.29785V0Z",
-    fill: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M0 6.29688H5.70233V11.9992H0V6.29688Z",
-    fill: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.29785 6.29688H12.0002V11.9992H6.29785V6.29688Z",
-    fill: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "clip0"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "12",
     height: "11.9999",
-    fill: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }))));
 }

package/dist/es2019/components/assets/slack.js

@@ -11,33 +11,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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }), /*#__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: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "clip0"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "12",
     height: "11.9999",
-    fill: "var(--ds-text-inverse, white)"
+    fill: "var(--ds-text-inverse, #FFFFFF)"
   }))));
 }

package/dist/es2019/components/styles.js

@@ -1,7 +1,6 @@
-import { B100, N0, N10, N20, N30, N100, R50, R400, N90 } from '@atlaskit/theme/colors';
-import memoizeOne from 'memoize-one';
-import { mergeStyles } from '@atlaskit/select';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { mergeStyles } from '@atlaskit/select';
+import memoizeOne from 'memoize-one';
 export const BORDER_PADDING = "var(--ds-space-075, 6px)";
 export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
@@ -22,15 +21,15 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
       return {
         ...css,
         width,
-        borderColor: state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.isInvalid ? `var(--ds-border-danger, ${R400})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
-        backgroundColor: state.isFocused ? `var(--ds-background-input, ${css['backgroundColor']})` : state.selectProps.subtle ? 'transparent' : state.isDisabled && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? `var(--ds-background-disabled, ${N10})` : state.selectProps.textFieldBackgroundColor ? `var(--ds-background-input, ${N10})` : `var(--ds-background-input, ${N20})`,
+        borderColor: state.isFocused ? "var(--ds-border-focused, #4688EC)" : state.isInvalid ? "var(--ds-border-danger, #E2483D)" : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, #8C8F97)",
+        backgroundColor: state.isFocused ? "var(--ds-background-input, #FFFFFF)" : state.selectProps.subtle ? 'transparent' : state.isDisabled && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-background-disabled, #17171708)" : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)",
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': {
           ...css[':hover'],
-          borderColor: state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.isInvalid ? `var(--ds-border-danger, ${R400})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})`,
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? `var(--ds-background-danger, ${R50})` : state.isFocused ? css[':hover'] ? `var(--ds-background-input, ${css[':hover'].backgroundColor})` : `var(--ds-background-input, ${N0})` : state.isDisabled ? `var(--ds-background-disabled, ${N10})` : `var(--ds-background-input-hovered, ${N30})`
+          borderColor: state.isFocused ? css[':hover'] ? "var(--ds-border-focused, #4688EC)" : "var(--ds-border-focused, #4688EC)" : state.isInvalid ? "var(--ds-border-danger, #E2483D)" : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, #8C8F97)",
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, #FFECEB)" : state.isFocused ? css[':hover'] ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)" : state.isDisabled ? "var(--ds-background-disabled, #17171708)" : "var(--ds-background-input-hovered, #F8F8F8)"
         },
         padding: 0,
         minHeight: minHeight ? minHeight : height || isCompact ? 'none' : 44,
@@ -57,7 +56,7 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
       paddingTop: 0,
       padding: 0,
       ':hover': {
-        color: `var(--ds-icon-danger, ${R400})`
+        color: "var(--ds-icon-danger, #C9372C)"
       }
     }),
     indicatorsContainer: css => ({
@@ -146,12 +145,12 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
       paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
       '& input::placeholder': {
         /* Chrome, Firefox, Opera, Safari 10.1+ */
-        color: `var(--ds-text-subtlest, ${N100})`,
+        color: "var(--ds-text-subtlest, #6B6E76)",
         opacity: 1 /* Firefox */
       },
       '& input:-ms-input-placeholder': {
         /* Internet Explorer 10-11 */
-        color: `var(--ds-text-subtlest, ${N100})`
+        color: "var(--ds-text-subtlest, #6B6E76)"
       }
     }),
     singleValue: css => ({

package/dist/esm/analytics.js

@@ -8,7 +8,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "0.0.0-development";
+var packageVersion = "11.25.4";
 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

@@ -3,14 +3,13 @@
  * @jsx jsx
  */
 import EmailIcon from '@atlaskit/icon/core/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';
 import { fg } from '@atlaskit/platform-feature-flags';
 var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge, isPendingAction) {
   var padding = isLozenge ? "var(--ds-space-0, 0px)" : "var(--ds-space-050, 4px)";
-  var backgroundColor = isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF5DB)" : "var(--ds-background-neutral, ".concat(N40, ")");
+  var backgroundColor = isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF5DB)" : "var(--ds-background-neutral, #0515240F)";
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     padding: padding,
@@ -33,7 +32,7 @@ export var AddOptionAvatar = function AddOptionAvatar(_ref) {
     }, jsx(EmailIcon, {
       testId: "add-option-avatar-email-icon",
       label: label || '',
-      color: isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #9E4C00)" : "var(--ds-text-subtle, ".concat(N500, ")")
+      color: isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #9E4C00)" : "var(--ds-text-subtle, #505258)"
     }))
   );
 };

package/dist/esm/components/BaseUserPicker.js

@@ -209,6 +209,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
     });
     _defineProperty(_this, "handleFocus", function (event) {
+      var _this$props$openMenuO;
       var _this$state = _this.state,
         value = _this$state.value,
         menuIsOpen = _this$state.menuIsOpen;
@@ -217,7 +218,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
       _this.startOptionsShownUfoExperience();
       callCallback(_this.props.onFocus, _this.getSessionId());
-      if (!_this.isMenuOpenOnClickForSingleSelect) {
+      var openMenuOnFocus = (_this$props$openMenuO = _this.props.openMenuOnFocus) !== null && _this$props$openMenuO !== void 0 ? _this$props$openMenuO : true;
+      if (!_this.isMenuOpenOnClickForSingleSelect && openMenuOnFocus) {
         _this.setState({
           menuIsOpen: true
         });
@@ -535,7 +537,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
   }, {
     key: "render",
     value: function render() {
-      var _this$props$openMenuO;
+      var _this$props$openMenuO2;
       var _this$props5 = this.props,
         isMulti = _this$props5.isMulti,
         isLoading = _this$props5.isLoading,
@@ -584,7 +586,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       var menuOpenDeciderProps = _objectSpread({}, !this.isMenuOpenOnClickForSingleSelect && {
         menuIsOpen: menuIsOpen,
         blurInputOnSelect: !isMulti,
-        openMenuOnFocus: (_this$props$openMenuO = this.props.openMenuOnFocus) !== null && _this$props$openMenuO !== void 0 ? _this$props$openMenuO : true
+        openMenuOnFocus: (_this$props$openMenuO2 = this.props.openMenuOnFocus) !== null && _this$props$openMenuO2 !== void 0 ? _this$props$openMenuO2 : true
       });
       var _this$ariaProps = this.ariaProps,
         ariaLabelledByStandard = _this$ariaProps['aria-labelledby'],

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

@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { B400, N800, N200 } from '@atlaskit/theme/colors';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -34,7 +34,7 @@ export var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
         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, ".concat(B400, ")") : "var(--ds-text, ".concat(N800, ")"))
+        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -42,7 +42,7 @@ export var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_this, "getBylineComponent", function (isSelected, message) {
       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, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        css: textWrapper(isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)"),
         "data-testid": "user-picker-custom-secondary-text"
       }, message);
     });

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

@@ -12,7 +12,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 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, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
@@ -40,13 +39,13 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
         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, ".concat(B400, ")") : "var(--ds-text, ".concat(N800, ")"))
+        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text, #292A2E)")
       }, id);
     });
     _defineProperty(_this, "renderSecondaryText", function (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, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, #1868DB)" : "var(--ds-text-subtlest, #6B6E76)"),
         "data-testid": "user-picker-email-secondary-text"
       }, label);
     });