@atlaskit/reactions 22.0.3 → 22.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 22.1.0
+
+### Minor Changes
+
+- [`14258b03842`](https://bitbucket.org/atlassian/atlassian-frontend/commits/14258b03842) - make reaction buttons more compact, and introduce miniMode for add reaction button
+
+## 22.0.4
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 22.0.3
 
 ### Patch Changes

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

@@ -9,12 +9,10 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var countStyle = (0, _react.css)({
   fontSize: 11,
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
+  color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',
@@ -22,7 +20,7 @@ var countStyle = (0, _react.css)({
 });
 exports.countStyle = countStyle;
 var highlightStyle = (0, _react.css)({
-  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;

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

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var flashTime = 700;
 var flashAnimation = (0, _react.keyframes)({
@@ -18,16 +16,16 @@ var flashAnimation = (0, _react.keyframes)({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
   }
 });
 exports.flashAnimation = flashAnimation;

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

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 
 /**
@@ -36,19 +34,19 @@ var reactionStyle = (0, _react.css)({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat((0, _tokens.token)('color.text.subtle', _colors.N400)),
+  color: "".concat("var(--ds-text-subtle, ".concat(_colors.N400, ")")),
   cursor: 'pointer',
-  margin: 0,
+  margin: '4px 4px 0 0',
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {
-    background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
+    background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"))
   },
   '&:focus': {
-    boxShadow: "0 0 0 2px ".concat((0, _tokens.token)('color.border.focused', _colors.B100)),
+    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
     // background, box-shadow
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
@@ -57,10 +55,10 @@ var reactionStyle = (0, _react.css)({
 });
 exports.reactionStyle = reactionStyle;
 var reactedStyle = (0, _react.css)({
-  backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
-  borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
+  backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
+  borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")"),
   '&:hover': {
-    background: "".concat((0, _tokens.token)('color.background.selected.hovered', _colors.B75))
+    background: "".concat("var(--ds-background-selected-hovered, ".concat(_colors.B75, ")"))
   }
 });
 exports.reactedStyle = reactedStyle;

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

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _shared = require("../../shared");
 
 /** @jsx jsx */
@@ -48,7 +46,7 @@ exports.containerStyle = containerStyle;
 var titleStyle = (0, _react.css)({
   '& > h1': {
     fontSize: '24px!important',
-    color: "".concat((0, _tokens.token)('color.text', _colors.N800))
+    color: "".concat("var(--ds-text, ".concat(_colors.N800, ")"))
   }
 });
 exports.titleStyle = titleStyle;
@@ -70,7 +68,7 @@ var counterStyle = function counterStyle(isSelected) {
       width: '100%',
       padding: '0px!important',
       //Counter component has its own styles overriding them to match designs
-      color: isSelected ? "".concat((0, _tokens.token)('color.text', _colors.B400), "!important") : "2px solid ".concat((0, _tokens.token)('color.text', _colors.N500), "!important")
+      color: isSelected ? "".concat("var(--ds-text, ".concat(_colors.B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(_colors.N500, ")"), "!important")
     }
   });
 };
@@ -118,7 +116,7 @@ var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, th
     '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
     '&:after': isSelected ? {
       content: '""',
-      borderBottom: "2px solid ".concat((0, _tokens.token)('color.text', _colors.B400)),
+      borderBottom: "2px solid ".concat("var(--ds-text, ".concat(_colors.B400, ")")),
       width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
       bottom: '0px',
       display: 'block',
@@ -152,7 +150,7 @@ var reactionViewStyle = (0, _react.css)({
   flexDirection: 'column',
   p: {
     margin: 0,
-    color: "".concat((0, _tokens.token)('color.text', _colors.N800)),
+    color: "".concat("var(--ds-text, ".concat(_colors.N800, ")")),
     textTransform: 'capitalize',
     fontWeight: 600,
     fontSize: 16,
@@ -169,7 +167,7 @@ var userListStyle = (0, _react.css)({
   padding: 0,
   textAlign: 'left',
   li: {
-    color: "".concat((0, _tokens.token)('color.text', _colors.N500)),
+    color: "".concat("var(--ds-text, ".concat(_colors.N500, ")")),
     fontSize: 14
   }
 });

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

@@ -11,14 +11,11 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var pickerStyle = (0, _react.css)({
   verticalAlign: 'middle',
   '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
+    display: 'inline-block'
   }
 });
 exports.pickerStyle = pickerStyle;
@@ -27,9 +24,9 @@ var contentStyle = (0, _react.css)({
 });
 exports.contentStyle = contentStyle;
 var popupStyle = (0, _react.css)({
-  background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
+  background: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   '&> div': {
     boxShadow: undefined,
     marginTop: '4px',

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

@@ -7,8 +7,6 @@ exports.verticalMargin = exports.underlineStyle = exports.tooltipStyle = exports
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
@@ -35,12 +33,12 @@ var tooltipStyle = (0, _react.css)({
 exports.tooltipStyle = tooltipStyle;
 var emojiNameStyle = (0, _react.css)({
   textTransform: 'capitalize',
-  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
+  color: "var(--ds-text-inverse, ".concat(_colors.N90, ")"),
   fontWeight: 600
 });
 exports.emojiNameStyle = emojiNameStyle;
 var footerStyle = (0, _react.css)({
-  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
+  color: "var(--ds-text-inverse, ".concat(_colors.N90, ")"),
   fontWeight: 300
 });
 exports.footerStyle = footerStyle;
@@ -48,8 +46,8 @@ var underlineStyle = (0, _react.css)({
   cursor: 'pointer',
   textDecoration: 'underline',
   ':hover': {
-    backgroundColor: (0, _tokens.token)('color.background.neutral.bold', _colors.N800),
-    color: (0, _tokens.token)('color.text.inverse', _colors.N0)
+    backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
+    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
   }
 });
 exports.underlineStyle = underlineStyle;

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

@@ -131,7 +131,9 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
       onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
       _ref$emojiPickerSize = _ref.emojiPickerSize,
-      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize;
+      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
+      _ref$miniMode = _ref.miniMode,
+      miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -297,7 +299,6 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
   }, memorizedReactions.map(function (reaction) {
     return (0, _react2.jsx)(_Reaction.Reaction, {
       key: reaction.emojiId,
-      css: styles.reactionStyle,
       reaction: reaction,
       emojiProvider: emojiProvider,
       onClick: onReactionClick,
@@ -308,9 +309,8 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       allowUserDialog: allowUserDialog
     });
   }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker, {
-    css: styles.reactionStyle,
+    css: styles.reactionPickerStyle,
     emojiProvider: emojiProvider,
-    miniMode: true,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     disabled: status !== _types.ReactionStatus.ready,
@@ -319,7 +319,8 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
     tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode
   }), allowUserDialog && reactions.length > 0 && (0, _react2.jsx)(_tooltip.default, {
     content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.seeWhoReactedTooltip),
     hideTooltipOnClick: true

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

@@ -3,22 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.seeWhoReacted = exports.reactionStyle = void 0;
+exports.wrapperStyle = exports.seeWhoReacted = exports.reactionPickerStyle = void 0;
 
 var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var reactionStyle = (0, _react.css)({
+var reactionPickerStyle = (0, _react.css)({
   display: 'inline-block',
-  margin: '4px'
+  marginTop: '4px'
 });
-exports.reactionStyle = reactionStyle;
+exports.reactionPickerStyle = reactionPickerStyle;
 var seeWhoReacted = (0, _react.css)({
   height: '24px',
   lineHeight: '24px',
-  paddingLeft: '4px',
-  paddingRight: '4px',
-  margin: '4px'
+  paddingLeft: 0,
+  paddingRight: 0,
+  marginTop: '4px',
+  marginLeft: '4px'
 });
 exports.seeWhoReacted = seeWhoReacted;
 var wrapperStyle = (0, _react.css)({

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

@@ -11,8 +11,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var moreEmojiContainerStyle = (0, _react.css)({
   display: 'flex'
@@ -30,12 +28,12 @@ var moreButtonStyle = (0, _react.css)({
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
-    backgroundColor: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30A)
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
   }
 });
 exports.moreButtonStyle = moreButtonStyle;
 var separatorStyle = (0, _react.css)({
-  backgroundColor: (0, _tokens.token)('color.border', _colors.N30A),
+  backgroundColor: "var(--ds-border, ".concat(_colors.N30A, ")"),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

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

@@ -11,15 +11,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 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; }
 
-var DISABLED_BUTTON_COLOR = "".concat((0, _tokens.token)('color.text.disabled', _colors.N70), " !important");
+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) {
@@ -29,22 +29,25 @@ var triggerStyle = function triggerStyle(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return (0, _react.css)(_objectSpread(_objectSpread(_objectSpread({
     minWidth: '32px',
-    height: '32px',
+    height: '24px',
+    padding: 0,
+    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+    borderRadius: '20px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     lineHeight: '16px'
   }, miniMode && {
-    height: '24px',
-    padding: 0,
-    border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
-    borderRadius: '20px'
+    minWidth: '24px',
+    padding: '4px',
+    border: 'none',
+    borderRadius: "".concat((0, _constants.borderRadius)(), "px")
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'
   }), {}, {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
+      background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"))
     }
   }));
 };

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.3"
+	"version": "22.1.0"
 }

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

@@ -1,17 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const countStyle = css({
   fontSize: 11,
-  color: token('color.text.subtlest', N90),
+  color: `var(--ds-text-subtlest, ${N90})`,
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',
   lineHeight: '14px'
 });
 export const highlightStyle = css({
-  color: token('color.text.selected', B400),
+  color: `var(--ds-text-selected, ${B400})`,
   fontWeight: 600
 });
 export const containerStyle = css({

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

@@ -1,23 +1,22 @@
 /** @jsx jsx */
 import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const flashTime = 700;
 export const flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: `var(--ds-background-selected-pressed, ${B75})`,
+    borderColor: `var(--ds-border-selected, ${B300})`
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: `var(--ds-background-selected-pressed, ${B75})`,
+    borderColor: `var(--ds-border-selected, ${B300})`
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: `var(--ds-background-selected-pressed, ${B75})`,
+    borderColor: `var(--ds-border-selected, ${B300})`
   }
 });
 export const containerStyle = css({

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

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+
 /**
  * Default styling px height for an emoji reaction
  */
-
 const akHeight = 24;
 /**
  * Styling Note:
@@ -25,19 +24,19 @@ export const reactionStyle = css({
   minWidth: '36px',
   height: `${akHeight}px`,
   background: 'transparent',
-  border: `1px solid ${token('color.border', N40)}`,
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: `${token('color.text.subtle', N400)}`,
+  color: `${`var(--ds-text-subtle, ${N400})`}`,
   cursor: 'pointer',
-  margin: 0,
+  margin: '4px 4px 0 0',
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {
-    background: `${token('color.background.neutral.subtle.hovered', N20)}`
+    background: `${`var(--ds-background-neutral-subtle-hovered, ${N20})`}`
   },
   '&:focus': {
-    boxShadow: `0 0 0 2px ${token('color.border.focused', B100)}`,
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
     // background, box-shadow
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
@@ -45,10 +44,10 @@ export const reactionStyle = css({
   }
 });
 export const reactedStyle = css({
-  backgroundColor: token('color.background.selected', B50),
-  borderColor: token('color.border.selected', B300),
+  backgroundColor: `var(--ds-background-selected, ${B50})`,
+  borderColor: `var(--ds-border-selected, ${B300})`,
   '&:hover': {
-    background: `${token('color.background.selected.hovered', B75)}`
+    background: `${`var(--ds-background-selected-hovered, ${B75})`}`
   }
 });
 export const flashHeight = akHeight - 2; // height without the 1px border

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { constants } from '../../shared';
 const REACTIONS_CONTAINER_WIDTH = 48;
 const REACTION_RIGHT_MARGIN = 8;
@@ -33,7 +32,7 @@ export const containerStyle = reactionsBorderWidth => css({
 export const titleStyle = css({
   '& > h1': {
     fontSize: '24px!important',
-    color: `${token('color.text', N800)}`
+    color: `${`var(--ds-text, ${N800})`}`
   }
 });
 const containerEdgeAngle = {
@@ -52,7 +51,7 @@ export const counterStyle = isSelected => css({
     width: '100%',
     padding: '0px!important',
     //Counter component has its own styles overriding them to match designs
-    color: isSelected ? `${token('color.text', B400)}!important` : `2px solid ${token('color.text', N500)}!important`
+    color: isSelected ? `${`var(--ds-text, ${B400})`}!important` : `2px solid ${`var(--ds-text, ${N500})`}!important`
   }
 });
 
@@ -94,7 +93,7 @@ export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
   '&:after': isSelected ? {
     content: '""',
-    borderBottom: `2px solid ${token('color.text', B400)}`,
+    borderBottom: `2px solid ${`var(--ds-text, ${B400})`}`,
     width: `${REACTIONS_CONTAINER_WIDTH}px`,
     bottom: '0px',
     display: 'block',
@@ -124,7 +123,7 @@ export const reactionViewStyle = css({
   flexDirection: 'column',
   p: {
     margin: 0,
-    color: `${token('color.text', N800)}`,
+    color: `${`var(--ds-text, ${N800})`}`,
     textTransform: 'capitalize',
     fontWeight: 600,
     fontSize: 16,
@@ -140,7 +139,7 @@ export const userListStyle = css({
   padding: 0,
   textAlign: 'left',
   li: {
-    color: `${token('color.text', N500)}`,
+    color: `${`var(--ds-text, ${N500})`}`,
     fontSize: 14
   }
 });

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

@@ -2,21 +2,19 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const pickerStyle = css({
   verticalAlign: 'middle',
   '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
+    display: 'inline-block'
   }
 });
 export const contentStyle = css({
   display: 'flex'
 });
 export const popupStyle = css({
-  background: token('elevation.surface.overlay', N0),
+  background: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: `${borderRadius()}px`,
-  boxShadow: token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   '&> div': {
     boxShadow: undefined,
     marginTop: '4px',

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;
 export const tooltipStyle = css({
@@ -23,18 +22,18 @@ export const tooltipStyle = css({
 });
 export const emojiNameStyle = css({
   textTransform: 'capitalize',
-  color: token('color.text.inverse', N90),
+  color: `var(--ds-text-inverse, ${N90})`,
   fontWeight: 600
 });
 export const footerStyle = css({
-  color: token('color.text.inverse', N90),
+  color: `var(--ds-text-inverse, ${N90})`,
   fontWeight: 300
 });
 export const underlineStyle = css({
   cursor: 'pointer',
   textDecoration: 'underline',
   ':hover': {
-    backgroundColor: token('color.background.neutral.bold', N800),
-    color: token('color.text.inverse', N0)
+    backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
+    color: `var(--ds-text-inverse, ${N0})`
   }
 });

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

@@ -86,7 +86,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   onDialogOpenCallback = () => {},
   onDialogCloseCallback = () => {},
   onDialogSelectReactionCallback = () => {},
-  emojiPickerSize = 'medium'
+  emojiPickerSize = 'medium',
+  miniMode = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -239,7 +240,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
     "data-testid": RENDER_REACTIONS_TESTID
   }, memorizedReactions.map(reaction => jsx(Reaction, {
     key: reaction.emojiId,
-    css: styles.reactionStyle,
     reaction: reaction,
     emojiProvider: emojiProvider,
     onClick: onReactionClick,
@@ -249,9 +249,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleUserListClick: handleOpenReactionsDialog,
     allowUserDialog: allowUserDialog
   })), jsx(ReactionPicker, {
-    css: styles.reactionStyle,
+    css: styles.reactionPickerStyle,
     emojiProvider: emojiProvider,
-    miniMode: true,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     disabled: status !== ReactionStatus.ready,
@@ -260,7 +259,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
     tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode
   }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
     content: jsx(FormattedMessage, i18n.messages.seeWhoReactedTooltip),
     hideTooltipOnClick: true

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

@@ -1,15 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-export const reactionStyle = css({
+export const reactionPickerStyle = css({
   display: 'inline-block',
-  margin: '4px'
+  marginTop: '4px'
 });
 export const seeWhoReacted = css({
   height: '24px',
   lineHeight: '24px',
-  paddingLeft: '4px',
-  paddingRight: '4px',
-  margin: '4px'
+  paddingLeft: 0,
+  paddingRight: 0,
+  marginTop: '4px',
+  marginLeft: '4px'
 });
 export const wrapperStyle = css({
   display: 'flex',

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

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const moreEmojiContainerStyle = css({
   display: 'flex'
 });
@@ -18,11 +17,11 @@ export const moreButtonStyle = css({
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
-    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
   }
 });
 export const separatorStyle = css({
-  backgroundColor: token('color.border', N30A),
+  backgroundColor: `var(--ds-border, ${N30A})`,
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

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

@@ -1,29 +1,32 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N70, N20, N40 } from '@atlaskit/theme/colors';
-export const DISABLED_BUTTON_COLOR = `${token('color.text.disabled', N70)} !important`;
+import { borderRadius } from '@atlaskit/theme/constants';
+export const DISABLED_BUTTON_COLOR = `${`var(--ds-text-disabled, ${N70})`} !important`;
 export const triggerStyle = ({
   miniMode = false,
   disabled = false
 }) => css({
   minWidth: '32px',
-  height: '32px',
+  height: '24px',
+  padding: 0,
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  borderRadius: '20px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   lineHeight: '16px',
   ...(miniMode && {
-    height: '24px',
-    padding: 0,
-    border: `1px solid ${token('color.border', N40)}`,
-    borderRadius: '20px'
+    minWidth: '24px',
+    padding: '4px',
+    border: 'none',
+    borderRadius: `${borderRadius()}px`
   }),
   ...(disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'
   }),
   '&:hover': {
-    background: `${token('color.background.neutral.subtle.hovered', N20)}`
+    background: `${`var(--ds-background-neutral-subtle-hovered, ${N20})`}`
   }
 });

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.3"
+	"version": "22.1.0"
 }

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

@@ -1,17 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var countStyle = css({
   fontSize: 11,
-  color: token('color.text.subtlest', N90),
+  color: "var(--ds-text-subtlest, ".concat(N90, ")"),
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',
   lineHeight: '14px'
 });
 export var highlightStyle = css({
-  color: token('color.text.selected', B400),
+  color: "var(--ds-text-selected, ".concat(B400, ")"),
   fontWeight: 600
 });
 export var containerStyle = css({

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

@@ -1,23 +1,22 @@
 /** @jsx jsx */
 import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var flashTime = 700;
 export var flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(B300, ")")
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(B300, ")")
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(B300, ")")
   }
 });
 export var containerStyle = css({

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

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+
 /**
  * Default styling px height for an emoji reaction
  */
-
 var akHeight = 24;
 /**
  * Styling Note:
@@ -25,19 +24,19 @@ export var reactionStyle = css({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(token('color.border', N40)),
+  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(token('color.text.subtle', N400)),
+  color: "".concat("var(--ds-text-subtle, ".concat(N400, ")")),
   cursor: 'pointer',
-  margin: 0,
+  margin: '4px 4px 0 0',
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {
-    background: "".concat(token('color.background.neutral.subtle.hovered', N20))
+    background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"))
   },
   '&:focus': {
-    boxShadow: "0 0 0 2px ".concat(token('color.border.focused', B100)),
+    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
     // background, box-shadow
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
@@ -45,10 +44,10 @@ export var reactionStyle = css({
   }
 });
 export var reactedStyle = css({
-  backgroundColor: token('color.background.selected', B50),
-  borderColor: token('color.border.selected', B300),
+  backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
+  borderColor: "var(--ds-border-selected, ".concat(B300, ")"),
   '&:hover': {
-    background: "".concat(token('color.background.selected.hovered', B75))
+    background: "".concat("var(--ds-background-selected-hovered, ".concat(B75, ")"))
   }
 });
 export var flashHeight = akHeight - 2; // height without the 1px border

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { constants } from '../../shared';
 var REACTIONS_CONTAINER_WIDTH = 48;
 var REACTION_RIGHT_MARGIN = 8;
@@ -35,7 +34,7 @@ export var containerStyle = function containerStyle(reactionsBorderWidth) {
 export var titleStyle = css({
   '& > h1': {
     fontSize: '24px!important',
-    color: "".concat(token('color.text', N800))
+    color: "".concat("var(--ds-text, ".concat(N800, ")"))
   }
 });
 var containerEdgeAngle = {
@@ -55,7 +54,7 @@ export var counterStyle = function counterStyle(isSelected) {
       width: '100%',
       padding: '0px!important',
       //Counter component has its own styles overriding them to match designs
-      color: isSelected ? "".concat(token('color.text', B400), "!important") : "2px solid ".concat(token('color.text', N500), "!important")
+      color: isSelected ? "".concat("var(--ds-text, ".concat(B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(N500, ")"), "!important")
     }
   });
 };
@@ -101,7 +100,7 @@ export var customTabWrapper = function customTabWrapper(isSelected, selectedEmoj
     '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
     '&:after': isSelected ? {
       content: '""',
-      borderBottom: "2px solid ".concat(token('color.text', B400)),
+      borderBottom: "2px solid ".concat("var(--ds-text, ".concat(B400, ")")),
       width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
       bottom: '0px',
       display: 'block',
@@ -132,7 +131,7 @@ export var reactionViewStyle = css({
   flexDirection: 'column',
   p: {
     margin: 0,
-    color: "".concat(token('color.text', N800)),
+    color: "".concat("var(--ds-text, ".concat(N800, ")")),
     textTransform: 'capitalize',
     fontWeight: 600,
     fontSize: 16,
@@ -148,7 +147,7 @@ export var userListStyle = css({
   padding: 0,
   textAlign: 'left',
   li: {
-    color: "".concat(token('color.text', N500)),
+    color: "".concat("var(--ds-text, ".concat(N500, ")")),
     fontSize: 14
   }
 });

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

@@ -2,21 +2,19 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var pickerStyle = css({
   verticalAlign: 'middle',
   '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
+    display: 'inline-block'
   }
 });
 export var contentStyle = css({
   display: 'flex'
 });
 export var popupStyle = css({
-  background: token('elevation.surface.overlay', N0),
+  background: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   '&> div': {
     boxShadow: undefined,
     marginTop: '4px',

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export var verticalMargin = 5;
 export var tooltipStyle = css({
@@ -23,18 +22,18 @@ export var tooltipStyle = css({
 });
 export var emojiNameStyle = css({
   textTransform: 'capitalize',
-  color: token('color.text.inverse', N90),
+  color: "var(--ds-text-inverse, ".concat(N90, ")"),
   fontWeight: 600
 });
 export var footerStyle = css({
-  color: token('color.text.inverse', N90),
+  color: "var(--ds-text-inverse, ".concat(N90, ")"),
   fontWeight: 300
 });
 export var underlineStyle = css({
   cursor: 'pointer',
   textDecoration: 'underline',
   ':hover': {
-    backgroundColor: token('color.background.neutral.bold', N800),
-    color: token('color.text.inverse', N0)
+    backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
+    color: "var(--ds-text-inverse, ".concat(N0, ")")
   }
 });

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

@@ -96,7 +96,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
       onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
       _ref$emojiPickerSize = _ref.emojiPickerSize,
-      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize;
+      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
+      _ref$miniMode = _ref.miniMode,
+      miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -258,7 +260,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   }, memorizedReactions.map(function (reaction) {
     return jsx(Reaction, {
       key: reaction.emojiId,
-      css: styles.reactionStyle,
       reaction: reaction,
       emojiProvider: emojiProvider,
       onClick: onReactionClick,
@@ -269,9 +270,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       allowUserDialog: allowUserDialog
     });
   }), jsx(ReactionPicker, {
-    css: styles.reactionStyle,
+    css: styles.reactionPickerStyle,
     emojiProvider: emojiProvider,
-    miniMode: true,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     disabled: status !== ReactionStatus.ready,
@@ -280,7 +280,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
     tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode
   }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
     content: jsx(FormattedMessage, i18n.messages.seeWhoReactedTooltip),
     hideTooltipOnClick: true

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

@@ -1,15 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-export var reactionStyle = css({
+export var reactionPickerStyle = css({
   display: 'inline-block',
-  margin: '4px'
+  marginTop: '4px'
 });
 export var seeWhoReacted = css({
   height: '24px',
   lineHeight: '24px',
-  paddingLeft: '4px',
-  paddingRight: '4px',
-  margin: '4px'
+  paddingLeft: 0,
+  paddingRight: 0,
+  marginTop: '4px',
+  marginLeft: '4px'
 });
 export var wrapperStyle = css({
   display: 'flex',

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

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var moreEmojiContainerStyle = css({
   display: 'flex'
 });
@@ -18,11 +17,11 @@ export var moreButtonStyle = css({
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
-    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
   }
 });
 export var separatorStyle = css({
-  backgroundColor: token('color.border', N30A),
+  backgroundColor: "var(--ds-border, ".concat(N30A, ")"),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

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

@@ -6,9 +6,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N70, N20, N40 } from '@atlaskit/theme/colors';
-export var DISABLED_BUTTON_COLOR = "".concat(token('color.text.disabled', N70), " !important");
+import { borderRadius } from '@atlaskit/theme/constants';
+export var DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(N70, ")"), " !important");
 export var triggerStyle = function triggerStyle(_ref) {
   var _ref$miniMode = _ref.miniMode,
       miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
@@ -16,22 +16,25 @@ export var triggerStyle = function triggerStyle(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return css(_objectSpread(_objectSpread(_objectSpread({
     minWidth: '32px',
-    height: '32px',
+    height: '24px',
+    padding: 0,
+    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+    borderRadius: '20px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     lineHeight: '16px'
   }, miniMode && {
-    height: '24px',
-    padding: 0,
-    border: "1px solid ".concat(token('color.border', N40)),
-    borderRadius: '20px'
+    minWidth: '24px',
+    padding: '4px',
+    border: 'none',
+    borderRadius: "".concat(borderRadius(), "px")
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'
   }), {}, {
     '&:hover': {
-      background: "".concat(token('color.background.neutral.subtle.hovered', N20))
+      background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"))
     }
   }));
 };

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.3"
+	"version": "22.1.0"
 }

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

@@ -31,7 +31,7 @@ export declare const RENDER_REACTIONS_TESTID = "render-reactions";
  * Test id for the view all reacted user to trigger the dialog
  */
 export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-users-dialog";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Pick<ReactionProps, 'allowUserDialog'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Pick<ReactionProps, 'allowUserDialog'> {
     /**
      * event handler to fetching the reactions
      */

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

@@ -1,3 +1,3 @@
-export declare const reactionStyle: import("@emotion/react").SerializedStyles;
+export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
 export declare const seeWhoReacted: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ReactionsProps, ReactionPickerProps } from '../../components';
 import { ReactionStatus, Actions, State, StorePropInput } from '../../types';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.0.3",
+  "version": "22.1.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"