@atlaskit/emoji 69.0.7 → 69.0.8

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

@@ -1,14 +1,19 @@
+/* EmojiActions.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.default = exports.EmojiActions = void 0;
+require("./EmojiActions.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _EmojiDeletePreview = _interopRequireDefault(require("./EmojiDeletePreview"));
 var _EmojiUploadPicker = _interopRequireDefault(require("./EmojiUploadPicker"));
@@ -20,39 +25,35 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/migration/add"));
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 var _styles = require("./styles");
-var _styles2 = require("../picker/styles");
 var _constants = require("../../util/constants");
-var _primitives = require("@atlaskit/primitives");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  icon: "_18u0r5cr _2hwx1i6y"
+};
+var addCustomEmoji = null;
+var addCustomEmojiButton = null;
+var emojiActionsWrapper = null;
+var emojiToneSelectorContainer = null;
+var previewFooter = null;
 var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
 var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
-var iconStyles = (0, _primitives.xcss)({
-  marginLeft: 'space.negative.050',
-  marginRight: 'space.negative.025'
-});
 
 // Generic Type for the wrapped functional component
 
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
-  return (0, _react2.jsx)(_react.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
-  (0, _react2.jsx)("div", {
-    css: _styles.addCustomEmoji,
-    "data-testid": uploadEmojiTestId
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
-    return (0, _react2.jsx)(_standardButton.default, {
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiTestId,
+    className: (0, _runtime.ax)(["_1wpz1h6o _18u019bv _otyr19bv"])
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+    return /*#__PURE__*/React.createElement(_standardButton.default, {
       onClick: onOpenUpload,
-      iconBefore: (0, _react2.jsx)(_primitives.Box, {
-        xcss: iconStyles
-      }, (0, _react2.jsx)(_add.default, {
+      iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
+        xcss: styles.icon
+      }, /*#__PURE__*/React.createElement(_add.default, {
         LEGACY_margin: "0 ".concat("var(--ds-space-025, 2px)", " 0 ", "var(--ds-space-050, 4px)"),
         color: "currentColor",
         label: "",
@@ -60,12 +61,10 @@ var AddOwnEmoji = function 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: _styles.addCustomEmojiButton
+
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: _styles.emojiPickerAddEmoji,
+      className: (0, _runtime.ax)(["_p12f3sup", _styles.emojiPickerAddEmoji]),
       tabIndex: 0,
       id: "add-custom-emoji"
     }, label);
@@ -93,16 +92,16 @@ var TonesWrapper = function TonesWrapper(props) {
       setFocusTonePreviewButton(false);
     };
   }, [focusTonePreviewButton, showToneSelector]);
-  var onToneCloseHandler = function onToneCloseHandler() {
+  var onToneCloseHandler = (0, _react.useCallback)(function () {
     var onToneClose = props.onToneClose;
     onToneClose();
     setFocusTonePreviewButton(true);
-  };
-  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+  }, [props]);
+  var onToneSelectedHandler = (0, _react.useCallback)(function (toneValue) {
     var onToneSelected = props.onToneSelected;
     onToneSelected(toneValue);
     setFocusTonePreviewButton(true);
-  };
+  }, [props]);
   if (!toneEmoji) {
     return null;
   }
@@ -110,28 +109,25 @@ var TonesWrapper = function TonesWrapper(props) {
   if (selectedTone !== _constants.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
-    (0, _react2.jsx)("div", {
-      css: _styles.emojiToneSelectorContainer
-    }, (0, _react2.jsx)(_ToneSelector.default, {
-      emoji: toneEmoji,
-      onToneSelected: onToneSelectedHandler,
-      onToneClose: onToneCloseHandler,
-      selectedTone: selectedTone,
-      isVisible: showToneSelector
-    }), (0, _react2.jsx)(_TonePreviewButton.default, {
-      ref: tonePreviewButtonRef,
-      ariaExpanded: showToneSelector,
-      emoji: previewToneEmoji,
-      selectOnHover: true,
-      onSelected: onToneOpen,
-      ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
-        selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewToneEmoji.name))
-      }),
-      isVisible: !showToneSelector
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
+  }, /*#__PURE__*/React.createElement(_ToneSelector.default, {
+    emoji: toneEmoji,
+    onToneSelected: onToneSelectedHandler,
+    onToneClose: onToneCloseHandler,
+    selectedTone: selectedTone,
+    isVisible: showToneSelector
+  }), /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
+    ref: tonePreviewButtonRef,
+    ariaExpanded: showToneSelector,
+    emoji: previewToneEmoji,
+    selectOnHover: true,
+    onSelected: onToneOpen,
+    ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
+      selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewToneEmoji.name))
+    }),
+    isVisible: !showToneSelector
+  }));
 };
 var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
   var onToneSelected = props.onToneSelected,
