@atlaskit/user-picker 11.12.0 → 11.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 11.13.0
+
+### Minor Changes
+
+- [`b98b0340b08c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b98b0340b08c0) -
+  [ux] Updating verified team icon to surface for all groups and verified teams. Updated bylines for
+  team and group principals to "Official team" and "Admin group".
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.12.0
 
 ### Minor Changes

package/dist/cjs/analytics.js

@@ -10,14 +10,15 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _uuid = require("uuid");
 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; }
+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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.11.0";
+var packageVersion = "11.12.0";
 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}$/;
 var startSession = exports.startSession = function startSession() {
   return {
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     id: (0, _uuid.v4)(),
     start: Date.now(),
     inputChangeTime: Date.now(),

package/dist/cjs/components/BaseUserPicker.js

@@ -33,7 +33,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var loadingMessage = function loadingMessage() {
   return null;
 };
@@ -394,7 +394,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       showError: false,
       initialFocusHandled: false
     };
-    _this.optionsShownUfoExperienceInstance = _ufoExperiences.userPickerOptionsShownUfoExperience.getInstance((0, _uuid.v4)());
+    _this.optionsShownUfoExperienceInstance =
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+    _ufoExperiences.userPickerOptionsShownUfoExperience.getInstance((0, _uuid.v4)());
     if (_this.props.forwardedRef) {
       var refValue = {
         focus: _this.focus,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.groupOptionIconWrapper = exports.GroupOption = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -16,6 +17,8 @@ var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _peopleGroupPeople = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group--people"));
+var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _i18n = require("../i18n");
 var _HighlightText = require("../HighlightText");
@@ -67,15 +70,33 @@ var GroupOption = exports.GroupOption = /*#__PURE__*/function (_React$PureCompon
         spacing: "spacious"
       }));
     });
+    (0, _defineProperty2.default)(_this, "renderVerifiedIcon", function () {
+      return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+        label: "",
+        size: "small",
+        spacing: "none"
+      });
+    });
     (0, _defineProperty2.default)(_this, "renderByline", function () {
       var _this$props2 = _this.props,
         isSelected = _this$props2.isSelected,
         group = _this$props2.group;
+      var getGroupByline = function getGroupByline() {
+        if ((0, _platformFeatureFlags.fg)('confluence_frontend_perms_exp_teams_as_principals')) {
+          return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.adminManagedGroupByline, {
+            values: {
+              verifiedIcon: _this.renderVerifiedIcon()
+            }
+          }));
+        } else {
+          return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline);
+        }
+      };
       return (0, _react2.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: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
         "data-testid": "user-picker-group-secondary-text"
-      }, group.byline ? group.byline : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
+      }, group.byline ? group.byline : getGroupByline());
     });
     (0, _defineProperty2.default)(_this, "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {

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

@@ -15,6 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _colors = require("@atlaskit/theme/colors");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -38,8 +39,7 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
     (0, _defineProperty2.default)(_this, "getPrimaryText", function () {
       var _this$props$team = _this.props.team,
         name = _this$props$team.name,
-        highlight = _this$props$team.highlight,
-        verified = _this$props$team.verified;
+        highlight = _this$props$team.highlight;
       return [(0, _react.jsx)("span", {
         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
@@ -49,14 +49,16 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
         alignBlock: "center"
       }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
-      }, name), verified && (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, null)))];
+      }, name), !(0, _platformFeatureFlags.fg)('confluence_frontend_perms_exp_teams_as_principals') && _this.renderVerifiedIcon()))];
     });
     (0, _defineProperty2.default)(_this, "renderByline", function () {
       var _this$props = _this.props,
         isSelected = _this$props.isSelected,
         _this$props$team2 = _this$props.team,
         memberCount = _this$props$team2.memberCount,
-        includesYou = _this$props$team2.includesYou;
+        includesYou = _this$props$team2.includesYou,
+        verified = _this$props$team2.verified;
+      var isVerified = (0, _platformFeatureFlags.fg)('confluence_frontend_perms_exp_teams_as_principals') && verified;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -64,9 +66,18 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon()
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -74,9 +85,18 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithoutYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon()
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithoutYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -100,6 +120,16 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
         type: "team"
       });
     });
+    (0, _defineProperty2.default)(_this, "renderVerifiedIcon", function () {
+      if (_this.props.team.verified) {
+        return (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+          label: "",
+          size: "small",
+          spacing: "none"
+        });
+      }
+      return undefined;
+    });
     (0, _defineProperty2.default)(_this, "getLozengeProps", function () {
       return typeof _this.props.team.lozenge === 'string' ? {
         text: _this.props.team.lozenge

package/dist/cjs/components/UserPicker.js

@@ -33,12 +33,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; }
 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; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   function UserPickerWithoutAnalytics(props) {
     var _this;
     (0, _classCallCheck2.default)(this, UserPickerWithoutAnalytics);
     _this = _callSuper(this, UserPickerWithoutAnalytics, [props]);
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     _this.ufoId = (0, _uuid.v4)();
     var experienceForId = _ufoExperiences.userPickerRenderedUfoExperience.getInstance(_this.ufoId);
     if (![_ufo.UFOExperienceState.IN_PROGRESS.id, _ufo.UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {

package/dist/cjs/components/i18n.js

@@ -31,6 +31,26 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Something went wrong',
     description: 'Error message to display when options fail to load.'
   },
+  teamByline: {
+    id: 'fabric.elements.user-picker.team.byline',
+    defaultMessage: 'Team',
+    description: 'Byline for team'
+  },
+  officialTeamByline: {
+    id: 'fabric.elements.user-picker.team.byline.official',
+    defaultMessage: 'Official team {verifiedIcon}',
+    description: 'Byline for official team'
+  },
+  officialMemberCountWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
+    description: 'Byline to show the number of members in the team when the current user is not a member of the team'
+  },
+  officialMemberCountWithYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
+    description: 'Byline to show the number of members in the team when the current user is also a member of the team'
+  },
   memberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count',
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}',
@@ -41,6 +61,16 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}, including you',
     description: 'Byline to show the number of members in the team when the current user is also a member of the team'
   },
+  officialPlus50MembersWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members',
+    description: 'Byline to show the number of members in the team when the number exceeds 50'
+  },
+  officialPlus50MembersWithYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members, including you',
+    description: 'Byline to show the number of members in the team when the number exceeds 50 and also includes the current user'
+  },
   plus50MembersWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.50plus',
     defaultMessage: 'Team • 50+ members',
@@ -66,6 +96,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Enter an email address',
     description: 'Byline for a potentially valid email option.'
   },
+  adminManagedGroupByline: {
+    id: 'fabric.elements.user-picker.group.byline.admin-managed',
+    defaultMessage: 'Admin group {verifiedIcon}',
+    description: 'Byline for admin-managed groups with verified icon'
+  },
   groupByline: {
     id: 'fabric.elements.user-picker.group.byline',
     defaultMessage: 'Admin-managed group',

package/dist/es2019/analytics.js

@@ -1,12 +1,14 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
+// 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';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.11.0";
+const packageVersion = "11.12.0";
 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}$/;
 export const startSession = () => ({
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   id: uuidv4(),
   start: Date.now(),
   inputChangeTime: Date.now(),

package/dist/es2019/components/BaseUserPicker.js

@@ -5,6 +5,7 @@ import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
@@ -378,7 +379,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       showError: false,
       initialFocusHandled: false
     };
-    this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
+    this.optionsShownUfoExperienceInstance =
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+    userPickerOptionsShownUfoExperience.getInstance(uuidv4());
     if (this.props.forwardedRef) {
       const refValue = {
         focus: this.focus,

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
@@ -9,6 +10,8 @@ import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
 import { HighlightText } from '../HighlightText';
@@ -51,16 +54,34 @@ export class GroupOption extends React.PureComponent {
       LEGACY_size: "medium",
       spacing: "spacious"
     })));
+    _defineProperty(this, "renderVerifiedIcon", () => {
+      return jsx(VerifiedTeamIcon, {
+        label: "",
+        size: "small",
+        spacing: "none"
+      });
+    });
     _defineProperty(this, "renderByline", () => {
       const {
         isSelected,
         group
       } = this.props;
+      const getGroupByline = () => {
+        if (fg('confluence_frontend_perms_exp_teams_as_principals')) {
+          return jsx(FormattedMessage, _extends({}, messages.adminManagedGroupByline, {
+            values: {
+              verifiedIcon: this.renderVerifiedIcon()
+            }
+          }));
+        } else {
+          return jsx(FormattedMessage, messages.groupByline);
+        }
+      };
       return jsx("span", {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
         "data-testid": "user-picker-group-secondary-text"
-      }, group.byline ? group.byline : jsx(FormattedMessage, messages.groupByline));
+      }, group.byline ? group.byline : getGroupByline());
     });
     _defineProperty(this, "getLozengeProps", () => typeof this.props.group.lozenge === 'string' ? {
       text: this.props.group.lozenge

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

@@ -7,6 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -22,8 +23,7 @@ export class TeamOption extends React.PureComponent {
       const {
         team: {
           name,
-          highlight,
-          verified
+          highlight
         }
       } = this.props;
       return [jsx("span", {
@@ -35,16 +35,18 @@ export class TeamOption extends React.PureComponent {
         alignBlock: "center"
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
-      }, name), verified && jsx(VerifiedTeamIcon, null)))];
+      }, name), !fg('confluence_frontend_perms_exp_teams_as_principals') && this.renderVerifiedIcon()))];
     });
     _defineProperty(this, "renderByline", () => {
       const {
         isSelected,
         team: {
           memberCount,
-          includesYou
+          includesYou,
+          verified
         }
       } = this.props;
+      const isVerified = fg('confluence_frontend_perms_exp_teams_as_principals') && verified;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -52,9 +54,18 @@ export class TeamOption extends React.PureComponent {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithYou));
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon()
+              }
+            })) : jsx(FormattedMessage, messages.plus50MembersWithYou));
           } else {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -62,9 +73,18 @@ export class TeamOption extends React.PureComponent {
           }
         } else {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithoutYou));
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithoutYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon()
+              }
+            })) : jsx(FormattedMessage, messages.plus50MembersWithoutYou));
           } else {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithoutYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -90,6 +110,16 @@ export class TeamOption extends React.PureComponent {
         type: "team"
       });
     });
+    _defineProperty(this, "renderVerifiedIcon", () => {
+      if (this.props.team.verified) {
+        return jsx(VerifiedTeamIcon, {
+          label: "",
+          size: "small",
+          spacing: "none"
+        });
+      }
+      return undefined;
+    });
     _defineProperty(this, "getLozengeProps", () => typeof this.props.team.lozenge === 'string' ? {
       text: this.props.team.lozenge
     } : this.props.team.lozenge);

package/dist/es2019/components/UserPicker.js

@@ -14,11 +14,13 @@ import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { ExusUserSourceProvider } from '../clients/UserSourceProvider';
 import { userPickerRenderedUfoExperience as experience, UfoErrorBoundary } from '../util/ufoExperiences';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuidv4 } from 'uuid';
 import { fg } from '@atlaskit/platform-feature-flags';
 export class UserPickerWithoutAnalytics extends React.Component {
   constructor(props) {
     super(props);
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.ufoId = uuidv4();
     const experienceForId = experience.getInstance(this.ufoId);
     if (![UFOExperienceState.IN_PROGRESS.id, UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {

package/dist/es2019/components/i18n.js

@@ -25,6 +25,26 @@ export const messages = defineMessages({
     defaultMessage: 'Something went wrong',
     description: 'Error message to display when options fail to load.'
   },
+  teamByline: {
+    id: 'fabric.elements.user-picker.team.byline',
+    defaultMessage: 'Team',
+    description: 'Byline for team'
+  },
+  officialTeamByline: {
+    id: 'fabric.elements.user-picker.team.byline.official',
+    defaultMessage: 'Official team {verifiedIcon}',
+    description: 'Byline for official team'
+  },
+  officialMemberCountWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
+    description: 'Byline to show the number of members in the team when the current user is not a member of the team'
+  },
+  officialMemberCountWithYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
+    description: 'Byline to show the number of members in the team when the current user is also a member of the team'
+  },
   memberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count',
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}',
@@ -35,6 +55,16 @@ export const messages = defineMessages({
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}, including you',
     description: 'Byline to show the number of members in the team when the current user is also a member of the team'
   },
+  officialPlus50MembersWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members',
+    description: 'Byline to show the number of members in the team when the number exceeds 50'
+  },
+  officialPlus50MembersWithYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members, including you',
+    description: 'Byline to show the number of members in the team when the number exceeds 50 and also includes the current user'
+  },
   plus50MembersWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.50plus',
     defaultMessage: 'Team • 50+ members',
@@ -60,6 +90,11 @@ export const messages = defineMessages({
     defaultMessage: 'Enter an email address',
     description: 'Byline for a potentially valid email option.'
   },
+  adminManagedGroupByline: {
+    id: 'fabric.elements.user-picker.group.byline.admin-managed',
+    defaultMessage: 'Admin group {verifiedIcon}',
+    description: 'Byline for admin-managed groups with verified icon'
+  },
   groupByline: {
     id: 'fabric.elements.user-picker.group.byline',
     defaultMessage: 'Admin-managed group',

package/dist/esm/analytics.js

@@ -2,15 +2,17 @@ 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; }
 import { createAndFireEvent } from '@atlaskit/analytics-next';
+// 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.11.0";
+var packageVersion = "11.12.0";
 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}$/;
 export var startSession = function startSession() {
   return {
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     id: uuidv4(),
     start: Date.now(),
     inputChangeTime: Date.now(),

package/dist/esm/components/BaseUserPicker.js

@@ -19,6 +19,7 @@ import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
@@ -387,7 +388,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       showError: false,
       initialFocusHandled: false
     };
-    _this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
+    _this.optionsShownUfoExperienceInstance =
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+    userPickerOptionsShownUfoExperience.getInstance(uuidv4());
     if (_this.props.forwardedRef) {
       var refValue = {
         focus: _this.focus,

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -16,6 +17,8 @@ import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
 import { HighlightText } from '../HighlightText';
@@ -63,15 +66,33 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
         spacing: "spacious"
       }));
     });
+    _defineProperty(_this, "renderVerifiedIcon", function () {
+      return jsx(VerifiedTeamIcon, {
+        label: "",
+        size: "small",
+        spacing: "none"
+      });
+    });
     _defineProperty(_this, "renderByline", function () {
       var _this$props2 = _this.props,
         isSelected = _this$props2.isSelected,
         group = _this$props2.group;
+      var getGroupByline = function getGroupByline() {
+        if (fg('confluence_frontend_perms_exp_teams_as_principals')) {
+          return jsx(FormattedMessage, _extends({}, messages.adminManagedGroupByline, {
+            values: {
+              verifiedIcon: _this.renderVerifiedIcon()
+            }
+          }));
+        } else {
+          return jsx(FormattedMessage, messages.groupByline);
+        }
+      };
       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, ")")),
         "data-testid": "user-picker-group-secondary-text"
-      }, group.byline ? group.byline : jsx(FormattedMessage, messages.groupByline));
+      }, group.byline ? group.byline : getGroupByline());
     });
     _defineProperty(_this, "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {

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

@@ -14,6 +14,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -33,8 +34,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_this, "getPrimaryText", function () {
       var _this$props$team = _this.props.team,
         name = _this$props$team.name,
-        highlight = _this$props$team.highlight,
-        verified = _this$props$team.verified;
+        highlight = _this$props$team.highlight;
       return [jsx("span", {
         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
@@ -44,14 +44,16 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
         alignBlock: "center"
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
-      }, name), verified && jsx(VerifiedTeamIcon, null)))];
+      }, name), !fg('confluence_frontend_perms_exp_teams_as_principals') && _this.renderVerifiedIcon()))];
     });
     _defineProperty(_this, "renderByline", function () {
       var _this$props = _this.props,
         isSelected = _this$props.isSelected,
         _this$props$team2 = _this$props.team,
         memberCount = _this$props$team2.memberCount,
-        includesYou = _this$props$team2.includesYou;
+        includesYou = _this$props$team2.includesYou,
+        verified = _this$props$team2.verified;
+      var isVerified = fg('confluence_frontend_perms_exp_teams_as_principals') && verified;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -59,9 +61,18 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon()
+              }
+            })) : jsx(FormattedMessage, messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -69,9 +80,18 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithoutYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon()
+              }
+            })) : jsx(FormattedMessage, messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithoutYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -95,6 +115,16 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
         type: "team"
       });
     });
+    _defineProperty(_this, "renderVerifiedIcon", function () {
+      if (_this.props.team.verified) {
+        return jsx(VerifiedTeamIcon, {
+          label: "",
+          size: "small",
+          spacing: "none"
+        });
+      }
+      return undefined;
+    });
     _defineProperty(_this, "getLozengeProps", function () {
       return typeof _this.props.team.lozenge === 'string' ? {
         text: _this.props.team.lozenge

package/dist/esm/components/UserPicker.js

@@ -23,6 +23,7 @@ import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { ExusUserSourceProvider } from '../clients/UserSourceProvider';
 import { userPickerRenderedUfoExperience as experience, UfoErrorBoundary } from '../util/ufoExperiences';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuidv4 } from 'uuid';
 import { fg } from '@atlaskit/platform-feature-flags';
 export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
@@ -30,6 +31,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
     var _this;
     _classCallCheck(this, UserPickerWithoutAnalytics);
     _this = _callSuper(this, UserPickerWithoutAnalytics, [props]);
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     _this.ufoId = uuidv4();
     var experienceForId = experience.getInstance(_this.ufoId);
     if (![UFOExperienceState.IN_PROGRESS.id, UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {

package/dist/esm/components/i18n.js

@@ -25,6 +25,26 @@ export var messages = defineMessages({
     defaultMessage: 'Something went wrong',
     description: 'Error message to display when options fail to load.'
   },
+  teamByline: {
+    id: 'fabric.elements.user-picker.team.byline',
+    defaultMessage: 'Team',
+    description: 'Byline for team'
+  },
+  officialTeamByline: {
+    id: 'fabric.elements.user-picker.team.byline.official',
+    defaultMessage: 'Official team {verifiedIcon}',
+    description: 'Byline for official team'
+  },
+  officialMemberCountWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
+    description: 'Byline to show the number of members in the team when the current user is not a member of the team'
+  },
+  officialMemberCountWithYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
+    description: 'Byline to show the number of members in the team when the current user is also a member of the team'
+  },
   memberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count',
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}',
@@ -35,6 +55,16 @@ export var messages = defineMessages({
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}, including you',
     description: 'Byline to show the number of members in the team when the current user is also a member of the team'
   },
+  officialPlus50MembersWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members',
+    description: 'Byline to show the number of members in the team when the number exceeds 50'
+  },
+  officialPlus50MembersWithYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members, including you',
+    description: 'Byline to show the number of members in the team when the number exceeds 50 and also includes the current user'
+  },
   plus50MembersWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.50plus',
     defaultMessage: 'Team • 50+ members',
@@ -60,6 +90,11 @@ export var messages = defineMessages({
     defaultMessage: 'Enter an email address',
     description: 'Byline for a potentially valid email option.'
   },
+  adminManagedGroupByline: {
+    id: 'fabric.elements.user-picker.group.byline.admin-managed',
+    defaultMessage: 'Admin group {verifiedIcon}',
+    description: 'Byline for admin-managed groups with verified icon'
+  },
   groupByline: {
     id: 'fabric.elements.user-picker.group.byline',
     defaultMessage: 'Admin-managed group',

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

@@ -13,6 +13,7 @@ export type GroupOptionProps = {
 export declare class GroupOption extends React.PureComponent<GroupOptionProps> {
     private getPrimaryText;
     private renderAvatar;
+    private renderVerifiedIcon;
     private renderByline;
     private getLozengeProps;
     render(): jsx.JSX.Element;

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

@@ -10,6 +10,7 @@ export declare class TeamOption extends React.PureComponent<TeamOptionProps> {
     private renderByline;
     private getBylineComponent;
     private renderAvatar;
+    private renderVerifiedIcon;
     private getLozengeProps;
     private renderCustomByLine;
     render(): jsx.JSX.Element;

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

@@ -24,6 +24,26 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    teamByline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialTeamByline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialMemberCountWithoutYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialMemberCountWithYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     memberCountWithoutYou: {
         id: string;
         defaultMessage: string;
@@ -34,6 +54,16 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    officialPlus50MembersWithoutYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialPlus50MembersWithYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     plus50MembersWithoutYou: {
         id: string;
         defaultMessage: string;
@@ -59,6 +89,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    adminManagedGroupByline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     groupByline: {
         id: string;
         defaultMessage: string;

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

@@ -13,6 +13,7 @@ export type GroupOptionProps = {
 export declare class GroupOption extends React.PureComponent<GroupOptionProps> {
     private getPrimaryText;
     private renderAvatar;
+    private renderVerifiedIcon;
     private renderByline;
     private getLozengeProps;
     render(): jsx.JSX.Element;

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

@@ -10,6 +10,7 @@ export declare class TeamOption extends React.PureComponent<TeamOptionProps> {
     private renderByline;
     private getBylineComponent;
     private renderAvatar;
+    private renderVerifiedIcon;
     private getLozengeProps;
     private renderCustomByLine;
     render(): jsx.JSX.Element;

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

@@ -24,6 +24,26 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    teamByline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialTeamByline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialMemberCountWithoutYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialMemberCountWithYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     memberCountWithoutYou: {
         id: string;
         defaultMessage: string;
@@ -34,6 +54,16 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    officialPlus50MembersWithoutYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    officialPlus50MembersWithYou: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     plus50MembersWithoutYou: {
         id: string;
         defaultMessage: string;
@@ -59,6 +89,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    adminManagedGroupByline: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     groupByline: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.12.0",
+	"version": "11.13.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/people-teams-ui-public": "^3.5.0",
+		"@atlaskit/people-teams-ui-public": "^3.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^16.1.0",
@@ -118,6 +118,9 @@
 		},
 		"user_picker_migrate_aria_label_description": {
 			"type": "boolean"
+		},
+		"confluence_frontend_perms_exp_teams_as_principals": {
+			"type": "boolean"
 		}
 	}
 }