@atlaskit/reactions 27.1.2 → 27.1.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/reactions
 
+## 27.1.4
+
+### Patch Changes
+
+- [#126476](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126476)
+  [`7f1dfd438c788`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f1dfd438c788) -
+  [ux] Add new prop to control updated summary view styling to achieve byline alignment in product
+- Updated dependencies
+
+## 27.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.1.2
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

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

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

@@ -44,7 +44,8 @@ var Counter = exports.Counter = function Counter(_ref) {
     value = _ref.value,
     _ref$animationDuratio = _ref.animationDuration,
     animationDuration = _ref$animationDuratio === void 0 ? 'medium' : _ref$animationDuratio,
-    useDarkerFont = _ref.useDarkerFont;
+    useDarkerFont = _ref.useDarkerFont,
+    useUpdatedStyles = _ref.useUpdatedStyles;
   var getLabel = function getLabel(value) {
     // Check if reached limit
     if (limit && overLimitLabel && value >= limit) {
@@ -63,13 +64,15 @@ var Counter = exports.Counter = function Counter(_ref) {
   var isIncreasing = (0, _react.useMemo)(function () {
     return lastValue.current ? lastValue.current < value : false;
   }, [value]);
+  var fontStyles = useDarkerFont ? [_styles.darkerFontStyle] : [];
+  var additionalStyles = useUpdatedStyles ? [_styles.updatedStyles] : [];
   return (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     "data-testid": RENDER_COMPONENT_WRAPPER
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: useDarkerFont ? [_styles.countStyle, _styles.darkerFontStyle] : _styles.countStyle
+    css: [_styles.countStyle].concat(fontStyles, additionalStyles)
   }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_motion.SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
     exitTo: isIncreasing ? 'top' : 'bottom',

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightStyle = exports.darkerFontStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
+exports.updatedStyles = exports.highlightStyle = exports.darkerFontStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -42,4 +42,9 @@ var counterLabelStyle = exports.counterLabelStyle = (0, _react.css)({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var darkerFontStyle = exports.darkerFontStyle = (0, _react.css)({
   color: "var(--ds-text-subtle, #44546F)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var updatedStyles = exports.updatedStyles = (0, _react.css)({
+  marginTop: "var(--ds-space-050, 4px)"
 });

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

@@ -100,7 +100,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
     reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
-    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    useButtonAlignmentStyling = props.useButtonAlignmentStyling;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -256,7 +257,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        useButtonAlignmentStyling: useButtonAlignmentStyling
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {

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

@@ -73,7 +73,9 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     _ref$useCompactStyles = _ref.useCompactStyles,
-    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles;
+    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles,
+    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
   var intl = (0, _reactIntlNext.useIntl)();
 
   // Helper function to sort reactions by count and return top N
@@ -122,6 +124,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     }));
   })), /*#__PURE__*/_react.default.createElement(_Counter.Counter, {
     value: totalReactionsCount,
-    useDarkerFont: useCompactStyles
+    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
+    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
   })));
 });

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

@@ -53,7 +53,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     onSelection = _ref.onSelection,
     tooltipContent = _ref.tooltipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
-    onOpen = _ref.onOpen;
+    onOpen = _ref.onOpen,
+    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -106,7 +107,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         onClick: handleSummaryClick,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        useCompactStyles: allowSelectFromSummaryView
+        useCompactStyles: allowSelectFromSummaryView,
+        useButtonAlignmentStyling: useButtonAlignmentStyling
       }));
     }
   });

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

@@ -163,7 +163,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     _ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
-    allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS;
+    allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
+    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -343,7 +345,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
     emojiPickerSize: emojiPickerSize,
-    onOpen: handlePickerOpen
+    onOpen: handlePickerOpen,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
   })) : memorizedReactions.map(function (reaction) {
     return (0, _react2.jsx)(_Reaction.Reaction, {
       key: reaction.emojiId,
@@ -380,7 +383,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
+    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
   }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_segment.default, {
     name: "reactions-dialog"
   }, (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {

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

@@ -95,6 +95,9 @@ var addReactionMessageStyles = (0, _primitives.xcss)({
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });
+var addReactionMarginStyles = (0, _primitives.xcss)({
+  marginTop: 'space.025'
+});
 
 /**
  * Render an emoji button to open the reactions select picker
@@ -118,7 +121,8 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     selectionStyle = props.selectionStyle,
-    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    useButtonAlignmentStyling = props.useButtonAlignmentStyling;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -143,6 +147,6 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     LEGACY_size: "small",
     label: "Add reaction"
   }), showAddReactionText && (0, _react2.jsx)(_primitives.Box, {
-    xcss: addReactionMessageStyles
+    xcss: useButtonAlignmentStyling ? [addReactionMessageStyles, addReactionMarginStyles] : addReactionMessageStyles
   }, formatMessage(i18n.addReaction))));
 });

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 = "27.1.2";
+const packageVersion = "27.1.4";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -9,7 +9,7 @@ import { SlideIn, ExitingPersistence } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 import { formatLargeNumber } from '../../shared/utils';
-import { containerStyle, counterLabelStyle, countStyle, highlightStyle, darkerFontStyle } from './styles';
+import { containerStyle, counterLabelStyle, countStyle, highlightStyle, darkerFontStyle, updatedStyles } from './styles';
 
 /**
  * Test id for component top level div
@@ -35,7 +35,8 @@ export const Counter = ({
   className,
   value,
   animationDuration = 'medium',
-  useDarkerFont
+  useDarkerFont,
+  useUpdatedStyles
 }) => {
   const getLabel = value => {
     // Check if reached limit
@@ -55,13 +56,15 @@ export const Counter = ({
   const isIncreasing = useMemo(() => {
     return lastValue.current ? lastValue.current < value : false;
   }, [value]);
+  const fontStyles = useDarkerFont ? [darkerFontStyle] : [];
+  const additionalStyles = useUpdatedStyles ? [updatedStyles] : [];
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     "data-testid": RENDER_COMPONENT_WRAPPER
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: useDarkerFont ? [countStyle, darkerFontStyle] : countStyle
+    css: [countStyle, ...fontStyles, ...additionalStyles]
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
     exitTo: isIncreasing ? 'top' : 'bottom',

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

@@ -35,4 +35,9 @@ export const counterLabelStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const darkerFontStyle = css({
   color: "var(--ds-text-subtle, #44546F)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const updatedStyles = css({
+  marginTop: "var(--ds-space-050, 4px)"
 });

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

@@ -81,7 +81,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showAddReactionText = false,
     showRoundTrigger = false,
     reactionPickerAdditionalStyle = undefined,
-    reactionPickerTriggerIcon
+    reactionPickerTriggerIcon,
+    useButtonAlignmentStyling
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -228,7 +229,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
-    reactionPickerTriggerIcon: reactionPickerTriggerIcon
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
   })), settings.isOpen && jsx(PopperWrapper, {
     settings: settings
   }, settings.showFullPicker ? jsx(EmojiPicker, {

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

@@ -57,7 +57,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   onClick,
   showOpaqueBackground = false,
   subtleReactionsSummaryAndPicker = false,
-  useCompactStyles = false
+  useCompactStyles = false,
+  useButtonAlignmentStyling = false
 }, ref) => {
   const intl = useIntl();
 
@@ -101,6 +102,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     fitToHeight: useCompactStyles ? 12 : 16
   })))), /*#__PURE__*/React.createElement(Counter, {
     value: totalReactionsCount,
-    useDarkerFont: useCompactStyles
+    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
+    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
   })));
 });

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

@@ -35,7 +35,8 @@ export const ReactionSummaryView = ({
   onSelection,
   tooltipContent,
   reactionPickerTriggerIcon,
-  onOpen
+  onOpen,
+  useButtonAlignmentStyling
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
@@ -77,7 +78,8 @@ export const ReactionSummaryView = ({
       onClick: handleSummaryClick,
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-      useCompactStyles: allowSelectFromSummaryView
+      useCompactStyles: allowSelectFromSummaryView,
+      useButtonAlignmentStyling: useButtonAlignmentStyling
     }))
   });
 };

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

@@ -125,7 +125,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   showSubtleDefaultReactions,
   reactionPickerTriggerToolipContent,
   reactionPickerTriggerIcon,
-  allowSelectFromSummaryView = false
+  allowSelectFromSummaryView = false,
+  useButtonAlignmentStyling = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -292,7 +293,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
     emojiPickerSize: emojiPickerSize,
-    onOpen: handlePickerOpen
+    onOpen: handlePickerOpen,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
   })) : memorizedReactions.map(reaction => jsx(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
@@ -327,7 +329,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
+    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"
   }, jsx(ReactionsDialog, {

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

@@ -87,6 +87,9 @@ const addReactionMessageStyles = xcss({
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });
+const addReactionMarginStyles = xcss({
+  marginTop: 'space.025'
+});
 
 /**
  * Render an emoji button to open the reactions select picker
@@ -106,7 +109,8 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     subtleReactionsSummaryAndPicker = false,
     showRoundTrigger = false,
     selectionStyle,
-    reactionPickerTriggerIcon
+    reactionPickerTriggerIcon,
+    useButtonAlignmentStyling
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
@@ -132,6 +136,6 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     LEGACY_size: "small",
     label: "Add reaction"
   }), showAddReactionText && jsx(Box, {
-    xcss: addReactionMessageStyles
+    xcss: useButtonAlignmentStyling ? [addReactionMessageStyles, addReactionMarginStyles] : addReactionMessageStyles
   }, formatMessage(i18n.addReaction))));
 });

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 = "27.1.2";
+var packageVersion = "27.1.4";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -9,7 +9,7 @@ import { SlideIn, ExitingPersistence } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 import { formatLargeNumber } from '../../shared/utils';
-import { containerStyle, counterLabelStyle, countStyle, highlightStyle, darkerFontStyle } from './styles';
+import { containerStyle, counterLabelStyle, countStyle, highlightStyle, darkerFontStyle, updatedStyles } from './styles';
 
 /**
  * Test id for component top level div
@@ -37,7 +37,8 @@ export var Counter = function Counter(_ref) {
     value = _ref.value,
     _ref$animationDuratio = _ref.animationDuration,
     animationDuration = _ref$animationDuratio === void 0 ? 'medium' : _ref$animationDuratio,
-    useDarkerFont = _ref.useDarkerFont;
+    useDarkerFont = _ref.useDarkerFont,
+    useUpdatedStyles = _ref.useUpdatedStyles;
   var getLabel = function getLabel(value) {
     // Check if reached limit
     if (limit && overLimitLabel && value >= limit) {
@@ -56,13 +57,15 @@ export var Counter = function Counter(_ref) {
   var isIncreasing = useMemo(function () {
     return lastValue.current ? lastValue.current < value : false;
   }, [value]);
+  var fontStyles = useDarkerFont ? [darkerFontStyle] : [];
+  var additionalStyles = useUpdatedStyles ? [updatedStyles] : [];
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     "data-testid": RENDER_COMPONENT_WRAPPER
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: useDarkerFont ? [countStyle, darkerFontStyle] : countStyle
+    css: [countStyle].concat(fontStyles, additionalStyles)
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
     exitTo: isIncreasing ? 'top' : 'bottom',

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

@@ -35,4 +35,9 @@ export var counterLabelStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var darkerFontStyle = css({
   color: "var(--ds-text-subtle, #44546F)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var updatedStyles = css({
+  marginTop: "var(--ds-space-050, 4px)"
 });

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

@@ -93,7 +93,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
     reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
-    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    useButtonAlignmentStyling = props.useButtonAlignmentStyling;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -249,7 +250,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        useButtonAlignmentStyling: useButtonAlignmentStyling
       })
     );
   }), settings.isOpen && jsx(PopperWrapper, {

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

@@ -63,7 +63,9 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     _ref$useCompactStyles = _ref.useCompactStyles,
-    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles;
+    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles,
+    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
   var intl = useIntl();
 
   // Helper function to sort reactions by count and return top N
@@ -112,6 +114,7 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     }));
   })), /*#__PURE__*/React.createElement(Counter, {
     value: totalReactionsCount,
-    useDarkerFont: useCompactStyles
+    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
+    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
   })));
 });

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

@@ -43,7 +43,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     onSelection = _ref.onSelection,
     tooltipContent = _ref.tooltipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
-    onOpen = _ref.onOpen;
+    onOpen = _ref.onOpen,
+    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -96,7 +97,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         onClick: handleSummaryClick,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        useCompactStyles: allowSelectFromSummaryView
+        useCompactStyles: allowSelectFromSummaryView,
+        useButtonAlignmentStyling: useButtonAlignmentStyling
       }));
     }
   });

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

@@ -149,7 +149,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     _ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
-    allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS;
+    allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
+    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -329,7 +331,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
     emojiPickerSize: emojiPickerSize,
-    onOpen: handlePickerOpen
+    onOpen: handlePickerOpen,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
   })) : memorizedReactions.map(function (reaction) {
     return jsx(Reaction, {
       key: reaction.emojiId,
@@ -366,7 +369,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
+    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"
   }, jsx(ReactionsDialog, {

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

@@ -87,6 +87,9 @@ var addReactionMessageStyles = xcss({
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });
+var addReactionMarginStyles = xcss({
+  marginTop: 'space.025'
+});
 
 /**
  * Render an emoji button to open the reactions select picker
@@ -110,7 +113,8 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     selectionStyle = props.selectionStyle,
-    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    useButtonAlignmentStyling = props.useButtonAlignmentStyling;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -135,6 +139,6 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     LEGACY_size: "small",
     label: "Add reaction"
   }), showAddReactionText && jsx(Box, {
-    xcss: addReactionMessageStyles
+    xcss: useButtonAlignmentStyling ? [addReactionMessageStyles, addReactionMarginStyles] : addReactionMessageStyles
   }, formatMessage(i18n.addReaction))));
 });

package/dist/types/components/Counter/Counter.d.ts

@@ -41,8 +41,12 @@ export interface CounterProps {
      * Optional prop to use a darker text color for the counter
      */
     useDarkerFont?: boolean;
+    /**
+     * Optional prop to show updated styling for counter
+     */
+    useUpdatedStyles?: boolean;
 }
 /**
  * Display reaction count next to the emoji button
  */
-export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, useDarkerFont, }: CounterProps) => jsx.JSX.Element;
+export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, useDarkerFont, useUpdatedStyles, }: CounterProps) => jsx.JSX.Element;

package/dist/types/components/Counter/styles.d.ts

@@ -3,3 +3,4 @@ export declare const containerStyle: import("@emotion/react").SerializedStyles;
 export declare const highlightStyle: import("@emotion/react").SerializedStyles;
 export declare const counterLabelStyle: import("@emotion/react").SerializedStyles;
 export declare const darkerFontStyle: import("@emotion/react").SerializedStyles;
+export declare const updatedStyles: import("@emotion/react").SerializedStyles;

package/dist/types/components/ReactionPicker/ReactionPicker.d.ts

@@ -81,6 +81,7 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling icon inside Trigger
      */
     reactionPickerTriggerIcon?: React.ReactNode;
+    useButtonAlignmentStyling?: boolean;
 }
 /**
  * Picker component for adding reactions

package/dist/types/components/ReactionSummary/ReactionSummaryButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ReactionsProps } from '../Reactions/Reactions';
-interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions'> {
+interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'useButtonAlignmentStyling'> {
     /**
      * event handler when the summary button is clicked to view all reactions
      */

