@atlaskit/emoji 63.1.8 → 64.0.0

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

@@ -25,7 +25,7 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("../../util/constants");
 
@@ -68,7 +68,9 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
           uploadStatus = _this$props.uploadStatus,
           errorMessage = _this$props.errorMessage,
           onAddEmoji = _this$props.onAddEmoji,
-          onUploadCancelled = _this$props.onUploadCancelled;
+          onUploadCancelled = _this$props.onUploadCancelled,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
       var emojiComponent;
 
       if (previewImage) {
@@ -95,7 +97,7 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         className: styles.uploadPreview
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.uploadPreviewText
-      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
+      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
         values: {
           emoji: emojiComponent
         }
@@ -107,25 +109,25 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         className: styles.emojiPreviewErrorMessage,
         message: errorMessage,
         tooltip: true
-      }) : null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addEmojiLabel, function (label) {
-        return /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
-          className: styles.uploadEmojiButton,
-          retryClassName: styles.uploadRetryButton,
-          label: label,
-          onSubmit: onAddEmoji,
-          appearance: "primary",
-          loading: uploading,
-          error: !!errorMessage
-        });
+      }) : null, /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
+        className: styles.uploadEmojiButton,
+        retryClassName: styles.uploadRetryButton,
+        label: formatMessage(_i18n.messages.addEmojiLabel),
+        onSubmit: onAddEmoji,
+        appearance: "primary",
+        loading: uploading,
+        error: !!errorMessage
       }), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         onClick: onUploadCancelled,
         appearance: "subtle",
         isDisabled: uploading,
         className: styles.cancelButton
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.cancelLabel))));
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))));
     }
   }]);
   return EmojiUploadPreview;
 }(_react.PureComponent);
 
-exports.default = EmojiUploadPreview;
+var _default = (0, _reactIntlNext.injectIntl)(EmojiUploadPreview);
+
+exports.default = _default;

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

