@atlaskit/emoji 69.0.7 → 69.0.8

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

@@ -1,36 +1,45 @@
+/* EmojiPreviewComponent.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.EmojiPreviewComponent = void 0;
-var _react = require("@emotion/react");
+require("./EmojiPreviewComponent.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
-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; }
+var emojiName = null;
+var emojiShortName = null;
+var preview = null;
+var previewImg = null;
+var previewText = null;
 var EmojiPreviewComponent = exports.EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
   var emoji = _ref.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
-    (0, _react.jsx)("div", {
-      css: _styles.preview
-    }, (0, _react.jsx)("span", {
-      css: _styles.previewImg
-    }, (0, _react.jsx)(_CachingEmoji.default, {
-      key: emoji.id || emoji.shortName,
-      emoji: emoji
-    })), (0, _react.jsx)("div", {
-      css: _styles.previewText
-    }, emoji.name && (0, _react.jsx)("div", {
-      css: _styles.emojiName
-    }, emoji.name), (0, _react.jsx)("div", {
-      css: _styles.emojiShortName
-    }, emoji.shortName)))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.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.default, {
+    key: emoji.id || emoji.shortName,
+    emoji: emoji
+  })), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
+  }, emoji.name && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1ule _syazovqm _1bto1l2s _o5721q9c _299mangw"]),
+    style: {
+      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")"))
+    }
+  }, emoji.name), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_11c8dcr7 _1reo15vq _18m915vq _1e0c1ule _syazeqp7 _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hw2smr _pnmbovqm"]),
+    style: {
+      "--_158nz74": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N200, ")")),
+      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")"))
+    }
+  }, emoji.shortName)));
 };

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

@@ -1,3 +1,4 @@
+/* EmojiRadioButton.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,22 +7,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EmojiRadioButton = void 0;
+require("./EmojiRadioButton.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _mouse = require("../../util/mouse");
-var _styles = require("./styles");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 var _constants = require("../../util/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var emojiButton = null;
+var emojiRadio = null;
 var handleMouseDown = function handleMouseDown(props, event) {
   var onSelected = props.onSelected;
   event.preventDefault();
@@ -44,32 +41,32 @@ var EmojiRadioButton = exports.EmojiRadioButton = /*#__PURE__*/(0, _react.forwar
     selectOnHover = props.selectOnHover,
     ariaLabelText = props.ariaLabelText,
     defaultChecked = props.defaultChecked;
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    (0, _react2.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: _styles.emojiButton,
-      onMouseDown: function onMouseDown(event) {
-        return handleMouseDown(props, event);
-      },
-      onKeyDown: function onKeyDown(event) {
-        return handleKeyPress(props, event);
-      }
-    }, (0, _react2.jsx)(_visuallyHidden.default, null, ariaLabelText), (0, _react2.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: _styles.emojiRadio,
-      defaultChecked: defaultChecked
-    }), (0, _react2.jsx)(_Emoji.default, {
-      emoji: emoji,
-      selectOnHover: selectOnHover,
-      shouldBeInteractive: false,
-      "aria-hidden": true
-    }))
-  );
+  return /*#__PURE__*/_react.default.createElement("label", {
+    onMouseDown: function onMouseDown(event) {
+      return handleMouseDown(props, event);
+    },
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyPress(props, event);
+    },
+    className: (0, _runtime.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 _7ehi1r2v _491113zc"]),
+    style: {
+      "--_1rebzxw": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
+    }
+  }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, ariaLabelText), /*#__PURE__*/_react.default.createElement("input", {
+    ref: ref,
+    "data-testid": ariaLabelText,
+    type: "radio",
+    name: "skin-tone",
+    defaultChecked: defaultChecked,
+    className: (0, _runtime.ax)(["_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8msqtm _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1r2v _1i1213zc"]),
+    style: {
+      "--_1rebzxw": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
 });
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiRadioButton);

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

