@atlaskit/emoji 68.0.4 → 69.0.0

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

@@ -0,0 +1,152 @@
+/* EmojiDeletePreview.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.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"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _i18n = require("../../i18n");
+var _CachingEmoji = _interopRequireDefault(require("../../common/CachingEmoji"));
+var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
+var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
+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; })(); }
+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) {
+  function EmojiDeletePreview(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, EmojiDeletePreview);
+    _this = _callSuper(this, EmojiDeletePreview, [props]);
+    (0, _defineProperty2.default)(_this, "onSubmit", function () {
+      var _this$props = _this.props,
+        emoji = _this$props.emoji,
+        onDeleteEmoji = _this$props.onDeleteEmoji,
+        onCloseDelete = _this$props.onCloseDelete;
+      if (!_this.state.loading) {
+        _this.setState({
+          loading: true
+        });
+        onDeleteEmoji(emoji).then(function (success) {
+          if (success) {
+            onCloseDelete();
+            return;
+          }
+          _this.setState({
+            loading: false,
+            error: true
+          });
+        });
+      }
+    });
+    (0, _defineProperty2.default)(_this, "onCancel", function () {
+      _this.props.onCloseDelete();
+    });
+    _this.state = {
+      loading: false,
+      error: false
+    };
+    return _this;
+  }
+  (0, _inherits2.default)(EmojiDeletePreview, _Component);
+  return (0, _createClass2.default)(EmojiDeletePreview, [{
+    key: "UNSAFE_componentWillUpdate",
+    value: function UNSAFE_componentWillUpdate(nextProps) {
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        if (nextProps.emoji.id !== this.props.emoji.id) {
+          this.setState({
+            error: false
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        if (prevProps.emoji.id !== this.props.emoji.id) {
+          this.setState({
+            error: false
+          });
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        emoji = _this$props2.emoji,
+        intl = _this$props2.intl;
+      var _this$state = this.state,
+        loading = _this$state.loading,
+        error = _this$state.error;
+      var formatMessage = intl.formatMessage;
+      return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+        noFocusGuards: true
+      }, /*#__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"
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+        values: {
+          emojiShortName: emoji.shortName
+        }
+      }))), /*#__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
+      }), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw"])
+      }, error ? !loading ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+        message: formatMessage(_i18n.messages.deleteEmojiFailed),
+        errorStyle: "delete",
+        tooltip: true
+      }) : null : null, /*#__PURE__*/React.createElement(_visuallyHidden.default, {
+        id: deleteEmojiLabelId
+      }, 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)
+      }), /*#__PURE__*/React.createElement(_new.default, {
+        appearance: "subtle",
+        onClick: this.onCancel
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))))));
+    }
+  }]);
+}(_react.Component);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(EmojiDeletePreview);

package/dist/cjs/components/compiled/common/EmojiErrorMessage.compiled.css

