@atlaskit/emoji 69.0.7 → 69.0.8

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"

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

@@ -1,21 +1,11 @@
+/* EmojiFallback.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./EmojiFallback.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { EmojiNodeWrapper } from './Emoji';
 import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles } from './styles';
-const emojiFallbackStyles = css({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden'
-});
+const emojiFallbackStyles = null;
 export const EmojiFallback = props => {
   const {
     emoji,
@@ -29,13 +19,14 @@ export const EmojiFallback = props => {
   } = emoji;
   const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    jsx(EmojiNodeWrapper, _extends({
+    React.createElement(EmojiNodeWrapper, _extends({
       type: "image"
     }, props, {
       className: classes
-    }), jsx("span", {
-      css: emojiFallbackStyles
+    }), /*#__PURE__*/React.createElement("span", {
+      className: ax(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _1bah1h6o _4cvr1h6o"])
     }, fallback || shortName))
   );
 };

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

@@ -1,11 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* EmojiPlaceholder.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPlaceholder.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N20A } from '@atlaskit/theme/colors';
 import { defaultEmojiHeight } from '../../util/constants';
-import { placeholder, placeholderContainer, placeholderContainerAnimated } from './styles';
+import { placeholder } from './styles';
+const placeholderContainer = null;
+const easeSweep = null;
+const placeholderContainerAnimated = null;
 export const emojiPlaceholderTestId = shortName => `emoji-placeholder-${shortName}`;
 const EmojiPlaceholder = props => {
   const {
@@ -33,19 +35,15 @@ const EmojiPlaceholder = props => {
     width: `${width}px`,
     height: `${height}px`
   };
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     "data-testid": emojiPlaceholderTestId(shortName),
     "aria-busy": loading,
     role: "status",
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: placeholder
-    // 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: loading ? [placeholderContainer, placeholderContainerAnimated] : placeholderContainer
+    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && "", loading && "_16qq1t1r _1kt9b3bt _cfu11ule _1cs8stnw _1rus1j54 _kfgt1osq _1mp41osq", placeholder]),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
     style: style,
     title: showTooltip ? shortName : ''
   });

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

@@ -1,29 +1,29 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* EmojiPreviewComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPreviewComponent.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N200, N900 } from '@atlaskit/theme/colors';
 import CachingEmoji from './CachingEmoji';
-import { emojiName, emojiShortName, preview, previewImg, previewText } from './styles';
+const emojiName = null;
+const emojiShortName = null;
+const preview = null;
+const previewImg = null;
+const previewText = null;
 export const EmojiPreviewComponent = ({
   emoji
 }) => {
-  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: preview
-    }, jsx("span", {
-      css: previewImg
-    }, jsx(CachingEmoji, {
-      key: emoji.id || emoji.shortName,
-      emoji: emoji
-    })), jsx("div", {
-      css: previewText
-    }, emoji.name && jsx("div", {
-      css: emojiName
-    }, emoji.name), jsx("div", {
-      css: emojiShortName
-    }, emoji.shortName)))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule"])
+  }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    key: emoji.id || emoji.shortName,
+    emoji: emoji
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
+  }, emoji.name && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _1e0c1ule _syazj3m3 _1bto1l2s _o5721q9c _299mangw"])
+  }, emoji.name), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8dcr7 _1reo15vq _18m915vq _1e0c1ule _syaz1thw _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hw2smr _pnmbj3m3"])
+  }, emoji.shortName)));
 };

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

@@ -1,15 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiRadioButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiRadioButton.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { memo, 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 } from '@atlaskit/theme/colors';
 import { leftClick } from '../../util/mouse';
-import { emojiButton, emojiRadio } from './styles';
 import Emoji from './Emoji';
 import { TONESELECTOR_KEYBOARD_KEYS_SUPPORTED } from '../../util/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+const emojiButton = null;
+const emojiRadio = null;
 const handleMouseDown = (props, event) => {
   const {
     onSelected
@@ -38,28 +37,22 @@ export const EmojiRadioButton = /*#__PURE__*/forwardRef((props, ref) => {
     ariaLabelText,
     defaultChecked
   } = props;
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    jsx("label", {
-      // 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: emojiButton,
-      onMouseDown: event => handleMouseDown(props, event),
-      onKeyDown: event => handleKeyPress(props, event)
-    }, jsx(VisuallyHidden, null, ariaLabelText), jsx("input", {
-      ref: ref,
-      "data-testid": ariaLabelText,
-      type: "radio",
-      name: "skin-tone"
-      // 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: emojiRadio,
-      defaultChecked: defaultChecked
-    }), jsx(Emoji, {
-      emoji: emoji,
-      selectOnHover: selectOnHover,
-      shouldBeInteractive: false,
-      "aria-hidden": true
-    }))
-  );
+  return /*#__PURE__*/React.createElement("label", {
+    onMouseDown: event => handleMouseDown(props, event),
+    onKeyDown: event => handleKeyPress(props, event),
+    className: ax(["_19itidpf _2rkosqtm _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc"])
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, ariaLabelText), /*#__PURE__*/React.createElement("input", {
+    ref: ref,
+    "data-testid": ariaLabelText,
+    type: "radio",
+    name: "skin-tone",
+    defaultChecked: defaultChecked,
+    className: ax(["_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8msqtm _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1n2i _1i1213zc"])
+  }), /*#__PURE__*/React.createElement(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
 });
 export default /*#__PURE__*/memo(EmojiRadioButton);