@atlaskit/mention 23.1.0 → 23.2.0

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

@@ -2,27 +2,26 @@ import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export const MentionPickerStyle = styled.div`
-  display: ${props => props.visible ? 'block' : 'none'};
-`;
+export const MentionPickerStyle = styled.div(props => ({
+  display: props.visible ? 'block' : 'none'
+}));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export const MentionPickerInfoStyle = styled.div`
-  background: ${"var(--ds-surface, #fff)"};
-  color: ${`var(--ds-text-subtlest, ${N100})`};
-  border: 1px solid ${noDialogContainerBorderColor};
-  border-radius: ${noDialogContainerBorderRadius};
-  box-shadow: ${noDialogContainerBoxShadow};
-  display: block;
-  width: ${mentionListWidth};
-  white-space: nowrap;
-
-  & {
-    p {
-      margin: 0;
-      overflow: hidden;
-      padding: ${"var(--ds-space-100, 8px)"};
-      text-overflow: ellipsis;
+export const MentionPickerInfoStyle = styled.div({
+  background: "var(--ds-surface, #fff)",
+  color: `var(--ds-text-subtlest, ${N100})`,
+  border: `1px solid ${noDialogContainerBorderColor}`,
+  borderRadius: noDialogContainerBorderRadius,
+  boxShadow: noDialogContainerBoxShadow,
+  display: 'block',
+  width: mentionListWidth,
+  whiteSpace: 'nowrap',
+  '&': {
+    p: {
+      margin: 0,
+      overflow: 'hidden',
+      padding: "var(--ds-space-100, 8px)",
+      textOverflow: 'ellipsis'
     }
   }
-`;
+});

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

@@ -3,16 +3,13 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import { scrollableMaxHeight } from '../../shared-styles';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export const ScrollableStyle = styled.div`
-  display: block;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  padding: ${"var(--ds-space-050, 4px)"} 0;
-  margin: 0;
-
-  background: ${"var(--ds-surface, white)"};
-  max-height: ${scrollableMaxHeight};
-
-  border-radius: ${borderRadius()}px;
-`;
+export const ScrollableStyle = styled.div({
+  display: 'block',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  padding: `${"var(--ds-space-050, 4px)"} 0`,
+  margin: 0,
+  background: "var(--ds-surface, white)",
+  maxHeight: scrollableMaxHeight,
+  borderRadius: `${borderRadius()}px`
+});

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 { isSpecialMentionText } from '../types';
 const packageName = "@atlaskit/mention";
-const packageVersion = "23.1.0";
+const packageVersion = "23.2.0";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export let SliNames = /*#__PURE__*/function (SliNames) {

package/dist/esm/api/PresenceResource.js

@@ -25,8 +25,8 @@ var CacheEntry = /*#__PURE__*/function () {
   }]);
   return CacheEntry;
 }();