@@ -1,3 +1,4 @@
+/* EmojiUploadPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,11 +7,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uploadEmojiNameInputTestId = exports.uploadEmojiComponentTestId = exports.default = exports.cancelEmojiUploadPickerTestId = void 0;
+require("./EmojiUploadPicker.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 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 _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
@@ -24,16 +28,15 @@ var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 var _EmojiUploadPreview = _interopRequireDefault(require("./EmojiUploadPreview"));
 var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 var _internalTypes = require("./internal-types");
-var _styles = require("./styles");
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var closeEmojiUploadButton = null;
+var emojiUpload = null;
+var emojiUploadTop = null;
+var headingH5 = null;
+var uploadChooseFileEmojiName = null;
+var uploadChooseFileMessage = null;
+var uploadChooseFileRow = null;
 var uploadEmojiNameInputTestId = exports.uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 var uploadEmojiComponentTestId = exports.uploadEmojiComponentTestId = 'upload-emoji-component';
 var cancelEmojiUploadPickerTestId = exports.cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -78,65 +81,65 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   var emojiPlaceholder = formatMessage(_i18n.messages.emojiPlaceholder);
   var emojiNameAriaLabel = formatMessage(_i18n.messages.emojiNameAriaLabel);
   var emojiChooseFileTitle = formatMessage(_i18n.messages.emojiChooseFileTitle);
-  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.emojiUpload,
-      "data-testid": uploadEmojiComponentTestId
-    }, (0, _react2.jsx)("div", {
-      css: _styles.emojiUploadTop
-    }, (0, _react2.jsx)("label", {
-      css: [_styles.uploadChooseFileMessage, _styles.headingH5],
-      htmlFor: "new-emoji-name-input"
-    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel)), (0, _react2.jsx)("div", {
-      css: _styles.closeEmojiUploadButton
-    }, (0, _react2.jsx)(_standardButton.default, {
-      onClick: onUploadCancelled,
-      "aria-label": cancelLabel,
-      appearance: "subtle",
-      spacing: "none",
-      shouldFitContainer: true,
-      testId: cancelEmojiUploadPickerTestId
-    }, (0, _react2.jsx)(_closeCross.default, {
-      color: "currentColor",
-      LEGACY_size: "small",
-      label: cancelLabel
-    })))), (0, _react2.jsx)("div", {
-      css: _styles.uploadChooseFileRow
-    }, (0, _react2.jsx)("span", {
-      css: _styles.uploadChooseFileEmojiName
-    }, (0, _react2.jsx)(_textfield.default, {
-      placeholder: emojiPlaceholder,
-      "aria-label": emojiNameAriaLabel,
-      maxLength: maxNameLength,
-      onChange: onNameChange,
-      onKeyDown: onKeyDownHandler,
-      value: name,
-      isCompact: true,
-      autoFocus: true,
-      testId: uploadEmojiNameInputTestId,
-      ref: inputRef,
-      id: "new-emoji-name-input",
-      "aria-required": true
-    })), (0, _react2.jsx)(_primitives.Text, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
-      return (0, _react2.jsx)(_FileChooser.default, {
-        label: emojiChooseFileTitle,
-        onChange: onChooseFile,
-        onClick: onClick,
-        accept: "image/png,image/jpeg,image/gif",
-        ariaDescribedBy: fileChooserButtonDescriptionId,
-        isDisabled: disableChooser
-      });
-    }))), (0, _react2.jsx)("div", {
-      id: fileChooserButtonDescriptionId
-    }, !errorMessage ? (0, _react2.jsx)(_primitives.Text, {
-      as: "p",
-      size: "small"
-    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : (0, _react2.jsx)(_EmojiErrorMessage.default, {
-      messageStyles: _styles.emojiChooseFileErrorMessage,
-      message: errorMessage
-    })))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiComponentTestId,
+    className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3icae7 _1e0c1txw _2lx21bp4 _1bah1b1v"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_11c8dcr7 _n3td1v6z _1e0c1txw _1bah1yb4 _4cvresu3"])
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-emoji-name-input",
+    className: (0, _runtime.ax)(["_1w901vvm", "_fqoxdcr7 _12r21pd9"]),
+    style: {
+      "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw"])
+  }, /*#__PURE__*/React.createElement(_standardButton.default, {
+    onClick: onUploadCancelled,
+    "aria-label": cancelLabel,
+    appearance: "subtle",
+    spacing: "none",
+    shouldFitContainer: true,
+    testId: cancelEmojiUploadPickerTestId
+  }, /*#__PURE__*/React.createElement(_closeCross.default, {
+    color: "currentColor",
+    LEGACY_size: "small",
+    label: cancelLabel
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _1bah1yb4 _n3td1v6z"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _2hwx14y2 _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
+  }, /*#__PURE__*/React.createElement(_textfield.default, {
+    placeholder: emojiPlaceholder,
+    "aria-label": emojiNameAriaLabel,
+    maxLength: maxNameLength,
+    onChange: onNameChange,
+    onKeyDown: onKeyDownHandler,
+    value: name,
+    isCompact: true,
+    autoFocus: true,
+    testId: uploadEmojiNameInputTestId,
+    ref: inputRef,
+    id: "new-emoji-name-input",
+    "aria-required": true
+  })), /*#__PURE__*/React.createElement(_primitives.Text, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
+    return /*#__PURE__*/React.createElement(_FileChooser.default, {
+      label: emojiChooseFileTitle,
+      onChange: onChooseFile,
+      onClick: onClick,
+      accept: "image/png,image/jpeg,image/gif",
+      ariaDescribedBy: fileChooserButtonDescriptionId,
+      isDisabled: disableChooser
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    id: fileChooserButtonDescriptionId
+  }, !errorMessage ? /*#__PURE__*/React.createElement(_primitives.Text, {
+    as: "p",
+    size: "small"
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+    errorStyle: "chooseFile",
+    message: errorMessage
+  })));
 });
 var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var _document$activeEleme;
