@atlaskit/reactions 22.5.2 → 22.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 22.5.3
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
 ## 22.5.2
 
 ### Patch Changes

package/dist/cjs/MockReactionsClient.js

@@ -12,8 +12,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _shared = require("./shared");
-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 = 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 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 containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
 exports.containerAri = containerAri;
 var ari = 'ari:cloud:owner:demo-cloud-id:item/1';

package/dist/cjs/analytics/analytics.js

@@ -8,10 +8,10 @@ exports.isSampled = exports.extractErrorInfo = exports.createRestSucceededEvent
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
-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 = 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 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.5.2";
+var packageVersion = "22.5.3";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/client/ReactionServiceClient.js

@@ -9,8 +9,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utilServiceSupport = require("@atlaskit/util-service-support");
-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 = 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 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; }
 /**
  * Utility class to retrieve/modify all actions on reactions collection
  */

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

@@ -13,7 +13,7 @@ var countStyle = (0, _react.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
   overflow: 'hidden',
   position: 'relative',
-  padding: '4px 8px 4px 0',
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)", " 0"),
   lineHeight: '14px'
 });
 exports.countStyle = countStyle;

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

@@ -15,7 +15,7 @@ var emojiButtonStyle = (0, _react.css)({
   borderRadius: '5px',
   cursor: 'pointer',
   margin: '0',
-  padding: '10px 8px',
+  padding: "10px ".concat("var(--ds-space-100, 8px)"),
   '&:hover > span': {
     transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
     transform: 'scale(1.33)'

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

@@ -145,7 +145,7 @@ var Reaction = function Reaction(_ref) {
     css: styles.flashStyle
   }, (0, _react2.jsx)("div", {
     css: [styles.emojiStyle, reaction.count === 0 && {
-      padding: '4px 2px 4px 10px'
+      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
     }]
   }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,

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

@@ -22,7 +22,7 @@ var akHeight = 24;
 var emojiStyle = (0, _react.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
-  padding: '4px 4px 4px 8px'
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-100, 8px)")
 });
 exports.emojiStyle = emojiStyle;
 var reactionStyle = (0, _react.css)({
@@ -37,7 +37,7 @@ var reactionStyle = (0, _react.css)({
   borderRadius: '20px',
   color: "".concat("var(--ds-text-subtle, ".concat(_colors.N400, ")")),
   cursor: 'pointer',
-  margin: '4px 4px 0 0',
+  margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " 0 0"),
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {

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

@@ -89,6 +89,7 @@ var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, th
     justifyContent: 'center',
     minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
     minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginRight: "".concat(REACTION_RIGHT_MARGIN, "px"),
     boxSizing: 'border-box',
     position: 'relative',
@@ -130,12 +131,12 @@ var navigationContainerStyle = (0, _react.css)({
     cursor: 'pointer'
   },
   'button:last-child': {
-    marginLeft: '16px'
+    marginLeft: "var(--ds-space-200, 16px)"
   }
 });
 exports.navigationContainerStyle = navigationContainerStyle;
 var reactionViewStyle = (0, _react.css)({
-  marginTop: '24px',
+  marginTop: "var(--ds-space-300, 24px)",
   display: 'flex',
   flexDirection: 'column',
   p: {
@@ -146,14 +147,14 @@ var reactionViewStyle = (0, _react.css)({
     fontSize: 16,
     lineHeight: '20px',
     '> span': {
-      marginRight: 8
+      marginRight: "var(--ds-space-100, 8px)"
     }
   }
 });
 exports.reactionViewStyle = reactionViewStyle;
 var userListStyle = (0, _react.css)({
   listStyle: 'none',
-  marginTop: 16,
+  marginTop: "var(--ds-space-200, 16px)",
   padding: 0,
   textAlign: 'left',
   li: {
@@ -165,9 +166,9 @@ exports.userListStyle = userListStyle;
 var userStyle = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
-  padding: '8px 0px 8px 0px',
+  padding: "var(--ds-space-100, 8px)".concat(" 0px ", "var(--ds-space-100, 8px)", " 0px"),
   '> span': {
-    marginLeft: 16
+    marginLeft: "var(--ds-space-200, 16px)"
   }
 });
 exports.userStyle = userStyle;
@@ -175,7 +176,7 @@ var customTabListStyles = (0, _react.css)({
   overflow: 'auto',
   scrollBehavior: 'smooth',
   display: 'flex',
-  paddingBottom: 4,
+  paddingBottom: "var(--ds-space-050, 4px)",
   'div[role=tablist]': {
     flexGrow: 1
   }

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

@@ -24,8 +24,8 @@ var _useFocusTrap = require("../../hooks/useFocusTrap");
 var _RepositionOnUpdate = require("./RepositionOnUpdate");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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); 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 = 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; } /** @jsx jsx */
+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; } /** @jsx jsx */
 /**
  * Test id for wrapper ReactionPicker div
  */

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

@@ -32,8 +32,8 @@ var popupStyle = (0, _react.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   '&> div': {
     boxShadow: undefined,
-    marginTop: '4px',
-    marginBottom: '4px'
+    marginTop: "var(--ds-space-050, 4px)",
+    marginBottom: "var(--ds-space-050, 4px)"
   }
 });
 exports.popupStyle = popupStyle;

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

@@ -9,7 +9,7 @@ var _react = require("@emotion/react");
 
 var reactionPickerStyle = (0, _react.css)({
   display: 'inline-block',
-  marginTop: '4px'
+  marginTop: "var(--ds-space-050, 4px)"
 });
 exports.reactionPickerStyle = reactionPickerStyle;
 var seeWhoReacted = (0, _react.css)({
@@ -17,8 +17,8 @@ var seeWhoReacted = (0, _react.css)({
   lineHeight: '24px',
   paddingLeft: 0,
   paddingRight: 0,
-  marginTop: '4px',
-  marginLeft: '4px'
+  marginTop: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-050, 4px)"
 });
 exports.seeWhoReacted = seeWhoReacted;
 var wrapperStyle = (0, _react.css)({
@@ -27,7 +27,7 @@ var wrapperStyle = (0, _react.css)({
   position: 'relative',
   alignItems: 'center',
   borderRadius: '15px',
-  marginTop: '-4px',
+  marginTop: "var(--ds-space-negative-050, -4px)",
   '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }

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

@@ -20,8 +20,8 @@ var moreButtonStyle = (0, _react.css)({
   border: 0,
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   cursor: 'pointer',
-  margin: '4px 4px 4px 0',
-  padding: '4px',
+  margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " 0"),
+  padding: "var(--ds-space-050, 4px)",
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
@@ -31,7 +31,7 @@ var moreButtonStyle = (0, _react.css)({
 exports.moreButtonStyle = moreButtonStyle;
 var separatorStyle = (0, _react.css)({
   backgroundColor: "var(--ds-border, ".concat(_colors.N30A, ")"),
-  margin: '8px 8px 8px 4px',
+  margin: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)"),
   width: '1px',
   height: '60%',
   display: 'inline-block'

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

@@ -9,8 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
-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 = 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; } /** @jsx jsx */
+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; } /** @jsx jsx */
 var DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(_colors.N70, ")"), " !important");
 exports.DISABLED_BUTTON_COLOR = DISABLED_BUTTON_COLOR;
 var triggerStyle = function triggerStyle(_ref) {
@@ -30,7 +30,7 @@ var triggerStyle = function triggerStyle(_ref) {
     lineHeight: '16px'
   }, miniMode && {
     minWidth: '24px',
-    padding: '4px',
+    padding: "var(--ds-space-050, 4px)",
     border: 'none',
     borderRadius: "".concat((0, _constants.borderRadius)(), "px")
   }), disabled && {

package/dist/cjs/store/MemoryReactionsStore.js

@@ -18,8 +18,8 @@ var _ufo = require("../analytics/ufo");
 var _analytics2 = require("../analytics/analytics");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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); 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 = 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 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; }
 /**
  * Set of all available UFO experiences relating to reaction element
  */

package/dist/cjs/store/utils.js

@@ -9,8 +9,8 @@ exports.isRealErrorFromService = isRealErrorFromService;
 exports.updateByEmojiId = exports.removeOne = exports.readyState = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _types = require("../types");
-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 = 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 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 compareEmojiId = function compareEmojiId(l, r) {
   return l.localeCompare(r);
 };

package/dist/es2019/analytics/analytics.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.5.2";
+const packageVersion = "22.5.3";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/analytics/index.js

@@ -1,4 +1,2 @@
-import * as _Analytics from './analytics';
-export { _Analytics as Analytics };
-import * as _UFO from './ufo';
-export { _UFO as UFO };
+export * as Analytics from './analytics';
+export * as UFO from './ufo';

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

@@ -1,3 +1,2 @@
 export { Counter, RENDER_COUNTER_TESTID, RENDER_COMPONENT_WRAPPER, RENDER_LABEL_TESTID } from './Counter';
-import * as _styles from './styles';
-export { _styles as styles };
+export * as styles from './styles';

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

@@ -6,7 +6,7 @@ export const countStyle = css({
   color: `var(--ds-text-subtlest, ${N90})`,
   overflow: 'hidden',
   position: 'relative',
-  padding: '4px 8px 4px 0',
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"} 0`,
   lineHeight: '14px'
 });
 export const containerStyle = css({

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

@@ -8,7 +8,7 @@ export const emojiButtonStyle = css({
   borderRadius: '5px',
   cursor: 'pointer',
   margin: '0',
-  padding: '10px 8px',
+  padding: `10px ${"var(--ds-space-100, 8px)"}`,
   '&:hover > span': {
     transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
     transform: 'scale(1.33)'

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

@@ -109,7 +109,7 @@ export const Reaction = ({
     css: styles.flashStyle
   }, jsx("div", {
     css: [styles.emojiStyle, reaction.count === 0 && {
-      padding: '4px 2px 4px 10px'
+      padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} 10px`
     }]
   }, jsx(ResourcedEmoji, {
     emojiProvider: emojiProvider,

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

@@ -15,7 +15,7 @@ const akHeight = 24;
 export const emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
-  padding: '4px 4px 4px 8px'
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`
 });
 export const reactionStyle = css({
   display: 'flex',
@@ -29,7 +29,7 @@ export const reactionStyle = css({
   borderRadius: '20px',
   color: `${`var(--ds-text-subtle, ${N400})`}`,
   cursor: 'pointer',
-  margin: '4px 4px 0 0',
+  margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0 0`,
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {

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

@@ -72,6 +72,7 @@ export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   justifyContent: 'center',
   minWidth: `${REACTIONS_CONTAINER_WIDTH}px`,
   minHeight: `${REACTION_CONTAINER_HEIGHT}px`,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginRight: `${REACTION_RIGHT_MARGIN}px`,
   boxSizing: 'border-box',
   position: 'relative',
@@ -111,11 +112,11 @@ export const navigationContainerStyle = css({
     cursor: 'pointer'
   },
   'button:last-child': {
-    marginLeft: '16px'
+    marginLeft: "var(--ds-space-200, 16px)"
   }
 });
 export const reactionViewStyle = css({
-  marginTop: '24px',
+  marginTop: "var(--ds-space-300, 24px)",
   display: 'flex',
   flexDirection: 'column',
   p: {
@@ -126,13 +127,13 @@ export const reactionViewStyle = css({
     fontSize: 16,
     lineHeight: '20px',
     '> span': {
-      marginRight: 8
+      marginRight: "var(--ds-space-100, 8px)"
     }
   }
 });
 export const userListStyle = css({
   listStyle: 'none',
-  marginTop: 16,
+  marginTop: "var(--ds-space-200, 16px)",
   padding: 0,
   textAlign: 'left',
   li: {
@@ -143,16 +144,16 @@ export const userListStyle = css({
 export const userStyle = css({
   display: 'flex',
   alignItems: 'center',
-  padding: '8px 0px 8px 0px',
+  padding: `${"var(--ds-space-100, 8px)"} 0px ${"var(--ds-space-100, 8px)"} 0px`,
   '> span': {
-    marginLeft: 16
+    marginLeft: "var(--ds-space-200, 16px)"
   }
 });
 export const customTabListStyles = css({
   overflow: 'auto',
   scrollBehavior: 'smooth',
   display: 'flex',
-  paddingBottom: 4,
+  paddingBottom: "var(--ds-space-050, 4px)",
   'div[role=tablist]': {
     flexGrow: 1
   }

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

@@ -22,7 +22,7 @@ export const popupStyle = css({
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   '&> div': {
     boxShadow: undefined,
-    marginTop: '4px',
-    marginBottom: '4px'
+    marginTop: "var(--ds-space-050, 4px)",
+    marginBottom: "var(--ds-space-050, 4px)"
   }
 });

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

@@ -2,15 +2,15 @@
 import { css } from '@emotion/react';
 export const reactionPickerStyle = css({
   display: 'inline-block',
-  marginTop: '4px'
+  marginTop: "var(--ds-space-050, 4px)"
 });
 export const seeWhoReacted = css({
   height: '24px',
   lineHeight: '24px',
   paddingLeft: 0,
   paddingRight: 0,
-  marginTop: '4px',
-  marginLeft: '4px'
+  marginTop: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-050, 4px)"
 });
 export const wrapperStyle = css({
   display: 'flex',
@@ -18,7 +18,7 @@ export const wrapperStyle = css({
   position: 'relative',
   alignItems: 'center',
   borderRadius: '15px',
-  marginTop: '-4px',
+  marginTop: "var(--ds-space-negative-050, -4px)",
   '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }

package/dist/es2019/components/Selector/index.js

@@ -1,3 +1,2 @@
 export { Selector, RENDER_SELECTOR_TESTID } from './Selector';
-import * as _styles from './styles';
-export { _styles as styles };
+export * as styles from './styles';

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

@@ -12,8 +12,8 @@ export const moreButtonStyle = css({
   border: 0,
   borderRadius: `${borderRadius()}px`,
   cursor: 'pointer',
-  margin: '4px 4px 4px 0',
-  padding: '4px',
+  margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0`,
+  padding: "var(--ds-space-050, 4px)",
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
@@ -22,7 +22,7 @@ export const moreButtonStyle = css({
 });
 export const separatorStyle = css({
   backgroundColor: `var(--ds-border, ${N30A})`,
-  margin: '8px 8px 8px 4px',
+  margin: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`,
   width: '1px',
   height: '60%',
   display: 'inline-block'

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

@@ -18,7 +18,7 @@ export const triggerStyle = ({
   lineHeight: '16px',
   ...(miniMode && {
     minWidth: '24px',
-    padding: '4px',
+    padding: "var(--ds-space-050, 4px)",
     border: 'none',
     borderRadius: `${borderRadius()}px`
   }),

package/dist/es2019/shared/index.js

@@ -1,6 +1,3 @@
-import * as _constants from './constants';
-export { _constants as constants };
-import * as _utils from './utils';
-export { _utils as utils };
-import * as _i18n from './i18n';
-export { _i18n as i18n };
+export * as constants from './constants';
+export * as utils from './utils';
+export * as i18n from './i18n';

package/dist/esm/MockReactionsClient.js

@@ -3,8 +3,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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) { _defineProperty(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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { constants } from './shared';
 export var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';

package/dist/esm/analytics/analytics.js

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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) { _defineProperty(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; }
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "22.5.2";
+var packageVersion = "22.5.3";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/client/ReactionServiceClient.js

@@ -1,8 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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) { _defineProperty(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; }
 import { utils } from '@atlaskit/util-service-support';
 /**
  * Utility class to retrieve/modify all actions on reactions collection

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

@@ -6,7 +6,7 @@ export var countStyle = css({
   color: "var(--ds-text-subtlest, ".concat(N90, ")"),
   overflow: 'hidden',
   position: 'relative',
-  padding: '4px 8px 4px 0',
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)", " 0"),
   lineHeight: '14px'
 });
 export var containerStyle = css({

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

@@ -8,7 +8,7 @@ export var emojiButtonStyle = css({
   borderRadius: '5px',
   cursor: 'pointer',
   margin: '0',
-  padding: '10px 8px',
+  padding: "10px ".concat("var(--ds-space-100, 8px)"),
   '&:hover > span': {
     transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
     transform: 'scale(1.33)'

package/dist/esm/components/Reaction/Reaction.js

@@ -133,7 +133,7 @@ export var Reaction = function Reaction(_ref) {
     css: styles.flashStyle
   }, jsx("div", {
     css: [styles.emojiStyle, reaction.count === 0 && {
-      padding: '4px 2px 4px 10px'
+      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
     }]
   }, jsx(ResourcedEmoji, {
     emojiProvider: emojiProvider,

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

@@ -15,7 +15,7 @@ var akHeight = 24;
 export var emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
-  padding: '4px 4px 4px 8px'
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-100, 8px)")
 });
 export var reactionStyle = css({
   display: 'flex',
@@ -29,7 +29,7 @@ export var reactionStyle = css({
   borderRadius: '20px',
   color: "".concat("var(--ds-text-subtle, ".concat(N400, ")")),
   cursor: 'pointer',
-  margin: '4px 4px 0 0',
+  margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " 0 0"),
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {

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

@@ -79,6 +79,7 @@ export var customTabWrapper = function customTabWrapper(isSelected, selectedEmoj
     justifyContent: 'center',
     minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
     minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginRight: "".concat(REACTION_RIGHT_MARGIN, "px"),
     boxSizing: 'border-box',
     position: 'relative',
@@ -119,11 +120,11 @@ export var navigationContainerStyle = css({
     cursor: 'pointer'
   },
   'button:last-child': {
-    marginLeft: '16px'
+    marginLeft: "var(--ds-space-200, 16px)"
   }
 });
 export var reactionViewStyle = css({
-  marginTop: '24px',
+  marginTop: "var(--ds-space-300, 24px)",
   display: 'flex',
   flexDirection: 'column',
   p: {
@@ -134,13 +135,13 @@ export var reactionViewStyle = css({
     fontSize: 16,
     lineHeight: '20px',
     '> span': {
-      marginRight: 8
+      marginRight: "var(--ds-space-100, 8px)"
     }
   }
 });
 export var userListStyle = css({
   listStyle: 'none',
-  marginTop: 16,
+  marginTop: "var(--ds-space-200, 16px)",
   padding: 0,
   textAlign: 'left',
   li: {
@@ -151,16 +152,16 @@ export var userListStyle = css({
 export var userStyle = css({
   display: 'flex',
   alignItems: 'center',
-  padding: '8px 0px 8px 0px',
+  padding: "var(--ds-space-100, 8px)".concat(" 0px ", "var(--ds-space-100, 8px)", " 0px"),
   '> span': {
-    marginLeft: 16
+    marginLeft: "var(--ds-space-200, 16px)"
   }
 });
 export var customTabListStyles = css({
   overflow: 'auto',
   scrollBehavior: 'smooth',
   display: 'flex',
-  paddingBottom: 4,
+  paddingBottom: "var(--ds-space-050, 4px)",
   'div[role=tablist]': {
     flexGrow: 1
   }

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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) { _defineProperty(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; }
 /** @jsx jsx */
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';

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

@@ -22,7 +22,7 @@ export var popupStyle = css({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   '&> div': {
     boxShadow: undefined,
-    marginTop: '4px',
-    marginBottom: '4px'
+    marginTop: "var(--ds-space-050, 4px)",
+    marginBottom: "var(--ds-space-050, 4px)"
   }
 });

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

@@ -2,15 +2,15 @@
 import { css } from '@emotion/react';
 export var reactionPickerStyle = css({
   display: 'inline-block',
-  marginTop: '4px'
+  marginTop: "var(--ds-space-050, 4px)"
 });
 export var seeWhoReacted = css({
   height: '24px',
   lineHeight: '24px',
   paddingLeft: 0,
   paddingRight: 0,
-  marginTop: '4px',
-  marginLeft: '4px'
+  marginTop: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-050, 4px)"
 });
 export var wrapperStyle = css({
   display: 'flex',
@@ -18,7 +18,7 @@ export var wrapperStyle = css({
   position: 'relative',
   alignItems: 'center',
   borderRadius: '15px',
-  marginTop: '-4px',
+  marginTop: "var(--ds-space-negative-050, -4px)",
   '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }

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

@@ -12,8 +12,8 @@ export var moreButtonStyle = css({
   border: 0,
   borderRadius: "".concat(borderRadius(), "px"),
   cursor: 'pointer',
-  margin: '4px 4px 4px 0',
-  padding: '4px',
+  margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " 0"),
+  padding: "var(--ds-space-050, 4px)",
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
@@ -22,7 +22,7 @@ export var moreButtonStyle = css({
 });
 export var separatorStyle = css({
   backgroundColor: "var(--ds-border, ".concat(N30A, ")"),
-  margin: '8px 8px 8px 4px',
+  margin: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)"),
   width: '1px',
   height: '60%',
   display: 'inline-block'

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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) { _defineProperty(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; }
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N70, N20, N40, B100 } from '@atlaskit/theme/colors';
@@ -23,7 +23,7 @@ export var triggerStyle = function triggerStyle(_ref) {
     lineHeight: '16px'
   }, miniMode && {
     minWidth: '24px',
-    padding: '4px',
+    padding: "var(--ds-space-050, 4px)",
     border: 'none',
     borderRadius: "".concat(borderRadius(), "px")
   }), disabled && {

package/dist/esm/store/MemoryReactionsStore.js

@@ -1,8 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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) { _defineProperty(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; }
 import { Analytics, UFO } from '../analytics';
 import * as Types from '../types';
 import { batch, batchByKey } from './batched';

package/dist/esm/store/utils.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function 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) { _defineProperty(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; }
 import { ReactionStatus } from '../types';
 var compareEmojiId = function compareEmojiId(l, r) {
   return l.localeCompare(r);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.5.2",
+  "version": "22.5.3",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,16 +36,16 @@
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/button": "^16.9.0",
-    "@atlaskit/emoji": "^67.4.0",
+    "@atlaskit/button": "^16.10.0",
+    "@atlaskit/emoji": "^67.5.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.21.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",