@@ -153,72 +149,72 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     showToneSelector = _useState4[0],
     setShowToneSelector = _useState4[1];
-  var previewFooterClassnames = [_styles2.emojiPickerFooter, _styles2.emojiActionsContainerWithBottomShadow];
-  var onToneOpenHandler = function onToneOpenHandler() {
+  var onToneOpenHandler = (0, _react.useCallback)(function () {
     return setShowToneSelector(true);
-  };
-  var onToneCloseHandler = function onToneCloseHandler() {
+  }, []);
+  var onToneCloseHandler = (0, _react.useCallback)(function () {
     return setShowToneSelector(false);
-  };
-  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+  }, []);
+  var onToneSelectedHandler = (0, _react.useCallback)(function (toneValue) {
     setShowToneSelector(false);
     if (onToneSelected) {
       onToneSelected(toneValue);
     }
-  };
-  var onMouseLeaveHandler = function onMouseLeaveHandler() {
+  }, [onToneSelected]);
+  var onMouseLeaveHandler = (0, _react.useCallback)(function () {
     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
-      (0, _react2.jsx)("div", {
-        css: previewFooterClassnames
-      }, (0, _react2.jsx)(_EmojiUploadPicker.default, {
-        onUploadCancelled: onUploadCancelled,
-        onUploadEmoji: onUploadEmoji,
-        onFileChooserClicked: onFileChooserClicked,
-        errorMessage: uploadErrorMessage,
-        initialUploadName: initialUploadName
-      }))
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
+      style: {
+        "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+        "--_p4h2oc": (0, _runtime.ix)("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+      }
+    }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
+      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
-      (0, _react2.jsx)("div", {
-        css: previewFooterClassnames
-      }, (0, _react2.jsx)(_EmojiDeletePreview.default, {
-        emoji: emojiToDelete,
-        onDeleteEmoji: onDeleteEmoji,
-        onCloseDelete: onCloseDelete
-      }))
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
+      style: {
+        "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+        "--_p4h2oc": (0, _runtime.ix)("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+      }
+    }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
+      emoji: emojiToDelete,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete
+    }));
   }
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _react2.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
-    }, (0, _react2.jsx)("div", {
-      css: _styles.emojiActionsWrapper
-    }, (0, _react2.jsx)(_EmojiPickerListSearch.EmojiPickerListSearch, {
-      onChange: onChange,
-      query: query,
-      resultsCount: resultsCount,
-      isVisible: !showToneSelector
-    }), (0, _react2.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
-      onToneOpen: onToneOpenHandler,
-      onToneClose: onToneCloseHandler,
-      onToneSelected: onToneSelectedHandler,
-      showToneSelector: showToneSelector
-    }))), (0, _react2.jsx)(AddOwnEmoji, props))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiActionsTestId,
+    onMouseLeave: onMouseLeaveHandler,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
+    style: {
+      "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+      "--_p4h2oc": (0, _runtime.ix)("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(_EmojiPickerListSearch.EmojiPickerListSearch, {
+    onChange: onChange,
+    query: query,
+    resultsCount: resultsCount,
+    isVisible: !showToneSelector
+  }), /*#__PURE__*/React.createElement(TonesWrapper, (0, _extends2.default)({}, props, {
+    onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
+    onToneSelected: onToneSelectedHandler,
+    showToneSelector: showToneSelector
+  }))), /*#__PURE__*/React.createElement(AddOwnEmoji, props));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/(0, _react.memo)(EmojiActions));

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

