@atlaskit/emoji 63.1.7 → 63.2.0

package/dist/cjs/index.js

@@ -17,16 +17,10 @@ Object.defineProperty(exports, "Emoji", {
     return _Emoji.default;
   }
 });
-Object.defineProperty(exports, "EmojiPlaceholder", {
-  enumerable: true,
-  get: function get() {
-    return _EmojiPlaceholder.default;
-  }
-});
-Object.defineProperty(exports, "ResourcedEmoji", {
+Object.defineProperty(exports, "EmojiLoader", {
   enumerable: true,
   get: function get() {
-    return _ResourcedEmoji.default;
+    return _EmojiLoader.default;
   }
 });
 Object.defineProperty(exports, "EmojiPicker", {
@@ -35,70 +29,71 @@ Object.defineProperty(exports, "EmojiPicker", {
     return _EmojiPicker.default;
   }
 });
-Object.defineProperty(exports, "EmojiUploader", {
+Object.defineProperty(exports, "EmojiPlaceholder", {
   enumerable: true,
   get: function get() {
-    return _EmojiUploader.default;
+    return _EmojiPlaceholder.default;
   }
 });
-Object.defineProperty(exports, "EmojiTypeAhead", {
+Object.defineProperty(exports, "EmojiRepository", {
   enumerable: true,
   get: function get() {
-    return _EmojiTypeAhead.default;
+    return _EmojiRepository.default;
   }
 });
-Object.defineProperty(exports, "EmojiTypeAheadItem", {
+Object.defineProperty(exports, "EmojiResource", {
   enumerable: true,
   get: function get() {
-    return _EmojiTypeAheadItem.default;
+    return _EmojiResource.default;
   }
 });
-Object.defineProperty(exports, "selected", {
+Object.defineProperty(exports, "EmojiTypeAhead", {
   enumerable: true,
   get: function get() {
-    return _styles.selected;
+    return _EmojiTypeAhead.default;
   }
 });
-Object.defineProperty(exports, "selectOnHover", {
+Object.defineProperty(exports, "EmojiTypeAheadItem", {
   enumerable: true,
   get: function get() {
-    return _styles.selectOnHover;
+    return _EmojiTypeAheadItem.default;
   }
 });
-Object.defineProperty(exports, "emojiSprite", {
+Object.defineProperty(exports, "EmojiUploader", {
   enumerable: true,
   get: function get() {
-    return _styles.emojiSprite;
+    return _EmojiUploader.default;
   }
 });
-Object.defineProperty(exports, "emojiNode", {
+Object.defineProperty(exports, "ResourcedEmoji", {
   enumerable: true,
   get: function get() {
-    return _styles.emojiNode;
+    return _ResourcedEmoji.default;
   }
 });
-Object.defineProperty(exports, "emojiImage", {
+Object.defineProperty(exports, "SearchSort", {
   enumerable: true,
   get: function get() {
-    return _styles.emojiImage;
+    return _types.SearchSort;
   }
 });
-Object.defineProperty(exports, "EmojiResource", {
+Object.defineProperty(exports, "UsageFrequencyTracker", {
   enumerable: true,
   get: function get() {
-    return _EmojiResource.default;
+    return _UsageFrequencyTracker.UsageFrequencyTracker;
   }
 });
-Object.defineProperty(exports, "EmojiRepository", {
+Object.defineProperty(exports, "customCategory", {
   enumerable: true,
   get: function get() {
-    return _EmojiRepository.default;
+    return _constants.customCategory;
   }
 });
-Object.defineProperty(exports, "EmojiLoader", {
+exports.default = void 0;
+Object.defineProperty(exports, "defaultEmojiHeight", {
   enumerable: true,
   get: function get() {
-    return _EmojiLoader.default;
+    return _constants.defaultEmojiHeight;
   }
 });
 Object.defineProperty(exports, "denormaliseEmojiServiceResponse", {
@@ -107,67 +102,72 @@ Object.defineProperty(exports, "denormaliseEmojiServiceResponse", {
     return _EmojiUtils.denormaliseEmojiServiceResponse;
   }
 });
-Object.defineProperty(exports, "toEmojiId", {
+Object.defineProperty(exports, "emojiImage", {
   enumerable: true,
   get: function get() {
-    return _typeHelpers.toEmojiId;
+    return _styles.emojiImage;
   }
 });
-Object.defineProperty(exports, "toOptionalEmojiId", {
+Object.defineProperty(exports, "emojiNode", {
   enumerable: true,
   get: function get() {
-    return _typeHelpers.toOptionalEmojiId;
+    return _styles.emojiNode;
   }
 });
-Object.defineProperty(exports, "recordSelectionFailedSli", {
+Object.defineProperty(exports, "emojiPickerHeight", {
   enumerable: true,
   get: function get() {
-    return _analytics.recordSelectionFailedSli;
+    return _constants.emojiPickerHeight;
   }
 });
-Object.defineProperty(exports, "recordSelectionSucceededSli", {
+Object.defineProperty(exports, "emojiPickerWidth", {
   enumerable: true,
   get: function get() {
-    return _analytics.recordSelectionSucceededSli;
+    return _constants.emojiPickerWidth;
   }
 });
-Object.defineProperty(exports, "customCategory", {
+Object.defineProperty(exports, "emojiSprite", {
   enumerable: true,
   get: function get() {
-    return _constants.customCategory;
+    return _styles.emojiSprite;
   }
 });
-Object.defineProperty(exports, "defaultEmojiHeight", {
+Object.defineProperty(exports, "recordSelectionFailedSli", {
   enumerable: true,
   get: function get() {
-    return _constants.defaultEmojiHeight;
+    return _analytics.recordSelectionFailedSli;
   }
 });
-Object.defineProperty(exports, "emojiPickerWidth", {
+Object.defineProperty(exports, "recordSelectionSucceededSli", {
   enumerable: true,
   get: function get() {
-    return _constants.emojiPickerWidth;
+    return _analytics.recordSelectionSucceededSli;
   }
 });
-Object.defineProperty(exports, "emojiPickerHeight", {
+Object.defineProperty(exports, "selectOnHover", {
   enumerable: true,
   get: function get() {
-    return _constants.emojiPickerHeight;
+    return _styles.selectOnHover;
   }
 });
-Object.defineProperty(exports, "UsageFrequencyTracker", {
+Object.defineProperty(exports, "selected", {
   enumerable: true,
   get: function get() {
-    return _UsageFrequencyTracker.UsageFrequencyTracker;
+    return _styles.selected;
   }
 });
-Object.defineProperty(exports, "SearchSort", {
+Object.defineProperty(exports, "toEmojiId", {
   enumerable: true,
   get: function get() {
-    return _types.SearchSort;
+    return _typeHelpers.toEmojiId;
+  }
+});
+Object.defineProperty(exports, "toOptionalEmojiId", {
+  enumerable: true,
+  get: function get() {
+    return _typeHelpers.toOptionalEmojiId;
   }
 });
-exports.default = void 0;
 
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 

package/dist/cjs/resource.js

@@ -11,10 +11,10 @@ Object.defineProperty(exports, "AbstractResource", {
     return _utilServiceSupport.AbstractResource;
   }
 });
-Object.defineProperty(exports, "EmojiResource", {
+Object.defineProperty(exports, "EmojiLoader", {
   enumerable: true,
   get: function get() {
-    return _EmojiResource.default;
+    return _EmojiLoader.default;
   }
 });
 Object.defineProperty(exports, "EmojiRepository", {
@@ -23,10 +23,10 @@ Object.defineProperty(exports, "EmojiRepository", {
     return _EmojiRepository.default;
   }
 });
-Object.defineProperty(exports, "EmojiLoader", {
+Object.defineProperty(exports, "EmojiResource", {
   enumerable: true,
   get: function get() {
-    return _EmojiLoader.default;
+    return _EmojiResource.default;
   }
 });
 

package/dist/cjs/util/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.recordSelectionFailedSli = exports.recordSelectionSucceededSli = exports.typeaheadRenderedEvent = exports.typeaheadSelectedEvent = exports.typeaheadCancelledEvent = exports.selectedFileEvent = exports.deleteCancelEvent = exports.deleteConfirmEvent = exports.deleteBeginEvent = exports.uploadFailedEvent = exports.uploadSucceededEvent = exports.uploadCancelButton = exports.uploadConfirmButton = exports.uploadBeginButton = exports.toneSelectorClosedEvent = exports.toneSelectorOpenedEvent = exports.toneSelectedEvent = exports.pickerSearchedEvent = exports.categoryClickedEvent = exports.pickerClickedEvent = exports.closedPickerEvent = exports.openedPickerEvent = exports.insertionFailed = exports.insertionSucceeded = exports.createAndFireEventInElementsChannel = void 0;
+exports.uploadSucceededEvent = exports.uploadFailedEvent = exports.uploadConfirmButton = exports.uploadCancelButton = exports.uploadBeginButton = exports.typeaheadSelectedEvent = exports.typeaheadRenderedEvent = exports.typeaheadCancelledEvent = exports.toneSelectorOpenedEvent = exports.toneSelectorClosedEvent = exports.toneSelectedEvent = exports.selectedFileEvent = exports.recordSelectionSucceededSli = exports.recordSelectionFailedSli = exports.pickerSearchedEvent = exports.pickerClickedEvent = exports.openedPickerEvent = exports.insertionSucceeded = exports.insertionFailed = exports.deleteConfirmEvent = exports.deleteCancelEvent = exports.deleteBeginEvent = exports.createAndFireEventInElementsChannel = exports.closedPickerEvent = exports.categoryClickedEvent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/util/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.analyticsEmojiPrefix = exports.migrationUserId = exports.defaultListLimit = exports.defaultCategories = exports.selectedToneStorageKey = exports.localStoragePrefix = exports.emojiPickerHeight = exports.emojiPickerWidth = exports.defaultEmojiHeight = exports.MAX_ORDINAL = exports.deleteEmojiLabel = exports.dataURLPrefix = exports.userCustomTitle = exports.customTitle = exports.customType = exports.frequentCategory = exports.customCategory = void 0;
+exports.userCustomTitle = exports.selectedToneStorageKey = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerHeight = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.MAX_ORDINAL = void 0;
 var customCategory = 'CUSTOM';
 exports.customCategory = customCategory;
 var frequentCategory = 'FREQUENT';

package/dist/cjs/util/filters.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.getToneEmoji = void 0;
+exports.getToneEmoji = exports.default = void 0;
 var toneEmojiShortName = ':raised_hand:';
 
 var byShortName = function byShortName(emojis, shortName) {

package/dist/cjs/util/image.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.imageAcceptHeader = exports.checkWebpSupport = exports.hasFileExceededSize = exports.parseImage = exports.getNaturalImageSize = void 0;
+exports.parseImage = exports.imageAcceptHeader = exports.hasFileExceededSize = exports.getNaturalImageSize = exports.checkWebpSupport = void 0;
 var maxEmojiSizeInBytes = 1048576;
 
 var getNaturalImageSize = function getNaturalImageSize(dataURL) {

package/dist/cjs/util/logger.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = debug;
 exports.enableLogger = enableLogger;
 exports.enableStacktraces = enableStacktraces;
 exports.logStacktrace = logStacktrace;
-exports.default = debug;
 var debugEnabled = false;
 var stacktracesEnabled = false;
 

package/dist/cjs/util/mouse.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mouseLocation = mouseLocation;
 exports.actualMouseMove = actualMouseMove;
 exports.leftClick = leftClick;
+exports.mouseLocation = mouseLocation;
 
 function mouseLocation(event) {
   return {

package/dist/cjs/util/shared-styles.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiTypeAheadWidth = exports.emojiTypeAheadMaxHeight = exports.emojiPreviewSelectedColor = exports.akEmojiSelectedBackgroundColor = exports.noDialogContainerBoxShadow = exports.noDialogContainerBorderRadius = exports.noDialogContainerBorderColor = exports.emojiFooterBoxShadow = exports.emojiPickerBoxShadow = exports.emojiPickerBorderColor = exports.emojiPickerListHeight = exports.emojiPickerListWidth = void 0;
+exports.noDialogContainerBoxShadow = exports.noDialogContainerBorderRadius = exports.noDialogContainerBorderColor = exports.emojiTypeAheadWidth = exports.emojiTypeAheadMaxHeight = exports.emojiPreviewSelectedColor = exports.emojiPickerListWidth = exports.emojiPickerListHeight = exports.emojiPickerBoxShadow = exports.emojiPickerBorderColor = exports.akEmojiSelectedBackgroundColor = void 0;
+
+var _tokens = require("@atlaskit/tokens");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -15,23 +17,19 @@ var emojiPickerListWidth = _constants2.emojiPickerWidth;
 exports.emojiPickerListWidth = emojiPickerListWidth;
 var emojiPickerListHeight = 205;
 exports.emojiPickerListHeight = emojiPickerListHeight;
-var emojiPickerBorderColor = _colors.N40; // This has not been confirmed by the ADG yet
-
+var emojiPickerBorderColor = (0, _tokens.token)('color.border.neutral', _colors.N40);
 exports.emojiPickerBorderColor = emojiPickerBorderColor;
-var emojiPickerBoxShadow = '0 3px 6px rgba(0, 0, 0, 0.2)';
+var emojiPickerBoxShadow = (0, _tokens.token)('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
 exports.emojiPickerBoxShadow = emojiPickerBoxShadow;
-var emojiFooterBoxShadow = '0px -1px 1px 0px rgba(0, 0, 0, 0.1)';
-exports.emojiFooterBoxShadow = emojiFooterBoxShadow;
-var noDialogContainerBorderColor = _colors.N40; // This has not been confirmed by the ADG yet
-
+var noDialogContainerBorderColor = (0, _tokens.token)('color.border.neutral', _colors.N40);
 exports.noDialogContainerBorderColor = noDialogContainerBorderColor;
 var noDialogContainerBorderRadius = "".concat((0, _constants.borderRadius)(), "px");
 exports.noDialogContainerBorderRadius = noDialogContainerBorderRadius;
-var noDialogContainerBoxShadow = '0 3px 6px rgba(0, 0, 0, 0.2)';
+var noDialogContainerBoxShadow = (0, _tokens.token)('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
 exports.noDialogContainerBoxShadow = noDialogContainerBoxShadow;
-var akEmojiSelectedBackgroundColor = _colors.N30;
+var akEmojiSelectedBackgroundColor = (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30);
 exports.akEmojiSelectedBackgroundColor = akEmojiSelectedBackgroundColor;
-var emojiPreviewSelectedColor = _colors.N30;
+var emojiPreviewSelectedColor = (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N30);
 exports.emojiPreviewSelectedColor = emojiPreviewSelectedColor;
 var emojiTypeAheadMaxHeight = 350;
 exports.emojiTypeAheadMaxHeight = emojiTypeAheadMaxHeight;

package/dist/cjs/util/type-helpers.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCategoryId = exports.buildEmojiDescriptionWithAltRepresentation = exports.convertMediaToImageEmoji = exports.convertMediaToImageRepresentation = exports.convertImageToMediaRepresentation = exports.containsEmojiId = exports.isEmojiIdEqual = exports.toOptionalEmojiId = exports.toEmojiId = exports.isMessagesKey = exports.isEmojiVariationDescription = exports.isEmojiDescriptionWithVariations = exports.isLoadedMediaEmoji = exports.hasDataURLImage = exports.isMediaEmoji = exports.isEmojiDescription = exports.isPromise = exports.isMediaRepresentation = exports.isImageRepresentation = exports.isSpriteRepresentation = exports.isSpriteServiceRepresentation = void 0;
+exports.toOptionalEmojiId = exports.toEmojiId = exports.isSpriteServiceRepresentation = exports.isSpriteRepresentation = exports.isPromise = exports.isMessagesKey = exports.isMediaRepresentation = exports.isMediaEmoji = exports.isLoadedMediaEmoji = exports.isImageRepresentation = exports.isEmojiVariationDescription = exports.isEmojiIdEqual = exports.isEmojiDescriptionWithVariations = exports.isEmojiDescription = exports.hasDataURLImage = exports.getCategoryId = exports.convertMediaToImageRepresentation = exports.convertMediaToImageEmoji = exports.convertImageToMediaRepresentation = exports.containsEmojiId = exports.buildEmojiDescriptionWithAltRepresentation = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/utils.js

@@ -3,28 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "toEmojiId", {
+Object.defineProperty(exports, "UsageFrequencyTracker", {
   enumerable: true,
   get: function get() {
-    return _typeHelpers.toEmojiId;
+    return _UsageFrequencyTracker.UsageFrequencyTracker;
   }
 });
-Object.defineProperty(exports, "toOptionalEmojiId", {
+Object.defineProperty(exports, "denormaliseEmojiServiceResponse", {
   enumerable: true,
   get: function get() {
-    return _typeHelpers.toOptionalEmojiId;
+    return _EmojiUtils.denormaliseEmojiServiceResponse;
   }
 });
-Object.defineProperty(exports, "denormaliseEmojiServiceResponse", {
+Object.defineProperty(exports, "toEmojiId", {
   enumerable: true,
   get: function get() {
-    return _EmojiUtils.denormaliseEmojiServiceResponse;
+    return _typeHelpers.toEmojiId;
   }
 });
-Object.defineProperty(exports, "UsageFrequencyTracker", {
+Object.defineProperty(exports, "toOptionalEmojiId", {
   enumerable: true,
   get: function get() {
-    return _UsageFrequencyTracker.UsageFrequencyTracker;
+    return _typeHelpers.toOptionalEmojiId;
   }
 });
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "63.1.7",
+	"version": "63.2.0",
 	"sideEffects": false
 }

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

@@ -1,6 +1,7 @@
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
 import * as styles from './styles';
@@ -10,7 +11,7 @@ const DeleteButton = props => /*#__PURE__*/React.createElement("span", {
 }, /*#__PURE__*/React.createElement(Button, {
   iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: deleteEmojiLabel,
-    primaryColor: N500,
+    primaryColor: token('color.text.mediumEmphasis', N500),
     size: "small"
   }),
   onClick: props.onClick,

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import AkFieldBase from '@atlaskit/field-base';
 import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
+import TextField from '@atlaskit/textfield';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
@@ -58,21 +58,16 @@ class ChooseEmojiFile extends PureComponent {
       className: styles.uploadChooseFileRow
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.uploadChooseFileEmojiName
-    }, /*#__PURE__*/React.createElement(AkFieldBase, {
-      appearance: "standard",
-      isCompact: true,
-      defaultIsFocused: true,
-      isFitContainerWidthEnabled: true
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPlaceholder, message => /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiNameAriaLabel, ariaLabel => /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPlaceholder, message => /*#__PURE__*/React.createElement(TextField, {
       placeholder: message,
-      "aria-label": ariaLabel,
+      "aria-label": message,
       maxLength: maxNameLength,
       onChange: onNameChange,
       onKeyDown: this.onKeyDown,
       value: name,
-      ref: "name",
+      isCompact: true,
       autoFocus: true
-    }))))), /*#__PURE__*/React.createElement("span", {
+    }))), /*#__PURE__*/React.createElement("span", {
       className: styles.uploadChooseFileBrowse
     }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileTitle, message => /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       hidden: true,

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

@@ -1,5 +1,6 @@
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { style } from 'typestyle';
@@ -176,7 +177,7 @@ export const emojiPreview = style({
           $nest: {
             [`.${name}`]: {
               display: 'block',
-              color: colors.N900,
+              color: token('color.text.highEmphasis', colors.N900),
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
@@ -188,7 +189,7 @@ export const emojiPreview = style({
             },
             [`.${shortName}`]: {
               display: 'block',
-              color: colors.N200,
+              color: token('color.text.mediumEmphasis', colors.N200),
               fontSize: '12px',
               lineHeight: 1,
               marginBottom: '-2px',
@@ -206,7 +207,7 @@ export const emojiPreview = style({
               display: 'none'
             },
             [`.${shortName}`]: {
-              color: colors.N900,
+              color: token('color.text.highEmphasis', colors.N900),
               fontSize: '14px'
             }
           }
@@ -234,7 +235,7 @@ export const emojiPreview = style({
 }); // Scrollable
 
 export const emojiScrollable = style({
-  border: '1px solid #fff',
+  border: `1px solid ${token('color.border.neutral', '#fff')}`,
   borderRadius: `${borderRadius()}px`,
   display: 'block',
   margin: '0',
@@ -251,7 +252,7 @@ export const emojiUpload = style({
   justifyContent: 'space-around'
 });
 export const uploadChooseFileMessage = style({
-  color: colors.N300,
+  color: token('color.text.mediumEmphasis', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -269,11 +270,7 @@ export const uploadChooseFileEmojiName = 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: {
         ['&:invalid']: {
           boxShadow: 'none'
@@ -298,14 +295,14 @@ export const uploadPreview = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: colors.N20,
+  background: token('color.background.subtleNeutral.resting', colors.N20),
   borderRadius: `${borderRadius()}px`,
   padding: '10px'
 });
 export const uploadPreviewText = style({
   $nest: {
     h5: {
-      color: colors.N300,
+      color: token('color.text.mediumEmphasis', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -349,7 +346,7 @@ export const deleteText = style({
   height: '64px',
   $nest: {
     ':first-child': {
-      color: colors.N300,
+      color: token('color.text.mediumEmphasis', colors.N300),
       lineHeight: '16px'
     }
   }
@@ -386,20 +383,20 @@ export const deleteFooter = style({
 });
 export const emojiDeleteErrorMessage = style({
   display: 'flex',
-  color: colors.R400,
+  color: token('color.text.danger', colors.R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
 export const emojiChooseFileErrorMessage = style({
   display: 'flex',
-  color: colors.R300,
+  color: token('color.text.danger', colors.R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 export const emojiPreviewErrorMessage = style({
   display: 'inline-flex',
-  color: colors.R400,
+  color: token('color.text.danger', colors.R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

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

@@ -87,6 +87,7 @@ export default class CategorySelector extends PureComponent {
         return /*#__PURE__*/React.createElement("li", {
           key: category.id
         }, /*#__PURE__*/React.createElement(FormattedMessage, messages[category.name], categoryName => /*#__PURE__*/React.createElement("button", {
+          "aria-label": categoryName,
           "data-category-id": category.id,
           className: classNames(categoryClasses),
           onClick: this.onClick,

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

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import AkFieldBase from '@atlaskit/field-base';
+import React, { PureComponent } from 'react';
+import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
-import React from 'react';
-import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { messages } from '../i18n';
 import * as styles from './styles';
@@ -82,27 +81,23 @@ export default class EmojiPickerListSearch extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: styles.pickerSearch,
       style: style
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchPlaceholder, searchPlaceholder => /*#__PURE__*/React.createElement(AkFieldBase, {
-      appearance: "standard",
-      isCompact: true,
-      isFitContainerWidthEnabled: true
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.searchIcon
-    }, /*#__PURE__*/React.createElement(SearchIcon, {
-      label: ""
-    })), /*#__PURE__*/React.createElement(FormattedMessage, messages.searchLabel, searchLabel => /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchPlaceholder, searchPlaceholder => /*#__PURE__*/React.createElement(FormattedMessage, messages.searchLabel, searchLabel => /*#__PURE__*/React.createElement(TextField, {
       "aria-label": searchLabel,
       className: styles.input,
       autoComplete: "off",
-      disabled: false,
       name: "search",
       placeholder: `${searchPlaceholder}...`,
-      required: false,
       onChange: this.onChange,
       value: query || '',
       ref: this.handleInputRef,
-      onBlur: this.onBlur
-    })))));
+      isCompact: true,
+      onBlur: this.onBlur,
+      elemBeforeInput: /*#__PURE__*/React.createElement("span", {
+        className: styles.searchIcon
+      }, /*#__PURE__*/React.createElement(SearchIcon, {
+        label: ""
+      }))
+    }))));
   }
 
 }