@atlaskit/emoji 69.0.7 → 69.0.9

package/dist/es2019/components/typeahead/EmojiTypeAheadList.js

@@ -4,8 +4,7 @@ import { emojiTypeAheadMaxHeight } from '../../util/shared-styles';
 import { toEmojiId } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
-import { default as EmotionScrollable } from '../common/Scrollable';
-import { default as CompiledScrollable } from '../compiled/common/Scrollable';
+import Scrollable from '../common/Scrollable';
 import EmojiItem from './EmojiTypeAheadItem';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { EmojiTypeAheadListContainer } from './EmojiTypeAheadListContainer';
@@ -70,11 +69,8 @@ export default class EmojiTypeAheadList extends PureComponent {
         this.chooseCurrentSelection();
       });
     });
-    _defineProperty(this, "handleCompiledScrollableRef", ref => {
-      this.compiledScrollable = ref;
-    });
-    _defineProperty(this, "handleEmotionScrollableRef", ref => {
-      this.emotionScrollable = ref;
+    _defineProperty(this, "handleScrollableRef", ref => {
+      this.scrollable = ref;
     });
     this.state = {
       selectedKey: getKeyByIndex(props.emojis, 0),
@@ -141,14 +137,8 @@ export default class EmojiTypeAheadList extends PureComponent {
   // Internal
   revealItem(key) {
     const item = this.items[key];
-    if (fg('platform_editor_css_migrate_emoji')) {
-      if (item && this.compiledScrollable) {
-        this.compiledScrollable.reveal(item);
-      }
-    } else {
-      if (item && this.emotionScrollable) {
-        this.emotionScrollable.reveal(item);
-      }
+    if (item && this.scrollable) {
+      this.scrollable.reveal(item);
     }
   }
   selectIndexNewEmoji(index, emojis) {
@@ -225,16 +215,12 @@ export default class EmojiTypeAheadList extends PureComponent {
     return /*#__PURE__*/React.createElement(EmojiTypeAheadListContainer, {
       hasEmoji: hasEmoji,
       loading: loading
-    }, fg('platform_editor_css_migrate_emoji') ? /*#__PURE__*/React.createElement(CompiledScrollable, {
-      ref: this.handleCompiledScrollableRef,
-      maxHeight: `${emojiTypeAheadMaxHeight}px`
-    }, listBody) : /*#__PURE__*/React.createElement(EmotionScrollable, {
-      ref: this.handleEmotionScrollableRef,
+    }, /*#__PURE__*/React.createElement(Scrollable, {
+      ref: this.handleScrollableRef,
       maxHeight: `${emojiTypeAheadMaxHeight}px`
     }, listBody));
   }
 }
-// cleanup `platform_editor_css_migrate_emoji` - rename compiledScrollable back to scrollable and delete emotionScrollable
 _defineProperty(EmojiTypeAheadList, "defaultProps", {
   onEmojiSelected: () => {}
 });

package/dist/es2019/components/uploader/EmojiUploadComponentCompiled.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useState, memo, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { supportsUploadFeature } from '../../api/EmojiResource';
-import EmojiUploadPickerWithIntl from '../compiled/common/EmojiUploadPicker';
+import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';

package/dist/es2019/element.js

@@ -1,10 +1,3 @@
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { default as CompiledEmojiPlaceholder } from './components/compiled/common/EmojiPlaceholder';
-import { default as EmotionEmojiPlaceholder } from './components/common/EmojiPlaceholder';
-const EmojiPlaceholder = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPlaceholder, EmotionEmojiPlaceholder);
-export { EmojiPlaceholder };
-import { default as CompiledEmoji } from './components/compiled/common/Emoji';
-import { default as EmotionEmoji } from './components/common/Emoji';
-const Emoji = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmoji, EmotionEmoji);
-export { Emoji };
+export { default as EmojiPlaceholder } from './components/common/EmojiPlaceholder';
+export { default as Emoji } from './components/common/Emoji';
 export { default as ResourcedEmoji } from './components/common/ResourcedEmoji';

package/dist/es2019/index.js

@@ -1,7 +1,8 @@
 import { AbstractResource } from '@atlaskit/util-service-support';
-import { Emoji, EmojiPlaceholder } from './element';
+import Emoji from './components/common/Emoji';
+import EmojiPlaceholder from './components/common/EmojiPlaceholder';
 import ResourcedEmoji from './components/common/ResourcedEmoji';
-import { EmojiPicker } from './picker';
+import EmojiPicker from './components/picker/EmojiPicker';
 import { preloadEmojiPicker } from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';

package/dist/es2019/picker.js

@@ -1,5 +1 @@
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { default as EmotionEmojiPicker } from './components/picker/EmojiPicker';
-import { default as CompiledEmojiPicker } from './components/compiled/picker/EmojiPicker';
-const EmojiPicker = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPicker, EmotionEmojiPicker);
-export { EmojiPicker };
+export { default as EmojiPicker } from './components/picker/EmojiPicker';

package/dist/es2019/util/analytics/analytics.js

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "69.0.7",
+    packageVersion: "69.0.9",
     ...attributes
   }
 });

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