@@ -1,3 +1,4 @@
+/* EmojiDeletePreview.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiDeletePreviewTestId = exports.default = void 0;
+require("./EmojiDeletePreview.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -13,8 +18,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
@@ -23,16 +27,16 @@ var _i18n = require("../i18n");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
 var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
-var _styles = require("./styles");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var deleteFooter = null;
+var deletePreview = null;
+var deleteText = null;
+var previewButtonGroup = null;
 var emojiDeletePreviewTestId = exports.emojiDeletePreviewTestId = 'emoji-delete-preview';
 var deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
@@ -103,42 +107,45 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         loading = _this$state.loading,
         error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return (0, _react2.jsx)(_reactFocusLock.default, {
+      return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
         noFocusGuards: true
-      }, (0, _react2.jsx)("div", {
-        css: _styles.deletePreview,
-        "data-testid": emojiDeletePreviewTestId
-      }, (0, _react2.jsx)("div", {
-        css: _styles.deleteText
-      }, (0, _react2.jsx)(_heading.default, {
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": emojiDeletePreviewTestId,
+        className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3i53f4 _1e0c1txw _2lx21bp4 _1bahesu3"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_11c8dcr7 _4t3ivbgk _pnmb1vvm _jwwg7vkz"]),
+        style: {
+          "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+        }
+      }, /*#__PURE__*/React.createElement(_heading.default, {
         size: "xxsmall"
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), (0, _react2.jsx)("div", {
-        css: _styles.deleteFooter
-      }, (0, _react2.jsx)(_CachingEmoji.default, {
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_11c82smr _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txf1igg _1qz31b66"])
+      }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
         emoji: emoji
-      }), (0, _react2.jsx)("div", {
-        css: _styles.previewButtonGroup
-      }, error ? !loading ? (0, _react2.jsx)(_EmojiErrorMessage.default, {
+      }), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw"])
+      }, error ? !loading ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
         message: formatMessage(_i18n.messages.deleteEmojiFailed),
-        messageStyles: _styles.emojiDeleteErrorMessage,
+        errorStyle: "delete",
         tooltip: true
-      }) : null : null, (0, _react2.jsx)(_visuallyHidden.default, {
+      }) : null : null, /*#__PURE__*/React.createElement(_visuallyHidden.default, {
         id: deleteEmojiLabelId
-      }, formatMessage(_i18n.messages.deleteEmojiLabel)), (0, _react2.jsx)(_RetryableButton.default, {
+      }, formatMessage(_i18n.messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
         error: error,
         ariaLabelledBy: "".concat(_EmojiErrorMessage.emojiErrorScreenreaderTestId, " ").concat(deleteEmojiLabelId)
-      }), (0, _react2.jsx)(_new.default, {
+      }), /*#__PURE__*/React.createElement(_new.default, {
         appearance: "subtle",
         onClick: this.onCancel
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))))));
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))))));
     }
   }]);
 }(_react.Component);

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

