@atlaskit/reactions 22.9.0 → 22.10.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/reactions
 
+## 22.10.1
+
+### Patch Changes
+
+- [#119960](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119960)
+  [`77542b34dfee2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77542b34dfee2) -
+  Exposed particleEffectByEmoji prop in ConnectedReactionsView to support particle effect
+- Updated dependencies
+
+## 22.10.0
+
+### Minor Changes
+
+- [#120418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120418)
+  [`a0121db0d5a1c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0121db0d5a1c) -
+  [ux] Add support for quick reactions to summary view
+
 ## 22.9.0
 
 ### Minor Changes

package/dist/cjs/analytics/index.js

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

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

@@ -272,7 +272,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && memorizedReactions.length > 0;
+  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {

package/dist/cjs/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -17,7 +17,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _components = require("../../components");
 var _store2 = require("../../store");
 var _types = require("../../types");
-var _excluded = ["ari", "containerAri", "store"];
+var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -31,7 +31,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, state) {
+var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, particleEffectByEmojiEnabled, state) {
   var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
   if (!state || !reactionsState) {
     return {
@@ -44,7 +44,8 @@ var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToP
       return {
         reactions: reactionsState.reactions,
         status: reactionsState.status,
-        flash: state.flash["".concat(containerAri, "|").concat(ari)]
+        flash: state.flash["".concat(containerAri, "|").concat(ari)],
+        particleEffectByEmoji: particleEffectByEmojiEnabled ? state.particleEffectByEmoji["".concat(containerAri, "|").concat(ari)] : {}
       };
     case _types.ReactionStatus.error:
       return {
@@ -82,6 +83,7 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
   var ari = props.ari,
     containerAri = props.containerAri,
     store = props.store,
+    particleEffectByEmojiEnabled = props.particleEffectByEmojiEnabled,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -122,8 +124,8 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
    * @param state store instance latest data
    */
   var mapStateToProps = (0, _react.useCallback)(function (state) {
-    return mapStateToPropsHelper(containerAri, ari, state);
-  }, [containerAri, ari]);
+    return mapStateToPropsHelper(containerAri, ari, particleEffectByEmojiEnabled, state);
+  }, [containerAri, ari, particleEffectByEmojiEnabled]);
 
   /**
    * Map the store instance "actions" methods to the <Reactions /> component actions methods

package/dist/cjs/store/MemoryReactionsStore.js

@@ -53,7 +53,8 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
      */
     (0, _defineProperty2.default)(this, "initialState", {
       reactions: {},
-      flash: {}
+      flash: {},
+      particleEffectByEmoji: {}
     });
     /**
      * Update the store state data with a new data
@@ -132,6 +133,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         emojiId = reaction.emojiId;
       _this.optmisticUpdate(containerAri, ari, emojiId)(_utils.addOne);
       _this.flash(reaction);
+      _this.setParticleEffectForEmoji(containerAri, ari, emojiId, true);
       var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId));
       // ufo start reaction experience
       exp.start();
@@ -167,6 +169,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         ari = reaction.ari,
         emojiId = reaction.emojiId;
       var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId));
+      _this.setParticleEffectForEmoji(containerAri, ari, emojiId, false);
 
       // ufo start reaction experience
 
@@ -299,6 +302,13 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         flash: _objectSpread(_objectSpread({}, this.state.flash), {}, (0, _defineProperty2.default)({}, "".concat(containerAri, "|").concat(ari), _objectSpread(_objectSpread({}, this.state.flash["".concat(containerAri, "|").concat(ari)]), {}, (0, _defineProperty2.default)({}, emojiId, flash))))
       });
     }
+  }, {
+    key: "setParticleEffectForEmoji",
+    value: function setParticleEffectForEmoji(containerAri, ari, emojiId, enable) {
+      this.setState({
+        particleEffectByEmoji: _objectSpread(_objectSpread({}, this.state.particleEffectByEmoji), {}, (0, _defineProperty2.default)({}, "".concat(containerAri, "|").concat(ari), _objectSpread(_objectSpread({}, this.state.particleEffectByEmoji["".concat(containerAri, "|").concat(ari)]), {}, (0, _defineProperty2.default)({}, emojiId, enable))))
+      });
+    }
   }, {
     key: "withReadyReaction",
     value:

package/dist/es2019/analytics/index.js

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

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

@@ -241,7 +241,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  const shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && memorizedReactions.length > 0;
+  const shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {

package/dist/es2019/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -17,7 +17,7 @@ import { ReactionStatus } from '../../types';
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export const mapStateToPropsHelper = (containerAri, ari, state) => {
+export const mapStateToPropsHelper = (containerAri, ari, particleEffectByEmojiEnabled, state) => {
   const reactionsState = state && state.reactions[`${containerAri}|${ari}`];
   if (!state || !reactionsState) {
     return {
@@ -30,7 +30,8 @@ export const mapStateToPropsHelper = (containerAri, ari, state) => {
       return {
         reactions: reactionsState.reactions,
         status: reactionsState.status,
-        flash: state.flash[`${containerAri}|${ari}`]
+        flash: state.flash[`${containerAri}|${ari}`],
+        particleEffectByEmoji: particleEffectByEmojiEnabled ? state.particleEffectByEmoji[`${containerAri}|${ari}`] : {}
       };
     case ReactionStatus.error:
       return {
@@ -69,6 +70,7 @@ export const ConnectedReactionsView = props => {
     ari,
     containerAri,
     store,
+    particleEffectByEmojiEnabled,
     ...rest
   } = props;
   /**
@@ -105,8 +107,8 @@ export const ConnectedReactionsView = props => {
    * @param state store instance latest data
    */
   const mapStateToProps = useCallback(state => {
-    return mapStateToPropsHelper(containerAri, ari, state);
-  }, [containerAri, ari]);
+    return mapStateToPropsHelper(containerAri, ari, particleEffectByEmojiEnabled, state);
+  }, [containerAri, ari, particleEffectByEmojiEnabled]);
 
   /**
    * Map the store instance "actions" methods to the <Reactions /> component actions methods

package/dist/es2019/store/MemoryReactionsStore.js

@@ -40,7 +40,8 @@ export class MemoryReactionsStore {
      */
     _defineProperty(this, "initialState", {
       reactions: {},
-      flash: {}
+      flash: {},
+      particleEffectByEmoji: {}
     });
     /**
      * Update the store state data with a new data
@@ -122,6 +123,7 @@ export class MemoryReactionsStore {
       } = reaction;
       this.optmisticUpdate(containerAri, ari, emojiId)(addOne);
       this.flash(reaction);
+      this.setParticleEffectForEmoji(containerAri, ari, emojiId, true);
       const exp = ufoExperiences.add.getInstance(`${ari}|${emojiId}`);
       // ufo start reaction experience
       exp.start();
@@ -159,6 +161,7 @@ export class MemoryReactionsStore {
         emojiId
       } = reaction;
       const exp = ufoExperiences.remove.getInstance(`${ari}|${emojiId}`);
+      this.setParticleEffectForEmoji(containerAri, ari, emojiId, false);
 
       // ufo start reaction experience
 
@@ -294,6 +297,17 @@ export class MemoryReactionsStore {
       }
     });
   }
+  setParticleEffectForEmoji(containerAri, ari, emojiId, enable) {
+    this.setState({
+      particleEffectByEmoji: {
+        ...this.state.particleEffectByEmoji,
+        [`${containerAri}|${ari}`]: {
+          ...this.state.particleEffectByEmoji[`${containerAri}|${ari}`],
+          [emojiId]: enable
+        }
+      }
+    });
+  }
   /**
    * Utility function to help execute a callback to Reaction if its state is ready.
    *

package/dist/esm/analytics/index.js

@@ -4,7 +4,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 = "22.9.0";
+var packageVersion = "22.10.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -259,7 +259,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && memorizedReactions.length > 0;
+  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {

package/dist/esm/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["ari", "containerAri", "store"];
+var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
@@ -22,7 +22,7 @@ import { ReactionStatus } from '../../types';
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, state) {
+export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, particleEffectByEmojiEnabled, state) {
   var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
   if (!state || !reactionsState) {
     return {
@@ -35,7 +35,8 @@ export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri,
       return {
         reactions: reactionsState.reactions,
         status: reactionsState.status,
-        flash: state.flash["".concat(containerAri, "|").concat(ari)]
+        flash: state.flash["".concat(containerAri, "|").concat(ari)],
+        particleEffectByEmoji: particleEffectByEmojiEnabled ? state.particleEffectByEmoji["".concat(containerAri, "|").concat(ari)] : {}
       };
     case ReactionStatus.error:
       return {
@@ -73,6 +74,7 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
   var ari = props.ari,
     containerAri = props.containerAri,
     store = props.store,
+    particleEffectByEmojiEnabled = props.particleEffectByEmojiEnabled,
     rest = _objectWithoutProperties(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -113,8 +115,8 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
    * @param state store instance latest data
    */
   var mapStateToProps = useCallback(function (state) {
-    return mapStateToPropsHelper(containerAri, ari, state);
-  }, [containerAri, ari]);
+    return mapStateToPropsHelper(containerAri, ari, particleEffectByEmojiEnabled, state);
+  }, [containerAri, ari, particleEffectByEmojiEnabled]);
 
   /**
    * Map the store instance "actions" methods to the <Reactions /> component actions methods

package/dist/esm/store/MemoryReactionsStore.js

@@ -48,7 +48,8 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
      */
     _defineProperty(this, "initialState", {
       reactions: {},
-      flash: {}
+      flash: {},
+      particleEffectByEmoji: {}
     });
     /**
      * Update the store state data with a new data
@@ -127,6 +128,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         emojiId = reaction.emojiId;
       _this.optmisticUpdate(containerAri, ari, emojiId)(addOne);
       _this.flash(reaction);
+      _this.setParticleEffectForEmoji(containerAri, ari, emojiId, true);
       var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId));
       // ufo start reaction experience
       exp.start();
@@ -162,6 +164,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         ari = reaction.ari,
         emojiId = reaction.emojiId;
       var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId));
+      _this.setParticleEffectForEmoji(containerAri, ari, emojiId, false);
 
       // ufo start reaction experience
 
@@ -294,6 +297,13 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         flash: _objectSpread(_objectSpread({}, this.state.flash), {}, _defineProperty({}, "".concat(containerAri, "|").concat(ari), _objectSpread(_objectSpread({}, this.state.flash["".concat(containerAri, "|").concat(ari)]), {}, _defineProperty({}, emojiId, flash))))
       });
     }
+  }, {
+    key: "setParticleEffectForEmoji",
+    value: function setParticleEffectForEmoji(containerAri, ari, emojiId, enable) {
+      this.setState({
+        particleEffectByEmoji: _objectSpread(_objectSpread({}, this.state.particleEffectByEmoji), {}, _defineProperty({}, "".concat(containerAri, "|").concat(ari), _objectSpread(_objectSpread({}, this.state.particleEffectByEmoji["".concat(containerAri, "|").concat(ari)]), {}, _defineProperty({}, emojiId, enable))))
+      });
+    }
   }, {
     key: "withReadyReaction",
     value:

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -16,20 +16,28 @@ export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quick
      * This was initially implemented with a sync and Async versions and will be replaced with just a sync Store in a future release (Please use only the sync version)
      */
     store: StorePropInput;
