@atlaskit/reactions 21.0.5 → 21.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 21.1.0
+
+### Minor Changes
+
+- [`f0c986fe03a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0c986fe03a) - Migrated styles to emotion and removed typestyle dependency from atlassian-frontend dependencies.
+
+### Patch Changes
+
+- [`876cae9c606`](https://bitbucket.org/atlassian/atlassian-frontend/commits/876cae9c606) - Changed selector first-child to first-of-type to better support SSR
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
 ## 21.0.5
 
 ### Patch Changes

package/dist/cjs/components/Counter.js

@@ -7,29 +7,28 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightStyle = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
+exports.highlightStyle = exports.counterTestId = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _motion = require("@atlaskit/motion");
 
-var _typestyle = require("typestyle");
-
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 
 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 countStyle = (0, _typestyle.style)({
+/** @jsx jsx */
+var counterTestId = 'counter-container';
+exports.counterTestId = counterTestId;
+var countStyle = (0, _core.css)({
   fontSize: 11,
   // TODO: nice to have a theme level token for fontSize
   color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
@@ -39,12 +38,12 @@ var countStyle = (0, _typestyle.style)({
   lineHeight: '14px'
 });
 exports.countStyle = countStyle;
-var highlightStyle = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.brand', _colors.B400),
+var highlightStyle = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;
-var containerStyle = (0, _typestyle.style)({
+var containerStyle = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column'
 });
@@ -78,25 +77,26 @@ var Counter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var previousValue = (0, _usePreviousValue.default)(value);
   var label = getLabel(value);
   var increase = previousValue ? previousValue < value : false;
-  var rootClassName = (0, _classnames.default)(countStyle, className);
-  var currentClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, highlightStyle, highlight));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: rootClassName,
+  return (0, _core.jsx)("div", {
+    className: className,
+    css: countStyle,
     style: {
       width: label.length * 7
     }
-  }, /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, null, /*#__PURE__*/_react.default.createElement(_motion.SlideIn, {
+  }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
     duration: animationDuration
   }, function (motion, direction) {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _core.jsx)("div", {
       ref: motion.ref,
-      className: (0, _classnames.default)(containerStyle, motion.className, (0, _typestyle.style)({
+      css: [containerStyle, (0, _core.css)({
         position: direction === 'exiting' ? 'absolute' : undefined
-      }))
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: currentClassName,
+      })],
+      className: motion.className,
+      "data-testid": counterTestId
+    }, (0, _core.jsx)("div", {
+      css: highlight && highlightStyle,
       key: value
     }, label));
   })));

package/dist/cjs/components/EmojiButton.js

@@ -23,12 +23,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _element = require("@atlaskit/emoji/element");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _typestyle = require("typestyle");
-
 var _utils = require("./utils");
 
 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); }
@@ -39,7 +39,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var emojiButtonStyle = (0, _typestyle.style)({
+var emojiButtonStyle = (0, _core.css)({
   outline: 'none',
   display: 'flex',
   backgroundColor: 'transparent',
@@ -48,11 +48,9 @@ var emojiButtonStyle = (0, _typestyle.style)({
   cursor: 'pointer',
   margin: '0',
   padding: '10px 8px',
-  $nest: {
-    '&:hover > span': {
-      transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-      transform: 'scale(1.33)'
-    }
+  '&:hover > span': {
+    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
+    transform: 'scale(1.33)'
   }
 });
 
@@ -87,10 +85,10 @@ var EmojiButton = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           emojiId = _this$props.emojiId,
           emojiProvider = _this$props.emojiProvider;
-      return /*#__PURE__*/_react.default.createElement("button", {
+      return (0, _core.jsx)("button", {
         onMouseUp: this.handleMouseDown,
-        className: emojiButtonStyle
-      }, /*#__PURE__*/_react.default.createElement(_element.ResourcedEmoji, {
+        css: emojiButtonStyle
+      }, (0, _core.jsx)(_element.ResourcedEmoji, {
         emojiProvider: emojiProvider,
         emojiId: emojiId
       }));

package/dist/cjs/components/FlashAnimation.js

@@ -5,43 +5,43 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flashStyle = exports.FlashAnimation = void 0;
+exports.flashStyle = exports.flashAnimationTestId = exports.flashAnimation = exports.FlashAnimation = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _typestyle = require("typestyle");
-
-var containerStyle = (0, _typestyle.style)({
+/** @jsx jsx */
+var flashAnimationTestId = 'flash-animation';
+exports.flashAnimationTestId = flashAnimationTestId;
+var containerStyle = (0, _core.css)({
   width: '100%',
   height: '100%'
 });
 var flashTime = 700;
-var flashAnimation = (0, _typestyle.keyframes)({
+var flashAnimation = (0, _core.keyframes)({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   }
 });
-var flashStyle = (0, _typestyle.style)({
+exports.flashAnimation = flashAnimation;
+var flashStyle = (0, _core.css)({
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });
 /**
@@ -51,8 +51,10 @@ var flashStyle = (0, _typestyle.style)({
 exports.flashStyle = flashStyle;
 
 var FlashAnimation = function FlashAnimation(props) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(containerStyle, props.className, (0, _defineProperty2.default)({}, flashStyle, props.flash))
+  return (0, _core.jsx)("div", {
+    className: props.className,
+    css: [containerStyle, props.flash && flashStyle],
+    "data-testid": flashAnimationTestId
   }, props.children);
 };
 

package/dist/cjs/components/Reaction.js

@@ -23,6 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _element = require("@atlaskit/emoji/element");
@@ -31,12 +33,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _typestyle = require("typestyle");
-
 var _analytics = require("../analytics");
 
 var _Counter = require("./Counter");
@@ -60,12 +58,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Padding and line height are set within the child components
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
-var emojiStyle = (0, _typestyle.style)({
+var emojiStyle = (0, _core.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: '4px 4px 4px 8px'
 });
-var reactionStyle = (0, _typestyle.style)({
+var reactionStyle = (0, _core.css)({
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
@@ -81,24 +79,20 @@ var reactionStyle = (0, _typestyle.style)({
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
-  $nest: {
-    '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
-    }
+  '&:hover': {
+    background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
   }
 });
-var reactedStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.background.brand', _colors.B50),
-  borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300),
-  $nest: {
-    '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.brand.hovered', _colors.B75))
-    }
+var reactedStyle = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
+  borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
+  '&:hover': {
+    background: "".concat((0, _tokens.token)('color.background.selected.hovered', _colors.B75))
   }
 });
 var flashHeight = _utils.akHeight - 2; // height without the 1px border
 
-var flashStyle = (0, _typestyle.style)({
+var flashStyle = (0, _core.css)({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',
@@ -190,28 +184,28 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
           classNameProp = _this$props3.className,
           flash = _this$props3.flash;
       var emojiName = this.state.emojiName;
-      var classNames = (0, _classnames.default)(reactionStyle, classNameProp, (0, _defineProperty2.default)({}, reactedStyle, reaction.reacted));
       var emojiId = {
         id: reaction.emojiId,
         shortName: ''
       };
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: classNames,
+      return (0, _core.jsx)("button", {
+        className: classNameProp,
+        css: [reactionStyle, reaction.reacted && reactedStyle],
         onMouseUp: this.handleMouseDown,
         onMouseEnter: this.handleMouseEnter
-      }, /*#__PURE__*/_react.default.createElement(_ReactionTooltip.ReactionTooltip, {
+      }, (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
         emojiName: emojiName,
         reaction: reaction
-      }, /*#__PURE__*/_react.default.createElement(_FlashAnimation.FlashAnimation, {
+      }, (0, _core.jsx)(_FlashAnimation.FlashAnimation, {
         flash: flash,
-        className: flashStyle
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: emojiStyle
-      }, /*#__PURE__*/_react.default.createElement(_element.ResourcedEmoji, {
+        css: flashStyle
+      }, (0, _core.jsx)("div", {
+        css: emojiStyle
+      }, (0, _core.jsx)(_element.ResourcedEmoji, {
         emojiProvider: emojiProvider,
         emojiId: emojiId,
         fitToHeight: 16
-      })), /*#__PURE__*/_react.default.createElement(_Counter.Counter, {
+      })), (0, _core.jsx)(_Counter.Counter, {
         value: reaction.count,
         highlight: reaction.reacted
       }))));

package/dist/cjs/components/ReactionPicker.js

@@ -23,6 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _picker = require("@atlaskit/emoji/picker");
 
 var _popper = require("@atlaskit/popper");
@@ -33,14 +35,10 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _typestyle = require("typestyle");
-
 var _Selector = require("./Selector");
 
 var _Trigger = require("./Trigger");
@@ -57,26 +55,22 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var pickerStyle = (0, _typestyle.style)({
+var pickerStyle = (0, _core.css)({
   verticalAlign: 'middle',
-  $nest: {
-    '&.miniMode': {
-      display: 'inline-block',
-      marginRight: '4px'
-    }
+  '&.miniMode': {
+    display: 'inline-block',
+    marginRight: '4px'
   }
 });
-var contentStyle = (0, _typestyle.style)({
+var contentStyle = (0, _core.css)({
   display: 'flex'
 });
-var popupStyle = (0, _typestyle.style)({
+var popupStyle = (0, _core.css)({
   background: (0, _tokens.token)('elevation.surface.overlay', _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)),
-  $nest: {
-    '&> div': {
-      boxShadow: undefined
-    }
+  '&> div': {
+    boxShadow: undefined
   }
 });
 
@@ -201,9 +195,9 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           allowAllEmojis = _this$props.allowAllEmojis;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: contentStyle
-      }, /*#__PURE__*/_react.default.createElement(_Selector.Selector, {
+      return (0, _core.jsx)("div", {
+        css: contentStyle
+      }, (0, _core.jsx)(_Selector.Selector, {
         emojiProvider: emojiProvider,
         onSelection: this.onEmojiSelected,
         showMore: allowAllEmojis,
@@ -213,7 +207,7 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderEmojiPicker",
     value: function renderEmojiPicker() {
-      return /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
+      return (0, _core.jsx)(_picker.EmojiPicker, {
         emojiProvider: this.props.emojiProvider,
         onSelection: this.onEmojiSelected
       });
@@ -229,22 +223,21 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       var _this2 = this;
 
       var isOpen = this.state.isOpen;
-      var miniMode = this.props.miniMode;
-      var classNames = (0, _classnames.default)(pickerStyle, {
-        isOpen: isOpen,
-        miniMode: miniMode
-      }, this.props.className);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classNames
-      }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref) {
+      var _this$props2 = this.props,
+          miniMode = _this$props2.miniMode,
+          className = _this$props2.className;
+      return (0, _core.jsx)("div", {
+        className: " ".concat(isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className),
+        css: pickerStyle
+      }, (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref) {
         var ref = _ref.ref;
-        return /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, {
+        return (0, _core.jsx)(_Trigger.Trigger, {
           ref: ref,
           onClick: _this2.onTriggerClick,
           miniMode: miniMode,
           disabled: _this2.props.disabled
         });
-      }), /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+      }), (0, _core.jsx)(_popper.Popper, {
         placement: "bottom-start",
         modifiers: this.popperModifiers
       }, function (_ref2) {
@@ -252,13 +245,13 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
             style = _ref2.style,
             update = _ref2.update;
         _this2.updatePopper = update;
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _this2.state.isOpen && /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _core.jsx)(_react.Fragment, null, isOpen && (0, _core.jsx)("div", {
           style: _objectSpread({
             zIndex: _constants.layers.layer()
           }, style),
           ref: ref
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: popupStyle
+        }, (0, _core.jsx)("div", {
+          css: popupStyle
         }, _this2.renderContent())));
       })));
     }

package/dist/cjs/components/ReactionTooltip.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,47 +11,50 @@ exports.ReactionTooltip = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _core = require("@emotion/core");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _typestyle = require("typestyle");
-
 var _tokens = require("@atlaskit/tokens");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _i18n = require("./i18n");
 
+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 */
 var verticalMargin = 5;
-var tooltipStyle = (0, _typestyle.style)({
+var tooltipStyle = (0, _core.css)({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   marginBottom: verticalMargin,
-  $nest: {
-    ul: {
-      listStyle: 'none',
-      margin: 0,
-      padding: 0,
-      textAlign: 'left'
-    },
-    li: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      marginTop: verticalMargin
-    }
+  ul: {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    textAlign: 'left'
+  },
+  li: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginTop: verticalMargin
   }
 });
-var emojiNameStyle = (0, _typestyle.style)({
+var emojiNameStyle = (0, _core.css)({
   textTransform: 'capitalize',
   color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 600
 });
-var footerStyle = (0, _typestyle.style)({
+var footerStyle = (0, _core.css)({
   color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 300
 });
@@ -61,26 +66,25 @@ var ReactionTooltip = function ReactionTooltip(_ref) {
       users = _ref.reaction.users;
 
   if (!users || users.length === 0) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _react.default.Children.only(children));
+    return (0, _core.jsx)(_react.Fragment, null, _react.default.Children.only(children));
   }
 
-  var content = /*#__PURE__*/_react.default.createElement("div", {
-    className: tooltipStyle
-  }, /*#__PURE__*/_react.default.createElement("ul", null, emojiName ? /*#__PURE__*/_react.default.createElement("li", {
-    className: emojiNameStyle
+  var content = (0, _core.jsx)("div", {
+    css: tooltipStyle
+  }, (0, _core.jsx)("ul", null, emojiName ? (0, _core.jsx)("li", {
+    css: emojiNameStyle
   }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map(function (user, index) {
-    return /*#__PURE__*/_react.default.createElement("li", {
+    return (0, _core.jsx)("li", {
       key: index
     }, user.displayName);
-  }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/_react.default.createElement("li", {
-    className: footerStyle
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
+  }), users.length > TOOLTIP_USERS_LIMIT ? (0, _core.jsx)("li", {
+    css: footerStyle
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - TOOLTIP_USERS_LIMIT
     }
   }))) : null));
-
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _core.jsx)(_tooltip.default, {
     content: content,
     position: "bottom"
   }, _react.default.Children.only(children));