@atlaskit/mention 24.5.3 → 24.5.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/mention
 
+## 24.5.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.5.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.5.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tag/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tag/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tag/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-products/tsconfig.json"
 		},

package/dist/cjs/api/ContextMentionResource.js

@@ -10,6 +10,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _util = require("../util");
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 /**
  * This component is stateful and should be instantianted per contextIdentifiers.
  */

package/dist/cjs/components/Mention/PrimitiveMention.js

@@ -52,7 +52,7 @@ var PrimitiveMention = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref2, ref
     ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
+    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\tdisplay: inline;\n\t\t\t\tborder: ", " solid ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 20px;\n\t\t\t\tcursor: pointer;\n\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\tline-height: 1.714;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tfont-weight: ", ";\n\t\t\t\tword-break: break-word;\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t\t&:active {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
       mentionType: mentionType
     }, 'borderColor'), getStyle({
       mentionType: mentionType

package/dist/cjs/components/MentionDescriptionByline/styles.js

@@ -9,6 +9,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@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 -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var DescriptionBylineStyle = exports.DescriptionBylineStyle = _styled.default.span({
   color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),

package/dist/cjs/components/MentionItem/index.js

@@ -20,6 +20,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tag = _interopRequireDefault(require("@atlaskit/tag"));
 var _react = _interopRequireDefault(require("react"));
 var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
 var _types = require("../../types");
@@ -34,6 +36,36 @@ var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvi
 var _MentionAvatar = require("../MentionAvatar");
 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 lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
+function renderTag(lozenge) {
+  if (typeof lozenge === 'string') {
+    return /*#__PURE__*/_react.default.createElement(_tag.default, {
+      text: lozenge,
+      color: "standard",
+      isRemovable: false,
+      migration_fallback: "lozenge"
+    });
+  }
+  if ((0, _typeof2.default)(lozenge) === 'object') {
+    var appearance = lozenge.appearance,
+      text = lozenge.text;
+    var color = appearance ? lozengeAppearanceToTagColor[appearance] : 'standard';
+    return /*#__PURE__*/_react.default.createElement(_tag.default, {
+      text: text,
+      color: color,
+      isRemovable: false,
+      migration_fallback: "lozenge"
+    });
+  }
+  return null;
+}
 function renderLozenge(lozenge) {
   if (typeof lozenge === 'string') {
     return /*#__PURE__*/_react.default.createElement(_lozenge.default, null, lozenge);
@@ -123,7 +155,7 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
         mention: mention
       })), /*#__PURE__*/_react.default.createElement(_styles.InfoSectionStyle, {
         restricted: restricted
-      }, renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+      }, (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag(lozenge) : renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
         fallback: null
       }, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
         name: name

package/dist/cjs/components/MentionItem/styles.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TimeStyle = exports.RowStyle = exports.NameSectionStyle = exports.MentionItemStyle = exports.MENTION_ITEM_HEIGHT = exports.InfoSectionStyle = exports.FullNameStyle = exports.AvatarStyle = exports.AccessSectionStyle = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@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 -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var RowStyle = exports.RowStyle = _styled.default.div({
   alignItems: 'center',
@@ -61,9 +64,12 @@ var InfoSectionStyle = exports.InfoSectionStyle = _styled.default.div(function (
     opacity: props.restricted ? '0.5' : 'inherit',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&': {
-      /* Lozenge */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '& > span': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      '& > span': (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
+        marginRight: "var(--ds-space-negative-025, -2px)",
+        marginBottom: "var(--ds-space-025, 2px)",
+        marginTop: "var(--ds-space-025, 2px)"
+      } : {
         marginBottom: "var(--ds-space-025, 2px)"
       }
     }
@@ -75,7 +81,7 @@ var TimeStyle = exports.TimeStyle = _styled.default.div({
   marginLeft: "var(--ds-space-250, 20px)",
   flex: 'none',
   color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 var MENTION_ITEM_HEIGHT = exports.MENTION_ITEM_HEIGHT = 48;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/cjs/components/MentionList/styles.js

@@ -9,6 +9,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _sharedStyles = require("../../shared-styles");
 // 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 -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 var MentionListStyle = exports.MentionListStyle = _styled.default.div(function (props) {
   return {

package/dist/cjs/components/MentionListError/styles.js

@@ -8,6 +8,8 @@ exports.GenericErrorVisualStyle = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 // 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 -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var GenericErrorVisualStyle = exports.GenericErrorVisualStyle = _styled.default.div({
   width: "var(--ds-space-1000, 80px)"

package/dist/cjs/components/MentionPicker/styles.js

@@ -10,6 +10,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _sharedStyles = require("../../shared-styles");
 // 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 -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 var MentionPickerStyle = exports.MentionPickerStyle = _styled.default.div(function (props) {
   return {

package/dist/cjs/components/Scrollable/styles.js

@@ -9,6 +9,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _sharedStyles = require("../../shared-styles");
 // 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 -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var ScrollableStyle = exports.ScrollableStyle = _styled.default.div({
   display: 'block',

package/dist/cjs/util/analytics.js

@@ -12,7 +12,7 @@ var _types = require("../types");
 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/mention";
-var packageVersion = "24.5.2";
+var packageVersion = "0.0.0-development";
 var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
 var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
 var fireAnalyticsMentionTypeaheadEvent = exports.fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/es2019/api/ContextMentionResource.js

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+
 import { padArray } from '../util';
 /**
  * This component is stateful and should be instantianted per contextIdentifiers.

package/dist/es2019/components/Mention/PrimitiveMention.js

@@ -47,34 +47,34 @@ const PrimitiveMention = /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: css`
-					display: inline;
-					border: ${"var(--ds-border-width, 1px)"} solid ${getStyle({
+				display: inline;
+				border: ${"var(--ds-border-width, 1px)"} solid ${getStyle({
       mentionType
     }, 'borderColor')};
-					background: ${getStyle({
+				background: ${getStyle({
       mentionType
     }, 'background')};
-					color: ${getStyle({
+				color: ${getStyle({
       mentionType
     }, 'text')};
-					border-radius: 20px;
-					cursor: pointer;
-					padding: 0 0.3em 2px 0.23em;
-					line-height: 1.714;
-					font-size: 1em;
-					font-weight: ${"var(--ds-font-weight-regular, 400)"};
-					word-break: break-word;
-					&:hover {
-						background: ${getStyle({
+				border-radius: 20px;
+				cursor: pointer;
+				padding: 0 0.3em 2px 0.23em;
+				line-height: 1.714;
+				font-size: 1em;
+				font-weight: ${"var(--ds-font-weight-regular, 400)"};
+				word-break: break-word;
+				&:hover {
+					background: ${getStyle({
       mentionType
     }, 'hoveredBackground')};
-					}
-					&:active {
-						background: ${getStyle({
+				}
+				&:active {
+					background: ${getStyle({
       mentionType
     }, 'pressedBackground')};
-					}
-				`
+				}
+			`
   }, other));
 });
 export default PrimitiveMention;

package/dist/es2019/components/MentionDescriptionByline/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { N100 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const DescriptionBylineStyle = styled.span({

package/dist/es2019/components/MentionItem/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Tag from '@atlaskit/tag';
 import React from 'react';
 import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import { isRestricted } from '../../types';
@@ -14,6 +16,38 @@ import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
 import { MentionAvatar } from '../MentionAvatar';
 export { MENTION_ITEM_HEIGHT } from './styles';
+const lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
+function renderTag(lozenge) {
+  if (typeof lozenge === 'string') {
+    return /*#__PURE__*/React.createElement(Tag, {
+      text: lozenge,
+      color: "standard",
+      isRemovable: false,
+      migration_fallback: "lozenge"
+    });
+  }
+  if (typeof lozenge === 'object') {
+    const {
+      appearance,
+      text
+    } = lozenge;
+    const color = appearance ? lozengeAppearanceToTagColor[appearance] : 'standard';
+    return /*#__PURE__*/React.createElement(Tag, {
+      text: text,
+      color: color,
+      isRemovable: false,
+      migration_fallback: "lozenge"
+    });
+  }
+  return null;
+}
 function renderLozenge(lozenge) {
   if (typeof lozenge === 'string') {
     return /*#__PURE__*/React.createElement(Lozenge, null, lozenge);
@@ -100,7 +134,7 @@ export default class MentionItem extends React.PureComponent {
       mention: mention
     })), /*#__PURE__*/React.createElement(InfoSectionStyle, {
       restricted: restricted
-    }, renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/React.createElement(React.Suspense, {
+    }, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag(lozenge) : renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/React.createElement(React.Suspense, {
       fallback: null
     }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
       name: name

package/dist/es2019/components/MentionItem/styles.js

@@ -1,5 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const RowStyle = styled.div({
@@ -48,9 +51,12 @@ export const InfoSectionStyle = styled.div(props => ({
   opacity: props.restricted ? '0.5' : 'inherit',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&': {
-    /* Lozenge */
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > span': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    '& > span': fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
+      marginRight: "var(--ds-space-negative-025, -2px)",
+      marginBottom: "var(--ds-space-025, 2px)",
+      marginTop: "var(--ds-space-025, 2px)"
+    } : {
       marginBottom: "var(--ds-space-025, 2px)"
     }
   }
@@ -61,7 +67,7 @@ export const TimeStyle = styled.div({
   marginLeft: "var(--ds-space-250, 20px)",
   flex: 'none',
   color: `var(--ds-text-subtlest, ${N100})`,
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 export const MENTION_ITEM_HEIGHT = 48;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/es2019/components/MentionList/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const MentionListStyle = styled.div(props => ({

package/dist/es2019/components/MentionListError/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const GenericErrorVisualStyle = styled.div({
   width: "var(--ds-space-1000, 80px)"

package/dist/es2019/components/MentionPicker/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { N100 } from '@atlaskit/theme/colors';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/es2019/components/Scrollable/styles.js

@@ -1,7 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { scrollableMaxHeight } from '../../shared-styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+import { scrollableMaxHeight } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const ScrollableStyle = styled.div({
   display: 'block',

package/dist/es2019/util/analytics.js

@@ -2,7 +2,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 const packageName = "@atlaskit/mention";
-const packageVersion = "24.5.2";
+const packageVersion = "0.0.0-development";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {

package/dist/esm/api/ContextMentionResource.js

@@ -2,6 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+
 import { padArray } from '../util';
 /**
  * This component is stateful and should be instantianted per contextIdentifiers.

package/dist/esm/components/Mention/PrimitiveMention.js

@@ -45,7 +45,7 @@ var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\tdisplay: inline;\n\t\t\t\tborder: ", " solid ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 20px;\n\t\t\t\tcursor: pointer;\n\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\tline-height: 1.714;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tfont-weight: ", ";\n\t\t\t\tword-break: break-word;\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t\t&:active {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
       mentionType: mentionType
     }, 'borderColor'), getStyle({
       mentionType: mentionType

package/dist/esm/components/MentionDescriptionByline/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { N100 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var DescriptionBylineStyle = styled.span({

package/dist/esm/components/MentionItem/index.js

@@ -9,6 +9,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Tag from '@atlaskit/tag';
 import React from 'react';
 import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import { isRestricted } from '../../types';
@@ -22,6 +24,36 @@ import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
 import { MentionAvatar } from '../MentionAvatar';
 export { MENTION_ITEM_HEIGHT } from './styles';
+var lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
+function renderTag(lozenge) {
+  if (typeof lozenge === 'string') {
+    return /*#__PURE__*/React.createElement(Tag, {
+      text: lozenge,
+      color: "standard",
+      isRemovable: false,
+      migration_fallback: "lozenge"
+    });
+  }
+  if (_typeof(lozenge) === 'object') {
+    var appearance = lozenge.appearance,
+      text = lozenge.text;
+    var color = appearance ? lozengeAppearanceToTagColor[appearance] : 'standard';
+    return /*#__PURE__*/React.createElement(Tag, {
+      text: text,
+      color: color,
+      isRemovable: false,
+      migration_fallback: "lozenge"
+    });
+  }
+  return null;
+}
 function renderLozenge(lozenge) {
   if (typeof lozenge === 'string') {
     return /*#__PURE__*/React.createElement(Lozenge, null, lozenge);
@@ -111,7 +143,7 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
         mention: mention
       })), /*#__PURE__*/React.createElement(InfoSectionStyle, {
         restricted: restricted
-      }, renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/React.createElement(React.Suspense, {
+      }, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag(lozenge) : renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/React.createElement(React.Suspense, {
         fallback: null
       }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
         name: name

package/dist/esm/components/MentionItem/styles.js

@@ -1,5 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var RowStyle = styled.div({
@@ -53,9 +56,12 @@ export var InfoSectionStyle = styled.div(function (props) {
     opacity: props.restricted ? '0.5' : 'inherit',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&': {
-      /* Lozenge */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '& > span': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      '& > span': fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
+        marginRight: "var(--ds-space-negative-025, -2px)",
+        marginBottom: "var(--ds-space-025, 2px)",
+        marginTop: "var(--ds-space-025, 2px)"
+      } : {
         marginBottom: "var(--ds-space-025, 2px)"
       }
     }
@@ -67,7 +73,7 @@ export var TimeStyle = styled.div({
   marginLeft: "var(--ds-space-250, 20px)",
   flex: 'none',
   color: "var(--ds-text-subtlest, ".concat(N100, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 export var MENTION_ITEM_HEIGHT = 48;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/esm/components/MentionList/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export var MentionListStyle = styled.div(function (props) {

package/dist/esm/components/MentionListError/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var GenericErrorVisualStyle = styled.div({
   width: "var(--ds-space-1000, 80px)"

package/dist/esm/components/MentionPicker/styles.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { N100 } from '@atlaskit/theme/colors';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/esm/components/Scrollable/styles.js

@@ -1,7 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { scrollableMaxHeight } from '../../shared-styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+import { scrollableMaxHeight } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var ScrollableStyle = styled.div({
   display: 'block',

package/dist/esm/util/analytics.js

@@ -5,7 +5,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 var packageName = "@atlaskit/mention";
-var packageVersion = "24.5.2";
+var packageVersion = "0.0.0-development";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {