@atlaskit/reactions 20.0.0 → 21.0.2

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @atlaskit/reactions
 
+## 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
+
+- [`e82f9588eff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e82f9588eff) - Instrumented `@atlaskit/reactions` with the new theming package, `@atlaskit/tokens`. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
 ## 20.0.0
 
 ### Major Changes

package/dist/cjs/analytics/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createReactionClickedEvent = exports.createReactionHoveredEvent = exports.createReactionSelectionEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createReactionsRenderedEvent = exports.createRestFailedEvent = exports.createRestSucceededEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
+exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MockReactionsClient = exports.user = exports.reaction = exports.ari = exports.containerAri = void 0;
+exports.user = exports.reaction = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Counter = exports.slideDownStyle = exports.slideUpStyle = exports.containerStyle = exports.highlightStyle = exports.countStyle = void 0;
+exports.slideUpStyle = exports.slideDownStyle = exports.highlightStyle = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -40,14 +42,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var animationTime = 300;
 var countStyle = (0, _typestyle.style)({
   fontSize: '11px',
-  color: _colors.N90,
+  color: (0, _tokens.token)('color.text.lowEmphasis', _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: _colors.B400,
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;

package/dist/cjs/components/FlashAnimation.js

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FlashAnimation = exports.flashStyle = void 0;
+exports.flashStyle = exports.FlashAnimation = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,16 +29,16 @@ var flashAnimation = (0, _typestyle.keyframes)({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: _colors.B75,
-    borderColor: _colors.B300
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
   },
   '75%': {
-    backgroundColor: _colors.B75,
-    borderColor: _colors.B300
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
   },
   '100%': {
-    backgroundColor: _colors.B75,
-    borderColor: _colors.B300
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
   }
 });
 var flashStyle = (0, _typestyle.style)({

package/dist/cjs/components/Reaction.js

@@ -29,6 +29,8 @@ var _element = require("@atlaskit/emoji/element");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -71,26 +73,26 @@ var reactionStyle = (0, _typestyle.style)({
   minWidth: '36px',
   height: "".concat(_utils.akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(_colors.N40),
+  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', _colors.N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(_colors.N400),
+  color: "".concat((0, _tokens.token)('color.text.mediumEmphasis', _colors.N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat(_colors.N20)
+      background: "".concat((0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20))
     }
   }
 });
 var reactedStyle = (0, _typestyle.style)({
-  backgroundColor: _colors.B50,
-  borderColor: _colors.B300,
+  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.B50),
+  borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300),
   $nest: {
     '&:hover': {
-      background: "".concat(_colors.B75)
+      background: "".concat((0, _tokens.token)('color.background.selected.hover', _colors.B75))
     }
   }
 });

package/dist/cjs/components/ReactionPicker.js

@@ -31,6 +31,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -47,18 +49,14 @@ 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); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var akBorderRadius = "".concat((0, _constants.borderRadius)(), "px");
-var akColorN0 = _colors.N0;
-var akColorN50A = _colors.N50A;
-var akColorN60A = _colors.N60A;
 var pickerStyle = (0, _typestyle.style)({
   verticalAlign: 'middle',
   $nest: {
@@ -72,9 +70,9 @@ var contentStyle = (0, _typestyle.style)({
   display: 'flex'
 });
 var popupStyle = (0, _typestyle.style)({
-  background: akColorN0,
-  borderRadius: akBorderRadius,
-  boxShadow: "0 4px 8px -2px ".concat(akColorN50A, ", 0 0 1px ").concat(akColorN60A),
+  background: (0, _tokens.token)('color.background.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)),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/cjs/components/ReactionTooltip.js

@@ -13,10 +13,12 @@ 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");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _i18n = require("./i18n");
@@ -44,11 +46,11 @@ var tooltipStyle = (0, _typestyle.style)({
 });
 var emojiNameStyle = (0, _typestyle.style)({
   textTransform: 'capitalize',
-  color: _colors.N90,
+  color: (0, _tokens.token)('color.text.onBold', _colors.N90),
   fontWeight: 600
 });
 var footerStyle = (0, _typestyle.style)({
-  color: _colors.N90,
+  color: (0, _tokens.token)('color.text.onBold', _colors.N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;
@@ -72,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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Reactions = exports.ReactionsWithoutAnalytics = void 0;
+exports.ReactionsWithoutAnalytics = exports.Reactions = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -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/Selector.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Selector = exports.isDefaultReaction = exports.defaultReactionsByShortName = exports.defaultReactions = exports.revealStyle = void 0;
+exports.revealStyle = exports.isDefaultReaction = exports.defaultReactionsByShortName = exports.defaultReactions = exports.Selector = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/components/ShowMore.js

@@ -25,6 +25,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -35,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); }; }
 
@@ -57,12 +59,12 @@ var moreButtonStyle = (0, _typestyle.style)({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: _colors.N30A
+      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30A)
     }
   }
 });
 var separatorStyle = (0, _typestyle.style)({
-  backgroundColor: _colors.N30A,
+  backgroundColor: (0, _tokens.token)('color.border.neutral', _colors.N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',
@@ -91,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/components/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.equalEmojiId = exports.isLeftClick = exports.akHeight = void 0;
+exports.isLeftClick = exports.equalEmojiId = exports.akHeight = void 0;
 var akHeight = 24;
 exports.akHeight = akHeight;
 

package/dist/cjs/i18n/index.js

@@ -5,34 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "cs", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _cs.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _en.default;
   }
 });
-Object.defineProperty(exports, "nl", {
+Object.defineProperty(exports, "en_GB", {
   enumerable: true,
   get: function get() {
-    return _nl.default;
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -53,16 +59,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _hu.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "is", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _is.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -89,6 +95,12 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
+Object.defineProperty(exports, "nl", {
+  enumerable: true,
+  get: function get() {
+    return _nl.default;
+  }
+});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -107,22 +119,22 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ru", {
+Object.defineProperty(exports, "ro", {
   enumerable: true,
   get: function get() {
-    return _ru.default;
+    return _ro.default;
   }
 });
-Object.defineProperty(exports, "sk", {
+Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
-    return _sk.default;
+    return _ru.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "sk", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _sk.default;
   }
 });
 Object.defineProperty(exports, "sv", {
@@ -155,28 +167,16 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "en", {
-  enumerable: true,
-  get: function get() {
-    return _en.default;
-  }
-});
-Object.defineProperty(exports, "en_GB", {
-  enumerable: true,
-  get: function get() {
-    return _en_GB.default;
-  }
-});
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "ro", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _ro.default;
+    return _zh_TW.default;
   }
 });