@atlaskit/reactions 33.8.24 → 33.8.25

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 33.8.25
+
+### Patch Changes
+
+- [`608c375f6f9b9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/608c375f6f9b9) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+- Updated dependencies
+
 ## 33.8.24
 
 ### 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; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 var packageName = "@atlaskit/reactions";
-var packageVersion = "33.8.24";
+var packageVersion = "0.0.0-development";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Counter.compiled.css

@@ -10,7 +10,7 @@
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}
-._syazln51{color:var(--_1hfkvbo)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vwz4dlk8{line-height:14px}

package/dist/cjs/components/Counter.js

@@ -12,7 +12,6 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _motion = require("@atlaskit/motion");
 var _utils = require("../shared/utils");
-var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var containerStyle = null;
 var counterLabelStyle = null;
@@ -89,10 +88,7 @@ var Counter = exports.Counter = function Counter(_ref) {
     }, /*#__PURE__*/React.createElement("span", {
       "data-testid": RENDER_LABEL_TESTID,
       key: value,
-      className: (0, _runtime.ax)(["_1x821ts4", highlight && "_syazln51"]),
-      style: {
-        "--_1hfkvbo": (0, _runtime.ix)("var(--ds-text-selected, ".concat(_colors.B400, ")"))
-      }
+      className: (0, _runtime.ax)(["_1x821ts4", highlight && "_syaz6x5g"])
     }, label));
   })));
 };

package/dist/cjs/components/FlashAnimation.compiled.css

@@ -2,5 +2,5 @@
 ._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1osq{height:100%}
 ._5sagolkx{animation-duration:var(--_gwerdd)}
-._j7hq1x5b{animation-name:kfhns1k}
-@keyframes kfhns1k{20%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}75%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}to{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}0%{background-color:transparent}}
+._j7hq1j1q{animation-name:k9373e0}
+@keyframes k9373e0{20%{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}75%{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}to{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}0%{background-color:transparent}}

package/dist/cjs/components/FlashAnimation.js

@@ -9,7 +9,6 @@ exports.RENDER_FLASHANIMATION_TESTID = exports.FlashAnimation = void 0;
 require("./FlashAnimation.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var flashTime = 700;
 var flashAnimation = null;
@@ -25,11 +24,9 @@ var RENDER_FLASHANIMATION_TESTID = exports.RENDER_FLASHANIMATION_TESTID = 'flash
 var FlashAnimation = exports.FlashAnimation = function FlashAnimation(props) {
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1x5b _5sagolkx _1pgl1ytf", props.className]),
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1j1q _5sagolkx _1pgl1ytf", props.className]),
     "data-testid": RENDER_FLASHANIMATION_TESTID,
     style: {
-      "--_17s7zfd": (0, _runtime.ix)("var(--ds-background-selected-pressed, ".concat(_colors.B75, ")")),
-      "--_8ijx7f": (0, _runtime.ix)("var(--ds-border-selected, ".concat(_colors.B300, ")")),
       "--_gwerdd": (0, _runtime.ix)("".concat(flashTime, "ms"))
     }
   }, props.children);

package/dist/cjs/components/ReactionPicker.compiled.css

@@ -1,9 +1,9 @@
 
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs1a23{box-shadow:var(--_3t1odq)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e0c1txw{display:flex}
 ._1pra1o8l.miniMode{display:inline-block}
 ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
-._bfhk13b4{background-color:var(--_1f6rtr1)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._s7n4nkob{vertical-align:middle}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}

package/dist/cjs/components/ReactionPicker.js

@@ -26,7 +26,6 @@ var _ufo = require("../ufo");
 var _Selector = require("./Selector");
 var _Trigger = require("./Trigger");
 var _RepositionOnUpdate = require("./RepositionOnUpdate");
-var _colors = require("@atlaskit/theme/colors");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -420,11 +419,7 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       update: update,
       settings: settings
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _runtime.ax)(["_2rkofajl _bfhk13b4 _16qs1a23 _79pa1b66"]),
-      style: {
-        "--_1f6rtr1": (0, _runtime.ix)("var(--ds-surface-overlay, ".concat(_colors.N0, ")")),
-        "--_3t1odq": (0, _runtime.ix)("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"))
-      }
+      className: (0, _runtime.ax)(["_2rkofajl _bfhk1bhr _16qs130s _79pa1b66"])
     }, children)));
   });
 };

package/dist/cjs/components/ReactionTooltip.compiled.css

@@ -31,9 +31,9 @@
 ._o5721q9c{white-space:nowrap}
 ._otyr14y2{margin-bottom:5px}
 ._p12f1w81{max-width:150px}
-._syaz1lqe{color:var(--_14nrcaz)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._u0h115vq li{overflow-y:hidden}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._y3gn1e5h{text-align:left}
-._30l31i9p:hover{color:var(--_ywovvi)}
-._irr3pioe:hover{background-color:var(--_yr7xfv)}
+._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
+._irr31aqn:hover{background-color:var(--ds-background-neutral-bold,#292a2e)}

package/dist/cjs/components/ReactionTooltip.js

@@ -12,7 +12,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../shared/constants");
 var _i18n = require("../shared/i18n");
@@ -51,10 +50,7 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     tabIndex: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? undefined : 0,
     className: (0, _runtime.ax)(["_1reo15vq _18m915vq _p12f1w81 _1bto1l2s _o5721q9c _otyr14y2 _d1n8glyw _102oidpf _1kvxidpf _1ysjidpf _17d4idpf _1hziidpf _3n4midpf _ltofidpf _k7zyidpf _1ywo1e5h _1pru15vq _u0h115vq _5qec1l2s _1eg614y2"])
   }, /*#__PURE__*/_react.default.createElement("ul", null, emojiName ? /*#__PURE__*/_react.default.createElement("li", {
-    className: (0, _runtime.ax)(["_1p1d1dk0 _syaz1lqe _k48p1pd9"]),
-    style: {
-      "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")"))
-    }
+    className: (0, _runtime.ax)(["_1p1d1dk0 _syaz15cr _k48p1pd9"])
   }, emojiName) : null, users.slice(0, maxReactions).map(function (user) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: user.id
@@ -62,21 +58,13 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
   }), (0, _platformFeatureFlags.fg)('platform_reactions_tooltip_a11y') ? users.length > maxReactions && (allowUserDialog && handleOpenReactionsDialog ? /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     onClick: handleClick,
-    className: (0, _runtime.ax)(["_19itglyw _11c8wadc _1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1bsb1osq _y3gn1e5h _1bto1l2s", "_syaz1lqe", "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
-    style: {
-      "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")")),
-      "--_yr7xfv": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.N800, ")")),
-      "--_ywovvi": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N0, ")"))
-    }
+    className: (0, _runtime.ax)(["_19itglyw _11c8wadc _1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1bsb1osq _y3gn1e5h _1bto1l2s", "_syaz15cr", "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr31aqn _30l315cr"])
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
   })))) : /*#__PURE__*/_react.default.createElement("li", {
-    className: (0, _runtime.ax)(["_syaz1lqe"]),
-    style: {
-      "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")"))
-    }
+    className: (0, _runtime.ax)(["_syaz15cr"])
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions
@@ -85,12 +73,7 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     onMouseDown: handleClick,
     onClick: handleClick,
     onKeyDown: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
-    className: (0, _runtime.ax)(["_syaz1lqe", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
-    style: {
-      "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")")),
-      "--_yr7xfv": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.N800, ")")),
-      "--_ywovvi": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N0, ")"))
-    }
+    className: (0, _runtime.ax)(["_syaz15cr", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr31aqn _30l315cr"])
   }, users.length > maxReactions && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions

package/dist/cjs/components/ReactionView.compiled.css

@@ -17,6 +17,6 @@
 ._ca0qidpf{padding-top:0}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdidpf{padding-bottom:0}
-._thoc15n8 li{color:var(--_1zdack)}
+._thoci7uo li{color:var(--ds-text,#292a2e)}
 ._u5f3idpf{padding-right:0}
 ._y3gn1e5h{text-align:left}

package/dist/cjs/components/ReactionView.js

@@ -11,7 +11,6 @@ require("./ReactionView.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 var _Avatar = _interopRequireDefault(require("@atlaskit/avatar/Avatar"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tabs = require("@atlaskit/tabs");
@@ -44,10 +43,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
     size: "large",
     interactionName: "reactions-spinner"
   })) : /*#__PURE__*/React.createElement("ul", {
-    className: (0, _runtime.ax)(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccufhey _thoc15n8"]),
-    style: {
-      "--_1zdack": (0, _runtime.ix)("".concat("var(--ds-text, ".concat(_colors.N500, ")")))
-    }
+    className: (0, _runtime.ax)(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccufhey _thoci7uo"])
   }, alphabeticalNames.map(function (user) {
     var _user$profilePicture;
     var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;

package/dist/cjs/components/ReactionsDialogHeader.compiled.css

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zl17ba{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
+._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/cjs/components/ReactionsDialogHeader.js

@@ -155,7 +155,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _n7zl17ba _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _n7zlia51 _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
   }), /*#__PURE__*/React.createElement(_tabs.TabList, null, currentReactions.map(function (reaction, index) {

package/dist/es2019/analytics/index.js

@@ -2,7 +2,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 = "33.8.24";
+const packageVersion = "0.0.0-development";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/Counter.compiled.css

@@ -9,8 +9,8 @@
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vwz4dlk8{line-height:14px}

package/dist/es2019/components/Counter.js

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useRef } from 'react';
 import { SlideIn, ExitingPersistence } from '@atlaskit/motion';
 import { formatLargeNumber } from '../shared/utils';
-import { B400 } from '@atlaskit/theme/colors';
 const containerStyle = null;
 const counterLabelStyle = null;
 const countStyle = null;
@@ -80,7 +79,7 @@ export const Counter = ({
     }, /*#__PURE__*/React.createElement("span", {
       "data-testid": RENDER_LABEL_TESTID,
       key: value,
-      className: ax(["_1x821ts4", highlight && "_syaz1ldt"])
+      className: ax(["_1x821ts4", highlight && "_syaz6x5g"])
     }, label));
   })));
 };

package/dist/es2019/components/FlashAnimation.compiled.css

@@ -2,5 +2,5 @@
 ._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1osq{height:100%}
 ._5sagpwmj{animation-duration:.7s}
-._j7hqdjji{animation-name:k1qrjcqm}
-@keyframes k1qrjcqm{20%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}75%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}to{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}0%{background-color:transparent}}
+._j7hq1j1q{animation-name:k9373e0}
+@keyframes k9373e0{20%{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}75%{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}to{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}0%{background-color:transparent}}

package/dist/es2019/components/FlashAnimation.js

@@ -2,7 +2,6 @@
 import "./FlashAnimation.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { B75, B300 } from '@atlaskit/theme/colors';
 const flashTime = 700;
 const flashAnimation = null;
 const containerStyle = null;
@@ -16,6 +15,6 @@ export const RENDER_FLASHANIMATION_TESTID = 'flash-animation';
  */
 export const FlashAnimation = props => /*#__PURE__*/React.createElement("div", {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hqdjji _5sagpwmj _1pgl1ytf", props.className]),
+  className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1j1q _5sagpwmj _1pgl1ytf", props.className]),
   "data-testid": RENDER_FLASHANIMATION_TESTID
 }, props.children);

package/dist/es2019/components/ReactionPicker.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs1kf5{box-shadow:var(--ds-shadow-overlay,0 4px 8px -2px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e0c1txw{display:flex}
 ._1pra1o8l.miniMode{display:inline-block}
 ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}

package/dist/es2019/components/ReactionPicker.js

@@ -16,7 +16,6 @@ import { PickerRender } from '../ufo';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { RepositionOnUpdate } from './RepositionOnUpdate';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import Portal from '@atlaskit/portal';
 const pickerStyle = null;
 const popupWrapperStyle = null;
@@ -376,7 +375,7 @@ export const PopperWrapper = props => {
       update: update,
       settings: settings
     }, /*#__PURE__*/React.createElement("div", {
-      className: ax(["_2rkofajl _bfhk1bhr _16qs1kf5 _79pa1b66"])
+      className: ax(["_2rkofajl _bfhk1bhr _16qs130s _79pa1b66"])
     }, children)));
   });
 };

package/dist/es2019/components/ReactionTooltip.compiled.css

@@ -31,9 +31,9 @@
 ._o5721q9c{white-space:nowrap}
 ._otyr14y2{margin-bottom:5px}
 ._p12f1w81{max-width:150px}
-._syaz6r0x{color:var(--ds-text-inverse,#8993a4)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._u0h115vq li{overflow-y:hidden}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._y3gn1e5h{text-align:left}
 ._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
-._irr3gkf6:hover{background-color:var(--ds-background-neutral-bold,#172b4d)}
+._irr31aqn:hover{background-color:var(--ds-background-neutral-bold,#292a2e)}

package/dist/es2019/components/ReactionTooltip.js

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N90, N800, N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { TOOLTIP_USERS_LIMIT } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -44,7 +43,7 @@ export const ReactionTooltip = ({
     tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
     className: ax(["_1reo15vq _18m915vq _p12f1w81 _1bto1l2s _o5721q9c _otyr14y2 _d1n8glyw _102oidpf _1kvxidpf _1ysjidpf _17d4idpf _1hziidpf _3n4midpf _ltofidpf _k7zyidpf _1ywo1e5h _1pru15vq _u0h115vq _5qec1l2s _1eg614y2"])
   }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
-    className: ax(["_1p1d1dk0 _syaz6r0x _k48p1pd9"])
+    className: ax(["_1p1d1dk0 _syaz15cr _k48p1pd9"])
   }, emojiName) : null, users.slice(0, maxReactions).map(user => {
     return /*#__PURE__*/React.createElement("li", {
       key: user.id
@@ -52,13 +51,13 @@ export const ReactionTooltip = ({
   }), fg('platform_reactions_tooltip_a11y') ? users.length > maxReactions && (allowUserDialog && handleOpenReactionsDialog ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleClick,
-    className: ax(["_19itglyw _11c8wadc _1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1bsb1osq _y3gn1e5h _1bto1l2s", "_syaz6r0x", "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3gkf6 _30l315cr"])
+    className: ax(["_19itglyw _11c8wadc _1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1bsb1osq _y3gn1e5h _1bto1l2s", "_syaz15cr", "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr31aqn _30l315cr"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
   })))) : /*#__PURE__*/React.createElement("li", {
-    className: ax(["_syaz6r0x"])
+    className: ax(["_syaz15cr"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions
@@ -67,7 +66,7 @@ export const ReactionTooltip = ({
     onMouseDown: handleClick,
     onClick: handleClick,
     onKeyDown: fg('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
-    className: ax(["_syaz6r0x", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3gkf6 _30l315cr"])
+    className: ax(["_syaz15cr", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr31aqn _30l315cr"])
   }, users.length > maxReactions && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions

package/dist/es2019/components/ReactionView.compiled.css

@@ -17,6 +17,6 @@
 ._ca0qidpf{padding-top:0}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdidpf{padding-bottom:0}
-._thoc10s3 li{color:var(--ds-text,#42526e)}
+._thoci7uo li{color:var(--ds-text,#292a2e)}
 ._u5f3idpf{padding-right:0}
 ._y3gn1e5h{text-align:left}

package/dist/es2019/components/ReactionView.js

@@ -3,7 +3,6 @@ import "./ReactionView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo } from 'react';
-import { N500 } from '@atlaskit/theme/colors';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { TabPanel } from '@atlaskit/tabs';
@@ -34,7 +33,7 @@ export const ReactionView = ({
     size: "large",
     interactionName: "reactions-spinner"
   })) : /*#__PURE__*/React.createElement("ul", {
-    className: ax(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccufhey _thoc10s3"])
+    className: ax(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccufhey _thoci7uo"])
   }, alphabeticalNames.map(user => {
     var _user$profilePicture;
     const profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;

package/dist/es2019/components/ReactionsDialogHeader.compiled.css

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zl17ba{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
+._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/es2019/components/ReactionsDialogHeader.js

@@ -126,7 +126,7 @@ export const ReactionsDialogHeader = ({
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: ax(["_1reo1wug _18m91wug _n7zl17ba _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
+    className: ax(["_1reo1wug _18m91wug _n7zlia51 _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
   }), /*#__PURE__*/React.createElement(TabList, null, currentReactions.map((reaction, index) => {

package/dist/esm/analytics/index.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "33.8.24";
+var packageVersion = "0.0.0-development";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/Counter.compiled.css

@@ -10,7 +10,7 @@
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}
-._syazln51{color:var(--_1hfkvbo)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vwz4dlk8{line-height:14px}

package/dist/esm/components/Counter.js

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useRef } from 'react';
 import { SlideIn, ExitingPersistence } from '@atlaskit/motion';
 import { formatLargeNumber } from '../shared/utils';
-import { B400 } from '@atlaskit/theme/colors';
 var containerStyle = null;
 var counterLabelStyle = null;
 var countStyle = null;
@@ -81,10 +80,7 @@ export var Counter = function Counter(_ref) {
     }, /*#__PURE__*/React.createElement("span", {
       "data-testid": RENDER_LABEL_TESTID,
       key: value,
-      className: ax(["_1x821ts4", highlight && "_syazln51"]),
-      style: {
-        "--_1hfkvbo": ix("var(--ds-text-selected, ".concat(B400, ")"))
-      }
+      className: ax(["_1x821ts4", highlight && "_syaz6x5g"])
     }, label));
   })));
 };

package/dist/esm/components/FlashAnimation.compiled.css

@@ -2,5 +2,5 @@
 ._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1osq{height:100%}
 ._5sagolkx{animation-duration:var(--_gwerdd)}
-._j7hq1x5b{animation-name:kfhns1k}
-@keyframes kfhns1k{20%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}75%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}to{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}0%{background-color:transparent}}
+._j7hq1j1q{animation-name:k9373e0}
+@keyframes k9373e0{20%{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}75%{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}to{border-color:var(--ds-border-selected,#1868db);background-color:var(--ds-background-selected-pressed,#8fb8f6)}0%{background-color:transparent}}

package/dist/esm/components/FlashAnimation.js

@@ -2,7 +2,6 @@
 import "./FlashAnimation.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { B75, B300 } from '@atlaskit/theme/colors';
 var flashTime = 700;
 var flashAnimation = null;
 var containerStyle = null;
@@ -17,11 +16,9 @@ export var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
 export var FlashAnimation = function FlashAnimation(props) {
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1x5b _5sagolkx _1pgl1ytf", props.className]),
+    className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1j1q _5sagolkx _1pgl1ytf", props.className]),
     "data-testid": RENDER_FLASHANIMATION_TESTID,
     style: {
-      "--_17s7zfd": ix("var(--ds-background-selected-pressed, ".concat(B75, ")")),
-      "--_8ijx7f": ix("var(--ds-border-selected, ".concat(B300, ")")),
       "--_gwerdd": ix("".concat(flashTime, "ms"))
     }
   }, props.children);

package/dist/esm/components/ReactionPicker.compiled.css

@@ -1,9 +1,9 @@
 
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs1a23{box-shadow:var(--_3t1odq)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e0c1txw{display:flex}
 ._1pra1o8l.miniMode{display:inline-block}
 ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
-._bfhk13b4{background-color:var(--_1f6rtr1)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._s7n4nkob{vertical-align:middle}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}

package/dist/esm/components/ReactionPicker.js

@@ -20,7 +20,6 @@ import { PickerRender } from '../ufo';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { RepositionOnUpdate } from './RepositionOnUpdate';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import Portal from '@atlaskit/portal';
 var pickerStyle = null;
 var popupWrapperStyle = null;
@@ -411,11 +410,7 @@ export var PopperWrapper = function PopperWrapper(props) {
       update: update,
       settings: settings
     }, /*#__PURE__*/React.createElement("div", {
-      className: ax(["_2rkofajl _bfhk13b4 _16qs1a23 _79pa1b66"]),
-      style: {
-        "--_1f6rtr1": ix("var(--ds-surface-overlay, ".concat(N0, ")")),
-        "--_3t1odq": ix("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"))
-      }
+      className: ax(["_2rkofajl _bfhk1bhr _16qs130s _79pa1b66"])
     }, children)));
   });
 };

package/dist/esm/components/ReactionTooltip.compiled.css

@@ -31,9 +31,9 @@
 ._o5721q9c{white-space:nowrap}
 ._otyr14y2{margin-bottom:5px}
 ._p12f1w81{max-width:150px}
-._syaz1lqe{color:var(--_14nrcaz)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._u0h115vq li{overflow-y:hidden}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._y3gn1e5h{text-align:left}
-._30l31i9p:hover{color:var(--_ywovvi)}
-._irr3pioe:hover{background-color:var(--_yr7xfv)}
+._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
+._irr31aqn:hover{background-color:var(--ds-background-neutral-bold,#292a2e)}

package/dist/esm/components/ReactionTooltip.js

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N90, N800, N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { TOOLTIP_USERS_LIMIT } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -44,10 +43,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
     className: ax(["_1reo15vq _18m915vq _p12f1w81 _1bto1l2s _o5721q9c _otyr14y2 _d1n8glyw _102oidpf _1kvxidpf _1ysjidpf _17d4idpf _1hziidpf _3n4midpf _ltofidpf _k7zyidpf _1ywo1e5h _1pru15vq _u0h115vq _5qec1l2s _1eg614y2"])
   }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
-    className: ax(["_1p1d1dk0 _syaz1lqe _k48p1pd9"]),
-    style: {
-      "--_14nrcaz": ix("var(--ds-text-inverse, ".concat(N90, ")"))
-    }
+    className: ax(["_1p1d1dk0 _syaz15cr _k48p1pd9"])
   }, emojiName) : null, users.slice(0, maxReactions).map(function (user) {
     return /*#__PURE__*/React.createElement("li", {
       key: user.id
@@ -55,21 +51,13 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
   }), fg('platform_reactions_tooltip_a11y') ? users.length > maxReactions && (allowUserDialog && handleOpenReactionsDialog ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleClick,
-    className: ax(["_19itglyw _11c8wadc _1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1bsb1osq _y3gn1e5h _1bto1l2s", "_syaz1lqe", "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
-    style: {
-      "--_14nrcaz": ix("var(--ds-text-inverse, ".concat(N90, ")")),
-      "--_yr7xfv": ix("var(--ds-background-neutral-bold, ".concat(N800, ")")),
-      "--_ywovvi": ix("var(--ds-text-inverse, ".concat(N0, ")"))
-    }
+    className: ax(["_19itglyw _11c8wadc _1reo15vq _18m915vq _bfhk1j28 _1e0c1ule _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1bsb1osq _y3gn1e5h _1bto1l2s", "_syaz15cr", "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr31aqn _30l315cr"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
   })))) : /*#__PURE__*/React.createElement("li", {
-    className: ax(["_syaz1lqe"]),
-    style: {
-      "--_14nrcaz": ix("var(--ds-text-inverse, ".concat(N90, ")"))
-    }
+    className: ax(["_syaz15cr"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions
@@ -78,12 +66,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     onMouseDown: handleClick,
     onClick: handleClick,
     onKeyDown: fg('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
-    className: ax(["_syaz1lqe", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
-    style: {
-      "--_14nrcaz": ix("var(--ds-text-inverse, ".concat(N90, ")")),
-      "--_yr7xfv": ix("var(--ds-background-neutral-bold, ".concat(N800, ")")),
-      "--_ywovvi": ix("var(--ds-text-inverse, ".concat(N0, ")"))
-    }
+    className: ax(["_syaz15cr", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr31aqn _30l315cr"])
   }, users.length > maxReactions && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions

package/dist/esm/components/ReactionView.compiled.css

@@ -17,6 +17,6 @@
 ._ca0qidpf{padding-top:0}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdidpf{padding-bottom:0}
-._thoc15n8 li{color:var(--_1zdack)}
+._thoci7uo li{color:var(--ds-text,#292a2e)}
 ._u5f3idpf{padding-right:0}
 ._y3gn1e5h{text-align:left}

package/dist/esm/components/ReactionView.js

@@ -3,7 +3,6 @@ import "./ReactionView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo } from 'react';
-import { N500 } from '@atlaskit/theme/colors';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { TabPanel } from '@atlaskit/tabs';
@@ -35,10 +34,7 @@ export var ReactionView = function ReactionView(_ref) {
     size: "large",
     interactionName: "reactions-spinner"
   })) : /*#__PURE__*/React.createElement("ul", {
-    className: ax(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccufhey _thoc15n8"]),
-    style: {
-      "--_1zdack": ix("".concat("var(--ds-text, ".concat(N500, ")")))
-    }
+    className: ax(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccufhey _thoci7uo"])
   }, alphabeticalNames.map(function (user) {
     var _user$profilePicture;
     var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;

package/dist/esm/components/ReactionsDialogHeader.compiled.css

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zl17ba{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
+._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/esm/components/ReactionsDialogHeader.js

@@ -147,7 +147,7 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref3) {
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: ax(["_1reo1wug _18m91wug _n7zl17ba _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
+    className: ax(["_1reo1wug _18m91wug _n7zlia51 _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
   }), /*#__PURE__*/React.createElement(TabList, null, currentReactions.map(function (reaction, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.8.24",
+	"version": "33.8.25",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/modal-dialog": "^14.12.0",
+		"@atlaskit/modal-dialog": "^14.13.0",
 		"@atlaskit/motion": "^5.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",