@atlaskit/emoji 64.2.1 → 64.3.0

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

@@ -1,27 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typeAheadListContainer = exports.typeAheadList = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.selected = exports.emojiTypeAheadSpinnerContainer = exports.emojiTypeAheadSpinner = exports.emojiTypeAhead = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.typeaheadSelected = exports.typeAheadListContainer = exports.typeAheadList = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.selected = exports.emojiTypeAheadSpinnerContainer = exports.emojiTypeAheadSpinner = exports.emojiTypeAhead = void 0;
 
-var _typestyle = require("typestyle");
+var _core = require("@emotion/core");
 
 var _tokens = require("@atlaskit/tokens");
 
 var _sharedStyles = require("../../util/shared-styles");
 
-var selected = 'emoji-typeahead-selected';
-exports.selected = selected;
 var emojiTypeAhead = 'emoji-typeahead-element';
 exports.emojiTypeAhead = emojiTypeAhead;
-var typeAheadListContainer = 'emoji-typeahead-list-container';
+var typeAheadListContainer = 'emoji-typeahead-list-container'; // editor-core is using this static class name for testing
+
 exports.typeAheadListContainer = typeAheadListContainer;
-var typeAheadList = (0, _typestyle.style)({
+var typeaheadSelected = 'emoji-typeahead-selected';
+exports.typeaheadSelected = typeaheadSelected;
+var typeAheadList = (0, _core.css)({
   background: (0, _tokens.token)('elevation.surface.overlay', 'white'),
   border: "1px solid ".concat(_sharedStyles.noDialogContainerBorderColor),
   borderRadius: _sharedStyles.noDialogContainerBorderRadius,
@@ -30,36 +27,37 @@ var typeAheadList = (0, _typestyle.style)({
   width: _sharedStyles.emojiTypeAheadWidth
 });
 exports.typeAheadList = typeAheadList;
-var typeAheadEmpty = (0, _typestyle.style)({
+var typeAheadEmpty = (0, _core.css)({
   display: 'none'
 });
 exports.typeAheadEmpty = typeAheadEmpty;
-var typeAheadItem = (0, _typestyle.style)({
+var selected = (0, _core.css)({
+  backgroundColor: _sharedStyles.emojiPreviewSelectedColor
+});
+exports.selected = selected;
+var typeAheadItem = (0, _core.css)({
   cursor: 'pointer',
   display: 'block',
   listStyleType: 'none',
   overflow: 'hidden',
-  width: _sharedStyles.emojiTypeAheadWidth,
-  $nest: (0, _defineProperty2.default)({}, "&.".concat(selected), {
-    backgroundColor: _sharedStyles.emojiPreviewSelectedColor
-  })
+  width: _sharedStyles.emojiTypeAheadWidth
 });
 exports.typeAheadItem = typeAheadItem;
-var typeAheadItemRow = (0, _typestyle.style)({
+var typeAheadItemRow = (0, _core.css)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
   verticalAlign: 'middle'
 });
 exports.typeAheadItemRow = typeAheadItemRow;
-var emojiTypeAheadSpinnerContainer = (0, _typestyle.style)({
+var emojiTypeAheadSpinnerContainer = (0, _core.css)({
   position: 'relative',
   height: "".concat(_sharedStyles.emojiTypeAheadMaxHeight, "px"),
   paddingTop: "".concat(((_sharedStyles.emojiTypeAheadMaxHeight - 30) / 2).toFixed(), "px"),
   boxSizing: 'border-box'
 });
 exports.emojiTypeAheadSpinnerContainer = emojiTypeAheadSpinnerContainer;
-var emojiTypeAheadSpinner = (0, _typestyle.style)({
+var emojiTypeAheadSpinner = (0, _core.css)({
   textAlign: 'center'
 });
 exports.emojiTypeAheadSpinner = emojiTypeAheadSpinner;

package/dist/cjs/components/uploader/EmojiUploadComponent.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,13 +21,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactIntlNext = require("react-intl-next");
+var _core = require("@emotion/core");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 
-var styles = _interopRequireWildcard(require("./styles"));
+var _reactIntlNext = require("react-intl-next");
 
 var _EmojiResource = require("../../api/EmojiResource");
 
@@ -39,9 +35,7 @@ var _UploadEmoji = require("../common/UploadEmoji");
 
 var _analytics = require("../../util/analytics");
 
-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");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -118,13 +112,13 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var uploadErrorMessage = this.state.uploadErrorMessage;
-      var errorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.emojiUploadWidget]),
+      var errorMessage = uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiUploadWidget,
         ref: this.props.onUploaderRef
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.emojiUploadFooter])
-      }, /*#__PURE__*/_react.default.createElement(_EmojiUploadPicker.default, {
+      }, (0, _core.jsx)("div", {
+        css: _styles.emojiUploadFooter
+      }, (0, _core.jsx)(_EmojiUploadPicker.default, {
         ref: this.onUploaderRef,
         onFileChooserClicked: this.onFileChooserClicked,
         onUploadCancelled: this.onUploadCancelled,

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emojiUploadWidget = exports.emojiUploadFooter = void 0;
 
-var _typestyle = require("typestyle");
-
 var _tokens = require("@atlaskit/tokens");
 
 var _constants = require("../../util/constants");
 
+var _core = require("@emotion/core");
+
 // Uploader
-var emojiUploadWidget = (0, _typestyle.style)({
+var emojiUploadWidget = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -27,7 +27,7 @@ var emojiUploadWidget = (0, _typestyle.style)({
 }); /// Footer
 
 exports.emojiUploadWidget = emojiUploadWidget;
-var emojiUploadFooter = (0, _typestyle.style)({
+var emojiUploadFooter = (0, _core.css)({
   flex: '0 0 auto'
 });
 exports.emojiUploadFooter = emojiUploadFooter;

package/dist/cjs/index.js

@@ -111,7 +111,7 @@ Object.defineProperty(exports, "emojiImage", {
 Object.defineProperty(exports, "emojiNode", {
   enumerable: true,
   get: function get() {
-    return _styles.emojiNode;
+    return _styles.emojiNodeStyles;
   }
 });
 Object.defineProperty(exports, "emojiPickerHeight", {
@@ -147,13 +147,13 @@ Object.defineProperty(exports, "recordSelectionSucceededSli", {
 Object.defineProperty(exports, "selectOnHover", {
   enumerable: true,
   get: function get() {
-    return _styles.selectOnHover;
+    return _styles.selectOnHoverStyles;
   }
 });
 Object.defineProperty(exports, "selected", {
   enumerable: true,
   get: function get() {
-    return _styles.selected;
+    return _styles.commonSelectedStyles;
   }
 });
 Object.defineProperty(exports, "toEmojiId", {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.2.1",
+	"version": "64.3.0",
 	"sideEffects": false
 }

package/dist/es2019/api/media/SiteEmojiResource.js

@@ -163,7 +163,11 @@ export default class SiteEmojiResource {
   }
 
   findEmoji(emojiId) {
-    const path = `../${emojiId.id}`;
+    if (!emojiId.id) {
+      return Promise.reject(false);
+    }
+
+    const path = `../${encodeURIComponent(emojiId.id)}`;
     return emojiRequest(this.siteServiceConfig, {
       path
     }).then(serviceResponse => {
@@ -186,7 +190,11 @@ export default class SiteEmojiResource {
       return Promise.reject(false);
     }
 
-    const path = `${emoji.id}`;
+    if (!emoji.id) {
+      return Promise.reject(false);
+    }
+
+    const path = `${encodeURIComponent(emoji.id)}`;
     const requestInit = {
       method: 'DELETE'
     };

package/dist/es2019/components/common/CachingEmoji.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -7,7 +8,6 @@ import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-hel
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
-import { EmojiContext } from '../../context/EmojiContext';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -46,7 +46,7 @@ export const CachingEmoji = props => {
 
 export class CachingMediaEmoji extends PureComponent {
   constructor(props, context) {
-    super(props);
+    super(props, context);
 
     _defineProperty(this, "mounted", false);
 
@@ -95,10 +95,6 @@ export class CachingMediaEmoji extends PureComponent {
   }
 
   loadEmoji(emoji, context, forceLoad) {
-    if (!context) {
-      return;
-    }
-
     if (!context.emoji) {
       return undefined;
     }
@@ -196,6 +192,8 @@ export class CachingMediaEmoji extends PureComponent {
 
 }
 
-_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
+_defineProperty(CachingMediaEmoji, "contextTypes", {
+  emoji: PropTypes.object
+});
 
 export default CachingEmoji;

package/dist/es2019/components/common/DeleteButton.js

@@ -1,15 +1,17 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import React from 'react';
 import { token } from '@atlaskit/tokens';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
-import * as styles from './styles';
+import { emojiDeleteButton, deleteButton } from './styles';
 
-const DeleteButton = props => /*#__PURE__*/React.createElement("span", {
-  className: styles.deleteButton
-}, /*#__PURE__*/React.createElement(Button, {
-  iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
+const DeleteButton = props => jsx("span", {
+  css: deleteButton,
+  className: emojiDeleteButton
+}, jsx(Button, {
+  iconBefore: jsx(CrossCircleIcon, {
     label: deleteEmojiLabel,
     primaryColor: token('color.text.subtle', N500),
     size: "small"

package/dist/es2019/components/common/Emoji.js

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import classNames from 'classnames';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
 import { deleteEmojiLabel } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import * as styles from './styles';
 import DeleteButton from './DeleteButton';
+import { emojiContainer, emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiStyles, emojiImage } from './styles';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
 
 const handleMouseDown = (props, event) => {
@@ -95,23 +97,15 @@ const renderAsSprite = props => {
   } = props;
   const representation = emoji.representation;
   const sprite = representation.sprite;
-  const classes = {
-    [styles.emojiContainer]: true,
-    [styles.emojiNode]: true,
-    [styles.selected]: selected,
-    [styles.selectOnHover]: selectOnHover
-  };
-
-  if (className) {
-    classes[className] = true;
-  }
-
+  const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
   let sizing = {};
 
   if (fitToHeight) {
     sizing = {
       width: `${fitToHeight}px`,
-      height: `${fitToHeight}px`
+      height: `${fitToHeight}px`,
+      minHeight: `${fitToHeight}px`,
+      minWidth: `${fitToHeight}px`
     };
   }
 
@@ -123,14 +117,15 @@ const renderAsSprite = props => {
     backgroundSize: `${sprite.column * 100}% ${sprite.row * 100}%`,
     ...sizing
   };
-  const emojiNode = /*#__PURE__*/React.createElement("span", {
-    className: styles.emojiSprite,
+  const emojiNode = jsx("span", {
+    className: emojiSprite,
     style: style
   }, "\xA0");
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
-    className: classNames(classes),
+    css: emojiContainer,
+    className: classes,
     onKeyPress: event => handleKeyPress(props, event),
     onMouseDown: event => {
       handleMouseDown(props, event);
@@ -155,18 +150,7 @@ const renderAsImage = props => {
     showDelete,
     shouldBeInteractive
   } = props;
-  const classes = {
-    [styles.emoji]: true,
-    [styles.emojiNode]: true,
-    [styles.selected]: selected,
-    [styles.selectOnHover]: selectOnHover,
-    [styles.emojiImage]: true
-  };
-
-  if (className) {
-    classes[className] = true;
-  }
-
+  const classes = `${emojiMainStyle} ${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${emojiImage} ${className ? className : ''}`;
   let width;
   let height;
   let src;
@@ -185,7 +169,7 @@ const renderAsImage = props => {
   let deleteButton;
 
   if (showDelete) {
-    deleteButton = /*#__PURE__*/React.createElement(DeleteButton, {
+    deleteButton = jsx(DeleteButton, {
       onClick: event => handleDelete(props, event)
     });
   }
@@ -213,7 +197,7 @@ const renderAsImage = props => {
   // TODO: remove @ts-ignore for the <img> below when the @types/react will be bumped from v16.8.0 to v16.9.20 or higher.
 
 
-  const emojiNode = /*#__PURE__*/React.createElement("img", _extends({
+  const emojiNode = jsx("img", _extends({
     // @ts-ignore
     loading: "lazy",
     src: src,
@@ -229,10 +213,11 @@ const renderAsImage = props => {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
+    css: emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
-    className: classNames(classes),
+    className: classes,
     onKeyPress: event => handleKeyPress(props, event),
     onMouseDown: event => {
       handleMouseDown(props, event);

package/dist/es2019/components/common/EmojiActions.js

@@ -1,12 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import classNames from 'classnames';
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from '../common/EmojiDeletePreview';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
-import * as styles from './styles';
-import * as footerStyles from '../picker/styles';
 import EmojiPickerListSearch from '../picker/EmojiPickerListSearch';
 import ToneSelector from './ToneSelector';
 import EmojiButton from './EmojiButton';
@@ -14,6 +13,8 @@ import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import { addCustomEmoji, addCustomEmojiButton, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
+import { emojiActionsContainerWithBottomShadow, emojiPickerFooter } from '../picker/styles';
 export class EmojiActions extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -76,13 +77,13 @@ export class EmojiActions extends PureComponent {
       previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiToneSelectorContainer
-    }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+    return jsx("div", {
+      css: emojiToneSelectorContainer
+    }, this.state.selectingTone && jsx(ToneSelector, {
       emoji: toneEmoji,
       onToneSelected: this.onToneSelected,
       previewEmojiId: previewEmoji.id
-    }), /*#__PURE__*/React.createElement(EmojiButton, {
+    }), jsx(EmojiButton, {
       ariaExpanded: this.state.selectingTone,
       emoji: previewEmoji,
       selectOnHover: true,
@@ -108,16 +109,17 @@ export class EmojiActions extends PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.AddCustomEmoji
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, label => /*#__PURE__*/React.createElement(AkButton, {
+    return jsx("div", {
+      css: addCustomEmoji
+    }, jsx(FormattedMessage, messages.addCustomEmojiLabel, label => jsx(AkButton, {
       onClick: onOpenUpload,
-      iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+      iconBefore: jsx(AddIcon, {
         label: formatMessage(messages.addCustomEmojiLabel),
         size: "small"
       }),
       appearance: "subtle",
-      className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+      css: addCustomEmojiButton,
+      className: emojiPickerAddEmoji
     }, label)));
   }
 
@@ -135,12 +137,12 @@ export class EmojiActions extends PureComponent {
       onChange,
       query
     } = this.props;
-    const previewFooterClassnames = classNames([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+    const previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
 
     if (uploading) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: previewFooterClassnames
-      }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+      return jsx("div", {
+        css: previewFooterClassnames
+      }, jsx(EmojiUploadPicker, {
         onUploadCancelled: onUploadCancelled,
         onUploadEmoji: onUploadEmoji,
         onFileChooserClicked: onFileChooserClicked,
@@ -150,25 +152,25 @@ export class EmojiActions extends PureComponent {
     }
 
     if (emojiToDelete) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: previewFooterClassnames
-      }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
+      return jsx("div", {
+        css: previewFooterClassnames
+      }, jsx(EmojiDeletePreview, {
         emoji: emojiToDelete,
         onDeleteEmoji: onDeleteEmoji,
         onCloseDelete: onCloseDelete
       }));
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: previewFooterClassnames,
+    return jsx("div", {
+      css: previewFooterClassnames,
       onMouseLeave: this.onMouseLeave
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       style: {
         display: 'flex',
         justifyContent: 'flex-end',
         alignItems: 'center'
       }
-    }, !this.state.selectingTone && /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
+    }, !this.state.selectingTone && jsx(EmojiPickerListSearch, {
       onChange: onChange,
       query: query
     }), this.renderTones()), this.renderAddOwnEmoji());

package/dist/es2019/components/common/EmojiButton.js

@@ -1,8 +1,9 @@
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React, { forwardRef } from 'react';
-import * as styles from './styles';
 import Emoji from './Emoji';
 import { leftClick } from '../../util/mouse';
+import { emojiButton, hiddenToneButton } from './styles';
 
 const handleMouseDown = (props, event) => {
   const {
@@ -34,11 +35,10 @@ export const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
     ariaExpanded,
     shouldHideButton
   } = props;
-  const classes = [shouldHideButton ? styles.hiddenToneButton : styles.emojiButton];
-  return /*#__PURE__*/React.createElement("button", {
+  return jsx("button", {
     ref: ref,
     "aria-expanded": ariaExpanded,
-    className: classNames(classes),
+    css: shouldHideButton ? hiddenToneButton : emojiButton,
     onMouseDown: event => {
       handleMouseDown(props, event);
     },
@@ -46,7 +46,7 @@ export const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
       handleKeyPress(props, event);
     },
     "aria-label": ariaLabelText
-  }, /*#__PURE__*/React.createElement(Emoji, {
+  }, jsx(Emoji, {
     emoji: emoji,
     selectOnHover: selectOnHover
   }));

package/dist/es2019/components/common/EmojiDeletePreview.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
-import React from 'react';
 import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
 import EmojiErrorMessage from './EmojiErrorMessage';
 import RetryableButton from './RetryableButton';
-import * as styles from './styles';
+import { cancelButton, deleteFooter, deletePreview, deleteText, emojiDeleteErrorMessage, previewButtonGroup } from './styles';
 
 class EmojiDeletePreview extends Component {
   constructor(props) {
@@ -69,37 +71,35 @@ class EmojiDeletePreview extends Component {
     const {
       formatMessage
     } = intl;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.deletePreview
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.deleteText
-    }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+    return jsx("div", {
+      css: deletePreview
+    }, jsx("div", {
+      css: deleteText
+    }, jsx("h5", null, jsx(FormattedMessage, messages.deleteEmojiTitle)), jsx(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
       values: {
         emojiShortName: emoji.shortName
       }
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: styles.deleteFooter
-    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    }))), jsx("div", {
+      css: deleteFooter
+    }, jsx(CachingEmoji, {
       emoji: emoji
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles.previewButtonGroup
-    }, error ? !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+    }), jsx("div", {
+      css: previewButtonGroup
+    }, error ? !loading ? jsx(EmojiErrorMessage, {
       message: formatMessage(messages.deleteEmojiFailed),
-      className: styles.emojiDeleteErrorMessage,
+      messageStyles: emojiDeleteErrorMessage,
       tooltip: true
-    }) : null : null, /*#__PURE__*/React.createElement(RetryableButton, {
-      className: styles.uploadEmojiButton,
-      retryClassName: styles.uploadRetryButton,
+    }) : null : null, jsx(RetryableButton, {
       label: formatMessage(messages.deleteEmojiLabel),
       onSubmit: this.onSubmit,
       appearance: "danger",
       loading: loading,
       error: error
-    }), /*#__PURE__*/React.createElement(AkButton, {
+    }), jsx(AkButton, {
       appearance: "subtle",
       onClick: this.onCancel,
-      className: styles.cancelButton
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)))));
+      css: cancelButton
+    }, jsx(FormattedMessage, messages.cancelLabel)))));
   }
 
 }