-var AbstractPresenceResource = /*#__PURE__*/function (_ref) {
-  _inherits(AbstractPresenceResource, _ref);
+var AbstractPresenceResource = /*#__PURE__*/function (_AbstractResource) {
+  _inherits(AbstractPresenceResource, _AbstractResource);
   var _super = _createSuper(AbstractPresenceResource);
   function AbstractPresenceResource() {
     _classCallCheck(this, AbstractPresenceResource);
@@ -317,10 +317,10 @@ export var DefaultPresenceParser = /*#__PURE__*/function () {
     }
 
     /*
-      This is a bit of an odd exception. In the case where a user is in "Focus Mode", their presence state
-      is returned as 'busy' along with a `stateMetadata` object containing a `focus` field.
-      In this case we ignore the value of the `state` field and treat the presence as a 'focus' state.
-     */
+       This is a bit of an odd exception. In the case where a user is in "Focus Mode", their presence state
+       is returned as 'busy' along with a `stateMetadata` object containing a `focus` field.
+       In this case we ignore the value of the `state` field and treat the presence as a 'focus' state.
+      */
   }, {
     key: "isFocusState",
     value: function isFocusState(presence) {

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

@@ -38,7 +38,7 @@ var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     other = _objectWithoutProperties(_ref2, _excluded);
   return jsx("span", _extends({
     ref: ref,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          display: inline;\n          border: 1px solid ", ";\n          background: ", ";\n          color: ", ";\n          border-radius: 20px;\n          cursor: pointer;\n          padding: 0 0.3em 2px 0.23em;\n          line-height: 1.714;\n          font-size: 1em;\n          font-weight: normal;\n          word-break: break-word;\n          &:hover {\n            background: ", ";\n          }\n          &:active {\n            background: ", ";\n          }\n        "])), getStyle({
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: 1px 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: normal;\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"])), getStyle({
       mentionType: mentionType
     }, 'borderColor'), getStyle({
       mentionType: mentionType

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

@@ -1,6 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var DescriptionBylineStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 12px;\n\n  margin-top: ", ";\n\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), "var(--ds-text-subtlest, ".concat(N100, ")"), "var(--ds-space-025, 2px)");
+export var DescriptionBylineStyle = styled.span({
+  color: "var(--ds-text-subtlest, ".concat(N100, ")"),
+  fontSize: '12px',
+  marginTop: "var(--ds-space-025, 2px)",
+  display: 'block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});

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

@@ -1,35 +1,84 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import styled from '@emotion/styled';
 import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var RowStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", " ", ";\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)");
+export var RowStyle = styled.div({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  overflow: 'hidden',
+  padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
+  textOverflow: 'ellipsis',
+  verticalAlign: 'middle'
+});
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var AvatarStyle = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: initial;\n  opacity: ", ";\n"])), function (props) {
-  return props.restricted ? '0.5' : 'inherit';
+export var AvatarStyle = styled.span(function (props) {
+  return {
+    position: 'relative',
+    flex: 'initial',
+    opacity: props.restricted ? '0.5' : 'inherit'
+  };
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var NameSectionStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: ", ";\n  opacity: ", ";\n"])), "var(--ds-space-150, 12px)", function (props) {
-  return props.restricted ? '0.5' : 'inherit';
+export var NameSectionStyle = styled.div(function (props) {
+  return {
+    flex: 1,
+    minWidth: 0,
+    marginLeft: "var(--ds-space-150, 12px)",
+    opacity: props.restricted ? '0.5' : 'inherit'
+  };
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var FullNameStyle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n"])), "var(--ds-text, ".concat(N900, ")"));
+export var FullNameStyle = styled.span({
+  display: 'block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text, ".concat(N900, ")")
+});
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var InfoSectionStyle = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  text-align: right;\n  opacity: ", ";\n\n  & {\n    /* Lozenge */\n    & > span {\n      margin-bottom: ", ";\n    }\n  }\n"])), function (props) {
-  return props.restricted ? '0.5' : 'inherit';
-}, "var(--ds-space-025, 2px)");
+export var InfoSectionStyle = styled.div(function (props) {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'right',
+    opacity: props.restricted ? '0.5' : 'inherit',
+    '&': {
+      /* Lozenge */
+      '& > span': {
+        marginBottom: "var(--ds-space-025, 2px)"
+      }
+    }
+  };
+});
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var TimeStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-text-subtlest, ".concat(N100, ")"));
+export var TimeStyle = styled.div({
+  marginLeft: "var(--ds-space-250, 20px)",
+  flex: 'none',
+  color: "var(--ds-text-subtlest, ".concat(N100, ")"),
+  fontSize: '12px'
+});
 export var MENTION_ITEM_HEIGHT = 48;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var MentionItemStyle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  height: ", "px;\n  line-height: 1.2;\n  cursor: pointer;\n"])), function (props) {
-  return props.selected ? "var(--ds-background-selected, ".concat(N30, ")") : 'transparent';
-}, MENTION_ITEM_HEIGHT);
+export var MentionItemStyle = styled.div(function (props) {
+  return {
+    backgroundColor: props.selected ? "var(--ds-background-selected, ".concat(N30, ")") : 'transparent',
+    display: 'block',
+    overflow: 'hidden',
+    listStyleType: 'none',
+    height: "".concat(MENTION_ITEM_HEIGHT, "px"),
+    lineHeight: 1.2,
+    cursor: 'pointer'
+  };
+});
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  color: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtle, ".concat(N500, ")"));
+export var AccessSectionStyle = styled.div({
+  paddingLeft: "var(--ds-space-050, 4px)",
+  color: "var(--ds-text-subtle, ".concat(N500, ")")
+});

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

@@ -1,8 +1,14 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var MentionListStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n\n  /* list style */\n  width: ", ";\n  color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n"])), function (props) {
-  return props.empty ? 'none' : 'block';
-}, mentionListWidth, "var(--ds-text-subtle, #333)", noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow);
+export var MentionListStyle = styled.div(function (props) {
+  return {
+    display: props.empty ? 'none' : 'block',
+    /* list style */
+    width: mentionListWidth,
+    color: "var(--ds-text-subtle, #333)",
+    border: "1px solid ".concat(noDialogContainerBorderColor),
+    borderRadius: noDialogContainerBorderRadius,
+    boxShadow: noDialogContainerBoxShadow
+  };
+});

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

@@ -1,19 +1,34 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject;
 import styled from '@emotion/styled';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N500 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var MentionListErrorStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-text-subtle, ".concat(N500, ")"), "var(--ds-surface-overlay, #fff)", borderRadius());
+export var MentionListErrorStyle = styled.div({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  color: "var(--ds-text-subtle, ".concat(N500, ")"),
+  border: "1px solid ".concat("var(--ds-surface-overlay, #fff)"),
+  borderRadius: "".concat(borderRadius(), "px")
+});
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var GenericErrorVisualStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-400, 32px)", "var(--ds-space-1000, 80px)");
+export var GenericErrorVisualStyle = styled.div({
+  marginBottom: "var(--ds-space-100, 8px)",
+  marginTop: "var(--ds-space-400, 32px)",
+  width: "var(--ds-space-1000, 80px)"
+});
 
 // TODO: Figure out why the themed css function is causing type errors when passed prop children
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var MentionListErrorHeadlineStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  margin-bottom: ", ";\n"])), h400(), "var(--ds-space-100, 8px)");
+export var MentionListErrorHeadlineStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-bottom: ", ";\n"])), h400(), "var(--ds-space-100, 8px)");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var MentionListAdviceStyle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-600, 48px)");
+export var MentionListAdviceStyle = styled.div({
+  marginBottom: "var(--ds-space-600, 48px)"
+});

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