@@ -230,7 +233,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   }, []);
   var errorOnUpload = (0, _react.useCallback)(function (event) {
     (0, _logger.default)('File load error: ', event);
-    setChooseEmojiErrorMessage((0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiUploadFailed));
+    setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiUploadFailed));
     cancelChooseFile();
   }, [cancelChooseFile]);
   var onFileLoad = (0, _react.useCallback)(function (file) {
@@ -250,7 +253,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
             case 7:
               _context.prev = 7;
               _context.t0 = _context["catch"](0);
-              setChooseEmojiErrorMessage((0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiInvalidImage));
+              setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiInvalidImage));
               cancelChooseFile();
             case 11:
             case "end":
@@ -269,7 +272,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       var reader = new FileReader();
       var file = files[0];
       if (ImageUtil.hasFileExceededSize(file)) {
-        setChooseEmojiErrorMessage((0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageTooBig));
+        setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageTooBig));
         cancelChooseFile();
         return;
       }
@@ -296,16 +299,16 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };
-  return (0, _react2.jsx)(_reactFocusLock.default, {
+  return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
     noFocusGuards: true
-  }, name && previewImage ? (0, _react2.jsx)(_EmojiUploadPreview.default, {
+  }, name && previewImage ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
     onUploadCancelled: cancelUpload,
     previewImage: previewImage,
     uploadStatus: uploadStatus
-  }) : (0, _react2.jsx)(ChooseEmojiFile, {
+  }) : /*#__PURE__*/React.createElement(ChooseEmojiFile, {
     name: name,
     onChooseFile: onChooseFile,
     onClick: onChooseFileClicked,

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

@@ -1,33 +1,41 @@
+/* EmojiUploadPreview.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.uploadPreviewTestId = exports.default = exports.cancelUploadButtonTestId = void 0;
+require("./EmojiUploadPreview.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"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../util/constants");
 var _i18n = require("../i18n");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
-var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 var _internalTypes = require("./internal-types");
-var _styles = require("./styles");
+var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
+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 bigEmojiPreview = null;
+var uploadAddRow = null;
+var uploadPreview = null;
+var uploadPreviewFooter = null;
+var uploadPreviewText = null;
 var uploadPreviewTestId = exports.uploadPreviewTestId = 'upload-preview';
 var cancelUploadButtonTestId = exports.cancelUploadButtonTestId = 'cancel-upload-button';
 var addEmojiPreviewDescriptionId = 'fabric.emoji.preview.description.id';
@@ -62,51 +70,54 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
           },
           searchable: true
         };
-        emojiComponent = (0, _react2.jsx)(_Emoji.default, {
+        emojiComponent = /*#__PURE__*/React.createElement(_Emoji.default, {
           emoji: emoji
         });
       }
       var uploading = uploadStatus === _internalTypes.UploadStatus.Uploading;
       var retryableButtonLabel = errorMessage ? formatMessage(_i18n.messages.retryLabel) : formatMessage(_i18n.messages.addEmojiLabel);
-      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.uploadPreviewFooter
-        }, (0, _react2.jsx)("div", {
-          css: _styles.uploadPreview,
-          "data-testid": uploadPreviewTestId
-        }, (0, _react2.jsx)("div", {
-          css: _styles.uploadPreviewText
-        }, (0, _react2.jsx)(_heading.default, {
-          size: "xsmall"
-        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), (0, _react2.jsx)("div", {
-          id: addEmojiPreviewDescriptionId
-        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
-          values: {
-            emoji: emojiComponent
-          }
-        })))), (0, _react2.jsx)("div", {
-          css: _styles.bigEmojiPreview
-        }, emojiComponent)), (0, _react2.jsx)("div", {
-          css: _styles.uploadAddRow
-        }, !uploading && errorMessage ? (0, _react2.jsx)(_EmojiErrorMessage.default, {
-          messageStyles: _styles.emojiPreviewErrorMessage,
-          message: errorMessage,
-          tooltip: true
-        }) : null, (0, _react2.jsx)(_RetryableButton.default, {
-          label: retryableButtonLabel,
-          onSubmit: onAddEmoji,
-          appearance: "primary",
-          loading: uploading,
-          error: !!errorMessage,
-          ariaDescribedBy: addEmojiPreviewDescriptionId
-        }), (0, _react2.jsx)(_standardButton.default, {
-          onClick: onUploadCancelled,
-          appearance: "subtle",
-          isDisabled: uploading,
-          testId: cancelUploadButtonTestId
-        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))))
-      );
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx21bp4 _4t3i53f4"])
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": uploadPreviewTestId,
+        className: (0, _runtime.ax)(["_2rkosqtm _ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhklslw"]),
+        style: {
+          "--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20, ")"))
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1fztdcr7 _jl6w1vvm _avw21b66 _19l3gktf _rtys12am"]),
+        style: {
+          "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+        }
+      }, /*#__PURE__*/React.createElement(_heading.default, {
+        size: "xsmall"
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement("div", {
+        id: addEmojiPreviewDescriptionId
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
+        values: {
+          emoji: emojiComponent
+        }
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_19bv1b66 _19l31ylp _rtys53f4"])
+      }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0q19bv"])
+      }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+        errorStyle: "preview",
+        message: errorMessage,
+        tooltip: true
+      }) : null, /*#__PURE__*/React.createElement(_RetryableButton.default, {
+        label: retryableButtonLabel,
+        onSubmit: onAddEmoji,
+        appearance: "primary",
+        loading: uploading,
+        error: !!errorMessage,
+        ariaDescribedBy: addEmojiPreviewDescriptionId
+      }), /*#__PURE__*/React.createElement(_standardButton.default, {
+        onClick: onUploadCancelled,
+        appearance: "subtle",
+        isDisabled: uploading,
+        testId: cancelUploadButtonTestId
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))));
     }
   }]);
 }(_react.PureComponent);

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

