@atlaskit/reactions 22.5.2 → 22.5.4

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

@@ -17,14 +17,14 @@ var _modalDialog = require("@atlaskit/modal-dialog");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
+var _constants = require("../../shared/constants");
+var _i18n = require("../../shared/i18n");
 var _types = require("../../types");
-var _shared = require("../../shared");
+var _ufo = require("../../ufo");
 var _Reaction = require("../Reaction");
 var _ReactionDialog = require("../ReactionDialog");
 var _ReactionPicker = require("../ReactionPicker");
-var styles = _interopRequireWildcard(require("./styles"));
-var _analytics2 = require("../../analytics/analytics");
-var _constants = require("../../shared/constants");
+var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -32,54 +32,51 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
-var ufoExperiences = {
+var ufoExperiences = exports.ufoExperiences = {
   /**
    * Expeirence when a reaction dialog is opened
    */
-  openDialog: _analytics.UFO.ReactionDialogOpened,
+  openDialog: _ufo.ReactionDialogOpened,
   /**
    * Experience when a reaction dialog is closed
    */
-  closeDialog: _analytics.UFO.ReactionDialogClosed,
+  closeDialog: _ufo.ReactionDialogClosed,
   /**
    * Experience when a reaction changed/fetched from inside the modal dialog
    */
-  selectedReactionChangeInsideDialog: _analytics.UFO.ReactionDialogSelectedReactionChanged
+  selectedReactionChangeInsideDialog: _ufo.ReactionDialogSelectedReactionChanged
 };
 
 /**
  * Test id for wrapper Reactions div
  */
-exports.ufoExperiences = ufoExperiences;
-var RENDER_REACTIONS_TESTID = 'render-reactions';
+var RENDER_REACTIONS_TESTID = exports.RENDER_REACTIONS_TESTID = 'render-reactions';
 /**
  * Test id for the view all reacted user to trigger the dialog
  */
-exports.RENDER_REACTIONS_TESTID = RENDER_REACTIONS_TESTID;
-var RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
-exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = RENDER_VIEWALL_REACTED_USERS_DIALOG;
+var RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
 /**
  * Get content of the tooltip
  */
 function getTooltip(status, errorMessage) {
   switch (status) {
     case _types.ReactionStatus.error:
-      return errorMessage || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.unexpectedError);
+      return errorMessage || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.unexpectedError);
     // When reaction is not available don't show any tooltip (e.g. Archive page in Confluence)
     case _types.ReactionStatus.disabled:
       return null;
     case _types.ReactionStatus.notLoaded:
     case _types.ReactionStatus.loading:
-      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.loadingReactions);
     case _types.ReactionStatus.ready:
-      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction);
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
   }
 }
 
 /**
  * Renders list of reactions
  */
-var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
+var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _ref$flash = _ref.flash,
     flash = _ref$flash === void 0 ? {} : _ref$flash,
     status = _ref.status,