@@ -8,12 +8,9 @@ import React, { memo, useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
-import { default as EmotionEmoji } from './Emoji';
-import { default as CompiledEmoji } from '../compiled/common/Emoji';
-import { default as EmotionEmojiPlaceholder } from './EmojiPlaceholder';
-import { default as CompiledEmojiPlaceholder } from '../compiled/common/EmojiPlaceholder';
-import { default as EmotionEmojiFallback } from './EmojiFallback';
-import { default as CompiledEmojiFallback } from '../compiled/common/EmojiFallback';
+import Emoji from './Emoji';
+import EmojiPlaceholder from './EmojiPlaceholder';
+import EmojiFallback from './EmojiFallback';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -54,15 +51,9 @@ export var CachingEmoji = function CachingEmoji(props) {
         emoji: emoji
       }, restProps));
     } else {
-      if (fg('platform_editor_css_migrate_emoji')) {
-        return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({
-          emoji: emoji
-        }, restProps));
-      } else {
-        return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({
-          emoji: emoji
-        }, restProps));
-      }
+      return /*#__PURE__*/React.createElement(Emoji, _extends({
+        emoji: emoji
+      }, restProps));
     }
   };
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
@@ -80,27 +71,14 @@ var StandardEmoji = function StandardEmoji(props) {
     setImageLoadError(true);
   };
   if (imageLoadError) {
-    if (fg('platform_editor_css_migrate_emoji')) {
-      return /*#__PURE__*/React.createElement(CompiledEmojiFallback, _extends({
-        emoji: emoji
-      }, restProps));
-    } else {
-      return /*#__PURE__*/React.createElement(EmotionEmojiFallback, _extends({
-        emoji: emoji
-      }, restProps));
-    }
-  }
-  if (fg('platform_editor_css_migrate_emoji')) {
-    return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({
-      emoji: emoji,
-      onLoadError: handleLoadError
-    }, restProps));
-  } else {
-    return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({
-      emoji: emoji,
-      onLoadError: handleLoadError
+    return /*#__PURE__*/React.createElement(EmojiFallback, _extends({
+      emoji: emoji
     }, restProps));
   }
+  return /*#__PURE__*/React.createElement(Emoji, _extends({
+    emoji: emoji,
+    onLoadError: handleLoadError
+  }, restProps));
 };
 
 /**
@@ -162,36 +140,18 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
     setInvalidImage(true);
   };
   if (cachedEmoji && !inValidImage) {
-    if (fg('platform_editor_css_migrate_emoji')) {
-      return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({}, restProps, {
-        showTooltip: showTooltip,
-        fitToHeight: fitToHeight,
-        emoji: cachedEmoji,
-        onLoadError: handleLoadError
-      }));
-    } else {
-      return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({}, restProps, {
-        showTooltip: showTooltip,
-        fitToHeight: fitToHeight,
-        emoji: cachedEmoji,
-        onLoadError: handleLoadError
-      }));
-    }
-  }
-  if (fg('platform_editor_css_migrate_emoji')) {
-    return /*#__PURE__*/React.createElement(CompiledEmojiPlaceholder, {
-      size: fitToHeight || placeholderSize,
-      shortName: shortName,
+    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
       showTooltip: showTooltip,
-      representation: representation
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(EmotionEmojiPlaceholder, {
-      size: fitToHeight || placeholderSize,
-      shortName: shortName,
-      showTooltip: showTooltip,
-      representation: representation
-    });
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
   }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: representation
+  });
 };
 export default /*#__PURE__*/memo(CachingEmoji);

package/dist/esm/components/common/DeletableEmojiTooltipContent.js