@@ -0,0 +1,9 @@
+._1bah1y6m{justify-content:flex-start}
+._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._syaz1ick{color:var(--ds-text-danger,#de350b)}
+._syaz1l5o{color:var(--ds-text-danger,#ff5630)}
+._u5f319bv{padding-right:10px}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

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

@@ -0,0 +1,58 @@
+/* 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;
+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");
+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 errorStyle = props.errorStyle,
+    message = props.message,
+    tooltip = props.tooltip;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  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
+  }, /*#__PURE__*/React.createElement(_error.default, {
+    color: "currentColor",
+    label: formatMessage(_i18n.messages.error),
+    LEGACY_size: "medium",
+    spacing: "spacious",
+    testId: emojiErrorIconTestId
+  }))) : /*#__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"
+  }), message);
+  return visualContent;
+};
+var _default = exports.default = EmojiErrorMessage;

package/dist/cjs/components/compiled/common/EmojiFallback.compiled.css

@@ -0,0 +1,7 @@
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}

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

@@ -0,0 +1,36 @@
+/* EmojiFallback.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _Emoji = require("./Emoji");
+var _styles = require("../../common/styles");
+var emojiFallbackStyles = null;
+var EmojiFallback = exports.EmojiFallback = function EmojiFallback(props) {
+  var emoji = props.emoji,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className;
+  var fallback = emoji.fallback,
+    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
+    _react.default.createElement(_Emoji.EmojiNodeWrapper, (0, _extends2.default)({
+      type: "image"
+    }, props, {
+      className: classes
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _1bah1h6o _4cvr1h6o"])
+    }, fallback || shortName))
+  );
+};
+var _default = exports.default = EmojiFallback;

package/dist/cjs/components/compiled/common/EmojiPlaceholder.compiled.css

@@ -0,0 +1,20 @@
+._16qqztlz:before{animation:var(--_s082jg)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._18m915vq{overflow-y:hidden}
+._18u0idpf{margin-left:0}
+._19pk1n1a{margin-top:-1px}
+._1cs8stnw:before{position:absolute}
+._1e0c1o8l{display:inline-block}
+._1kt9b3bt:before{content:""}
+._1mp41osq:before{width:100%}
+._1reo15vq{overflow-x:hidden}
+._1ruskq2v:before{background-color:var(--_12ncegi)}
+._2hwxidpf{margin-right:0}
+._bfhkttw1{background-color:var(--ds-border,#f7f7f7)}
+._cfu11ule:before{display:block}
+._kfgt1osq:before{height:100%}
+._kqswh2mm{position:relative}
+._o5721q9c{white-space:nowrap}
+._otyr1n1a{margin-bottom:-1px}
+._s7n4nkob{vertical-align:middle}
+._y3gn1h6o{text-align:center}

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

@@ -0,0 +1,68 @@
+/* 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;
+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("../../common/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; }
+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);
+};
+var EmojiPlaceholder = function EmojiPlaceholder(props) {
+  var shortName = props.shortName,
+    _props$size = props.size,
+    size = _props$size === void 0 ? _constants.defaultEmojiHeight : _props$size,
+    showTooltip = props.showTooltip,
+    representation = props.representation,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading;
+  var scaledWidth;
+  var scaledHeight;
+  if (representation && size) {
+    var _width = representation.width;
+    var _height = representation.height;
+    if (_width && _height) {
+      scaledWidth = size / _height * _width;
+      scaledHeight = size;
+    }
+  }
+  var width = scaledWidth || size;
+  var height = scaledHeight || size;
+  var style = {
+    fill: 'f7f7f7',
+    minWidth: "".concat(width, "px"),
+    width: "".concat(width, "px"),
+    height: "".concat(height, "px")
+  };
+  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: (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;

package/dist/cjs/components/compiled/common/EmojiPreviewComponent.compiled.css

@@ -0,0 +1,52 @@
+._10hw2smr:first-of-type{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._118didpf span[role=img]>img{padding-bottom:0}
+._12s6idpf .emoji-common-emoji-sprite, ._1e4didpf span[role=img]{padding-top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u019bv{margin-left:10px}
+._19bv19bv{padding-left:10px}
+._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
+._1bsb3sup{width:285px}
+._1bsbzwfg{width:2pc}
+._1bto1l2s{text-overflow:ellipsis}
+._1dvqidpf .emoji-common-emoji-sprite, ._vwlxidpf span[role=img]{padding-right:0}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1e7azwfg span[role=img]>img{max-width:2pc}
+._1gdiidpf .emoji-common-emoji-sprite, ._1f45idpf span[role=img]{padding-bottom:0}
+._1h6o1ssb span[role=img]>img{top:50%}
+._1l4xidpf span[role=img]>img{padding-top:0}
+._1l79idpf span[role=img]>img{padding-right:0}
+._1n261q9c{flex-wrap:nowrap}
+._1o9zkb7n{flex-shrink:1}
+._1os4zwfg span[role=img]>img{max-height:2pc}
+._1pa4idpf span[role=img]>img{padding-left:0}
+._1pc7zwfg .emoji-common-emoji-sprite, ._u5wqzwfg span[role=img]{height:2pc}
+._1pglh2mm span[role=img]>img{position:relative}
+._1reo15vq{overflow-x:hidden}
+._1vjf1ssb span[role=img]>img{left:50%}
+._1wpz1h6o{align-self:center}
+._299mangw:first-letter{text-transform:uppercase}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._5ilezwfg .emoji-common-emoji-sprite, ._boltzwfg span[role=img]{width:2pc}
+._7mh21ule span[role=img]>img{display:block}
+._8fp6dbra span[role=img]>img{transform:translateX(-50%) translateY(-50%)}
+._ca0q19bv{padding-top:10px}
+._i0dl1wug{flex-basis:auto}
+._n3td19bv{padding-bottom:10px}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721q9c{white-space:nowrap}
+._otyr1i6y{margin-bottom:var(--ds-space-negative-025,-2px)}
+._p12f3sup{max-width:285px}
+._pdfdidpf .emoji-common-emoji-sprite, ._mwo3idpf span[role=img]{padding-left:0}
+._pnmbovqm:first-of-type{color:var(--_5xk3r4)}
+._syazeqp7{color:var(--_158nz74)}
+._syazovqm{color:var(--_5xk3r4)}
+._u5f319bv{padding-right:10px}
+._vwz4kb7n{line-height:1}
+._w7981kw7 .emoji-common-emoji-sprite, ._1vqe1kw7 span[role=img]{max-height:inherit}

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

@@ -0,0 +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;
+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("../../common/CachingEmoji"));
+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 /*#__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)(["_16jlkb7n _1o9zkb7n _i0dl1wug _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/compiled/common/EmojiRadioButton.compiled.css

@@ -0,0 +1,39 @@
+
+._19itidpf{border:0}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._3y8msqtm +span{border-radius:var(--ds-border-radius-100,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
+._dqozglyw::-moz-focus-inner{border-style:none}
+._154i14id{top:-10px}
+._157z1r31:focus+span{outline-color:currentColor}
+._19bvidpf{padding-left:0}
+._1at812x7>span{padding-top:var(--ds-space-075,6px)}
+._1cjo12x7>span{padding-bottom:var(--ds-space-075,6px)}
+._1cx6idpf::-moz-focus-inner{padding-right:0}
+._1dzmglyw:focus+span{outline-style:none}
+._1e0c1o8l{display:inline-block}
+._1i1213zc:focus+span{transition-duration:0s,.2s}
+._1i911tcg>span>img{height:24px}
+._1ltv14id{left:-10px}
+._1s3c1tcg>span>.emoji-common-emoji-sprite{width:24px}
+._1sqm1o36:focus+span{outline-width:medium}
+._1ye71tcg>span>img{width:24px}
+._1yg612x7>span{padding-left:var(--ds-space-075,6px)}
+._2ewlidpf::-moz-focus-inner{padding-left:0}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._fh6w1r2v:focus+span{box-shadow:var(--_1rebzxw)}
+._hjaq12x7>span{padding-right:var(--ds-space-075,6px)}
+._hlt21tcg>span>.emoji-common-emoji-sprite{height:24px}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lev4idpf::-moz-focus-inner{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._tyukidpf::-moz-focus-inner{padding-bottom:0}
+._tzy4idpf{opacity:0}
+._u5f3idpf{padding-right:0}
+._1hvw1o36:focus{outline-width:medium}
+._491113zc:focus{transition-duration:0s,.2s}
+._49pcglyw:focus{outline-style:none}
+._7ehi1r2v:focus{box-shadow:var(--_1rebzxw)}
+._nt751r31:focus{outline-color:currentColor}

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

@@ -0,0 +1,72 @@
+/* EmojiRadioButton.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.default = exports.EmojiRadioButton = void 0;
+require("./EmojiRadioButton.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+var _mouse = require("../../../util/mouse");
+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; }
+var emojiButton = null;
+var emojiRadio = null;
+var handleMouseDown = function handleMouseDown(props, event) {
+  var onSelected = props.onSelected;
+  event.preventDefault();
+  if (onSelected && (0, _mouse.leftClick)(event)) {
+    onSelected();
+  }
+};
+var handleKeyPress = function handleKeyPress(props, event) {
+  if (_constants.TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
+    var onSelected = props.onSelected;
+    event.preventDefault();
+    event.stopPropagation();
+    if (onSelected) {
+      onSelected();
+    }
+  }
+};
+var EmojiRadioButton = exports.EmojiRadioButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var emoji = props.emoji,
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    defaultChecked = props.defaultChecked;
+  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/compiled/common/EmojiUploadPicker.compiled.css

@@ -0,0 +1,26 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._fqoxdcr7._fqoxdcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._scffidpf input{border:0}
+._12r21pd9._12r21pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._16jlkb7n{flex-grow:1}
+._19bv19bv{padding-left:10px}
+._1bah1b1v{justify-content:space-around}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._1rwq1j28 input{background-color:transparent}
+._1w901vvm._1w901vvm{color:var(--_bbz764)}
+._2hwx14y2{margin-right:5px}
+._2lx21bp4{flex-direction:column}
+._34ir1o36 input{outline-width:medium}
+._4cvresu3{align-items:flex-end}
+._4t3icae7{height:78px}
+._9bj2glyw input::-ms-clear{display:none}
+._ca0q19bv{padding-top:10px}
+._coc6glyw input:invalid{box-shadow:none}
+._gxxuglyw input{outline-style:none}
+._i0dl1wug{flex-basis:auto}
+._n3td19bv{padding-bottom:10px}
+._n3td1v6z{padding-bottom:7px}
+._u5f319bv{padding-right:10px}
+._xmji1r31 input{outline-color:currentColor}