@atlaskit/reactions 22.8.3 → 22.9.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/reactions
 
+## 22.9.0
+
+### Minor Changes
+
+- [#120256](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120256)
+  [`2cbfadca64339`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cbfadca64339) -
+  Added ability to adjust placement of Summarized Reactions Pop-up. Made the Summarized Reactions
+  button toggleable
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.8.5
+
+### Patch Changes
+
+- [#118651](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118651)
+  [`cd0076681b737`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd0076681b737) -
+  hide floating reactions effect when user opts for reduced motion
+
+## 22.8.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.8.3
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "22.8.3";
+var packageVersion = "22.9.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -9,7 +9,7 @@ var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var countStyle = exports.countStyle = (0, _react.css)({
   fontSize: 11,
   color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
@@ -19,18 +19,18 @@ var countStyle = exports.countStyle = (0, _react.css)({
   lineHeight: '14px'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var containerStyle = exports.containerStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var highlightStyle = exports.highlightStyle = (0, _react.css)({
   color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var counterLabelStyle = exports.counterLabelStyle = (0, _react.css)({
   fontVariantNumeric: 'tabular-nums'
 });

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

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var flashTime = 700;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var flashAnimation = exports.flashAnimation = (0, _react.keyframes)({
   '0%': {
     backgroundColor: 'transparent'
@@ -30,13 +30,13 @@ var flashAnimation = exports.flashAnimation = (0, _react.keyframes)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var containerStyle = exports.containerStyle = (0, _react.css)({
   width: '100%',
   height: '100%'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var flashStyle = exports.flashStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")

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

@@ -20,19 +20,19 @@ var akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var containerStyle = exports.containerStyle = (0, _react.css)({
   position: 'relative'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var emojiStyle = exports.emojiStyle = (0, _react.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-100, 8px)")
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var reactionStyle = exports.reactionStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
@@ -61,7 +61,7 @@ var reactionStyle = exports.reactionStyle = (0, _react.css)({
   overflow: 'hidden'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var reactedStyle = exports.reactedStyle = (0, _react.css)({
   backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
   borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")"),
@@ -71,7 +71,7 @@ var reactedStyle = exports.reactedStyle = (0, _react.css)({
 });
 var flashHeight = exports.flashHeight = akHeight - 2; // height without the 1px border
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var flashStyle = exports.flashStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
@@ -81,7 +81,7 @@ var flashStyle = exports.flashStyle = (0, _react.css)({
   height: "".concat(flashHeight, "px")
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var emojiNoReactionStyle = exports.emojiNoReactionStyle = (0, _react.css)({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
 });

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

@@ -45,7 +45,7 @@ var containerStyle = exports.containerStyle = function containerStyle(reactionsB
   });
 };
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var titleStyle = exports.titleStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > h1': {
@@ -145,7 +145,7 @@ var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSe
   });
 };
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var navigationContainerStyle = exports.navigationContainerStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> button': {
@@ -157,7 +157,7 @@ var navigationContainerStyle = exports.navigationContainerStyle = (0, _react.css
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
   marginTop: "var(--ds-space-300, 24px)",
   display: 'flex',
@@ -177,7 +177,7 @@ var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var userListStyle = exports.userListStyle = (0, _react.css)({
   listStyle: 'none',
   marginTop: "var(--ds-space-200, 16px)",
@@ -190,7 +190,7 @@ var userListStyle = exports.userListStyle = (0, _react.css)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var userStyle = exports.userStyle = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
@@ -201,7 +201,7 @@ var userStyle = exports.userStyle = (0, _react.css)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var customTabListStyles = exports.customTabListStyles = (0, _react.css)({
   overflow: 'auto',
   scrollBehavior: 'smooth',
@@ -215,7 +215,7 @@ var customTabListStyles = exports.customTabListStyles = (0, _react.css)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var centerSpinner = exports.centerSpinner = (0, _react.css)({
   display: 'flex',
   justifyContent: 'center',

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

@@ -31,15 +31,18 @@ var float = (0, _react.keyframes)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var containerStyle = exports.containerStyle = (0, _react.css)({
   position: 'relative',
   left: 8,
   // Ensure the effect displays above tooltips
-  zIndex: _constants.layers.tooltip() + 1
+  zIndex: _constants.layers.tooltip() + 1,
+  '@media (prefers-reduced-motion: reduce)': {
+    opacity: 0
+  }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var reactionParticleStyle = exports.reactionParticleStyle = (0, _react.css)({
   position: 'absolute',
   top: 0,

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

@@ -10,7 +10,7 @@ var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var pickerStyle = exports.pickerStyle = (0, _react.css)({
   verticalAlign: 'middle',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -19,12 +19,12 @@ var pickerStyle = exports.pickerStyle = (0, _react.css)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var contentStyle = exports.contentStyle = (0, _react.css)({
   display: 'flex'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var popupWrapperStyle = exports.popupWrapperStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':focus': {
@@ -32,7 +32,7 @@ var popupWrapperStyle = exports.popupWrapperStyle = (0, _react.css)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var popupStyle = exports.popupStyle = (0, _react.css)({
   background: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/cjs/components/ReactionSummary/ReactionSummaryButton.js

@@ -69,7 +69,16 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
   }, /*#__PURE__*/_react.default.createElement(_Reaction.ReactionButton, {
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
-    ariaLabel: intl.formatMessage(_i18n.messages.summary)
+    ariaLabel: intl.formatMessage(_i18n.messages.summary),
+    additionalStyles: [(0, _primitives.xcss)({
+      backgroundColor: 'elevation.surface',
+      ':hover': {
+        backgroundColor: 'elevation.surface.hovered'
+      },
+      ':active': {
+        backgroundColor: 'elevation.surface.pressed'
+      }
+    })]
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.050",
     xcss: buttonStyle

package/dist/cjs/components/ReactionSummary/ReactionSummaryView.js

@@ -47,8 +47,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     return setSummaryPopupOpen(false);
   }, []);
   var handleSummaryClick = (0, _react.useCallback)(function () {
-    return setSummaryPopupOpen(true);
-  }, []);
+    return setSummaryPopupOpen(!isSummaryPopupOpen);
+  }, [isSummaryPopupOpen]);
   return /*#__PURE__*/_react.default.createElement(_popup.default, {
     placement: placement,
     content: function content() {

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

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var verticalMargin = exports.verticalMargin = 5;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var tooltipStyle = exports.tooltipStyle = (0, _react.css)({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
@@ -33,20 +33,20 @@ var tooltipStyle = exports.tooltipStyle = (0, _react.css)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var emojiNameStyle = exports.emojiNameStyle = (0, _react.css)({
   textTransform: 'capitalize',
   color: "var(--ds-text-inverse, ".concat(_colors.N90, ")"),
   fontWeight: 600
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var footerStyle = exports.footerStyle = (0, _react.css)({
   color: "var(--ds-text-inverse, ".concat(_colors.N90, ")"),
   fontWeight: 300
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var underlineStyle = exports.underlineStyle = (0, _react.css)({
   cursor: 'pointer',
   textDecoration: 'underline',

package/dist/cjs/components/Reactions/Reactions.js

@@ -118,7 +118,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$summaryViewEnabl = _ref.summaryViewEnabled,
     summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
     _ref$summaryViewThres = _ref.summaryViewThreshold,
-    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres;
+    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
+    summaryViewPlacement = _ref.summaryViewPlacement;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -288,7 +289,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       allowUserDialog: allowUserDialog,
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
-      onReactionMouseEnter: handleReactionMouseEnter
+      onReactionMouseEnter: handleReactionMouseEnter,
+      placement: summaryViewPlacement
     })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,

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

@@ -8,13 +8,13 @@ var _react = require("@emotion/react");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var reactionPickerStyle = exports.reactionPickerStyle = (0, _react.css)({
   display: 'inline-block',
   marginTop: "var(--ds-space-050, 4px)"
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var seeWhoReactedStyle = exports.seeWhoReactedStyle = (0, _react.css)({
   height: '24px',
   lineHeight: '24px',
@@ -24,7 +24,7 @@ var seeWhoReactedStyle = exports.seeWhoReactedStyle = (0, _react.css)({
   marginLeft: "var(--ds-space-050, 4px)"
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
   display: 'flex',
   flexWrap: 'wrap',

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

@@ -8,7 +8,7 @@ var _react = require("@emotion/react");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var revealAnimation = exports.revealAnimation = (0, _react.keyframes)({
   '0%': {
     opacity: 1,
@@ -23,7 +23,7 @@ var revealAnimation = exports.revealAnimation = (0, _react.keyframes)({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var revealStyle = exports.revealStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   animation: "".concat(revealAnimation, " 150ms ease-in-out forwards"),

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "22.8.3";
+const packageVersion = "22.9.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const countStyle = css({
   fontSize: 11,
   color: `var(--ds-text-subtlest, ${N90})`,
@@ -12,18 +12,18 @@ export const countStyle = css({
   lineHeight: '14px'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerStyle = css({
   display: 'flex',
   flexDirection: 'column'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const highlightStyle = css({
   color: `var(--ds-text-selected, ${B400})`
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const counterLabelStyle = css({
   fontVariantNumeric: 'tabular-nums'
 });

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

@@ -4,7 +4,7 @@ import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
 const flashTime = 700;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
@@ -23,13 +23,13 @@ export const flashAnimation = keyframes({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerStyle = css({
   width: '100%',
   height: '100%'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const flashStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   animation: `${flashAnimation} ${flashTime}ms ease-in-out`

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

@@ -13,19 +13,19 @@ const akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerStyle = css({
   position: 'relative'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const reactionStyle = css({
   display: 'flex',
   flexDirection: 'row',
@@ -54,7 +54,7 @@ export const reactionStyle = css({
   overflow: 'hidden'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const reactedStyle = css({
   backgroundColor: `var(--ds-background-selected, ${B50})`,
   borderColor: `var(--ds-border-selected, ${B300})`,
@@ -64,7 +64,7 @@ export const reactedStyle = css({
 });
 export const flashHeight = akHeight - 2; // height without the 1px border
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const flashStyle = css({
   display: 'flex',
   flexDirection: 'row',
@@ -74,7 +74,7 @@ export const flashStyle = css({
   height: `${flashHeight}px`
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const emojiNoReactionStyle = css({
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} 10px`
 });

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

@@ -36,7 +36,7 @@ export const containerStyle = reactionsBorderWidth => css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const titleStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > h1': {
@@ -130,7 +130,7 @@ export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const navigationContainerStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> button': {
@@ -142,7 +142,7 @@ export const navigationContainerStyle = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const reactionViewStyle = css({
   marginTop: "var(--ds-space-300, 24px)",
   display: 'flex',
@@ -162,7 +162,7 @@ export const reactionViewStyle = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const userListStyle = css({
   listStyle: 'none',
   marginTop: "var(--ds-space-200, 16px)",
@@ -175,7 +175,7 @@ export const userListStyle = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const userStyle = css({
   display: 'flex',
   alignItems: 'center',
@@ -186,7 +186,7 @@ export const userStyle = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const customTabListStyles = css({
   overflow: 'auto',
   scrollBehavior: 'smooth',
@@ -200,7 +200,7 @@ export const customTabListStyles = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const centerSpinner = css({
   display: 'flex',
   justifyContent: 'center',

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

@@ -25,15 +25,18 @@ const float = keyframes({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerStyle = css({
   position: 'relative',
   left: 8,
   // Ensure the effect displays above tooltips
-  zIndex: layers.tooltip() + 1
+  zIndex: layers.tooltip() + 1,
+  '@media (prefers-reduced-motion: reduce)': {
+    opacity: 0
+  }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const reactionParticleStyle = css({
   position: 'absolute',
   top: 0,