@atlaskit/user-picker 11.24.0 → 11.25.0

package/dist/es2019/components/AvatarItemOption.js

@@ -3,9 +3,10 @@
  * @jsx jsx
  */
 import React from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
+import Tag from '@atlaskit/tag';
 import { isLozengeText } from './utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
@@ -106,6 +107,14 @@ export const textWrapper = color => {
     color
   });
 };
+const lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
 export const AvatarItemOption = ({
   avatar,
   isDisabled,
@@ -113,6 +122,26 @@ export const AvatarItemOption = ({
   primaryText,
   secondaryText
 }) => {
+  const renderTag = () => {
+    if (isLozengeText(lozenge) && !lozenge.isBold) {
+      const color = lozenge.appearance ? lozengeAppearanceToTagColor[lozenge.appearance] : 'standard';
+      const tag = jsx(Tag, {
+        text: lozenge.text,
+        color: color,
+        isRemovable: false,
+        migration_fallback: "lozenge"
+      });
+      if (lozenge.tooltip) {
+        return jsx(React.Suspense, {
+          fallback: tag
+        }, jsx(AsyncTooltip, {
+          content: lozenge.tooltip
+        }, tag));
+      }
+      return tag;
+    }
+    return renderLozenge();
+  };
   const renderLozenge = () => {
     if (isLozengeText(lozenge)) {
       if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
@@ -140,6 +169,6 @@ export const AvatarItemOption = ({
       css: getTextStyle(true)
     }, secondaryText))), lozenge && jsx("div", {
       css: additionalInfo
-    }, renderLozenge()))
+    }, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag() : renderLozenge()))
   );
 };

package/dist/es2019/components/AvatarOrIcon.js

@@ -5,7 +5,7 @@
 
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarSize } from './utils';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 const iconStyle = css({
   display: 'flex',

package/dist/es2019/components/BaseUserPicker.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
@@ -341,7 +342,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         hoveringClearIndicator
       });
     });
