@atlaskit/user-picker 11.0.3 → 11.0.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/user-picker
 
+## 11.0.5
+
+### Patch Changes
+
+- [#121751](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121751)
+  [`fa503e3c2f7af`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa503e3c2f7af) -
+  [ux] Update avatar size on user picker
+- Updated dependencies
+
+## 11.0.4
+
+### Patch Changes
+
+- [#119746](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119746)
+  [`e669148287cf3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e669148287cf3) -
+  Internal refactor for compatibility with the latest version of @atlaskit/avatar. The UI remains
+  consistent.
+- Updated dependencies
+
 ## 11.0.3
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.0.3";
+var packageVersion = "11.0.5";
 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/cjs/components/AvatarItemOption.js

@@ -53,7 +53,7 @@ var optionWrapper = (0, _react2.css)({
 });
 var getTextStyle = function getTextStyle(isSecondary) {
   var secondaryCssArgs = isSecondary ? {
-    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
   return (0, _react2.css)(_objectSpread({
     margin: 0,

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

@@ -46,7 +46,7 @@ var textSection = (0, _react.css)({
 var getTextStyle = function getTextStyle(isSecondary) {
   var secondaryCssArgs = isSecondary ? {
     color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
-    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
   return (0, _react.css)(_objectSpread(_objectSpread({
     display: 'flex',

package/dist/cjs/components/MultiValue.js

@@ -47,7 +47,7 @@ var groupTagContainer = (0, _primitives.xcss)({
   marginTop: 'space.025'
 });
 var nameWrapper = (0, _react2.css)({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   paddingLeft: "var(--ds-space-050, 4px)"
 });
 var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {

package/dist/cjs/components/PopupControl.js

@@ -26,7 +26,7 @@ var controlWrapper = (0, _react2.css)({
 });
 var labelStyle = (0, _react2.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px 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/cjs/components/PopupUserPicker.js

@@ -19,6 +19,7 @@ var _components = require("./components");
 var _styles = require("./styles");
 var _popup = require("./popup");
 var _BaseUserPicker = require("./BaseUserPicker");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
@@ -62,7 +63,9 @@ var PopupUserPickerWithoutAnalytics = exports.PopupUserPickerWithoutAnalytics =
         shouldFlip = _this$props.shouldFlip,
         styles = _this$props.styles;
       var width = this.props.width;
-      var selectStyles = (0, _styles.getPopupStyles)(width, isMulti, styles);
+      var selectStyles = (0, _styles.getPopupStyles)(width, isMulti, styles,
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (0, _platformFeatureFlags.fg)('visual-refresh-user-picker'));
       return /*#__PURE__*/_react.default.createElement(_BaseUserPicker.BaseUserPickerWithoutAnalytics, (0, _extends2.default)({}, this.props, {
         SelectComponent: _select.PopupSelect,
         width: width,

package/dist/cjs/components/SingleValue.compiled.css

@@ -0,0 +1,14 @@
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul953f4{min-width:75pt}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._i0dl1osq{flex-basis:100%}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz419ii{line-height:1.4}

package/dist/cjs/components/SingleValue.js

@@ -1,48 +1,31 @@
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleValue = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _avatar = require("@atlaskit/avatar");
-var _react = require("@emotion/react");
+require("./SingleValue.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _select = require("@atlaskit/select");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
-var _excluded = ["ref"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var avatarItemComponent = (0, _react.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)".concat(" !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'
-  },
-  '&:hover': {
-    width: 'auto',
-    padding: 0,
-    border: 'none'
-  }
-});
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
+  avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
+  avatarItemText: "_syaz1fxt _1reo15vq _1bto1l2s _o5721q9c"
+};
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data;
   if ((0, _utils.isTeam)(data) && data.verified) {
-    return (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null);
   }
   return null;
 };
@@ -53,21 +36,19 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     _props$selectProps = props.selectProps,
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
-  return !isFocused ? (0, _react.jsx)(_select.components.SingleValue, props, (0, _react.jsx)(_avatar.AvatarItem, {
-    backgroundColor: "transparent",
-    avatar: (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
-      src: (0, _utils.getAvatarUrl)(data),
-      appearance: appearance,
-      type: (0, _utils.isTeam)(data) && (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? 'team' : 'person'
-    }),
-    primaryText: (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? (0, _react.jsx)(_primitives.Inline, {
-      alignBlock: "center"
-    }, label, (0, _react.jsx)(ElementAfter, props)) : label
-  }, function (_ref) {
-    var ref = _ref.ref,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return (0, _react.jsx)("div", (0, _extends2.default)({
-      css: avatarItemComponent
-    }, props));
-  })) : null;
+  return !isFocused ? /*#__PURE__*/React.createElement(_select.components.SingleValue, props, /*#__PURE__*/React.createElement(_compiled.Flex, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement(_SizeableAvatar.SizeableAvatar, {
+    src: (0, _utils.getAvatarUrl)(data),
+    appearance: appearance,
+    type: (0, _utils.isTeam)(data) && (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? 'team' : 'person'
+  }), /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.avatarItemTextWrapper])
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.avatarItemText
+  }, (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? /*#__PURE__*/React.createElement(_compiled.Inline, {
+    alignBlock: "center"
+  }, label, /*#__PURE__*/React.createElement(ElementAfter, props)) : label))))) : null;
 };

package/dist/cjs/components/UserOption.js

@@ -18,6 +18,7 @@ var _AvatarItemOption = require("./AvatarItemOption");
 var _HighlightText = require("./HighlightText");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -67,7 +68,9 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         avatarUrl = _this$props.user.avatarUrl,
         status = _this$props.status;
       return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
-        appearance: "big",
+        appearance:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+        (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (0, _platformFeatureFlags.fg)('visual-refresh-user-picker') ? "medium" : "big",
         src: avatarUrl,
         presence: status
       });

package/dist/cjs/components/UserPicker.js

@@ -26,6 +26,7 @@ var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvid
 var _UserSourceProvider = require("../clients/UserSourceProvider");
 var _ufoExperiences = require("../util/ufoExperiences");
 var _uuid = require("uuid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -96,7 +97,9 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid),
+        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+        (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (0, _platformFeatureFlags.fg)('visual-refresh-user-picker')),
         components: (0, _components.getComponents)(isMulti, anchor),
         pickerProps: pickerProps
       })))));

package/dist/cjs/components/styles.js

@@ -17,7 +17,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var BORDER_PADDING = exports.BORDER_PADDING = "var(--ds-space-075, 6px)";
 var AVATAR_PADDING = exports.AVATAR_PADDING = 6;
 var INDICATOR_WIDTH = exports.INDICATOR_WIDTH = 39;
-var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles, isInvalid) {
+var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -134,6 +134,13 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       });
     },
     option: function option(css) {
+      if (isVisualRefresh) {
+        return _objectSpread(_objectSpread({}, css), {}, {
+          overflow: 'hidden',
+          paddingLeft: isPopupStyles ? "var(--ds-space-200, 16px)" : "var(--ds-space-100, 8px)",
+          paddingRight: isPopupStyles ? "var(--ds-space-200, 16px)" : "var(--ds-space-100, 8px)"
+        });
+      }
       return _objectSpread(_objectSpread({}, css), {}, {
         overflow: 'hidden'
       });
@@ -168,6 +175,6 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
   };
   return overrideStyles ? (0, _select.mergeStyles)(styles, overrideStyles) : styles;
 });
-var getPopupStyles = exports.getPopupStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles) {
-  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
+var getPopupStyles = exports.getPopupStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles, isVisualRefresh) {
+  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles, false, isVisualRefresh, true));
 });

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 = "11.0.3";
+const packageVersion = "11.0.5";
 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/AvatarItemOption.js

@@ -36,7 +36,7 @@ const optionWrapper = css({
 });
 const getTextStyle = isSecondary => {
   const secondaryCssArgs = isSecondary ? {
-    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
   return css({
     margin: 0,

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

@@ -37,7 +37,7 @@ const textSection = css({
 const getTextStyle = isSecondary => {
   const secondaryCssArgs = isSecondary ? {
     color: `var(--ds-text-selected, ${B400})`,
-    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
   return css({
     display: 'flex',

package/dist/es2019/components/MultiValue.js

@@ -35,7 +35,7 @@ const groupTagContainer = xcss({
   marginTop: 'space.025'
 });
 const nameWrapper = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   paddingLeft: "var(--ds-space-050, 4px)"
 });
 export class MultiValue extends React.Component {

package/dist/es2019/components/PopupControl.js

@@ -14,7 +14,7 @@ const controlWrapper = css({
 });
 const labelStyle = css({
   color: `var(--ds-text-subtlest, ${N200})`,
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px 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/PopupUserPicker.js

@@ -7,6 +7,7 @@ import { getPopupComponents } from './components';
 import { getPopupStyles } from './styles';
 import { getPopupProps } from './popup';
 import { BaseUserPickerWithoutAnalytics } from './BaseUserPicker';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class PopupUserPickerWithoutAnalytics extends React.Component {
   constructor(...args) {
     super(...args);
@@ -46,7 +47,9 @@ export class PopupUserPickerWithoutAnalytics extends React.Component {
       styles
     } = this.props;
     const width = this.props.width;
-    const selectStyles = getPopupStyles(width, isMulti, styles);
+    const selectStyles = getPopupStyles(width, isMulti, styles,
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker'));
     return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
       SelectComponent: PopupSelect,
       width: width,

package/dist/es2019/components/SingleValue.compiled.css

@@ -0,0 +1,14 @@
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul953f4{min-width:75pt}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._i0dl1osq{flex-basis:100%}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz419ii{line-height:1.4}

package/dist/es2019/components/SingleValue.js

@@ -1,35 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @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';
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SingleValue.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam } from './utils';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline } from '@atlaskit/primitives';
-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'
-  },
-  '&:hover': {
-    width: 'auto',
-    padding: 0,
-    border: 'none'
-  }
-});
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+const styles = {
+  avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
+  avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
+  avatarItemText: "_syaz1fxt _1reo15vq _1bto1l2s _o5721q9c"
+};
 const ElementAfter = props => {
   const {
     data: {
@@ -37,7 +20,7 @@ const ElementAfter = props => {
     }
   } = props;
   if (isTeam(data) && data.verified) {
-    return jsx(VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
   }
   return null;
 };
@@ -53,20 +36,19 @@ export const SingleValue = props => {
       isFocused
     }
   } = props;
-  return !isFocused ? jsx(components.SingleValue, props, jsx(AvatarItem, {
-    backgroundColor: "transparent",
-    avatar: jsx(SizeableAvatar, {
-      src: getAvatarUrl(data),
-      appearance: appearance,
-      type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
-    }),
-    primaryText: fg('verified-team-in-user-picker') ? jsx(Inline, {
-      alignBlock: "center"
-    }, label, jsx(ElementAfter, props)) : label
-  }, ({
-    ref,
-    ...props
-  }) => jsx("div", _extends({
-    css: avatarItemComponent
-  }, props)))) : null;
+  return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement(SizeableAvatar, {
+    src: getAvatarUrl(data),
+    appearance: appearance,
+    type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.avatarItemTextWrapper])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItemText
+  }, fg('verified-team-in-user-picker') ? /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center"
+  }, label, /*#__PURE__*/React.createElement(ElementAfter, props)) : label))))) : null;
 };

package/dist/es2019/components/UserOption.js

@@ -11,6 +11,7 @@ import { AvatarItemOption, textWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
 import { SizeableAvatar } from './SizeableAvatar';
 import { hasValue } from './utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class UserOption extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -54,7 +55,9 @@ export class UserOption extends React.PureComponent {
         status
       } = this.props;
       return jsx(SizeableAvatar, {
-        appearance: "big",
+        appearance:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+        fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker') ? "medium" : "big",
         src: avatarUrl,
         presence: status
       });

package/dist/es2019/components/UserPicker.js

@@ -13,6 +13,7 @@ import MessagesIntlProvider from './MessagesIntlProvider';
 import { ExusUserSourceProvider } from '../clients/UserSourceProvider';
 import { userPickerRenderedUfoExperience as experience, UfoErrorBoundary } from '../util/ufoExperiences';
 import { v4 as uuidv4 } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class UserPickerWithoutAnalytics extends React.Component {
   constructor(props) {
     super(props);
@@ -73,7 +74,9 @@ export class UserPickerWithoutAnalytics extends React.Component {
       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, this.props.isInvalid),
+      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker')),
       components: getComponents(isMulti, anchor),
       pickerProps: pickerProps
     })))));

package/dist/es2019/components/styles.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@atlaskit/select';
 export const BORDER_PADDING = "var(--ds-space-075, 6px)";
 export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
-export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles, isInvalid) => {
+export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles) => {
   let styles = {
     menu: (css, state) => ({
       ...css,
@@ -119,10 +119,20 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
         textOverflow: 'ellipsis'
       };
     },
-    option: css => ({
-      ...css,
-      overflow: 'hidden'
-    }),
+    option: css => {
+      if (isVisualRefresh) {
+        return {
+          ...css,
+          overflow: 'hidden',
+          paddingLeft: isPopupStyles ? "var(--ds-space-200, 16px)" : "var(--ds-space-100, 8px)",
+          paddingRight: isPopupStyles ? "var(--ds-space-200, 16px)" : "var(--ds-space-100, 8px)"
+        };
+      }
+      return {
+        ...css,
+        overflow: 'hidden'
+      };
+    },
     input: (css, state) => ({
       ...css,
       gridArea: '1/2/2/3',
@@ -151,6 +161,6 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
-export const getPopupStyles = memoizeOne((width, isMulti, overrideStyles) => ({
-  ...getStyles(width, isMulti, false, overrideStyles)
+export const getPopupStyles = memoizeOne((width, isMulti, overrideStyles, isVisualRefresh) => ({
+  ...getStyles(width, isMulti, false, overrideStyles, false, isVisualRefresh, true)
 }));

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 = "11.0.3";
+var packageVersion = "11.0.5";
 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/AvatarItemOption.js

@@ -43,7 +43,7 @@ var optionWrapper = css({
 });
 var getTextStyle = function getTextStyle(isSecondary) {
   var secondaryCssArgs = isSecondary ? {
-    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
   return css(_objectSpread({
     margin: 0,

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

@@ -42,7 +42,7 @@ var textSection = css({
 var getTextStyle = function getTextStyle(isSecondary) {
   var secondaryCssArgs = isSecondary ? {
     color: "var(--ds-text-selected, ".concat(B400, ")"),
-    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
   return css(_objectSpread(_objectSpread({
     display: 'flex',

package/dist/esm/components/MultiValue.js

@@ -42,7 +42,7 @@ var groupTagContainer = xcss({
   marginTop: 'space.025'
 });
 var nameWrapper = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   paddingLeft: "var(--ds-space-050, 4px)"
 });
 export var MultiValue = /*#__PURE__*/function (_React$Component) {

package/dist/esm/components/PopupControl.js

@@ -21,7 +21,7 @@ var controlWrapper = css({
 });
 var labelStyle = css({
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px 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/esm/components/PopupUserPicker.js

@@ -14,6 +14,7 @@ import { getPopupComponents } from './components';
 import { getPopupStyles } from './styles';
 import { getPopupProps } from './popup';
 import { BaseUserPickerWithoutAnalytics } from './BaseUserPicker';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   function PopupUserPickerWithoutAnalytics() {
     var _this;
@@ -55,7 +56,9 @@ export var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
         shouldFlip = _this$props.shouldFlip,
         styles = _this$props.styles;
       var width = this.props.width;
-      var selectStyles = getPopupStyles(width, isMulti, styles);
+      var selectStyles = getPopupStyles(width, isMulti, styles,
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker'));
       return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
         SelectComponent: PopupSelect,
         width: width,

package/dist/esm/components/SingleValue.compiled.css

@@ -0,0 +1,14 @@
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul953f4{min-width:75pt}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._i0dl1osq{flex-basis:100%}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz419ii{line-height:1.4}

package/dist/esm/components/SingleValue.js

@@ -1,41 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["ref"];
-/**
- * @jsxRuntime classic
- * @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';
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SingleValue.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam } from './utils';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline } from '@atlaskit/primitives';
-var 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)".concat(" !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'
-  },
-  '&:hover': {
-    width: 'auto',
-    padding: 0,
-    border: 'none'
-  }
-});
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+var styles = {
+  avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
+  avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
+  avatarItemText: "_syaz1fxt _1reo15vq _1bto1l2s _o5721q9c"
+};
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data;
   if (isTeam(data) && data.verified) {
-    return jsx(VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
   }
   return null;
 };
@@ -46,21 +27,19 @@ export var SingleValue = function SingleValue(props) {
     _props$selectProps = props.selectProps,
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
-  return !isFocused ? jsx(components.SingleValue, props, jsx(AvatarItem, {
-    backgroundColor: "transparent",
-    avatar: jsx(SizeableAvatar, {
-      src: getAvatarUrl(data),
-      appearance: appearance,
-      type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
-    }),
-    primaryText: fg('verified-team-in-user-picker') ? jsx(Inline, {
-      alignBlock: "center"
-    }, label, jsx(ElementAfter, props)) : label
-  }, function (_ref) {
-    var ref = _ref.ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-    return jsx("div", _extends({
-      css: avatarItemComponent
-    }, props));
-  })) : null;
+  return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement(SizeableAvatar, {
+    src: getAvatarUrl(data),
+    appearance: appearance,
+    type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.avatarItemTextWrapper])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItemText
+  }, fg('verified-team-in-user-picker') ? /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center"
+  }, label, /*#__PURE__*/React.createElement(ElementAfter, props)) : label))))) : null;
 };

package/dist/esm/components/UserOption.js

@@ -18,6 +18,7 @@ import { AvatarItemOption, textWrapper } from './AvatarItemOption';
 import { HighlightText } from './HighlightText';
 import { SizeableAvatar } from './SizeableAvatar';
 import { hasValue } from './utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
   function UserOption() {
     var _this;
@@ -62,7 +63,9 @@ export var UserOption = /*#__PURE__*/function (_React$PureComponent) {
         avatarUrl = _this$props.user.avatarUrl,
         status = _this$props.status;
       return jsx(SizeableAvatar, {
-        appearance: "big",
+        appearance:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+        fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker') ? "medium" : "big",
         src: avatarUrl,
         presence: status
       });

package/dist/esm/components/UserPicker.js

@@ -22,6 +22,7 @@ import MessagesIntlProvider from './MessagesIntlProvider';
 import { ExusUserSourceProvider } from '../clients/UserSourceProvider';
 import { userPickerRenderedUfoExperience as experience, UfoErrorBoundary } from '../util/ufoExperiences';
 import { v4 as uuidv4 } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   function UserPickerWithoutAnalytics(props) {
     var _this;
@@ -86,7 +87,9 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         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, this.props.isInvalid),
+        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+        fg('platform-component-visual-refresh') && fg('visual-refresh-user-picker')),
         components: getComponents(isMulti, anchor),
         pickerProps: pickerProps
       })))));

package/dist/esm/components/styles.js

@@ -10,7 +10,7 @@ import { mergeStyles } from '@atlaskit/select';
 export var BORDER_PADDING = "var(--ds-space-075, 6px)";
 export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
-export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles, isInvalid) {
+export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles, isInvalid, isVisualRefresh, isPopupStyles) {
   var styles = {
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -127,6 +127,13 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       });
     },
     option: function option(css) {
+      if (isVisualRefresh) {
+        return _objectSpread(_objectSpread({}, css), {}, {
+          overflow: 'hidden',
+          paddingLeft: isPopupStyles ? "var(--ds-space-200, 16px)" : "var(--ds-space-100, 8px)",
+          paddingRight: isPopupStyles ? "var(--ds-space-200, 16px)" : "var(--ds-space-100, 8px)"
+        });
+      }
       return _objectSpread(_objectSpread({}, css), {}, {
         overflow: 'hidden'
       });
@@ -161,6 +168,6 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
-export var getPopupStyles = memoizeOne(function (width, isMulti, overrideStyles) {
-  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
+export var getPopupStyles = memoizeOne(function (width, isMulti, overrideStyles, isVisualRefresh) {
+  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles, false, isVisualRefresh, true));
 });

package/dist/types/components/SingleValue.d.ts

@@ -1,5 +1,5 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type Option } from '../types';
 import { type SingleValueProps } from '@atlaskit/select';
 export type Props = SingleValueProps<Option>;
-export declare const SingleValue: (props: Props) => jsx.JSX.Element | null;
+export declare const SingleValue: (props: Props) => JSX.Element | null;

package/dist/types/components/components.d.ts

@@ -23,7 +23,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 } | {
     MultiValue: typeof MultiValue;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator | null;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
@@ -33,7 +33,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;
@@ -41,7 +41,7 @@ export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPo
 } | {
     Control: typeof PopupControl;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;

package/dist/types/components/styles.d.ts

@@ -2,5 +2,5 @@ import { type StylesConfig } from '@atlaskit/select';
 export declare const BORDER_PADDING: "var(--ds-space-075)";
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
-export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isInvalid?: boolean) => StylesConfig>;
-export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig) => StylesConfig>;
+export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isInvalid?: boolean, isVisualRefresh?: boolean, isPopupStyles?: boolean) => StylesConfig>;
+export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean) => StylesConfig>;

package/dist/types-ts4.5/components/SingleValue.d.ts

@@ -1,5 +1,5 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type Option } from '../types';
 import { type SingleValueProps } from '@atlaskit/select';
 export type Props = SingleValueProps<Option>;
-export declare const SingleValue: (props: Props) => jsx.JSX.Element | null;
+export declare const SingleValue: (props: Props) => JSX.Element | null;

package/dist/types-ts4.5/components/components.d.ts

@@ -23,7 +23,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 } | {
     MultiValue: typeof MultiValue;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator | null;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
@@ -33,7 +33,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;
@@ -41,7 +41,7 @@ export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPo
 } | {
     Control: typeof PopupControl;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;

package/dist/types-ts4.5/components/styles.d.ts

@@ -2,5 +2,5 @@ import { type StylesConfig } from '@atlaskit/select';
 export declare const BORDER_PADDING: "var(--ds-space-075)";
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
-export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isInvalid?: boolean) => StylesConfig>;
-export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig) => StylesConfig>;
+export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig, isInvalid?: boolean, isVisualRefresh?: boolean, isPopupStyles?: boolean) => StylesConfig>;
+export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, overrideStyles?: StylesConfig, isVisualRefresh?: boolean) => StylesConfig>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.0.3",
+	"version": "11.0.5",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,10 +50,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/avatar": "^23.0.0",
+		"@atlaskit/avatar": "^24.0.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/logo": "^16.0.0",
-		"@atlaskit/lozenge": "^12.0.0",
+		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/people-teams-ui-public": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
@@ -61,11 +61,12 @@
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/teams-avatar": "^2.1.0",
-		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/theme": "^18.0.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.2",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
@@ -113,6 +114,12 @@
 		},
 		"pass-aria-describedby-to-baseuserpicker": {
 			"type": "boolean"
+		},
+		"platform-component-visual-refresh": {
+			"type": "boolean"
+		},
+		"visual-refresh-user-picker": {
+			"type": "boolean"
 		}
 	}
 }