@atlaskit/emoji 69.0.7 → 69.0.9

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

@@ -1,11 +1,9 @@
+/* Emoji.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./Emoji.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useCallback, forwardRef } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { B100, N30 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
 import { deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -13,13 +11,15 @@ import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, t
 import { UfoEmojiTimings } from '../../types';
 import { leftClick } from '../../util/mouse';
 import DeleteButton from './DeleteButton';
-import { emojiSpriteContainer, emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiImageContainer, emojiImage, deletableEmoji } from './styles';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiImage, deletableEmoji } from './styles';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import browserSupport from '../../util/browser-support';
 import { useInView } from '../../hooks/useInView';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 import { DeletableEmojiTooltipContent, DeletableEmojiTooltipContentForScreenReader } from './DeletableEmojiTooltipContent';
 import { isSSR } from '../../util/is-ssr';
+const emojiSpriteContainer = null;
+const emojiImageContainer = null;
 const handleMouseDown = (props, event) => {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
@@ -126,11 +126,12 @@ export const SpriteEmoji = props => {
     ...sizing
   };
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx(EmojiNodeWrapper, _extends({}, props, {
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
       type: "sprite",
       className: classes
-    }), jsx("span", {
+    }), /*#__PURE__*/React.createElement("span", {
       className: emojiSprite,
       style: style
     }))
@@ -177,10 +178,10 @@ export const ImageEmoji = props => {
       height: fitToHeight
     };
   }
-  const onError = event => {
+  const onError = useCallback(event => {
     handleImageError(props, event);
-  };
-  const onLoad = () => {
+  }, [props]);
+  const onLoad = useCallback(() => {
     const mountedMark = ufoExp.metrics.marks.find(mark => mark.name === UfoEmojiTimings.MOUNTED_END);
     // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
     if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
@@ -204,12 +205,19 @@ export const ImageEmoji = props => {
     if (onLoadSuccess) {
       onLoadSuccess(emoji);
     }
-  };
+  }, [emoji, onLoadSuccess, ufoExp]);
   const onBeforeLoad = useCallback(() => {
     if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
       ufoExp.mark(UfoEmojiTimings.ONLOAD_START);
     }
   }, [ufoExp]);