+    /**
+     * Optional boolean to control if particle animation on reactions appear
+     */
+    particleEffectByEmojiEnabled?: boolean;
 }
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export declare const mapStateToPropsHelper: (containerAri: string, ari: string, state?: State) => {
+export declare const mapStateToPropsHelper: (containerAri: string, ari: string, particleEffectByEmojiEnabled?: boolean, state?: State) => {
     status: ReactionStatus;
     reactions: never[];
     flash?: undefined;
+    particleEffectByEmoji?: undefined;
 } | {
     reactions: import("../../types").ReactionSummary[];
     status: ReactionStatus.ready;
     flash: {
         [emojiId: string]: boolean;
     };
+    particleEffectByEmoji: {
+        [emojiId: string]: boolean;
+    };
 };
 /**
  * Export the mapper function outside the component so easier to do unit tests

package/dist/types/store/MemoryReactionsStore.d.ts

@@ -53,6 +53,7 @@ export declare class MemoryReactionsStore implements Store {
     private handleDetailedReactionResponse;
     private setFlash;
     private flash;
+    private setParticleEffectForEmoji;
     private optmisticUpdate;
     /**
      * Utility function to help execute a callback to Reaction if its state is ready.

package/dist/types/types/store.d.ts

@@ -60,4 +60,12 @@ export type State = {
             [emojiId: string]: boolean;
         };
     };
+    /**
+     * floating reactions for given emojis as true|false (key => unique id, value => collection of emojiIds and true|false to apply floating animation)
+     */
+    particleEffectByEmoji: {
+        [key: string]: {
+            [emojiId: string]: boolean;
+        };
+    };
 };

