@atlaskit/reactions 20.1.0 → 21.0.3

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @atlaskit/reactions
 
+## 21.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.0.1
+
+### Patch Changes
+
+- [`b44aa6749c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b44aa6749c0) - [ux] Changed the token usage for emoji name to make it visible in the reaction tooltip.
+
+## 21.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.1.0
 
 ### Minor Changes

package/dist/cjs/analytics/index.js

@@ -15,9 +15,9 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 
 var _version = require("../version.json");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)('fabric-elements');
 exports.createAndFireEventInElementsChannel = createAndFireEventInElementsChannel;

package/dist/cjs/client/MockReactionsClient.js

@@ -17,9 +17,9 @@ var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _Selector = require("../components/Selector");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
 exports.containerAri = containerAri;

package/dist/cjs/client/ReactionServiceClient.js

@@ -15,9 +15,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var ReactionServiceClient = /*#__PURE__*/function () {
   function ReactionServiceClient(baseUrl, sessionToken) {

package/dist/cjs/components/Counter.js

@@ -42,14 +42,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var animationTime = 300;
 var countStyle = (0, _typestyle.style)({
   fontSize: '11px',
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N90),
+  color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
   overflow: 'hidden',
   height: "".concat(_utils.akHeight, "px"),
   transition: "width ".concat(animationTime, "ms ease-in-out")
 });
 exports.countStyle = countStyle;
 var highlightStyle = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  color: (0, _tokens.token)('color.text.brand', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;

package/dist/cjs/components/FlashAnimation.js

@@ -29,16 +29,16 @@ var flashAnimation = (0, _typestyle.keyframes)({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   }
 });
 var flashStyle = (0, _typestyle.style)({

package/dist/cjs/components/Reaction.js

@@ -73,26 +73,26 @@ var reactionStyle = (0, _typestyle.style)({
   minWidth: '36px',
   height: "".concat(_utils.akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', _colors.N40)),
+  border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat((0, _tokens.token)('color.text.mediumEmphasis', _colors.N400)),
+  color: "".concat((0, _tokens.token)('color.text.subtle', _colors.N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20))
+      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
     }
   }
 });
 var reactedStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.B50),
-  borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300),
+  backgroundColor: (0, _tokens.token)('color.background.brand', _colors.B50),
+  borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300),
   $nest: {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.selected.hover', _colors.B75))
+      background: "".concat((0, _tokens.token)('color.background.brand.hovered', _colors.B75))
     }
   }
 });

package/dist/cjs/components/ReactionPicker.js

@@ -49,9 +49,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -70,9 +70,9 @@ var contentStyle = (0, _typestyle.style)({
   display: 'flex'
 });
 var popupStyle = (0, _typestyle.style)({
-  background: (0, _tokens.token)('color.background.overlay', _colors.N0),
+  background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
+  boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/cjs/components/ReactionTooltip.js

@@ -13,7 +13,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _typestyle = require("typestyle");
 
@@ -46,11 +46,11 @@ var tooltipStyle = (0, _typestyle.style)({
 });
 var emojiNameStyle = (0, _typestyle.style)({
   textTransform: 'capitalize',
-  color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 600
 });
 var footerStyle = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;
@@ -74,7 +74,7 @@ var ReactionTooltip = function ReactionTooltip(_ref) {
     }, user.displayName);
   }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/_react.default.createElement("li", {
     className: footerStyle
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - TOOLTIP_USERS_LIMIT
     }

package/dist/cjs/components/Reactions.js

@@ -27,7 +27,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _typestyle = require("typestyle");
 
@@ -91,11 +91,11 @@ var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
 
       switch (status) {
         case _ReactionStatus.ReactionStatus.error:
-          return errorMessage ? errorMessage : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.unexpectedError);
+          return errorMessage ? errorMessage : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.unexpectedError);
 
         case _ReactionStatus.ReactionStatus.loading:
         case _ReactionStatus.ReactionStatus.notLoaded:
-          return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.loadingReactions);
+          return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.loadingReactions);
 
         default:
           return undefined;

package/dist/cjs/components/ShowMore.js

@@ -37,7 +37,7 @@ var _typestyle = require("typestyle");
 
 var _i18n = require("./i18n");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -59,12 +59,12 @@ var moreButtonStyle = (0, _typestyle.style)({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30A)
+      backgroundColor: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30A)
     }
   }
 });
 var separatorStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.border.neutral', _colors.N30A),
+  backgroundColor: (0, _tokens.token)('color.border', _colors.N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',
@@ -93,7 +93,7 @@ var ShowMore = /*#__PURE__*/function (_React$PureComponent) {
         style: style.container
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: separatorStyle
-      }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.moreEmoji, function (text) {
+      }), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.moreEmoji, function (text) {
         return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
           content: text
         }, /*#__PURE__*/_react.default.createElement("button", {

package/dist/cjs/components/i18n.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   loadingReactions: {
     id: 'fabric.reactions.loading',
     defaultMessage: 'Loading...',

package/dist/cjs/reaction-store/ReactionsStore.js

@@ -27,9 +27,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var MemoryReactionsStore = /*#__PURE__*/function () {
   function MemoryReactionsStore(client) {

package/dist/cjs/reaction-store/utils.js

@@ -13,9 +13,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _ReactionStatus = require("../types/ReactionStatus");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var compareEmojiId = function compareEmojiId(l, r) {
   return l.localeCompare(r);

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "20.1.0"
+	"version": "21.0.3"
 }

package/dist/es2019/components/Counter.js

@@ -9,13 +9,13 @@ import { akHeight } from './utils';
 const animationTime = 300;
 export const countStyle = style({
   fontSize: '11px',
-  color: token('color.text.lowEmphasis', N90),
+  color: token('color.text.subtlest', N90),
   overflow: 'hidden',
   height: `${akHeight}px`,
   transition: `width ${animationTime}ms ease-in-out`
 });
 export const highlightStyle = style({
-  color: token('color.text.selected', B400),
+  color: token('color.text.brand', B400),
   fontWeight: 600
 });
 export const containerStyle = style({

package/dist/es2019/components/FlashAnimation.js

@@ -13,16 +13,16 @@ const flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   }
 });
 export const flashStyle = style({

package/dist/es2019/components/Reaction.js

@@ -31,26 +31,26 @@ const reactionStyle = style({
   minWidth: '36px',
   height: `${akHeight}px`,
   background: 'transparent',
-  border: `1px solid ${token('color.border.neutral', N40)}`,
+  border: `1px solid ${token('color.border', N40)}`,
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: `${token('color.text.mediumEmphasis', N400)}`,
+  color: `${token('color.text.subtle', N400)}`,
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: `${token('color.background.transparentNeutral.hover', N20)}`
+      background: `${token('color.background.neutral.subtle.hovered', N20)}`
     }
   }
 });
 const reactedStyle = style({
-  backgroundColor: token('color.background.selected.resting', B50),
-  borderColor: token('color.iconBorder.brand', B300),
+  backgroundColor: token('color.background.brand', B50),
+  borderColor: token('color.icon.brand', B300),
   $nest: {
     '&:hover': {
-      background: `${token('color.background.selected.hover', B75)}`
+      background: `${token('color.background.brand.hovered', B75)}`
     }
   }
 });

package/dist/es2019/components/ReactionPicker.js

@@ -25,9 +25,9 @@ const contentStyle = style({
   display: 'flex'
 });
 const popupStyle = style({
-  background: token('color.background.overlay', N0),
+  background: token('elevation.surface.overlay', N0),
   borderRadius: `${borderRadius()}px`,
-  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
+  boxShadow: token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/es2019/components/ReactionTooltip.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
@@ -29,11 +29,11 @@ const tooltipStyle = style({
 });
 const emojiNameStyle = style({
   textTransform: 'capitalize',
-  color: token('color.text.mediumEmphasis', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 600
 });
 const footerStyle = style({
-  color: token('color.text.mediumEmphasis', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 300
 });
 const TOOLTIP_USERS_LIMIT = 5;

package/dist/es2019/components/Reactions.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { style } from 'typestyle';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
 import { ReactionStatus } from '../types/ReactionStatus';

package/dist/es2019/components/ShowMore.js

@@ -8,7 +8,7 @@ import cx from 'classnames';
 import React from 'react';
 import { style } from 'typestyle';
 import { messages } from './i18n';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 const moreEmojiContainerStyle = style({
   display: 'flex'
 });
@@ -25,12 +25,12 @@ const moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
+      backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
     }
   }
 });
 const separatorStyle = style({
-  backgroundColor: token('color.border.neutral', N30A),
+  backgroundColor: token('color.border', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/es2019/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   loadingReactions: {
     id: 'fabric.reactions.loading',

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "20.1.0"
+	"version": "21.0.3"
 }

package/dist/esm/analytics/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';

package/dist/esm/client/MockReactionsClient.js

@@ -3,9 +3,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { defaultReactionsByShortName } from '../components/Selector';
 export var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';

package/dist/esm/client/ReactionServiceClient.js

@@ -2,9 +2,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { utils } from '@atlaskit/util-service-support';
 export var ReactionServiceClient = /*#__PURE__*/function () {

package/dist/esm/components/Counter.js

@@ -20,13 +20,13 @@ import { akHeight } from './utils';
 var animationTime = 300;
 export var countStyle = style({
   fontSize: '11px',
-  color: token('color.text.lowEmphasis', N90),
+  color: token('color.text.subtlest', N90),
   overflow: 'hidden',
   height: "".concat(akHeight, "px"),
   transition: "width ".concat(animationTime, "ms ease-in-out")
 });
 export var highlightStyle = style({
-  color: token('color.text.selected', B400),
+  color: token('color.text.brand', B400),
   fontWeight: 600
 });
 export var containerStyle = style({

package/dist/esm/components/FlashAnimation.js

@@ -14,16 +14,16 @@ var flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   }
 });
 export var flashStyle = style({

package/dist/esm/components/Reaction.js

@@ -42,26 +42,26 @@ var reactionStyle = style({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(token('color.border.neutral', N40)),
+  border: "1px solid ".concat(token('color.border', N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(token('color.text.mediumEmphasis', N400)),
+  color: "".concat(token('color.text.subtle', N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat(token('color.background.transparentNeutral.hover', N20))
+      background: "".concat(token('color.background.neutral.subtle.hovered', N20))
     }
   }
 });
 var reactedStyle = style({
-  backgroundColor: token('color.background.selected.resting', B50),
-  borderColor: token('color.iconBorder.brand', B300),
+  backgroundColor: token('color.background.brand', B50),
+  borderColor: token('color.icon.brand', B300),
   $nest: {
     '&:hover': {
-      background: "".concat(token('color.background.selected.hover', B75))
+      background: "".concat(token('color.background.brand.hovered', B75))
     }
   }
 });

package/dist/esm/components/ReactionPicker.js

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -40,9 +40,9 @@ var contentStyle = style({
   display: 'flex'
 });
 var popupStyle = style({
-  background: token('color.background.overlay', N0),
+  background: token('elevation.surface.overlay', N0),
   borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
+  boxShadow: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/esm/components/ReactionTooltip.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
@@ -29,11 +29,11 @@ var tooltipStyle = style({
 });
 var emojiNameStyle = style({
   textTransform: 'capitalize',
-  color: token('color.text.mediumEmphasis', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 600
 });
 var footerStyle = style({
-  color: token('color.text.mediumEmphasis', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;

package/dist/esm/components/Reactions.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { style } from 'typestyle';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
 import { ReactionStatus } from '../types/ReactionStatus';

package/dist/esm/components/ShowMore.js

@@ -18,7 +18,7 @@ import cx from 'classnames';
 import React from 'react';
 import { style } from 'typestyle';
 import { messages } from './i18n';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 var moreEmojiContainerStyle = style({
   display: 'flex'
 });
@@ -35,12 +35,12 @@ var moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
+      backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
     }
   }
 });
 var separatorStyle = style({
-  backgroundColor: token('color.border.neutral', N30A),
+  backgroundColor: token('color.border', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/esm/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
   loadingReactions: {
     id: 'fabric.reactions.loading',

package/dist/esm/reaction-store/ReactionsStore.js

@@ -2,9 +2,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { createRestSucceededEvent, createRestFailedEvent, createAndFireSafe } from '../analytics';
 import { ReactionStatus } from '../types';

package/dist/esm/reaction-store/utils.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { ReactionStatus } from '../types/ReactionStatus';
 export var compareEmojiId = function compareEmojiId(l, r) {

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "20.1.0"
+	"version": "21.0.3"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "20.1.0",
+  "version": "21.0.3",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,13 +29,13 @@
     "@atlaskit/analytics-namespaced-context": "^6.3.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/emoji": "^63.1.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/emoji": "^64.1.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.4.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/util-service-support": "^6.0.0",
+    "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "react-transition-group": "^4.4.1",
@@ -44,15 +44,15 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.5",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^15.6.0",
+    "@atlaskit/editor-test-helpers": "^16.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/util-data-test": "^17.0.0",
+    "@atlaskit/util-data-test": "^17.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
@@ -60,7 +60,7 @@
     "fetch-mock": "^8.0.0",
     "jest-fetch-mock": "^3.0.3",
     "react": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "typescript": "3.9.6",
     "wait-for-expect": "^1.2.0"
   },