+  const onMouseOver = useCallback(e => {
+    var _document$activeEleme;
+    // only disable tooltip when not on focus
+    if (!((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.contains(e.target))) {
+      e.stopPropagation();
+    }
+  }, []);
 
   // because of the lack of browser support of on before load natively, used IntersectionObserver helper hook to mimic the before load time mark for UFO.
   useEffect(() => {
@@ -217,7 +225,7 @@ export const ImageEmoji = props => {
       onBeforeLoad();
     }
   }, [inView, onBeforeLoad]);
-  const emojiNode = jsx("img", _extends({
+  const emojiNode = /*#__PURE__*/React.createElement("img", _extends({
     //@ts-ignore
     loading: disableLazyLoad ? 'eager' : 'lazy',
     src: src,
@@ -242,11 +250,11 @@ export const ImageEmoji = props => {
 
   // show a tooltip for deletable emoji only on focus
   if (showDelete) {
-    return jsx(Tooltip, {
-      content: jsx(DeletableEmojiTooltipContent, null),
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: /*#__PURE__*/React.createElement(DeletableEmojiTooltipContent, null),
       position: "right-start",
       tag: "span"
-    }, jsx(EmojiNodeWrapper, _extends({}, props, {
+    }, /*#__PURE__*/React.createElement(EmojiNodeWrapper, _extends({}, props, {
       "aria-labelledby": `screenreader-emoji-${emoji.id}`,
       type: "image"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -255,22 +263,17 @@ export const ImageEmoji = props => {
       ref: ref,
       showTooltip: false // avoid showing both tooltip and title
       ,
-      onMouseOver: e => {
-        var _document$activeEleme;
-        // only disable tooltip when not on focus
-        if (!((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.contains(e.target))) {
-          e.stopPropagation();
-        }
-      }
-    }), emojiNode, jsx(DeleteButton, {
+      onMouseOver: onMouseOver
+    }), emojiNode, /*#__PURE__*/React.createElement(DeleteButton, {
       onClick: event => handleDelete(props, event)
-    }), jsx(DeletableEmojiTooltipContentForScreenReader, {
+    }), /*#__PURE__*/React.createElement(DeletableEmojiTooltipContentForScreenReader, {
       emoji: emoji
     })));
   }
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx(EmojiNodeWrapper, _extends({}, props, {
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
       type: "image",
       className: classes,
       ref: ref
@@ -317,32 +320,25 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-label': emoji.shortName
     };
   }
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("span", _extends({}, accessibilityProps, {
-      ref: ref,
-      "data-testid": `${type}-emoji-${emoji.shortName}`,
-      "data-emoji-type": type,
-      tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: type === 'sprite' ? emojiSpriteContainer : emojiImageContainer
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className,
-      onKeyDown: event => handleKeyDown(props, event),
-      onMouseDown: event => {
-        handleMouseDown(props, event);
-      },
-      onMouseEnter: event => {
-        handleMouseMove(props, event);
-      },
-      onFocus: event => {
-        handleFocus(props, event);
-      },
-      title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
-    }, other), children)
-  );
+  return /*#__PURE__*/React.createElement("span", _extends({}, accessibilityProps, {
+    ref: ref,
+    "data-testid": `${type}-emoji-${emoji.shortName}`,
+    "data-emoji-type": type,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j14ae _3naf14ae _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc" : "_2rkosqtm _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j14ae _3naf14ae _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc", className]),
+    onKeyDown: event => handleKeyDown(props, event),
+    onMouseDown: event => {
+      handleMouseDown(props, event);
+    },
+    onMouseEnter: event => {
+      handleMouseMove(props, event);
+    },
+    onFocus: event => {
+      handleFocus(props, event);
+    },
+    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+  }, other), children);
 });
 export const Emoji = props => {
   const {
@@ -365,8 +361,8 @@ export const Emoji = props => {
   }, []);
   // TODO: We always prefer render as image as having accessibility issues with sprite representation
   if (isSpriteRepresentation(emoji.representation)) {
-    return jsx(SpriteEmoji, props);
+    return /*#__PURE__*/React.createElement(SpriteEmoji, props);
   }
-  return jsx(ImageEmoji, props);
+  return /*#__PURE__*/React.createElement(ImageEmoji, props);
 };
 export default Emoji;

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

@@ -1,11 +1,10 @@
+/* EmojiActions.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Fragment, useState, useRef, memo, useLayoutEffect } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./EmojiActions.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback } from 'react';
+import { N30A } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
@@ -16,16 +15,19 @@ import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/core/migration/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
-import { addCustomEmoji, addCustomEmojiButton, emojiActionsWrapper, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
-import { emojiActionsContainerWithBottomShadow, emojiPickerFooter } from '../picker/styles';
+import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  icon: "_18u0r5cr _2hwx1i6y"
+};
+const addCustomEmoji = null;
+const addCustomEmojiButton = null;
+const emojiActionsWrapper = null;
+const emojiToneSelectorContainer = null;
+const previewFooter = null;
 export const emojiActionsTestId = 'emoji-actions';
 export const uploadEmojiTestId = 'upload-emoji';
-const iconStyles = xcss({
-  marginLeft: 'space.negative.050',
-  marginRight: 'space.negative.025'
-});
 
 // Generic Type for the wrapped functional component
 
@@ -34,16 +36,14 @@ const AddOwnEmoji = props => {
     onOpenUpload,
     uploadEnabled
   } = props;
-  return jsx(Fragment, null, uploadEnabled &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: addCustomEmoji,
-    "data-testid": uploadEmojiTestId
-  }, jsx(FormattedMessage, messages.addCustomEmojiLabel, label => jsx(AkButton, {
+  return /*#__PURE__*/React.createElement(Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiTestId,
+    className: ax(["_1wpz1h6o _18u019bv _otyr19bv"])
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, label => /*#__PURE__*/React.createElement(AkButton, {
     onClick: onOpenUpload,
-    iconBefore: jsx(Box, {
-      xcss: iconStyles
-    }, jsx(AddIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.icon
+    }, /*#__PURE__*/React.createElement(AddIcon, {
       LEGACY_margin: `0 ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-050, 4px)"}`,
       color: "currentColor",
       label: "",
@@ -51,12 +51,10 @@ const AddOwnEmoji = props => {
     })),
     appearance: "subtle"
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: addCustomEmojiButton
+
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: emojiPickerAddEmoji,
+    className: ax(["_p12f3sup", emojiPickerAddEmoji]),
     tabIndex: 0,
     id: "add-custom-emoji"
   }, label))));
@@ -83,20 +81,20 @@ const TonesWrapper = props => {
       setFocusTonePreviewButton(false);
     };
   }, [focusTonePreviewButton, showToneSelector]);
-  const onToneCloseHandler = () => {
+  const onToneCloseHandler = useCallback(() => {
     const {
       onToneClose
     } = props;
     onToneClose();
     setFocusTonePreviewButton(true);
-  };
-  const onToneSelectedHandler = toneValue => {
+  }, [props]);
+  const onToneSelectedHandler = useCallback(toneValue => {
     const {
       onToneSelected
     } = props;
     onToneSelected(toneValue);
     setFocusTonePreviewButton(true);
-  };
+  }, [props]);
   if (!toneEmoji) {
     return null;
   }
@@ -104,28 +102,25 @@ const TonesWrapper = props => {
   if (selectedTone !== DEFAULT_TONE && previewToneEmoji.skinVariations) {
     previewToneEmoji = previewToneEmoji.skinVariations[selectedTone - 1];
   }
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: emojiToneSelectorContainer
-    }, jsx(ToneSelector, {
-      emoji: toneEmoji,
-      onToneSelected: onToneSelectedHandler,
-      onToneClose: onToneCloseHandler,
-      selectedTone: selectedTone,
-      isVisible: showToneSelector
-    }), jsx(TonePreviewButton, {
-      ref: tonePreviewButtonRef,
-      ariaExpanded: showToneSelector,
-      emoji: previewToneEmoji,
-      selectOnHover: true,
-      onSelected: onToneOpen,
-      ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
-        selectedTone: `${setSkinToneAriaLabelText(previewToneEmoji.name)}`
-      }),
-      isVisible: !showToneSelector
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
+  }, /*#__PURE__*/React.createElement(ToneSelector, {
+    emoji: toneEmoji,
+    onToneSelected: onToneSelectedHandler,
+    onToneClose: onToneCloseHandler,
+    selectedTone: selectedTone,
+    isVisible: showToneSelector
+  }), /*#__PURE__*/React.createElement(TonePreviewButton, {
+    ref: tonePreviewButtonRef,
+    ariaExpanded: showToneSelector,
+    emoji: previewToneEmoji,
+    selectOnHover: true,
+    onSelected: onToneOpen,
+    ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
+      selectedTone: `${setSkinToneAriaLabelText(previewToneEmoji.name)}`
+    }),
+    isVisible: !showToneSelector
+  }));
 };
 export const EmojiActions = props => {
   const {
@@ -145,68 +140,56 @@ export const EmojiActions = props => {
     resultsCount = 0
   } = props;
   const [showToneSelector, setShowToneSelector] = useState(false);
-  const previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
-  const onToneOpenHandler = () => setShowToneSelector(true);
-  const onToneCloseHandler = () => setShowToneSelector(false);
-  const onToneSelectedHandler = toneValue => {
+  const onToneOpenHandler = useCallback(() => setShowToneSelector(true), []);
+  const onToneCloseHandler = useCallback(() => setShowToneSelector(false), []);
+  const onToneSelectedHandler = useCallback(toneValue => {
     setShowToneSelector(false);
     if (onToneSelected) {
       onToneSelected(toneValue);
     }
-  };
-  const onMouseLeaveHandler = () => {
+  }, [onToneSelected]);
+  const onMouseLeaveHandler = useCallback(() => {
     if (showToneSelector && onToneSelectorCancelled) {
       onToneSelectorCancelled();
     }
     setShowToneSelector(false);
-  };
+  }, [showToneSelector, onToneSelectorCancelled]);
   if (uploading) {
-    return (
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: previewFooterClassnames
-      }, jsx(EmojiUploadPicker, {
-        onUploadCancelled: onUploadCancelled,
-        onUploadEmoji: onUploadEmoji,
-        onFileChooserClicked: onFileChooserClicked,
-        errorMessage: uploadErrorMessage,
-        initialUploadName: initialUploadName
-      }))
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1kuc _16qs1ueq"])
+    }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+      onUploadCancelled: onUploadCancelled,
+      onUploadEmoji: onUploadEmoji,
+      onFileChooserClicked: onFileChooserClicked,
+      errorMessage: uploadErrorMessage,
+      initialUploadName: initialUploadName
+    }));
   }
   if (emojiToDelete) {
-    return (
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: previewFooterClassnames
-      }, jsx(EmojiDeletePreview, {
-        emoji: emojiToDelete,
-        onDeleteEmoji: onDeleteEmoji,
-        onCloseDelete: onCloseDelete
-      }))
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1kuc _16qs1ueq"])
+    }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
+      emoji: emojiToDelete,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete
+    }));
   }
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", {
-      "data-testid": emojiActionsTestId
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      ,
-      css: previewFooterClassnames,
-      onMouseLeave: onMouseLeaveHandler
-    }, jsx("div", {
-      css: emojiActionsWrapper
-    }, jsx(EmojiPickerListSearch, {
-      onChange: onChange,
-      query: query,
-      resultsCount: resultsCount,
-      isVisible: !showToneSelector
-    }), jsx(TonesWrapper, _extends({}, props, {
-      onToneOpen: onToneOpenHandler,
-      onToneClose: onToneCloseHandler,
-      onToneSelected: onToneSelectedHandler,
-      showToneSelector: showToneSelector
-    }))), jsx(AddOwnEmoji, props))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiActionsTestId,
+    onMouseLeave: onMouseLeaveHandler,
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1kuc _16qs1ueq"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
+    onChange: onChange,
+    query: query,
+    resultsCount: resultsCount,
+    isVisible: !showToneSelector
+  }), /*#__PURE__*/React.createElement(TonesWrapper, _extends({}, props, {
+    onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
+    onToneSelected: onToneSelectedHandler,
+    showToneSelector: showToneSelector
+  }))), /*#__PURE__*/React.createElement(AddOwnEmoji, props));
 };
 export default injectIntl( /*#__PURE__*/memo(EmojiActions));

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