@@ -125,9 +122,9 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     if (status !== _types.ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      if ((0, _analytics2.isSampled)(_constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP)) {
+      if ((0, _analytics.isSampled)(_constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP)) {
         var _renderTime$current;
-        _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
+        (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
         );
       }
       renderTime.current = undefined;
@@ -142,17 +139,17 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
   }, [getReactionDetails]);
   var handlePickerOpen = (0, _react.useCallback)(function () {
     openTime.current = Date.now();
-    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createPickerButtonClickedEvent, reactions.length);
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createPickerButtonClickedEvent, reactions.length);
   }, [createAnalyticsEvent, reactions]);
   var handleOnCancel = (0, _react.useCallback)(function () {
-    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createPickerCancelledEvent, openTime.current);
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createPickerCancelledEvent, openTime.current);
     openTime.current = undefined;
   }, [createAnalyticsEvent]);
   var handleOnMore = (0, _react.useCallback)(function () {
-    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createPickerMoreClickedEvent, openTime.current);
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createPickerMoreClickedEvent, openTime.current);
   }, [createAnalyticsEvent]);
   var handleOnSelection = (0, _react.useCallback)(function (emojiId, source) {
-    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionSelectionEvent, source, emojiId, reactions.find(function (reaction) {
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionSelectionEvent, source, emojiId, reactions.find(function (reaction) {
       return reaction.emojiId === emojiId;
     }), openTime.current);
     openTime.current = undefined;
@@ -261,7 +258,7 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
   return (0, _react2.jsx)("div", {
-    css: styles.wrapperStyle,
+    css: _styles.wrapperStyle,
     "data-testid": RENDER_REACTIONS_TESTID
   }, memorizedReactions.map(function (reaction) {
     return (0, _react2.jsx)(_Reaction.Reaction, {
@@ -276,7 +273,7 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       allowUserDialog: allowUserDialog
     });
   }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker, {
-    css: styles.reactionPickerStyle,
+    css: _styles.reactionPickerStyle,
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
@@ -289,19 +286,18 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode
   }), allowUserDialog && reactions.length > 0 && (0, _react2.jsx)(_tooltip.default, {
-    content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.seeWhoReactedTooltip),
+    content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
     hideTooltipOnClick: true
   }, (0, _react2.jsx)(_button.default, {
     appearance: "subtle-link",
     onClick: handleOpenAllReactionsDialog,
-    css: styles.seeWhoReacted,
+    css: _styles.seeWhoReactedStyle,
     testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.seeWhoReacted))), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted))), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
     selectedEmojiId: selectedEmojiId,
     reactions: memorizedReactions,
     emojiProvider: emojiProvider,
     handleCloseReactionsDialog: handleCloseReactionsDialog,
     handleSelectReaction: handleSelectReactionInDialog
   })));
-});
-exports.Reactions = Reactions;
+});

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

@@ -3,33 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.seeWhoReacted = exports.reactionPickerStyle = void 0;
+exports.wrapperStyle = exports.seeWhoReactedStyle = exports.reactionPickerStyle = void 0;
 var _react = require("@emotion/react");
 /** @jsx jsx */
 
-var reactionPickerStyle = (0, _react.css)({
+var reactionPickerStyle = exports.reactionPickerStyle = (0, _react.css)({
   display: 'inline-block',
-  marginTop: '4px'
+  marginTop: "var(--ds-space-050, 4px)"
 });
-exports.reactionPickerStyle = reactionPickerStyle;
-var seeWhoReacted = (0, _react.css)({
+var seeWhoReactedStyle = exports.seeWhoReactedStyle = (0, _react.css)({
   height: '24px',
   lineHeight: '24px',
   paddingLeft: 0,
   paddingRight: 0,
-  marginTop: '4px',
-  marginLeft: '4px'
+  marginTop: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-050, 4px)"
 });
-exports.seeWhoReacted = seeWhoReacted;
-var wrapperStyle = (0, _react.css)({
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
   alignItems: 'center',
   borderRadius: '15px',
-  marginTop: '-4px',
+  marginTop: "var(--ds-space-negative-050, -4px)",
   '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }
-});
-exports.wrapperStyle = wrapperStyle;
+});

package/dist/cjs/components/Selector/Selector.js

@@ -10,10 +10,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _shared = require("../../shared");
+var _constants = require("../../shared/constants");
 var _EmojiButton = require("../EmojiButton");
 var _ShowMore = require("../ShowMore");
-var styles = _interopRequireWildcard(require("./styles"));
+var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -21,18 +21,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Test id for wrapper Selector div
  */
-var RENDER_SELECTOR_TESTID = 'render-selector';
-exports.RENDER_SELECTOR_TESTID = RENDER_SELECTOR_TESTID;
+var RENDER_SELECTOR_TESTID = exports.RENDER_SELECTOR_TESTID = 'render-selector';
 /**
  * Reactions picker panel part of the <ReactionPicker /> component
  */
-var Selector = function Selector(_ref) {
+var Selector = exports.Selector = function Selector(_ref) {
   var emojiProvider = _ref.emojiProvider,
     onMoreClick = _ref.onMoreClick,
     onSelection = _ref.onSelection,
     showMore = _ref.showMore,
     _ref$pickerQuickReact = _ref.pickerQuickReactionEmojiIds,
-    pickerQuickReactionEmojiIds = _ref$pickerQuickReact === void 0 ? _shared.constants.DefaultReactions : _ref$pickerQuickReact;
+    pickerQuickReactionEmojiIds = _ref$pickerQuickReact === void 0 ? _constants.DefaultReactions : _ref$pickerQuickReact;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selection = _useState2[0],
@@ -85,7 +84,7 @@ var Selector = function Selector(_ref) {
     return (0, _react2.jsx)("div", {
       key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
       className: emoji === selection ? 'selected' : undefined,
-      css: [styles.emojiStyle, styles.revealStyle],
+      css: [_styles.emojiStyle, _styles.revealStyle],
       style: emojiStyleAnimation(index),
       "data-testid": RENDER_SELECTOR_TESTID
     }, (0, _react2.jsx)(_tooltip.default, {
@@ -97,14 +96,13 @@ var Selector = function Selector(_ref) {
     })));
   };
   return (0, _react2.jsx)("div", {
-    css: styles.selectorStyle
+    css: _styles.selectorStyle
   }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? (0, _react2.jsx)(_ShowMore.ShowMore, {
     key: "more",
-    buttonStyle: styles.revealStyle,
+    buttonStyle: _styles.revealStyle,
     style: {
-      button: emojiStyleAnimation(_shared.constants.DefaultReactions.length)
+      button: emojiStyleAnimation(_constants.DefaultReactions.length)
     },
     onClick: onMoreClick
   }) : null);
-};
-exports.Selector = Selector;
+};

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,9 +15,4 @@ Object.defineProperty(exports, "Selector", {
     return _Selector.Selector;
   }
 });