@@ -1,12 +1,29 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var MentionPickerStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (props) {
-  return props.visible ? 'block' : 'none';
+export var MentionPickerStyle = styled.div(function (props) {
+  return {
+    display: props.visible ? 'block' : 'none'
+  };
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var MentionPickerInfoStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: block;\n  width: ", ";\n  white-space: nowrap;\n\n  & {\n    p {\n      margin: 0;\n      overflow: hidden;\n      padding: ", ";\n      text-overflow: ellipsis;\n    }\n  }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(N100, ")"), noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow, mentionListWidth, "var(--ds-space-100, 8px)");
+export var MentionPickerInfoStyle = styled.div({
+  background: "var(--ds-surface, #fff)",
+  color: "var(--ds-text-subtlest, ".concat(N100, ")"),
+  border: "1px solid ".concat(noDialogContainerBorderColor),
+  borderRadius: noDialogContainerBorderRadius,
+  boxShadow: noDialogContainerBoxShadow,
+  display: 'block',
+  width: mentionListWidth,
+  whiteSpace: 'nowrap',
+  '&': {
+    p: {
+      margin: 0,
+      overflow: 'hidden',
+      padding: "var(--ds-space-100, 8px)",
+      textOverflow: 'ellipsis'
+    }
+  }
+});

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

@@ -1,8 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { scrollableMaxHeight } from '../../shared-styles';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-export var ScrollableStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  padding: ", " 0;\n  margin: 0;\n\n  background: ", ";\n  max-height: ", ";\n\n  border-radius: ", "px;\n"])), "var(--ds-space-050, 4px)", "var(--ds-surface, white)", scrollableMaxHeight, borderRadius());
+export var ScrollableStyle = styled.div({
+  display: 'block',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  padding: "var(--ds-space-050, 4px)".concat(" 0"),
+  margin: 0,
+  background: "var(--ds-surface, white)",
+  maxHeight: scrollableMaxHeight,
+  borderRadius: "".concat(borderRadius(), "px")
+});

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 { isSpecialMentionText } from '../types';
 var packageName = "@atlaskit/mention";
-var packageVersion = "23.1.0";
+var packageVersion = "23.2.0";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var SliNames = /*#__PURE__*/function (SliNames) {

package/docs/0-intro.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  md,
-  Props,
-  Example,
-  code,
-  AtlassianInternalWarning,
-} from '@atlaskit/docs';
+import { md, Props, Example, code, AtlassianInternalWarning } from '@atlaskit/docs';
 
 import SimpleMentionExample from '../examples/00-simple-mention-item';
 const SimpleMentionSource = require('!!raw-loader!../examples/00-simple-mention-item');
@@ -77,13 +71,13 @@ export default md`
   (e.g. enter and tab).
 
   ${(
-    <Example
-      packageName="@atlaskit/mention"
-      Component={SimpleMentionExample}
-      title="Simple Mention"
-      source={SimpleMentionSource}
-    />
-  )}
+		<Example
+			packageName="@atlaskit/mention"
+			Component={SimpleMentionExample}
+			title="Simple Mention"
+			source={SimpleMentionSource}
+		/>
+	)}
 
   ${(<Props props={MentionProps} />)}
 

package/docs/1-in-editor.tsx

@@ -10,16 +10,15 @@ export default md`
   ## Using Mentions in AK Editor
 
   ${(
-    <>
-      <p>
-        To use Mention in{' '}
-        <a href="/packages/editor/editor-core">@atlaskit/editor-core</a>
-        {', '}
-        check the 'Editor with mentions' section in editor-core, then follow
-        these steps for a more involved tutorial:
-      </p>
-    </>
-  )}
+		<>
+			<p>
+				To use Mention in <a href="/packages/editor/editor-core">@atlaskit/editor-core</a>
+				{', '}
+				check the 'Editor with mentions' section in editor-core, then follow these steps for a more
+				involved tutorial:
+			</p>
+		</>
+	)}
 
   ### Option 1: Instantiate a \`MentionResource\`
 