@@ -1,12 +1,11 @@
+/* EmojiDeletePreview.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./EmojiDeletePreview.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Component } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { N300 } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import AkButton from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
@@ -15,9 +14,12 @@ import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
 import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
 import RetryableButton from './RetryableButton';
-import { deleteFooter, deletePreview, deleteText, emojiDeleteErrorMessage, previewButtonGroup } from './styles';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { fg } from '@atlaskit/platform-feature-flags';
+const deleteFooter = null;
+const deletePreview = null;
+const deleteText = null;
+const previewButtonGroup = null;
 export const emojiDeletePreviewTestId = 'emoji-delete-preview';
 const deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 class EmojiDeletePreview extends Component {
@@ -83,42 +85,42 @@ class EmojiDeletePreview extends Component {
     const {
       formatMessage
     } = intl;
-    return jsx(FocusLock, {
+    return /*#__PURE__*/React.createElement(FocusLock, {
       noFocusGuards: true
-    }, jsx("div", {
-      css: deletePreview,
-      "data-testid": emojiDeletePreviewTestId
-    }, jsx("div", {
-      css: deleteText
-    }, jsx(Heading, {
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": emojiDeletePreviewTestId,
+      className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3i53f4 _1e0c1txw _2lx21bp4 _1bahesu3"])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_11c8dcr7 _4t3ivbgk _pnmb1n3s _jwwg7vkz"])
+    }, /*#__PURE__*/React.createElement(Heading, {
       size: "xxsmall"
-    }, jsx(FormattedMessage, messages.deleteEmojiTitle)), jsx(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
       values: {
         emojiShortName: emoji.shortName
       }
-    }))), jsx("div", {
-      css: deleteFooter
-    }, jsx(CachingEmoji, {
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: ax(["_11c82smr _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txf1igg _1qz31b66"])
+    }, /*#__PURE__*/React.createElement(CachingEmoji, {
       emoji: emoji
-    }), jsx("div", {
-      css: previewButtonGroup
-    }, error ? !loading ? jsx(EmojiErrorMessage, {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1e0c1txw"])
+    }, error ? !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
       message: formatMessage(messages.deleteEmojiFailed),
-      messageStyles: emojiDeleteErrorMessage,
+      errorStyle: "delete",
       tooltip: true
-    }) : null : null, jsx(VisuallyHidden, {
+    }) : null : null, /*#__PURE__*/React.createElement(VisuallyHidden, {
       id: deleteEmojiLabelId
-    }, formatMessage(messages.deleteEmojiLabel)), jsx(RetryableButton, {
+    }, formatMessage(messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(RetryableButton, {
       label: formatMessage(messages.deleteEmojiLabel),
       onSubmit: this.onSubmit,
       appearance: "danger",
       loading: loading,
       error: error,
       ariaLabelledBy: `${emojiErrorScreenreaderTestId} ${deleteEmojiLabelId}`
-    }), jsx(AkButton, {
+    }), /*#__PURE__*/React.createElement(AkButton, {
       appearance: "subtle",
       onClick: this.onCancel
-    }, jsx(FormattedMessage, messages.cancelLabel))))));
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel))))));
   }
 }
 export default injectIntl(EmojiDeletePreview);

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