package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -16,20 +16,28 @@ export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quick
      * This was initially implemented with a sync and Async versions and will be replaced with just a sync Store in a future release (Please use only the sync version)
      */
     store: StorePropInput;
+    /**
+     * Optional boolean to control if particle animation on reactions appear
+     */
+    particleEffectByEmojiEnabled?: boolean;
 }
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export declare const mapStateToPropsHelper: (containerAri: string, ari: string, state?: State) => {
+export declare const mapStateToPropsHelper: (containerAri: string, ari: string, particleEffectByEmojiEnabled?: boolean, state?: State) => {
     status: ReactionStatus;
     reactions: never[];
     flash?: undefined;
+    particleEffectByEmoji?: undefined;
 } | {
     reactions: import("../../types").ReactionSummary[];
     status: ReactionStatus.ready;
     flash: {
         [emojiId: string]: boolean;
     };
+    particleEffectByEmoji: {
+        [emojiId: string]: boolean;
+    };
 };
 /**
  * Export the mapper function outside the component so easier to do unit tests

package/dist/types-ts4.5/store/MemoryReactionsStore.d.ts

@@ -53,6 +53,7 @@ export declare class MemoryReactionsStore implements Store {
     private handleDetailedReactionResponse;
     private setFlash;
     private flash;
+    private setParticleEffectForEmoji;
     private optmisticUpdate;
     /**
      * Utility function to help execute a callback to Reaction if its state is ready.

package/dist/types-ts4.5/types/store.d.ts

@@ -60,4 +60,12 @@ export type State = {
             [emojiId: string]: boolean;
         };
     };
+    /**
+     * floating reactions for given emojis as true|false (key => unique id, value => collection of emojiIds and true|false to apply floating animation)
+     */
+    particleEffectByEmoji: {
+        [key: string]: {
+            [emojiId: string]: boolean;
+        };
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.9.0",
+	"version": "22.10.1",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/analytics-namespaced-context": "^6.10.0",
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/avatar": "^21.11.0",
-		"@atlaskit/button": "^18.4.0",
+		"@atlaskit/button": "^19.0.0",
 		"@atlaskit/emoji": "^67.6.0",
 		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/tabs": "^16.3.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.54.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/ufo": "^0.2.0",
 		"@atlaskit/util-service-support": "^6.2.0",