@@ -1,52 +1,54 @@
+/* EmojiErrorMessage.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiErrorScreenreaderTestId = exports.emojiErrorMessageTooltipTestId = exports.emojiErrorMessageTestId = exports.emojiErrorIconTestId = exports.default = void 0;
-var _react = require("@emotion/react");
+require("./EmojiErrorMessage.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("../i18n");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var errorMessageStyles = {
+  chooseFile: "_1e0c1txw _syaz1l5o _u5f319bv _1bah1y6m",
+  delete: "_1e0c1txw _syaz1ick _4cvr1h6o _1bahesu3 _u5f31b66",
+  preview: "_1e0c116y _syaz1ick _u5f319bv _1bahesu3 _4cvr1h6o"
+};
 var emojiErrorScreenreaderTestId = exports.emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 var emojiErrorMessageTestId = exports.emojiErrorMessageTestId = 'emoji-error-message';
 var emojiErrorMessageTooltipTestId = exports.emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
 var emojiErrorIconTestId = exports.emojiErrorIconTestId = 'emoji-error-icon';
 var EmojiErrorMessage = function EmojiErrorMessage(props) {
-  var messageStyles = props.messageStyles,
+  var errorStyle = props.errorStyle,
     message = props.message,
     tooltip = props.tooltip;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var visualContent = tooltip ?
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  (0, _react.jsx)("div", {
-    css: messageStyles,
-    "data-testid": emojiErrorMessageTestId
-  }, (0, _react.jsx)(_tooltip.default, {
+  var visualContent = tooltip ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId,
+    className: (0, _runtime.ax)([errorMessageStyles[errorStyle]])
+  }, /*#__PURE__*/React.createElement(_tooltip.default, {
     content: message,
     position: "top",
     testId: emojiErrorMessageTooltipTestId
-  }, (0, _react.jsx)(_error.default, {
+  }, /*#__PURE__*/React.createElement(_error.default, {
     color: "currentColor",
     label: formatMessage(_i18n.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
-  (0, _react.jsx)("div", {
-    css: messageStyles,
-    "data-testid": emojiErrorMessageTestId
-  }, (0, _react.jsx)(_error.default, {
+  }))) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiErrorMessageTestId,
+    className: (0, _runtime.ax)([errorMessageStyles[errorStyle]])
+  }, /*#__PURE__*/React.createElement(_error.default, {
     color: "currentColor",
     label: formatMessage(_i18n.messages.error),
     LEGACY_size: "small"

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

@@ -1,3 +1,4 @@
+/* EmojiFallback.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,26 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EmojiFallback = void 0;
+require("./EmojiFallback.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _Emoji = require("./Emoji");
 var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var emojiFallbackStyles = (0, _react2.css)({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden'
-});
+var emojiFallbackStyles = null;
 var EmojiFallback = exports.EmojiFallback = function EmojiFallback(props) {
   var emoji = props.emoji,
     selected = props.selected,
@@ -34,13 +22,14 @@ var EmojiFallback = exports.EmojiFallback = function EmojiFallback(props) {
     shortName = emoji.shortName;
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    (0, _react2.jsx)(_Emoji.EmojiNodeWrapper, (0, _extends2.default)({
+    _react.default.createElement(_Emoji.EmojiNodeWrapper, (0, _extends2.default)({
       type: "image"
     }, props, {
       className: classes
-    }), (0, _react2.jsx)("span", {
-      css: emojiFallbackStyles
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _1bah1h6o _4cvr1h6o"])
     }, fallback || shortName))
   );
 };

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

@@ -1,18 +1,26 @@
+/* EmojiPlaceholder.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiPlaceholderTestId = exports.default = void 0;
-var _react = require("@emotion/react");
+require("./EmojiPlaceholder.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../util/constants");
 var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2.default)(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; }
+var placeholderContainer = null;
+var easeSweep = null;
+var placeholderContainerAnimated = null;
 var emojiPlaceholderTestId = exports.emojiPlaceholderTestId = function emojiPlaceholderTestId(shortName) {
   return "emoji-placeholder-".concat(shortName);
 };
@@ -42,21 +50,19 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     width: "".concat(width, "px"),
     height: "".concat(height, "px")
   };
-  return (0, _react.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: _styles.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 ? [_styles.placeholderContainer, _styles.placeholderContainerAnimated] : _styles.placeholderContainer
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    title: showTooltip ? shortName : ''
+    className: (0, _runtime.ax)(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && "_16qqztlz _1kt9b3bt _cfu11ule _1cs8stnw _1ruskq2v _kfgt1osq _1mp41osq", _styles.placeholder]),
+    title: showTooltip ? shortName : '',
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_12ncegi": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20A, ")")),
+      "--_s082jg": (0, _runtime.ix)("".concat(easeSweep, " 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite"))
+    })
   });
 };
 var _default = exports.default = EmojiPlaceholder;