@@ -25,7 +25,7 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
@@ -63,7 +63,7 @@ var RetryableButton = /*#__PURE__*/function (_Component) {
           loading = _this$props.loading,
           retryClassName = _this$props.retryClassName,
           onSubmit = _this$props.onSubmit;
-      return loading ? this.renderLoading() : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
+      return loading ? this.renderLoading() : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
         return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
           className: retryClassName,
           appearance: "warning",

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buttonSpinner = exports.cancelButton = exports.uploadEmojiButton = exports.uploadRetryButton = exports.addCustomEmojiButton = exports.emojiPreviewErrorMessage = exports.emojiChooseFileErrorMessage = exports.emojiDeleteErrorMessage = exports.deleteFooter = exports.deleteText = exports.deletePreview = exports.previewButtonGroup = exports.submitDelete = exports.AddCustomEmoji = exports.uploadAddRow = exports.bigEmojiPreview = exports.uploadPreviewText = exports.uploadPreview = exports.uploadPreviewFooter = exports.uploadChooseFileBrowse = exports.uploadChooseFileEmojiName = exports.uploadChooseFileRow = exports.emojiUploadBottom = exports.uploadChooseFileMessage = exports.emojiUpload = exports.emojiScrollable = exports.emojiPreview = exports.emojiPreviewSection = exports.withToneSelector = exports.toneSelectorContainer = exports.previewSingleLine = exports.shortName = exports.name = exports.previewText = exports.previewImg = exports.preview = exports.buttons = exports.hiddenToneButton = exports.emojiButton = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.emojiContainer = exports.emoji = exports.deleteButton = exports.emojiImage = exports.emojiNode = exports.emojiSprite = exports.selectOnHover = exports.selected = void 0;
+exports.withToneSelector = exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.shortName = exports.selected = exports.selectOnHover = exports.previewText = exports.previewSingleLine = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.name = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiSprite = exports.emojiScrollable = exports.emojiPreviewSection = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiNode = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emoji = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.AddCustomEmoji = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,6 +15,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../../util/constants");
 
 var _sharedStyles = require("../../util/shared-styles");
@@ -202,7 +204,7 @@ var emojiPreview = (0, _typestyle.style)({
       flexShrink: 1,
       $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(name), {
         display: 'block',
-        color: colors.N900,
+        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -211,7 +213,7 @@ var emojiPreview = (0, _typestyle.style)({
         })
       }), (0, _defineProperty2.default)(_$nest6, ".".concat(shortName), {
         display: 'block',
-        color: colors.N200,
+        color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N200),
         fontSize: '12px',
         lineHeight: 1,
         marginBottom: '-2px',
@@ -225,7 +227,7 @@ var emojiPreview = (0, _typestyle.style)({
       $nest: (_$nest7 = {}, (0, _defineProperty2.default)(_$nest7, ".".concat(name), {
         display: 'none'
       }), (0, _defineProperty2.default)(_$nest7, ".".concat(shortName), {
-        color: colors.N900,
+        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
         fontSize: '14px'
       }), _$nest7)
     }), _$nest8)
@@ -248,7 +250,7 @@ var emojiPreview = (0, _typestyle.style)({
 
 exports.emojiPreview = emojiPreview;
 var emojiScrollable = (0, _typestyle.style)({
-  border: '1px solid #fff',
+  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', '#fff')),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   display: 'block',
   margin: '0',
@@ -267,7 +269,7 @@ var emojiUpload = (0, _typestyle.style)({
 });
 exports.emojiUpload = emojiUpload;
 var uploadChooseFileMessage = (0, _typestyle.style)({
-  color: colors.N300,
+  color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -288,11 +290,7 @@ var uploadChooseFileEmojiName = (0, _typestyle.style)({
     input: {
       background: 'transparent',
       border: 0,
-      fontSize: '12px',
       outline: 'none',
-      width: '100%',
-      height: '22px',
-      // fixed height is required to work in IE11 and other browsers in Windows
       $nest: (_$nest10 = {}, (0, _defineProperty2.default)(_$nest10, '&:invalid', {
         boxShadow: 'none'
       }), (0, _defineProperty2.default)(_$nest10, '&::-ms-clear', {
@@ -317,7 +315,7 @@ var uploadPreview = (0, _typestyle.style)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: colors.N20,
+  background: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   padding: '10px'
 });
@@ -325,7 +323,7 @@ exports.uploadPreview = uploadPreview;
 var uploadPreviewText = (0, _typestyle.style)({
   $nest: {
     h5: {
-      color: colors.N300,
+      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -376,7 +374,7 @@ var deleteText = (0, _typestyle.style)({
   height: '64px',
   $nest: {
     ':first-child': {
-      color: colors.N300,
+      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
       lineHeight: '16px'
     }
   }
@@ -412,7 +410,7 @@ var deleteFooter = (0, _typestyle.style)({
 exports.deleteFooter = deleteFooter;
 var emojiDeleteErrorMessage = (0, _typestyle.style)({
   display: 'flex',
-  color: colors.R400,
+  color: (0, _tokens.token)('color.text.danger', colors.R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
@@ -420,14 +418,14 @@ var emojiDeleteErrorMessage = (0, _typestyle.style)({
 exports.emojiDeleteErrorMessage = emojiDeleteErrorMessage;
 var emojiChooseFileErrorMessage = (0, _typestyle.style)({
   display: 'flex',
-  color: colors.R300,
+  color: (0, _tokens.token)('color.text.danger', colors.R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 exports.emojiChooseFileErrorMessage = emojiChooseFileErrorMessage;
 var emojiPreviewErrorMessage = (0, _typestyle.style)({
   display: 'inline-flex',
-  color: colors.R400,
+  color: (0, _tokens.token)('color.text.danger', colors.R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

package/dist/cjs/components/i18n.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   deleteEmojiTitle: {
     id: 'fabric.emoji.delete.title',
     defaultMessage: 'Remove emoji',

package/dist/cjs/components/picker/CategorySelector.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.sortCategories = void 0;
+exports.sortCategories = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -27,7 +27,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("../../util/constants");
 
@@ -114,11 +114,14 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this2 = this;
 
-      var disableCategories = this.props.disableCategories;
+      var _this$props2 = this.props,
+          disableCategories = _this$props2.disableCategories,
+          intl = _this$props2.intl;
       var categories = this.state.categories;
       var categoriesSection;
 
       if (categories) {
+        var formatMessage = intl.formatMessage;
         categoriesSection = /*#__PURE__*/_react.default.createElement("ul", null, categories.map(function (categoryId) {
           var category = _categories.CategoryDescriptionMap[categoryId];
           var categoryClasses = [styles.category];
@@ -132,19 +135,19 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
           }
 
           var Icon = category.icon;
+          var categoryName = formatMessage(_i18n.messages[category.name]);
           return /*#__PURE__*/_react.default.createElement("li", {
             key: category.id
-          }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages[category.name], function (categoryName) {
-            return /*#__PURE__*/_react.default.createElement("button", {
-              "data-category-id": category.id,
-              className: (0, _classnames.default)(categoryClasses),
-              onClick: _this2.onClick,
-              title: categoryName,
-              type: "button"
-            }, /*#__PURE__*/_react.default.createElement(Icon, {
-              label: categoryName
-            }));
-          }));
+          }, /*#__PURE__*/_react.default.createElement("button", {
+            "aria-label": categoryName,
+            "data-category-id": category.id,
+            className: (0, _classnames.default)(categoryClasses),
+            onClick: _this2.onClick,
+            title: categoryName,
+            type: "button"
+          }, /*#__PURE__*/_react.default.createElement(Icon, {
+            label: categoryName
+          })));
         }));
       }
 
@@ -156,8 +159,11 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
   return CategorySelector;
 }(_react.PureComponent);
 
-exports.default = CategorySelector;
 (0, _defineProperty2.default)(CategorySelector, "defaultProps", {
   onCategorySelected: function onCategorySelected() {},
   dynamicCategories: []
-});
+});
+
+var _default = (0, _reactIntlNext.injectIntl)(CategorySelector);
+
+exports.default = _default;

package/dist/cjs/components/picker/EmojiPickerCategoryHeading.js

@@ -23,7 +23,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _typeHelpers = require("../../util/type-helpers");
 
@@ -62,7 +62,7 @@ var EmojiPickerCategoryHeading = /*#__PURE__*/function (_PureComponent) {
         className: (0, _classnames.default)(className)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.emojiCategoryTitle
-      }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages[title]) : title));
+      }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
     }
   }]);
   return EmojiPickerCategoryHeading;

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -31,7 +31,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _EmojiRepository = require("../../api/EmojiRepository");
 
@@ -567,7 +567,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       var recordUsageOnSelection = (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
-      var formattedErrorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, uploadErrorMessage) : null;
+      var formattedErrorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
       var classes = [styles.emojiPicker];
 
       var picker = /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/components/picker/EmojiPickerListSearch.js

@@ -23,13 +23,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _fieldBase = _interopRequireDefault(require("@atlaskit/field-base"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
@@ -124,45 +124,40 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           style = _this$props.style,
-          query = _this$props.query;
+          query = _this$props.query,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.pickerSearch,
         style: style
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.searchPlaceholder, function (searchPlaceholder) {
-        return /*#__PURE__*/_react.default.createElement(_fieldBase.default, {
-          appearance: "standard",
-          isCompact: true,
-          isFitContainerWidthEnabled: true
-        }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+        "aria-label": formatMessage(_i18n.messages.searchLabel),
+        className: styles.input,
+        autoComplete: "off",
+        name: "search",
+        placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
+        onChange: this.onChange,
+        value: query || '',
+        ref: this.handleInputRef,
+        isCompact: true,
+        onBlur: this.onBlur,
+        elemBeforeInput: /*#__PURE__*/_react.default.createElement("span", {
           className: styles.searchIcon
         }, /*#__PURE__*/_react.default.createElement(_search.default, {
           label: ""
-        })), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.searchLabel, function (searchLabel) {
-          return /*#__PURE__*/_react.default.createElement("input", {
-            "aria-label": searchLabel,
-            className: styles.input,
-            autoComplete: "off",
-            disabled: false,
-            name: "search",
-            placeholder: "".concat(searchPlaceholder, "..."),
-            required: false,
-            onChange: _this2.onChange,
-            value: query || '',
-            ref: _this2.handleInputRef,
-            onBlur: _this2.onBlur
-          });
-        }));
+        }))
       }));
     }
   }]);
   return EmojiPickerListSearch;
 }(_react.PureComponent);
 
-exports.default = EmojiPickerListSearch;
 (0, _defineProperty2.default)(EmojiPickerListSearch, "defaultProps", {
   style: {}
-});
+});
+
+var _default = (0, _reactIntlNext.injectIntl)(EmojiPickerListSearch);
+
+exports.default = _default;

package/dist/cjs/components/picker/EmojiPickerVirtualItems.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.virtualItemRenderer = exports.CategoryHeadingItem = exports.LoadingItem = exports.EmojisRowItem = exports.AbstractItem = void 0;
+exports.virtualItemRenderer = exports.LoadingItem = exports.EmojisRowItem = exports.CategoryHeadingItem = exports.AbstractItem = void 0;
 
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 

package/dist/cjs/components/picker/styles.js

@@ -7,12 +7,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.addEmoji = exports.emojiItem = exports.emojiCategoryTitle = exports.emojiPickerRow = exports.emojiPickerSpinner = exports.pickerSearch = exports.input = exports.searchIcon = exports.virtualList = exports.emojiPickerList = exports.category = exports.categorySelector = exports.addButton = exports.emojiPicker = exports.disable = exports.active = void 0;
+exports.virtualList = exports.searchIcon = exports.pickerSearch = exports.input = exports.emojiPickerSpinner = exports.emojiPickerRow = exports.emojiPickerList = exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.emojiPicker = exports.emojiItem = exports.emojiCategoryTitle = exports.disable = exports.categorySelector = exports.category = exports.addEmoji = exports.addButton = exports.active = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _typestyle = require("typestyle");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
@@ -38,7 +40,7 @@ var emojiPicker = (0, _typestyle.style)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
-  background: 'white',
+  background: (0, _tokens.token)('color.background.overlay', 'white'),
   border: "".concat(_sharedStyles.emojiPickerBorderColor, " 1px solid"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   boxShadow: _sharedStyles.emojiPickerBoxShadow,
@@ -54,7 +56,7 @@ var addButton = 'emoji-picker-add-button';
 exports.addButton = addButton;
 var categorySelector = (0, _typestyle.style)({
   flex: '0 0 auto',
-  backgroundColor: colors.N30,
+  backgroundColor: (0, _tokens.token)('color.background.sunken', colors.N30),
   $nest: (0, _defineProperty2.default)({
     ul: {
       listStyle: 'none',
@@ -75,7 +77,7 @@ var categorySelector = (0, _typestyle.style)({
       }
     }
   }, ".".concat(addButton), {
-    color: colors.N200,
+    color: (0, _tokens.token)('color.text.lowEmphasis', colors.N200),
     margin: '0 0 0 5px',
     verticalAlign: 'middle'
   })
@@ -84,7 +86,7 @@ exports.categorySelector = categorySelector;
 var category = (0, _typestyle.style)({
   backgroundColor: 'transparent',
   border: 0,
-  color: colors.N100A,
+  color: (0, _tokens.token)('color.text.lowEmphasis', colors.N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -93,20 +95,18 @@ var category = (0, _typestyle.style)({
     border: '0 none',
     padding: 0
   }), (0, _defineProperty2.default)(_$nest4, "&.".concat(active), {
-    color: colors.B300,
+    color: (0, _tokens.token)('color.text.selected', colors.B300),
     $nest: (0, _defineProperty2.default)({}, '&:hover', {
-      color: colors.B300
+      color: (0, _tokens.token)('color.text.selected', colors.B300)
     })
   }), (0, _defineProperty2.default)(_$nest4, '&:hover', {
-    color: colors.B100
+    color: (0, _tokens.token)('color.text.selected', colors.B200)
   }), (0, _defineProperty2.default)(_$nest4, "&.".concat(disable), {
-    color: colors.N50,
+    color: (0, _tokens.token)('color.text.lowEmphasis', colors.N50),
     cursor: 'default',
     $nest: (0, _defineProperty2.default)({}, '&:hover', {
-      color: colors.N50
+      color: (0, _tokens.token)('color.text.lowEmphasis', colors.N50)
     })
-  }), (0, _defineProperty2.default)(_$nest4, '&:focus', {
-    outline: '0'
   }), _$nest4)
 }); /// EmojiPickerList
 
@@ -140,14 +140,12 @@ var pickerSearch = (0, _typestyle.style)({
   $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(searchIcon), {
     opacity: 0.5
   }), (0, _defineProperty2.default)(_$nest6, ".".concat(input), {
-    background: 'transparent',
-    border: 0,
     boxSizing: 'border-box',
     color: 'inherit',
     cursor: 'inherit',
     fontSize: '14px',
     outline: 'none',
-    padding: '1px 0 2px 10px',
+    padding: '1px 0 2px 6px',
     width: '100%',
     $nest: (_$nest5 = {}, (0, _defineProperty2.default)(_$nest5, '&:invalid', {
       boxShadow: 'none'
@@ -178,7 +176,7 @@ var emojiPickerRow = (0, _typestyle.style)({
 exports.emojiPickerRow = emojiPickerRow;
 var emojiCategoryTitle = (0, _typestyle.style)({
   boxSizing: 'border-box',
-  color: colors.N900,
+  color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -250,7 +248,7 @@ var emojiPickerFooter = (0, _typestyle.style)({
 });
 exports.emojiPickerFooter = emojiPickerFooter;
 var emojiPickerFooterWithTopShadow = (0, _typestyle.style)({
-  borderTop: "2px solid ".concat(colors.N30A),
-  boxShadow: _sharedStyles.emojiFooterBoxShadow
+  borderTop: (0, _tokens.token)('color.border.neutral', "2px solid ".concat(colors.N30A)),
+  boxShadow: "0px -1px 1px 0px ".concat((0, _tokens.token)('color.border.neutral', 'rgba(0, 0, 0, 0.1)'))
 });
 exports.emojiPickerFooterWithTopShadow = emojiPickerFooterWithTopShadow;

package/dist/cjs/components/typeahead/styles.js

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiTypeAheadSpinner = exports.emojiTypeAheadSpinnerContainer = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.typeAheadList = exports.typeAheadListContainer = exports.emojiTypeAhead = exports.selected = void 0;
+exports.typeAheadListContainer = exports.typeAheadList = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.selected = exports.emojiTypeAheadSpinnerContainer = exports.emojiTypeAheadSpinner = exports.emojiTypeAhead = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _typestyle = require("typestyle");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _sharedStyles = require("../../util/shared-styles");
 
 var selected = 'emoji-typeahead-selected';
@@ -20,11 +22,11 @@ exports.emojiTypeAhead = emojiTypeAhead;
 var typeAheadListContainer = 'emoji-typeahead-list-container';
 exports.typeAheadListContainer = typeAheadListContainer;
 var typeAheadList = (0, _typestyle.style)({
-  background: 'white',
+  background: (0, _tokens.token)('color.background.overlay', 'white'),
   border: "1px solid ".concat(_sharedStyles.noDialogContainerBorderColor),
   borderRadius: _sharedStyles.noDialogContainerBorderRadius,
   boxShadow: _sharedStyles.noDialogContainerBoxShadow,
-  color: '#333',
+  color: (0, _tokens.token)('color.text.mediumEmphasis', '#333'),
   width: _sharedStyles.emojiTypeAheadWidth
 });
 exports.typeAheadList = typeAheadList;

package/dist/cjs/components/uploader/EmojiUploadComponent.js

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -118,7 +118,7 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var uploadErrorMessage = this.state.uploadErrorMessage;
-      var errorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, uploadErrorMessage) : null;
+      var errorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)([styles.emojiUploadWidget]),
         ref: this.props.onUploaderRef

package/dist/cjs/components/uploader/styles.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiUploadFooter = exports.emojiUploadWidget = void 0;
+exports.emojiUploadWidget = exports.emojiUploadFooter = void 0;
 
 var _typestyle = require("typestyle");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("../../util/constants");
 
 // Uploader
@@ -15,7 +17,7 @@ var emojiUploadWidget = (0, _typestyle.style)({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'stretch',
-  background: 'white',
+  background: (0, _tokens.token)('color.background.overlay', 'white'),
   height: "120px",
   width: "".concat(_constants.emojiPickerWidth, "px"),
   marginBottom: '8px',

package/dist/cjs/element.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EmojiPlaceholder", {
+Object.defineProperty(exports, "Emoji", {
   enumerable: true,
   get: function get() {
-    return _EmojiPlaceholder.default;
+    return _Emoji.default;
   }
 });
-Object.defineProperty(exports, "Emoji", {
+Object.defineProperty(exports, "EmojiPlaceholder", {
   enumerable: true,
   get: function get() {
-    return _Emoji.default;
+    return _EmojiPlaceholder.default;
   }
 });
 Object.defineProperty(exports, "ResourcedEmoji", {