@@ -58,13 +57,13 @@ export default md`
   Extend the \`AbstractMentionResource\` to provide a more customized mentions experience.
 
   ${(
-    <Example
-      packageName="@atlaskit/mention"
-      Component={MentionWithEditorExample}
-      title="Mention With Editor"
-      source={MentionWithEditorExampleSource}
-    />
-  )}
+		<Example
+			packageName="@atlaskit/mention"
+			Component={MentionWithEditorExample}
+			title="Mention With Editor"
+			source={MentionWithEditorExampleSource}
+		/>
+	)}
 
   ### Option 3: Extend and instantiate a \`SmartMentionResource\`
 

package/local-config-example.ts

@@ -1,41 +1,41 @@
 // Copy this file to local-config.ts and customise.
 export default {
-  asap: {
-    url: 'http://www.example.org/mentions',
-    securityProvider: () => ({
-      headers: {
-        'X-Bogus-Authorization': 'Bearer asap_token',
-      },
-      omitCredentials: true,
-    }),
-  },
-  sessionservice: {
-    url: 'http://www.example.org/mentions/some-cloud-id',
-    productId: 'micros-group/confluence',
-    securityProvider: () => ({
-      headers: {
-        'X-Bogus-Authorization': 'Session-bearer session_service_token',
-      },
-    }),
-  },
-  sessionServiceWithTeam: {
-    user: {
-      url: 'http://www.example.org/mentions/some-cloud-id',
-      productId: 'micros-group/confluence',
-      securityProvider: () => ({
-        headers: {
-          'X-Bogus-Authorization': 'Session-bearer session_service_token',
-        },
-      }),
-    },
-    team: {
-      url: 'http://www.example.org/teams/mentions',
-      productId: 'micros-group/confluence',
-      securityProvider: () => ({
-        headers: {
-          'X-Bogus-Authorization': 'Session-bearer session_service_token',
-        },
-      }),
-    },
-  },
+	asap: {
+		url: 'http://www.example.org/mentions',
+		securityProvider: () => ({
+			headers: {
+				'X-Bogus-Authorization': 'Bearer asap_token',
+			},
+			omitCredentials: true,
+		}),
+	},
+	sessionservice: {
+		url: 'http://www.example.org/mentions/some-cloud-id',
+		productId: 'micros-group/confluence',
+		securityProvider: () => ({
+			headers: {
+				'X-Bogus-Authorization': 'Session-bearer session_service_token',
+			},
+		}),
+	},
+	sessionServiceWithTeam: {
+		user: {
+			url: 'http://www.example.org/mentions/some-cloud-id',
+			productId: 'micros-group/confluence',
+			securityProvider: () => ({
+				headers: {
+					'X-Bogus-Authorization': 'Session-bearer session_service_token',
+				},
+			}),
+		},
+		team: {
+			url: 'http://www.example.org/teams/mentions',
+			productId: 'micros-group/confluence',
+			securityProvider: () => ({
+				headers: {
+					'X-Bogus-Authorization': 'Session-bearer session_service_token',
+				},
+			}),
+		},
+	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/mention",
-  "version": "23.1.0",
+  "version": "23.2.0",
   "description": "A React component used to display user profiles in a list for 'Mention' functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "@atlaskit/focus-ring": "^1.4.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/lozenge": "^11.7.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/ufo": "^0.2.0",