package/dist/types/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -7,7 +7,7 @@ import { type TriggerProps } from '../Trigger';
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -54,5 +54,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     onOpen?: () => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, }: ReactionSummaryViewProps) => React.JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

package/dist/types/components/Reactions/Reactions.d.ts

@@ -106,6 +106,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to change the placement of the summary popup reaction list
      */
     summaryViewPlacement?: Placement;
+    /**
+     * Optional prop to change the style of the summary view
+     */
+    useButtonAlignmentStyling?: boolean;
     /**
      * Optional prop for using an opaque button background instead of a transparent background
      */
@@ -175,4 +179,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => jsx.JSX.Element>;

package/dist/types/components/Trigger/Trigger.d.ts

@@ -57,6 +57,7 @@ export interface TriggerProps {
      * Optional prop for controlling icon inside Trigger
      */
     reactionPickerTriggerIcon?: React.ReactNode;
+    useButtonAlignmentStyling?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/dist/types-ts4.5/components/Counter/Counter.d.ts

@@ -41,8 +41,12 @@ export interface CounterProps {
      * Optional prop to use a darker text color for the counter
      */
     useDarkerFont?: boolean;
+    /**
+     * Optional prop to show updated styling for counter
+     */
+    useUpdatedStyles?: boolean;
 }
 /**
  * Display reaction count next to the emoji button
  */
-export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, useDarkerFont, }: CounterProps) => jsx.JSX.Element;
+export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, useDarkerFont, useUpdatedStyles, }: CounterProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/Counter/styles.d.ts

@@ -3,3 +3,4 @@ export declare const containerStyle: import("@emotion/react").SerializedStyles;
 export declare const highlightStyle: import("@emotion/react").SerializedStyles;
 export declare const counterLabelStyle: import("@emotion/react").SerializedStyles;
 export declare const darkerFontStyle: import("@emotion/react").SerializedStyles;
+export declare const updatedStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/components/ReactionPicker/ReactionPicker.d.ts

@@ -81,6 +81,7 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling icon inside Trigger
      */
     reactionPickerTriggerIcon?: React.ReactNode;
+    useButtonAlignmentStyling?: boolean;
 }
 /**
  * Picker component for adding reactions

package/dist/types-ts4.5/components/ReactionSummary/ReactionSummaryButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ReactionsProps } from '../Reactions/Reactions';
-interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions'> {
+interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'useButtonAlignmentStyling'> {
     /**
      * event handler when the summary button is clicked to view all reactions
      */

package/dist/types-ts4.5/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -7,7 +7,7 @@ import { type TriggerProps } from '../Trigger';
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -54,5 +54,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     onOpen?: () => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, }: ReactionSummaryViewProps) => React.JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/components/Reactions/Reactions.d.ts

@@ -106,6 +106,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to change the placement of the summary popup reaction list
      */
     summaryViewPlacement?: Placement;
+    /**
+     * Optional prop to change the style of the summary view
+     */
+    useButtonAlignmentStyling?: boolean;
     /**
      * Optional prop for using an opaque button background instead of a transparent background
      */
@@ -175,4 +179,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => jsx.JSX.Element>;

package/dist/types-ts4.5/components/Trigger/Trigger.d.ts

@@ -57,6 +57,7 @@ export interface TriggerProps {
      * Optional prop for controlling icon inside Trigger
      */
     reactionPickerTriggerIcon?: React.ReactNode;
+    useButtonAlignmentStyling?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "27.1.2",
+	"version": "27.1.4",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,8 +39,8 @@
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/emoji": "^68.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^24.1.0",
-		"@atlaskit/modal-dialog": "^13.0.0",
+		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/modal-dialog": "^13.1.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
@@ -50,7 +50,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",