-exports.styles = void 0;
-var _Selector = require("./Selector");
-var _styles = _interopRequireWildcard(require("./styles"));
-exports.styles = _styles;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _Selector = require("./Selector");

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

@@ -7,13 +7,12 @@ exports.selectorStyle = exports.revealStyle = exports.revealAnimation = exports.
 var _react = require("@emotion/react");
 /** @jsx jsx */
 
-var selectorStyle = (0, _react.css)({
+var selectorStyle = exports.selectorStyle = (0, _react.css)({
   boxSizing: 'border-box',
   display: 'flex',
   padding: 0
 });
-exports.selectorStyle = selectorStyle;
-var emojiStyle = (0, _react.css)({
+var emojiStyle = exports.emojiStyle = (0, _react.css)({
   display: 'inline-block',
   opacity: 0,
   '&.selected': {
@@ -21,8 +20,7 @@ var emojiStyle = (0, _react.css)({
     transform: 'translateY(-48px) scale(2.667)'
   }
 });
-exports.emojiStyle = emojiStyle;
-var revealAnimation = (0, _react.keyframes)({
+var revealAnimation = exports.revealAnimation = (0, _react.keyframes)({
   '0%': {
     opacity: 1,
     transform: 'scale(0.5)'
@@ -35,8 +33,7 @@ var revealAnimation = (0, _react.keyframes)({
     transform: 'scale(1)'
   }
 });
-exports.revealAnimation = revealAnimation;
-var revealStyle = (0, _react.css)({
+var revealStyle = exports.revealStyle = (0, _react.css)({
   animation: "".concat(revealAnimation, " 150ms ease-in-out forwards")
 });
 
@@ -44,10 +41,8 @@ var revealStyle = (0, _react.css)({
  * custom css styling for the emoji icon
  * @param index location of the emoji in the rendered list of items
  */
-exports.revealStyle = revealStyle;
-var emojiStyleAnimation = function emojiStyleAnimation(index) {
+var emojiStyleAnimation = exports.emojiStyleAnimation = function emojiStyleAnimation(index) {
   return {
     animationDelay: "".concat(index * 50, "ms")
   };
-};
-exports.emojiStyleAnimation = emojiStyleAnimation;
+};

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,23 +10,19 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _shared = require("../../shared");
-var styles = _interopRequireWildcard(require("./styles"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _i18n = require("../../shared/i18n");
+var _styles = require("./styles");
 /** @jsx jsx */
 
 /**
  * Test id for wrapper button
  */
-var RENDER_SHOWMORE_TESTID = 'show-more-button';
-exports.RENDER_SHOWMORE_TESTID = RENDER_SHOWMORE_TESTID;
-var RENDER_WRAPPER_TESTID = 'show-more-wrapper';
-exports.RENDER_WRAPPER_TESTID = RENDER_WRAPPER_TESTID;
+var RENDER_SHOWMORE_TESTID = exports.RENDER_SHOWMORE_TESTID = 'show-more-button';
+var RENDER_WRAPPER_TESTID = exports.RENDER_WRAPPER_TESTID = 'show-more-wrapper';
 /**
  * Show more custom emojis button
  */
-var ShowMore = function ShowMore(_ref) {
+var ShowMore = exports.ShowMore = function ShowMore(_ref) {
   var onClick = _ref.onClick,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
@@ -36,18 +31,18 @@ var ShowMore = function ShowMore(_ref) {
     buttonStyle = _ref.buttonStyle;
   return (0, _react2.jsx)("div", {
     className: className.container,
-    css: styles.moreEmojiContainerStyle,
+    css: _styles.moreEmojiContainerStyle,
     style: style.container,
     "data-testid": RENDER_WRAPPER_TESTID
   }, (0, _react2.jsx)("div", {
-    css: styles.separatorStyle
-  }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.moreEmoji, function (message) {
+    css: _styles.separatorStyle
+  }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.moreEmoji, function (message) {
     return (0, _react2.jsx)(_tooltip.default, {
       content: message
     }, (0, _react2.jsx)("button", {
       className: className.button,
-      css: [styles.moreButtonStyle, buttonStyle],
-      "aria-label": _shared.i18n.messages.moreEmoji.defaultMessage,
+      css: [_styles.moreButtonStyle, buttonStyle],
+      "aria-label": _i18n.messages.moreEmoji.defaultMessage,
       type: "button",
       style: style.button,
       onClick: onClick,
@@ -56,5 +51,4 @@ var ShowMore = function ShowMore(_ref) {
       label: "More"
     })));
   }));
-};
-exports.ShowMore = ShowMore;
+};

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

@@ -9,31 +9,28 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
-var moreEmojiContainerStyle = (0, _react.css)({
+var moreEmojiContainerStyle = exports.moreEmojiContainerStyle = (0, _react.css)({
   display: 'flex'
 });
-exports.moreEmojiContainerStyle = moreEmojiContainerStyle;
-var moreButtonStyle = (0, _react.css)({
+var moreButtonStyle = exports.moreButtonStyle = (0, _react.css)({
   opacity: 0,
   outline: 'none',
   backgroundColor: 'transparent',
   border: 0,
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   cursor: 'pointer',
-  margin: '4px 4px 4px 0',
-  padding: '4px',
+  margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " 0"),
+  padding: "var(--ds-space-050, 4px)",
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
   }
 });
-exports.moreButtonStyle = moreButtonStyle;
-var separatorStyle = (0, _react.css)({
+var separatorStyle = exports.separatorStyle = (0, _react.css)({
   backgroundColor: "var(--ds-border, ".concat(_colors.N30A, ")"),
-  margin: '8px 8px 8px 4px',
+  margin: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)"),
   width: '1px',
   height: '60%',
   display: 'inline-block'
-});
-exports.separatorStyle = separatorStyle;
+});

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,22 +11,18 @@ var _react2 = require("@emotion/react");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji-add"));
-var styles = _interopRequireWildcard(require("./styles"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _styles = require("./styles");
 /** @jsx jsx */
 
 /**
  * Test id for the tooltip
  */
-var RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
-exports.RENDER_TOOLTIP_TRIGGER_TESTID = RENDER_TOOLTIP_TRIGGER_TESTID;
-var RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
-exports.RENDER_TRIGGER_BUTTON_TESTID = RENDER_TRIGGER_BUTTON_TESTID;
+var RENDER_TOOLTIP_TRIGGER_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
+var RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
 /**
  * Render an emoji button to open the reactions select picker
  */
-var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var onClick = props.onClick,
     miniMode = props.miniMode,
     tooltipContent = props.tooltipContent,
@@ -45,7 +40,7 @@ var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     content: tooltipContent
   }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    css: styles.triggerStyle({
+    css: (0, _styles.triggerStyle)({
       miniMode: miniMode,
       disabled: disabled
     }),
@@ -59,5 +54,4 @@ var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     spacing: "none",
     ref: ref
   }, ariaAttributes)));
-});
-exports.Trigger = Trigger;
+});

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

@@ -9,11 +9,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
-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) {
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+var DISABLED_BUTTON_COLOR = exports.DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(_colors.N70, ")"), " !important");
+var triggerStyle = exports.triggerStyle = function triggerStyle(_ref) {
   var _ref$miniMode = _ref.miniMode,
     miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
     _ref$disabled = _ref.disabled,
@@ -30,7 +29,7 @@ var triggerStyle = function triggerStyle(_ref) {
     lineHeight: '16px'
   }, miniMode && {
     minWidth: '24px',
-    padding: '4px',
+    padding: "var(--ds-space-050, 4px)",
     border: 'none',
     borderRadius: "".concat((0, _constants.borderRadius)(), "px")
   }), disabled && {
@@ -46,5 +45,4 @@ var triggerStyle = function triggerStyle(_ref) {
       outline: 'none'
     }
   }));
-};
-exports.triggerStyle = triggerStyle;
+};

package/dist/cjs/components/UfoErrorBoundary/UfoErrorBoundary.js

@@ -19,7 +19,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /**
  * Error boundary wrapper to notify "failure" for UFO events of components when there was a re-rendering exception caught inside the `componentDidCatch` event handler
  */
-var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
+var UfoErrorBoundary = exports.UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(UfoErrorBoundary, _React$Component);
   var _super = _createSuper(UfoErrorBoundary);
   function UfoErrorBoundary() {
@@ -59,5 +59,4 @@ var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
     }
   }]);
   return UfoErrorBoundary;
-}(_react.default.Component);
-exports.UfoErrorBoundary = UfoErrorBoundary;
+}(_react.default.Component);

package/dist/cjs/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -10,11 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _components = require("../../components");
-var _analytics = require("../../analytics");
+var _ufo = require("../../ufo");
 /**
  * Reaction Picker component
  */
-var ConnectedReactionPicker = function ConnectedReactionPicker(props) {
+var ConnectedReactionPicker = exports.ConnectedReactionPicker = function ConnectedReactionPicker(props) {
   var store = props.store,
     containerAri = props.containerAri,
     ari = props.ari;
@@ -41,9 +41,8 @@ var ConnectedReactionPicker = function ConnectedReactionPicker(props) {
     }))();
   };
   return /*#__PURE__*/_react.default.createElement(_components.UfoErrorBoundary, {
-    experiences: [_analytics.UFO.PickerRender]
+    experiences: [_ufo.PickerRender]
   }, /*#__PURE__*/_react.default.createElement(_components.ReactionPicker, (0, _extends2.default)({}, props, {
     onSelection: onSelection
   })));
-};
-exports.ConnectedReactionPicker = ConnectedReactionPicker;
+};

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