@@ -1,47 +1,47 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* EmojiErrorMessage.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiErrorMessage.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { R300, R400 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import { useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
+const errorMessageStyles = {
+  chooseFile: "_1e0c1txw _syaz1l5o _u5f319bv _1bah1y6m",
+  delete: "_1e0c1txw _syaz1ick _4cvr1h6o _1bahesu3 _u5f31b66",
+  preview: "_1e0c116y _syaz1ick _u5f319bv _1bahesu3 _4cvr1h6o"
+};
 export const emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 export const emojiErrorMessageTestId = 'emoji-error-message';
 export const emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
 export const emojiErrorIconTestId = 'emoji-error-icon';
 const EmojiErrorMessage = props => {
   const {
-    messageStyles,
+    errorStyle,
     message,
     tooltip
   } = props;
   const {
     formatMessage
   } = useIntl();
-  const visualContent = tooltip ?
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: messageStyles,
-    "data-testid": emojiErrorMessageTestId
-  }, jsx(Tooltip, {
+  const visualContent = tooltip ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId,
+    className: ax([errorMessageStyles[errorStyle]])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     content: message,
     position: "top",
     testId: emojiErrorMessageTooltipTestId
-  }, jsx(ErrorIcon, {
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "currentColor",
     label: formatMessage(messages.error),
     LEGACY_size: "medium",
     spacing: "spacious",
     testId: emojiErrorIconTestId
-  }))) :
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: messageStyles,
-    "data-testid": emojiErrorMessageTestId
-  }, jsx(ErrorIcon, {
+  }))) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId,
+    className: ax([errorMessageStyles[errorStyle]])
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "currentColor",
     label: formatMessage(messages.error),
     LEGACY_size: "small"