@@ -15,13 +15,10 @@ var _constants = require("../../util/constants");
 var _typeHelpers = require("../../util/type-helpers");
 var _types = require("../../types");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
-var _Emoji2 = _interopRequireDefault(require("../compiled/common/Emoji"));
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
-var _EmojiPlaceholder2 = _interopRequireDefault(require("../compiled/common/EmojiPlaceholder"));
 var _analytics = require("../../util/analytics");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
-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 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; }
@@ -215,30 +212,18 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     "data-emoji-id": id,
     "data-emoji-short-name": shortName,
     "data-emoji-text": fallback || shortName
-  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji') ? /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder2.default, {
+  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || _constants.defaultEmojiHeight,
     loading: true
-  }) : /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
-    shortName: shortName,
-    showTooltip: showTooltip,
-    size: fitToHeight || _constants.defaultEmojiHeight,
-    loading: true
-  })), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji') ? /*#__PURE__*/_react.default.createElement(_Emoji2.default, {
-    emoji: optimisticEmojiDescription,
-    onLoadError: handleOnLoadError,
-    showTooltip: showTooltip,
-    fitToHeight: fitToHeight,
-    autoWidth: !!emoji ? false : true,
-    editorEmoji: editorEmoji
-  }) : /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/_react.default.createElement(_Emoji.default, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: !!emoji ? false : true,
     editorEmoji: editorEmoji
-  }))));
+  })));
 };
 var _default = exports.default = ResourcedEmojiComponent;