@@ -2,25 +2,16 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
-import { ToolTipContentWithKeymap as EmotionToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
-import { ToolTipContentWithKeymap as CompiledToolTipContentWithKeymap } from '../compiled/common/ToolTipContentWithKeymap';
+import { ToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
 import { backspace } from '../../util/keymaps';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { fg } from '@atlaskit/platform-feature-flags';
 export var DeletableEmojiTooltipContent = function DeletableEmojiTooltipContent() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  if (fg('platform_editor_css_migrate_emoji')) {
-    return /*#__PURE__*/React.createElement(CompiledToolTipContentWithKeymap, {
-      description: formatMessage(messages.deleteEmojiTooltip),
-      keymap: backspace
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(EmotionToolTipContentWithKeymap, {
-      description: formatMessage(messages.deleteEmojiTooltip),
-      keymap: backspace
-    });
-  }
+  return /*#__PURE__*/React.createElement(ToolTipContentWithKeymap, {
+    description: formatMessage(messages.deleteEmojiTooltip),
+    keymap: backspace
+  });
 };
 export var DeletableEmojiTooltipContentForScreenReader = function DeletableEmojiTooltipContentForScreenReader(_ref) {
   var emoji = _ref.emoji;

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

@@ -1,36 +1,31 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* DeleteButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./DeleteButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Button from '@atlaskit/button/standard-button';
 import CrossCircleIcon from '@atlaskit/icon/utility/migration/cross-circle';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
-import { emojiDeleteButton, deleteButton } from './styles';
-import { Box, xcss } from '@atlaskit/primitives';
+import { emojiDeleteButton } from './styles';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  boxWrapperStyle: "_1bsbf6fq _4t3if6fq"
+};
+var deleteButton = null;
 
 /**
  * Test id for wrapper Emoji delete button
  */
 export var RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
-var boxWrapperStyle = xcss({
-  width: '18px',
-  height: '18px'
-});
 var DeleteButton = function DeleteButton(props) {
-  return jsx("span", {
-    // 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: deleteButton
+  return /*#__PURE__*/React.createElement("span", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: emojiDeleteButton,
+    className: ax(["_3um015vq _1e0c1txw _kqswstnw _154ix0bf _1xi2x0bf _1pbykb7n _13t3idpf", emojiDeleteButton]),
     "data-testid": RENDER_EMOJI_DELETE_BUTTON_TESTID
-  }, jsx(Button, {
-    iconBefore: jsx(Box, {
-      xcss: boxWrapperStyle
-    }, jsx(CrossCircleIcon, {
+  }, /*#__PURE__*/React.createElement(Button, {
+    iconBefore: /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.boxWrapperStyle
+    }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: deleteEmojiLabel,
       color: "var(--ds-text-subtle, ".concat(N500, ")"),
       LEGACY_size: "small"

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

@@ -1,17 +1,15 @@
+/* Emoji.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
+import "./Emoji.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 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';
@@ -19,13 +17,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';
+var emojiSpriteContainer = null;
+var emojiImageContainer = null;
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
@@ -117,11 +117,12 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, 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
     }))
@@ -169,10 +170,10 @@ export var ImageEmoji = function ImageEmoji(props) {
       height: fitToHeight
     };
   }
-  var onError = function onError(event) {
+  var onError = useCallback(function (event) {
     handleImageError(props, event);
-  };
-  var onLoad = function onLoad() {
+  }, [props]);
+  var onLoad = useCallback(function () {
     var mountedMark = ufoExp.metrics.marks.find(function (mark) {
       return mark.name === UfoEmojiTimings.MOUNTED_END;
     });
@@ -200,12 +201,19 @@ export var ImageEmoji = function ImageEmoji(props) {
     if (onLoadSuccess) {
       onLoadSuccess(emoji);
     }
-  };
+  }, [emoji, onLoadSuccess, ufoExp]);
   var onBeforeLoad = useCallback(function () {
     if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
       ufoExp.mark(UfoEmojiTimings.ONLOAD_START);
     }
   }, [ufoExp]);
+  var onMouseOver = useCallback(function (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(function () {
@@ -213,7 +221,7 @@ export var ImageEmoji = function ImageEmoji(props) {
       onBeforeLoad();
     }
   }, [inView, onBeforeLoad]);
-  var emojiNode = jsx("img", _extends({
+  var emojiNode = /*#__PURE__*/React.createElement("img", _extends({
     //@ts-ignore
     loading: disableLazyLoad ? 'eager' : 'lazy',
     src: src,
@@ -238,11 +246,11 @@ export var ImageEmoji = function 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-".concat(emoji.id),
       type: "image"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -251,24 +259,19 @@ export var ImageEmoji = function ImageEmoji(props) {
       ref: ref,
       showTooltip: false // avoid showing both tooltip and title
       ,
-      onMouseOver: function 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: function onClick(event) {
         return 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
@@ -314,34 +317,32 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (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": "".concat(type, "-emoji-").concat(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: function onKeyDown(event) {
-        return handleKeyDown(props, event);
-      },
-      onMouseDown: function onMouseDown(event) {
-        handleMouseDown(props, event);
-      },
-      onMouseEnter: function onMouseEnter(event) {
-        handleMouseMove(props, event);
-      },
-      onFocus: function 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": "".concat(type, "-emoji-").concat(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 _tn8j2tgk _3naf2tgk _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc" : "_2rkosqtm _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j2tgk _3naf2tgk _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc", className]),
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(props, event);
+    },
+    onMouseDown: function onMouseDown(event) {
+      handleMouseDown(props, event);
+    },
+    onMouseEnter: function onMouseEnter(event) {
+      handleMouseMove(props, event);
+    },
+    onFocus: function 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, {
+    style: {
+      "--_1y60f1n": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")),
+      "--_1rebzxw": ix("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")))
+    }
+  }), children);
 });
 export var Emoji = function Emoji(props) {
   var emoji = props.emoji;
@@ -362,8 +363,8 @@ export var Emoji = function 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;