-    _defineProperty(this, "getOptions", () => {
+    _defineProperty(this, "getOptionsOld", () => {
       const options = getOptions(this.state.options) || [];
       const {
         maxOptions,
@@ -365,6 +366,34 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
       return groupByTypeOrder ? groupOptionsByType(options, groupByTypeOrder) : options;
     });
+    _defineProperty(this, "getOptionsNew", () => {
+      const options = getOptions(this.state.options) || [];
+      const {
+        maxOptions,
+        isMulti,
+        groupByTypeOrder,
+        customGroupLabels
+      } = this.props;
+      if (maxOptions === 0) {
+        return [];
+      }
+      if (maxOptions && maxOptions > 0 && maxOptions < options.length) {
+        const {
+          value
+        } = this.state;
+        let filteredOptions = options;
+        // Filter out previously selected options
+        if (isMulti && Array.isArray(value)) {
+          const valueIds = value.map(item => item.data.id);
+          filteredOptions = options.filter(option => valueIds.indexOf(option.data.id) === -1);
+        }
+        return groupByTypeOrder ? groupOptionsByType(filteredOptions.slice(0, maxOptions), groupByTypeOrder, customGroupLabels) : filteredOptions.slice(0, maxOptions);
+      }
+      return groupByTypeOrder ? groupOptionsByType(options, groupByTypeOrder, customGroupLabels) : options;
+    });
+    _defineProperty(this, "getOptions", () => {
+      return fg('jsm-wfo-assignee-recommendation-on-queues') ? this.getOptionsNew() : this.getOptionsOld();
+    });
     _defineProperty(this, "getAppearance", () => this.props.appearance ? this.props.appearance : 'normal');
     _defineProperty(this, "handleClickDraggableParentComponent", () => {
       if (this.state.initialFocusHandled) {

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

@@ -4,7 +4,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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

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

@@ -6,7 +6,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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// 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({

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { useCallback, useState } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// 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';

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

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 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
+// 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';

package/dist/es2019/components/MultiValue.js

@@ -12,14 +12,17 @@ import { components } from '@atlaskit/select';
 import { css, jsx } from '@emotion/react';
 import Avatar from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { AvatarTag } from '@atlaskit/tag';
+import { AvatarTag, default as Tag } from '@atlaskit/tag';
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
+import Lozenge from '@atlaskit/lozenge';
 import PeopleIcon from '@atlaskit/icon/core/people-group';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from './i18n';
 export const scrollToValue = (valueContainer, control) => {
   const {
     top,
@@ -42,6 +45,10 @@ const groupTagContainerOld = xcss({
 const groupTagContainer = xcss({
   paddingLeft: 'space.050'
 });
+const archivedLozengeWrapper = xcss({
+  display: 'flex',
+  paddingLeft: 'space.050'
+});
 const iconStyle = css({
   display: 'flex',
   alignItems: 'center',
@@ -105,11 +112,19 @@ export class MultiValue extends React.Component {
           data
         }
       } = this.props;
+      const canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
       if (isGroup(data) && data.includeTeamsUpdates || isTeam(data) && data.verified) {
         return jsx(VerifiedTeamIcon, {
           size: data.includeTeamsUpdates ? 'small' : 'medium'
         });
       }
+      if (canShowArchivedLozenge) {
+        return jsx(Box, {
+          xcss: archivedLozengeWrapper
+        }, jsx(Lozenge, {
+          appearance: "default"
+        }, jsx(FormattedMessage, messages.archivedLozenge)));
+      }
       return null;
     });
     this.containerRef = /*#__PURE__*/React.createRef();
@@ -168,6 +183,7 @@ export class MultiValue extends React.Component {
       const isEmailOption = isEmail(data);
       const avatarUrl = getAvatarUrl(data);
       const isDisabled = Boolean((_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.isDisabled);
+      const canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
       const avatarProps = avatarUrl ? {
         name: data.name,
         src: avatarUrl
@@ -179,64 +195,52 @@ export class MultiValue extends React.Component {
         return true;
       };
       if (isEmailOption) {
-        const emailAvatar = props => jsx(Avatar, _extends({}, props, {
-          children: jsx(AddOptionAvatar, {
-            isLozenge: true,
-            isPendingAction: data.isPendingAction
-          })
-        }));
         return jsx("span", {
           ref: this.containerRef,
           css: avatarTagWrapperStyle,
           "data-user-picker-multi-value": true
-        }, jsx(AvatarTag, {
+        }, jsx(Tag, {
           text: label,
-          type: "other",
-          avatar: emailAvatar,
+          elemBefore: jsx(AddOptionAvatar, {
+            isLozenge: true,
+            isPendingAction: data.isPendingAction
+          }),
           isRemovable: !isDisabled,
           onBeforeRemoveAction: removeAction
         }));
       }
       if (isGroupOption) {
-        const groupAvatar = props => jsx(Avatar, _extends({}, props, {
-          children: jsx(Box, {
+        return jsx("span", {
+          ref: this.containerRef,
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, jsx(Tag, {
+          text: label,
+          elemBefore: jsx(Box, {
             xcss: groupTagContainer
           }, jsx(PeopleIcon, {
             color: "currentColor",
             label: "" // This element is a decorative icon and does not require a label
             ,
             size: "small"
-          }))
+          })),
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction
         }));
+      }
+      if (data.icon) {
         return jsx("span", {
           ref: this.containerRef,
           css: avatarTagWrapperStyle,
           "data-user-picker-multi-value": true
-        }, jsx(AvatarTag, {
-          type: "other",
+        }, jsx(Tag, {
           text: label,
-          isVerified: data.includeTeamsUpdates,
-          isRemovable: !isDisabled,
-          onBeforeRemoveAction: removeAction,
-          avatar: groupAvatar
-        }));
-      }
-      if (data.icon) {
-        const iconAvatar = props => jsx(Avatar, _extends({}, props, {
-          children: jsx("div", {
+          elemBefore: jsx("div", {
             css: iconStyle,
             style: {
               color: data.iconColor
             }
-          }, data.icon)
-        }));
-        return jsx("span", {
-          css: avatarTagWrapperStyle,
-          "data-user-picker-multi-value": true
-        }, jsx(AvatarTag, {
-          text: label,
-          type: isTeamOption ? 'other' : 'user',
-          avatar: iconAvatar,
+          }, data.icon),
           isRemovable: !isDisabled,
           onBeforeRemoveAction: removeAction
         }));
@@ -245,14 +249,18 @@ export class MultiValue extends React.Component {
         ref: this.containerRef,
         css: avatarTagWrapperStyle,
         "data-user-picker-multi-value": true
-      }, isTeamOption ? jsx(AvatarTag, {
+      }, isTeamOption ? jsx(React.Fragment, null, jsx(AvatarTag, {
         type: "other",
         text: label,
         isVerified: isTeamOption ? data.verified : undefined,
         isRemovable: !isDisabled,
         onBeforeRemoveAction: removeAction,
         avatar: props => jsx(TeamAvatar, _extends({}, props, avatarProps))
-      }) : jsx(AvatarTag, {
+      }), canShowArchivedLozenge ? jsx(Box, {
+        xcss: archivedLozengeWrapper
+      }, jsx(Lozenge, {
+        appearance: "default"
+      }, jsx(FormattedMessage, messages.archivedLozenge))) : null) : jsx(AvatarTag, {
         type: "user",
         text: label,
         isRemovable: !isDisabled,

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

@@ -1,6 +1,8 @@
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1reo15vq{overflow-x:hidden}
 ._1ul953f4{min-width:75pt}

package/dist/es2019/components/SingleValue.js

@@ -3,17 +3,21 @@ import "./SingleValue.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
+import Lozenge from '@atlaskit/lozenge';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam, isGroup } from './utils';
 import { getAppearanceForAppType } from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { FormattedMessage } from 'react-intl-next';
 import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+import { messages } from './i18n';
 const styles = {
   avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
   avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
-  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c"
+  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c",
+  archivedLozengeWrapper: "_1e0c1txw _19bv1b66"
 };
 const ElementAfter = props => {
   const {
@@ -42,6 +46,7 @@ export const SingleValue = props => {
       isFocused
     }
   } = props;
+  const canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
   return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.avatarItem
   }, data.icon ? /*#__PURE__*/React.createElement(AvatarOrIcon, {
@@ -64,5 +69,9 @@ export const SingleValue = props => {
     xcss: styles.avatarItemText
   }, /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center"
-  }, label, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
+  }, label, canShowArchivedLozenge ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.archivedLozengeWrapper
+  }, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "default"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.archivedLozenge))) : null, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
 };

package/dist/es2019/components/i18n.js

@@ -170,6 +170,11 @@ export const messages = defineMessages({
     defaultMessage: 'Guest groups can only access certain spaces and have limited access to user info.',
     description: 'Tooltip text for lozenge showing that a group is for guests in Confluence'
   },
+  archivedLozenge: {
+    id: 'fabric.elements.user-picker.archived.lozenge.text',
+    defaultMessage: 'Archived',
+    description: 'Text within the lozenge when the selected team has been archived/disbanded'
+  },
   userTypeLabel: {
     id: 'fabric.elements.user-picker.user.type.label',
     defaultMessage: 'People',

package/dist/es2019/components/utils.js

@@ -3,7 +3,7 @@ import { CustomType, EmailType, TeamType, GroupType, UserType, ExternalUserType
 import { PopupSelect } from '@atlaskit/select';
 export const isExternalUser = option => option.type === ExternalUserType || Boolean(option.isExternal);
 export const isUser = option => option.type === undefined || option.type === UserType;
-export const isTeam = option => option.type === TeamType;
+export const isTeam = option => (option === null || option === void 0 ? void 0 : option.type) === TeamType;
 export const isGroup = option => option.type === GroupType;
 export const isEmail = option => option.type === EmailType;
 export const isCustom = option => option.type === CustomType;

package/dist/es2019/util/group-options-by-type/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FormattedMessage } from 'react-intl-next';
 import memoizeOne from 'memoize-one';
 import { messages } from '../../components/i18n';
-const getLabelForType = type => {
+const getLabelForType = (type, customLabels) => {
+  if (customLabels && type in customLabels && fg('jsm-wfo-assignee-recommendation-on-queues')) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, customLabels[type]);
+  }
   switch (type) {
     case 'user':
       return /*#__PURE__*/React.createElement(FormattedMessage, messages.userTypeLabel);
@@ -18,7 +22,7 @@ const getLabelForType = type => {
       return /*#__PURE__*/React.createElement(FormattedMessage, messages.otherTypeLabel);
   }
 };
-export const groupOptionsByType = memoizeOne((options, groupByTypeOrder) => {
+export const groupOptionsByType = memoizeOne((options, groupByTypeOrder, customGroupLabels) => {
   // If groupByTypeOrder is empty, just return the original options
   if (groupByTypeOrder.length === 0) {
     return options;
@@ -38,7 +42,7 @@ export const groupOptionsByType = memoizeOne((options, groupByTypeOrder) => {
   groupByTypeOrder.forEach(type => {
     if (groupedMap.has(type)) {
       result.push({
-        label: getLabelForType(type),
+        label: getLabelForType(type, customGroupLabels),
         options: groupedMap.get(type)
       });
       groupedMap.delete(type);

package/dist/esm/analytics.js

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.23.3";
+var packageVersion = "0.0.0-development";
 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

@@ -6,9 +6,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 import React from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
+import Tag from '@atlaskit/tag';
 import { isLozengeText } from './utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
@@ -107,12 +108,40 @@ export var textWrapper = function textWrapper(color) {
     color: color
   });
 };
+var lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
 export var AvatarItemOption = function AvatarItemOption(_ref) {
   var avatar = _ref.avatar,
     isDisabled = _ref.isDisabled,
     lozenge = _ref.lozenge,
     primaryText = _ref.primaryText,
     secondaryText = _ref.secondaryText;
+  var renderTag = function renderTag() {
+    if (isLozengeText(lozenge) && !lozenge.isBold) {
+      var color = lozenge.appearance ? lozengeAppearanceToTagColor[lozenge.appearance] : 'standard';
+      var tag = jsx(Tag, {
+        text: lozenge.text,
+        color: color,
+        isRemovable: false,
+        migration_fallback: "lozenge"
+      });
+      if (lozenge.tooltip) {
+        return jsx(React.Suspense, {
+          fallback: tag
+        }, jsx(AsyncTooltip, {
+          content: lozenge.tooltip
+        }, tag));
+      }
+      return tag;
+    }
+    return renderLozenge();
+  };
   var renderLozenge = function renderLozenge() {
     if (isLozengeText(lozenge)) {
       if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
@@ -140,6 +169,6 @@ export var AvatarItemOption = function AvatarItemOption(_ref) {
       css: getTextStyle(true)
     }, secondaryText))), lozenge && jsx("div", {
       css: additionalInfo
-    }, renderLozenge()))
+    }, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag() : renderLozenge()))
   );
 };

package/dist/esm/components/AvatarOrIcon.js

@@ -5,7 +5,7 @@
 
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarSize } from './utils';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 var iconStyle = css({
   display: 'flex',