@atlaskit/emoji 64.2.0 → 64.4.0

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

@@ -1,12 +1,15 @@
 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) => {
   // Clicked emoji delete button
@@ -94,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`
     };
   }
 
@@ -122,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);
@@ -154,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;
@@ -184,7 +169,7 @@ const renderAsImage = props => {
   let deleteButton;
 
   if (showDelete) {
-    deleteButton = /*#__PURE__*/React.createElement(DeleteButton, {
+    deleteButton = jsx(DeleteButton, {
       onClick: event => handleDelete(props, event)
     });
   }
@@ -201,6 +186,10 @@ const renderAsImage = props => {
 
   const onError = event => {
     handleImageError(props, event);
+  };
+
+  const onLoad = () => {
+    sampledUfoRenderedEmoji(emoji).success();
   }; // Pass src attribute as key to force React to rerender img node since browser does not
   // change preview image until loaded
   // We currently have the following error: property 'loading' does not exist on type 'DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>'
@@ -208,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,
@@ -221,12 +210,14 @@ const renderAsImage = props => {
     style: {
       visibility: 'visible'
     },
-    onError: onError
+    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);
@@ -242,7 +233,7 @@ const renderAsImage = props => {
 export const Emoji = props => {
   const {
     emoji
-  } = props;
+  } = props; // TODO: We always prefer render as image as having accessibility issues with sprite representation
 
   if (isSpriteRepresentation(emoji.representation)) {
     return renderAsSprite(props);

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)))));
   }
 
 }

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

@@ -1,24 +1,25 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import React from 'react';
 import { PureComponent } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 export default class EmojiErrorMessage extends PureComponent {
   renderWithTooltip() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: this.props.className
-    }, /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx("div", {
+      css: this.props.messageStyles
+    }, jsx(Tooltip, {
       content: this.props.message,
       position: "top"
-    }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    }, jsx(ErrorIcon, {
       label: "Error",
       size: "medium"
     })));
   }
 
   renderInline() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: this.props.className
-    }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    return jsx("div", {
+      css: this.props.messageStyles
+    }, jsx(ErrorIcon, {
       label: "Error",
       size: "small"
     }), " ", this.props.message);

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { placeholder, placeholderContainer } from './styles';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation } from '../../util/type-helpers';
@@ -31,13 +31,10 @@ const EmojiPlaceholder = props => {
     width: `${width}px`,
     height: `${height}px`
   };
-  const classes = {
-    [placeholder]: true,
-    [placeholderContainer]: true
-  };
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     "aria-label": shortName,
-    className: classNames(classes),
+    className: placeholder,
+    css: placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

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

@@ -1,16 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
-import classNames from 'classnames';
-import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import CachingEmoji from '../../components/common/CachingEmoji';
 import EmojiButton from '../../components/common/EmojiButton';
 import { messages } from '../i18n';
-import * as styles from './styles';
 import ToneSelector from './ToneSelector';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import { addCustomEmoji, addCustomEmojiButton, emojiPickerAddEmoji, emojiPreview, toneSelectorContainer } from './styles';
+import { EmojiPreviewComponent } from './EmojiPreviewComponent';
 export class EmojiPreview extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -73,13 +74,13 @@ export class EmojiPreview extends PureComponent {
       previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.toneSelectorContainer
-    }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+    return jsx("div", {
+      className: toneSelectorContainer
+    }, 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,
@@ -103,26 +104,9 @@ export class EmojiPreview extends PureComponent {
       return null;
     }
 
-    const previewClasses = classNames({
-      [styles.preview]: true
-    });
-    const previewTextClasses = classNames({
-      [styles.previewText]: true,
-      [styles.previewSingleLine]: !emoji.name
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: previewClasses
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.previewImg
-    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    return jsx(EmojiPreviewComponent, {
       emoji: emoji
-    })), /*#__PURE__*/React.createElement("div", {
-      className: previewTextClasses
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.name
-    }, emoji.name), /*#__PURE__*/React.createElement("span", {
-      className: styles.shortName
-    }, emoji.shortName)));
+    });
   } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
 
 
@@ -143,23 +127,23 @@ export class EmojiPreview 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)));
   }
 
   render() {
-    const sectionClasses = classNames([styles.emojiPreview, styles.emojiPreviewSection]);
-    return /*#__PURE__*/React.createElement("div", {
-      className: sectionClasses,
+    return jsx("div", {
+      css: emojiPreview,
       onMouseLeave: this.onMouseLeave
     }, this.renderAddOwnEmoji(), this.renderEmojiPreview(), this.renderTones());
   }

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

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import CachingEmoji from './CachingEmoji';
+import { emojiName, emojiShortName, preview, previewImg, previewText } from './styles';
+export const EmojiPreviewComponent = ({
+  emoji
+}) => {
+  return jsx("div", {
+    css: preview
+  }, jsx("span", {
+    css: previewImg
+  }, jsx(CachingEmoji, {
+    emoji: emoji
+  })), jsx("div", {
+    css: previewText
+  }, emoji.name && jsx("div", {
+    css: emojiName
+  }, emoji.name), jsx("div", {
+    css: emojiShortName
+  }, emoji.shortName)));
+};

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

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { Fragment } from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
@@ -10,7 +13,7 @@ import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
-import * as styles from './styles';
+import { emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
 const disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 
 const sanitizeName = name => {
@@ -54,15 +57,15 @@ class ChooseEmojiFile extends PureComponent {
     const disableChooser = !name;
     const fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id'; // Note: FileChooser.accept does not work in Electron due to a bug: https://product-fabric.atlassian.net/browse/FS-1626
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiUpload
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadChooseFileMessage
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, message => /*#__PURE__*/React.createElement("h5", null, message))), /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadChooseFileRow
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.uploadChooseFileEmojiName
-    }, /*#__PURE__*/React.createElement(TextField, {
+    return jsx("div", {
+      css: emojiUpload
+    }, jsx("div", {
+      css: uploadChooseFileMessage
+    }, jsx(FormattedMessage, messages.addCustomEmojiLabel, message => jsx("h5", null, message))), jsx("div", {
+      css: uploadChooseFileRow
+    }, jsx("span", {
+      css: uploadChooseFileEmojiName
+    }, jsx(TextField, {
       placeholder: formatMessage(messages.emojiPlaceholder),
       "aria-label": formatMessage(messages.emojiNameAriaLabel),
       maxLength: maxNameLength,
@@ -71,22 +74,22 @@ class ChooseEmojiFile extends PureComponent {
       value: name,
       isCompact: true,
       autoFocus: true
-    })), /*#__PURE__*/React.createElement("span", {
-      className: styles.uploadChooseFileBrowse
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    })), jsx("span", {
+      css: uploadChooseFileBrowse
+    }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => jsx(Fragment, null, jsx("span", {
       hidden: true,
       id: fileChooserButtonDescriptionId
-    }, screenReaderDescription), /*#__PURE__*/React.createElement(FileChooser, {
+    }, screenReaderDescription), jsx(FileChooser, {
       label: formatMessage(messages.emojiChooseFileTitle),
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
       ariaDescribedBy: fileChooserButtonDescriptionId,
       isDisabled: disableChooser
-    }))))), /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiUploadBottom
-    }, !errorMessage ? /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(EmojiErrorMessage, {
-      className: styles.emojiChooseFileErrorMessage,
+    }))))), jsx("div", {
+      css: emojiUploadBottom
+    }, !errorMessage ? jsx("p", null, jsx(FormattedMessage, messages.emojiImageRequirements)) : jsx(EmojiErrorMessage, {
+      messageStyles: emojiChooseFileErrorMessage,
       message: errorMessage
     })));
   }
@@ -269,7 +272,7 @@ export class EmojiUploadPicker extends PureComponent {
     };
 
     if (name && previewImage) {
-      return /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+      return jsx(EmojiUploadPreview, {
         errorMessage: errorMessage,
         name: name,
         onAddEmoji: this.onAddEmoji,
@@ -279,13 +282,13 @@ export class EmojiUploadPicker extends PureComponent {
       });
     }
 
-    return /*#__PURE__*/React.createElement(ChooseEmojiFile, {
+    return jsx(ChooseEmojiFile, {
       name: name,
       onChooseFile: this.onChooseFile,
       onClick: this.props.onFileChooserClicked,
       onNameChange: this.onNameChange,
       onUploadCancelled: cancelUpload,
-      errorMessage: chooseEmojiErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, chooseEmojiErrorMessage) : undefined,
+      errorMessage: chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined,
       intl: intl
     });
   }