@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, state) {
+var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, state) {
   var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
   if (!state || !reactionsState) {
     return {
@@ -62,8 +62,7 @@ var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, st
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-exports.mapStateToPropsHelper = mapStateToPropsHelper;
-var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari) {
+var mapDispatchToPropsHelper = exports.mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari) {
   return {
     loadReaction: function loadReaction() {
       actions.getReactions(containerAri, ari);
@@ -79,8 +78,7 @@ var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, contai
     }
   };
 };
-exports.mapDispatchToPropsHelper = mapDispatchToPropsHelper;
-var ConnectedReactionsView = function ConnectedReactionsView(props) {
+var ConnectedReactionsView = exports.ConnectedReactionsView = function ConnectedReactionsView(props) {
   var ari = props.ari,
     containerAri = props.containerAri,
     store = props.store,
@@ -108,7 +106,7 @@ var ConnectedReactionsView = function ConnectedReactionsView(props) {
   (0, _react.useEffect)(function () {
     return function cleanup() {
       var _experienceInstance$c;
-      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 || _experienceInstance$c.abort({
         metadata: {
           source: 'ConnectedReactionsView',
           ari: ari,
@@ -214,5 +212,4 @@ var ConnectedReactionsView = function ConnectedReactionsView(props) {
   }, stateData && dispatchData ? /*#__PURE__*/_react.default.createElement(_components.Reactions, (0, _extends2.default)({
     key: "".concat(containerAri, "|").concat(ari)
   }, rest, dispatchData, stateData)) : null));
-};
-exports.ConnectedReactionsView = ConnectedReactionsView;
+};