@atlaskit/emoji 69.9.6 → 69.10.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 69.10.1
+
+### Patch Changes
+
+- [`bdcd4b4374105`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bdcd4b4374105) -
+  Minor improvements to how styles are applied.
+- Updated dependencies
+
+## 69.10.0
+
+### Minor Changes
+
+- [`87b12e64ff750`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87b12e64ff750) -
+  Removed usages of LEGACY icon props
+
 ## 69.9.6
 
 ### Patch Changes

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

@@ -37,7 +37,6 @@ var DeleteButton = function DeleteButton(props) {
     }, /*#__PURE__*/React.createElement(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
       color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
-      LEGACY_size: "small",
       size: "small"
     })),
     onClick: props.onClick

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

@@ -53,10 +53,8 @@ var AddOwnEmoji = function AddOwnEmoji(props) {
       iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
         xcss: styles.icon
       }, /*#__PURE__*/React.createElement(_add.default, {
-        LEGACY_margin: "0 ".concat("var(--ds-space-025, 2px)", " 0 ", "var(--ds-space-050, 4px)"),
         color: "currentColor",
-        label: "",
-        LEGACY_size: "small"
+        label: ""
       })),
       appearance: "subtle"
       // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.

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

@@ -1,6 +1,5 @@
 ._11c82smr{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)}
-._19bv19bv{padding-left:10px}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19l3zwfg img{max-height:2pc}
 ._1bah1yb4{justify-content:space-between}
 ._1bahesu3{justify-content:flex-end}
@@ -12,10 +11,8 @@
 ._4t3i1ylp{height:40px}
 ._4t3i53f4{height:75pt}
 ._4t3ivbgk{height:4pc}
-._ca0q19bv{padding-top:10px}
-._jwwg7vkz:first-of-type{line-height:1pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._m73io7ol .emoji-submit-delete{width:84px}
-._n3td19bv{padding-bottom:10px}
-._pnmb1vvm:first-of-type{color:var(--_bbz764)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._rtyst9kd img{max-width:72px}
-._u5f319bv{padding-right:10px}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

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

@@ -18,10 +18,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _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 _compiled = require("@atlaskit/primitives/compiled");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _i18n = require("../i18n");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
@@ -96,19 +96,19 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         noFocusGuards: true
       }, /*#__PURE__*/React.createElement("div", {
         "data-testid": emojiDeletePreviewTestId,
-        className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3i53f4 _1e0c1txw _2lx21bp4 _1bahesu3"])
+        className: (0, _runtime.ax)(["_4t3i53f4 _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _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, ")"))
-        }
+        className: (0, _runtime.ax)(["_4t3ivbgk"])
       }, /*#__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, {
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(_compiled.Text, {
+        color: "color.text.subtle",
+        size: "small"
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), /*#__PURE__*/React.createElement("div", {
+      })))), /*#__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

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

@@ -41,7 +41,6 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   }, /*#__PURE__*/React.createElement(_statusError.default, {
     color: "currentColor",
     label: formatMessage(_i18n.messages.error),
-    LEGACY_size: "medium",
     spacing: "spacious",
     testId: emojiErrorIconTestId
   }))) : /*#__PURE__*/React.createElement("div", {
@@ -49,8 +48,7 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     className: (0, _runtime.ax)([errorMessageStyles[errorStyle]])
   }, /*#__PURE__*/React.createElement(_statusError.default, {
     color: "currentColor",
-    label: formatMessage(_i18n.messages.error),
-    LEGACY_size: "small"
+    label: formatMessage(_i18n.messages.error)
   }), message);
   return visualContent;
 };

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

@@ -1,26 +1,24 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc 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)}
-._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}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._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}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
-._n3td19bv{padding-bottom:10px}
-._n3td1v6z{padding-bottom:7px}
-._u5f319bv{padding-right:10px}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var closeEmojiUploadButton = null;
 var emojiUpload = null;
 var emojiUploadTop = null;
-var headingH5 = null;
+var labelStyles = null;
 var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
@@ -82,12 +82,12 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   var emojiChooseFileTitle = formatMessage(_i18n.messages.emojiChooseFileTitle);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiComponentTestId,
-    className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3icae7 _1e0c1txw _2lx21bp4 _1bah1b1v"])
+    className: (0, _runtime.ax)(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_11c8dcr7 _n3td1v6z _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: (0, _runtime.ax)(["_11c8dcr7 _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: (0, _runtime.ax)(["_1w901vvm", "_fqoxdcr7 _12r21pd9"]),
+    className: (0, _runtime.ax)(["_1w901vvm", "_11c81o8v _k48p1pd9"]),
     style: {
       "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
     }
@@ -102,12 +102,11 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     testId: cancelEmojiUploadPickerTestId
   }, /*#__PURE__*/React.createElement(_cross.default, {
     color: "currentColor",
-    LEGACY_size: "small",
     label: cancelLabel
   })))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_1e0c1txw _1bah1yb4 _n3td1v6z"])
+    className: (0, _runtime.ax)(["_1e0c1txw _1bah1yb4 _n3tdu2gc _gy1p12x7"])
   }, /*#__PURE__*/React.createElement("span", {
-    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _2hwx14y2 _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
   }, /*#__PURE__*/React.createElement(_textfield.default, {
     placeholder: emojiPlaceholder,
     "aria-label": emojiNameAriaLabel,

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

@@ -1,7 +1,7 @@
 
-._1fztdcr7 h5{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._19bv19bv{padding-left:10px}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._19l31ylp img{max-height:40px}
 ._19l3gktf img{max-height:20px}
 ._1bah1yb4{justify-content:space-between}
@@ -9,12 +9,12 @@
 ._1e0c1txw{display:flex}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
-._4t3i53f4{height:75pt}
-._avw21b66 h5{padding-bottom:var(--ds-space-050,4px)}
-._bfhklslw{background-color:var(--_1jkcdu5)}
-._ca0q19bv{padding-top:10px}
-._jl6w1vvm h5{color:var(--_bbz764)}
-._n3td19bv{padding-bottom:10px}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._rtys12am img{max-width:50px}
 ._rtys53f4 img{max-width:75pt}
-._u5f319bv{padding-right:10px}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

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

@@ -17,9 +17,9 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 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 _colors = require("@atlaskit/theme/colors");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _compiled = require("@atlaskit/primitives/compiled");
 var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../util/constants");
 var _i18n = require("../i18n");
@@ -76,22 +76,17 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
       var uploading = uploadStatus === _internalTypes.UploadStatus.Uploading;
       var retryableButtonLabel = errorMessage ? formatMessage(_i18n.messages.retryLabel) : formatMessage(_i18n.messages.addEmojiLabel);
       return /*#__PURE__*/React.createElement("div", {
-        className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx21bp4 _4t3i53f4"])
+        className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"])
       }, /*#__PURE__*/React.createElement("div", {
         "data-testid": uploadPreviewTestId,
-        className: (0, _runtime.ax)(["_2rkofajl _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, ")"))
-        }
+        className: (0, _runtime.ax)(["_2rkofajl _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhki8nm _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp"])
+      }, /*#__PURE__*/React.createElement(_compiled.Stack, {
+        space: "space.050"
       }, /*#__PURE__*/React.createElement(_heading.default, {
         size: "xsmall"
       }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement("div", {
-        id: addEmojiPreviewDescriptionId
+        id: addEmojiPreviewDescriptionId,
+        className: (0, _runtime.ax)(["_19l3gktf _rtys12am"])
       }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
         values: {
           emoji: emojiComponent
@@ -99,7 +94,7 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
       })))), /*#__PURE__*/React.createElement("div", {
         className: (0, _runtime.ax)(["_19bv1b66 _19l31ylp _rtys53f4"])
       }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
-        className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0q19bv"])
+        className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0qu2gc"])
       }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
         errorStyle: "preview",
         message: errorMessage,

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

@@ -78,7 +78,6 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
     elemBeforeInput: /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _runtime.ax)(["_tzy4105o _18u01i6y"])
     }, /*#__PURE__*/_react.default.createElement(_search.default, {
-      LEGACY_margin: "0 0 0 2px",
       color: "currentColor",
       spacing: "spacious",
       label: ""

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "0.0.0-development"
+      packageVersion: "69.10.0"
     }, attributes)
   };
 };

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

@@ -27,7 +27,6 @@ const DeleteButton = props => /*#__PURE__*/React.createElement("span", {
   }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: deleteEmojiLabel,
     color: `var(--ds-text-subtle, ${N500})`,
-    LEGACY_size: "small",
     size: "small"
   })),
   onClick: props.onClick

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

@@ -44,10 +44,8 @@ const AddOwnEmoji = props => {
     iconBefore: /*#__PURE__*/React.createElement(Box, {
       xcss: styles.icon
     }, /*#__PURE__*/React.createElement(AddIcon, {
-      LEGACY_margin: `0 ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-050, 4px)"}`,
       color: "currentColor",
-      label: "",
-      LEGACY_size: "small"
+      label: ""
     })),
     appearance: "subtle"
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.

package/dist/es2019/components/common/EmojiDeletePreview.compiled.css

@@ -1,6 +1,5 @@
 ._11c82smr{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)}
-._19bv19bv{padding-left:10px}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19l3zwfg img{max-height:2pc}
 ._1bah1yb4{justify-content:space-between}
 ._1bahesu3{justify-content:flex-end}
@@ -12,10 +11,8 @@
 ._4t3i1ylp{height:40px}
 ._4t3i53f4{height:75pt}
 ._4t3ivbgk{height:4pc}
-._ca0q19bv{padding-top:10px}
-._jwwg7vkz:first-of-type{line-height:1pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._m73io7ol .emoji-submit-delete{width:84px}
-._n3td19bv{padding-bottom:10px}
-._pnmb1n3s:first-of-type{color:var(--ds-text-subtle,#5e6c84)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._rtyst9kd img{max-width:72px}
-._u5f319bv{padding-right:10px}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

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

@@ -5,10 +5,10 @@ import "./EmojiDeletePreview.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Component } from 'react';
-import { N300 } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import AkButton from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
+import { Text } from '@atlaskit/primitives/compiled';
 import FocusLock from 'react-focus-lock';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
@@ -77,16 +77,19 @@ class EmojiDeletePreview extends Component {
       noFocusGuards: true
     }, /*#__PURE__*/React.createElement("div", {
       "data-testid": emojiDeletePreviewTestId,
-      className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3i53f4 _1e0c1txw _2lx21bp4 _1bahesu3"])
+      className: ax(["_4t3i53f4 _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bahesu3"])
     }, /*#__PURE__*/React.createElement("div", {
-      className: ax(["_11c8dcr7 _4t3ivbgk _pnmb1n3s _jwwg7vkz"])
+      className: ax(["_4t3ivbgk"])
     }, /*#__PURE__*/React.createElement(Heading, {
       size: "xxsmall"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(Text, {
+      color: "color.text.subtle",
+      size: "small"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
       values: {
         emojiShortName: emoji.shortName
       }
-    }))), /*#__PURE__*/React.createElement("div", {
+    })))), /*#__PURE__*/React.createElement("div", {
       className: ax(["_11c82smr _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txf1igg _1qz31b66"])
     }, /*#__PURE__*/React.createElement(CachingEmoji, {
       emoji: emoji

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

@@ -35,7 +35,6 @@ const EmojiErrorMessage = props => {
   }, /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "currentColor",
     label: formatMessage(messages.error),
-    LEGACY_size: "medium",
     spacing: "spacious",
     testId: emojiErrorIconTestId
   }))) : /*#__PURE__*/React.createElement("div", {
@@ -43,8 +42,7 @@ const EmojiErrorMessage = props => {
     className: ax([errorMessageStyles[errorStyle]])
   }, /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "currentColor",
-    label: formatMessage(messages.error),
-    LEGACY_size: "small"
+    label: formatMessage(messages.error)
   }), message);
   return visualContent;
 };

package/dist/es2019/components/common/EmojiUploadPicker.compiled.css

@@ -1,26 +1,24 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc 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)}
-._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}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1b1v{justify-content:space-around}
 ._1bah1yb4{justify-content:space-between}
 ._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1rwq1j28 input{background-color:transparent}
 ._1w901n3s._1w901n3s{color:var(--ds-text-subtle,#5e6c84)}
-._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}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
-._n3td19bv{padding-bottom:10px}
-._n3td1v6z{padding-bottom:7px}
-._u5f319bv{padding-right:10px}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -20,7 +20,7 @@ import { UploadStatus } from './internal-types';
 const closeEmojiUploadButton = null;
 const emojiUpload = null;
 const emojiUploadTop = null;
-const headingH5 = null;
+const labelStyles = null;
 const uploadChooseFileEmojiName = null;
 const uploadChooseFileMessage = null;
 const uploadChooseFileRow = null;
@@ -73,12 +73,12 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   const emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiComponentTestId,
-    className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3icae7 _1e0c1txw _2lx21bp4 _1bah1b1v"])
+    className: ax(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8dcr7 _n3td1v6z _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: ax(["_11c8dcr7 _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: ax(["_1w901n3s", "_fqoxdcr7 _12r21pd9"])
+    className: ax(["_1w901n3s", "_11c81o8v _k48p1pd9"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw"])
   }, /*#__PURE__*/React.createElement(AkButton, {
@@ -90,12 +90,11 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     testId: cancelEmojiUploadPickerTestId
   }, /*#__PURE__*/React.createElement(CrossIcon, {
     color: "currentColor",
-    LEGACY_size: "small",
     label: cancelLabel
   })))), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw _1bah1yb4 _n3td1v6z"])
+    className: ax(["_1e0c1txw _1bah1yb4 _n3tdu2gc _gy1p12x7"])
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _2hwx14y2 _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
   }, /*#__PURE__*/React.createElement(TextField, {
     placeholder: emojiPlaceholder,
     "aria-label": emojiNameAriaLabel,

package/dist/es2019/components/common/EmojiUploadPreview.compiled.css

@@ -1,7 +1,7 @@
 
-._1fztdcr7 h5{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._19bv19bv{padding-left:10px}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._19l31ylp img{max-height:40px}
 ._19l3gktf img{max-height:20px}
 ._1bah1yb4{justify-content:space-between}
@@ -9,12 +9,12 @@
 ._1e0c1txw{display:flex}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
-._4t3i53f4{height:75pt}
-._avw21b66 h5{padding-bottom:var(--ds-space-050,4px)}
-._bfhk1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
-._ca0q19bv{padding-top:10px}
-._jl6w1n3s h5{color:var(--ds-text-subtle,#5e6c84)}
-._n3td19bv{padding-bottom:10px}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._rtys12am img{max-width:50px}
 ._rtys53f4 img{max-width:75pt}
-._u5f319bv{padding-right:10px}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

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

@@ -4,9 +4,9 @@ import "./EmojiUploadPreview.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { PureComponent } from 'react';
-import { N20, N300 } from '@atlaskit/theme/colors';
 import AkButton from '@atlaskit/button/standard-button';
 import Heading from '@atlaskit/heading';
+import { Stack } from '@atlaskit/primitives/compiled';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { customCategory } from '../../util/constants';
 import { messages } from '../i18n';
@@ -56,16 +56,17 @@ class EmojiUploadPreview extends PureComponent {
     const uploading = uploadStatus === UploadStatus.Uploading;
     const retryableButtonLabel = errorMessage ? formatMessage(messages.retryLabel) : formatMessage(messages.addEmojiLabel);
     return /*#__PURE__*/React.createElement("div", {
-      className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx21bp4 _4t3i53f4"])
+      className: ax(["_1e0c1txw _2lx21bp4 _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"])
     }, /*#__PURE__*/React.createElement("div", {
       "data-testid": uploadPreviewTestId,
-      className: ax(["_2rkofajl _ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhk1s4m"])
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ax(["_1fztdcr7 _jl6w1n3s _avw21b66 _19l3gktf _rtys12am"])
+      className: ax(["_2rkofajl _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhki8nm _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp"])
+    }, /*#__PURE__*/React.createElement(Stack, {
+      space: "space.050"
     }, /*#__PURE__*/React.createElement(Heading, {
       size: "xsmall"
     }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement("div", {
-      id: addEmojiPreviewDescriptionId
+      id: addEmojiPreviewDescriptionId,
+      className: ax(["_19l3gktf _rtys12am"])
     }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.emojiPreview, {
       values: {
         emoji: emojiComponent
@@ -73,7 +74,7 @@ class EmojiUploadPreview extends PureComponent {
     })))), /*#__PURE__*/React.createElement("div", {
       className: ax(["_19bv1b66 _19l31ylp _rtys53f4"])
     }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
-      className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0q19bv"])
+      className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0qu2gc"])
     }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
       errorStyle: "preview",
       message: errorMessage,

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

@@ -65,7 +65,6 @@ export const EmojiPickerListSearch = props => {
     elemBeforeInput: /*#__PURE__*/React.createElement("span", {
       className: ax(["_tzy4105o _18u01i6y"])
     }, /*#__PURE__*/React.createElement(SearchIcon, {
-      LEGACY_margin: "0 0 0 2px",
       color: "currentColor",
       spacing: "spacious",
       label: ""

package/dist/es2019/util/analytics/analytics.js

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "0.0.0-development",
+    packageVersion: "69.10.0",
     ...attributes
   }
 });

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

@@ -28,7 +28,6 @@ var DeleteButton = function DeleteButton(props) {
     }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: deleteEmojiLabel,
       color: "var(--ds-text-subtle, ".concat(N500, ")"),
-      LEGACY_size: "small",
       size: "small"
     })),
     onClick: props.onClick

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

@@ -44,10 +44,8 @@ var AddOwnEmoji = function AddOwnEmoji(props) {
       iconBefore: /*#__PURE__*/React.createElement(Box, {
         xcss: styles.icon
       }, /*#__PURE__*/React.createElement(AddIcon, {
-        LEGACY_margin: "0 ".concat("var(--ds-space-025, 2px)", " 0 ", "var(--ds-space-050, 4px)"),
         color: "currentColor",
-        label: "",
-        LEGACY_size: "small"
+        label: ""
       })),
       appearance: "subtle"
       // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.

package/dist/esm/components/common/EmojiDeletePreview.compiled.css

@@ -1,6 +1,5 @@
 ._11c82smr{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)}
-._19bv19bv{padding-left:10px}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19l3zwfg img{max-height:2pc}
 ._1bah1yb4{justify-content:space-between}
 ._1bahesu3{justify-content:flex-end}
@@ -12,10 +11,8 @@
 ._4t3i1ylp{height:40px}
 ._4t3i53f4{height:75pt}
 ._4t3ivbgk{height:4pc}
-._ca0q19bv{padding-top:10px}
-._jwwg7vkz:first-of-type{line-height:1pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._m73io7ol .emoji-submit-delete{width:84px}
-._n3td19bv{padding-bottom:10px}
-._pnmb1vvm:first-of-type{color:var(--_bbz764)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._rtyst9kd img{max-width:72px}
-._u5f319bv{padding-right:10px}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

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

@@ -12,10 +12,10 @@ import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import { Component } from 'react';
-import { N300 } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import AkButton from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
+import { Text } from '@atlaskit/primitives/compiled';
 import FocusLock from 'react-focus-lock';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
@@ -87,19 +87,19 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         noFocusGuards: true
       }, /*#__PURE__*/React.createElement("div", {
         "data-testid": emojiDeletePreviewTestId,
-        className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3i53f4 _1e0c1txw _2lx21bp4 _1bahesu3"])
+        className: ax(["_4t3i53f4 _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bahesu3"])
       }, /*#__PURE__*/React.createElement("div", {
-        className: ax(["_11c8dcr7 _4t3ivbgk _pnmb1vvm _jwwg7vkz"]),
-        style: {
-          "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
-        }
+        className: ax(["_4t3ivbgk"])
       }, /*#__PURE__*/React.createElement(Heading, {
         size: "xxsmall"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(Text, {
+        color: "color.text.subtle",
+        size: "small"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), /*#__PURE__*/React.createElement("div", {
+      })))), /*#__PURE__*/React.createElement("div", {
         className: ax(["_11c82smr _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txf1igg _1qz31b66"])
       }, /*#__PURE__*/React.createElement(CachingEmoji, {
         emoji: emoji

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

@@ -32,7 +32,6 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   }, /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "currentColor",
     label: formatMessage(messages.error),
-    LEGACY_size: "medium",
     spacing: "spacious",
     testId: emojiErrorIconTestId
   }))) : /*#__PURE__*/React.createElement("div", {
@@ -40,8 +39,7 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     className: ax([errorMessageStyles[errorStyle]])
   }, /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "currentColor",
-    label: formatMessage(messages.error),
-    LEGACY_size: "small"
+    label: formatMessage(messages.error)
   }), message);
   return visualContent;
 };

package/dist/esm/components/common/EmojiUploadPicker.compiled.css

@@ -1,26 +1,24 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc 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)}
-._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}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._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}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
-._n3td19bv{padding-bottom:10px}
-._n3td1v6z{padding-bottom:7px}
-._u5f319bv{padding-right:10px}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -23,7 +23,7 @@ import { UploadStatus } from './internal-types';
 var closeEmojiUploadButton = null;
 var emojiUpload = null;
 var emojiUploadTop = null;
-var headingH5 = null;
+var labelStyles = null;
 var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
@@ -73,12 +73,12 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   var emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiComponentTestId,
-    className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3icae7 _1e0c1txw _2lx21bp4 _1bah1b1v"])
+    className: ax(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8dcr7 _n3td1v6z _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: ax(["_11c8dcr7 _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: ax(["_1w901vvm", "_fqoxdcr7 _12r21pd9"]),
+    className: ax(["_1w901vvm", "_11c81o8v _k48p1pd9"]),
     style: {
       "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
     }
@@ -93,12 +93,11 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     testId: cancelEmojiUploadPickerTestId
   }, /*#__PURE__*/React.createElement(CrossIcon, {
     color: "currentColor",
-    LEGACY_size: "small",
     label: cancelLabel
   })))), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw _1bah1yb4 _n3td1v6z"])
+    className: ax(["_1e0c1txw _1bah1yb4 _n3tdu2gc _gy1p12x7"])
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _2hwx14y2 _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
   }, /*#__PURE__*/React.createElement(TextField, {
     placeholder: emojiPlaceholder,
     "aria-label": emojiNameAriaLabel,

package/dist/esm/components/common/EmojiUploadPreview.compiled.css

@@ -1,7 +1,7 @@
 
-._1fztdcr7 h5{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._19bv19bv{padding-left:10px}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._19l31ylp img{max-height:40px}
 ._19l3gktf img{max-height:20px}
 ._1bah1yb4{justify-content:space-between}
@@ -9,12 +9,12 @@
 ._1e0c1txw{display:flex}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
-._4t3i53f4{height:75pt}
-._avw21b66 h5{padding-bottom:var(--ds-space-050,4px)}
-._bfhklslw{background-color:var(--_1jkcdu5)}
-._ca0q19bv{padding-top:10px}
-._jl6w1vvm h5{color:var(--_bbz764)}
-._n3td19bv{padding-bottom:10px}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._rtys12am img{max-width:50px}
 ._rtys53f4 img{max-width:75pt}
-._u5f319bv{padding-right:10px}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

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

@@ -11,9 +11,9 @@ import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import { PureComponent } from 'react';
-import { N20, N300 } from '@atlaskit/theme/colors';
 import AkButton from '@atlaskit/button/standard-button';
 import Heading from '@atlaskit/heading';
+import { Stack } from '@atlaskit/primitives/compiled';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { customCategory } from '../../util/constants';
 import { messages } from '../i18n';
@@ -67,22 +67,17 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
       var uploading = uploadStatus === UploadStatus.Uploading;
       var retryableButtonLabel = errorMessage ? formatMessage(messages.retryLabel) : formatMessage(messages.addEmojiLabel);
       return /*#__PURE__*/React.createElement("div", {
-        className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx21bp4 _4t3i53f4"])
+        className: ax(["_1e0c1txw _2lx21bp4 _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"])
       }, /*#__PURE__*/React.createElement("div", {
         "data-testid": uploadPreviewTestId,
-        className: ax(["_2rkofajl _ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhklslw"]),
-        style: {
-          "--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")"))
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: ax(["_1fztdcr7 _jl6w1vvm _avw21b66 _19l3gktf _rtys12am"]),
-        style: {
-          "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
-        }
+        className: ax(["_2rkofajl _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhki8nm _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp"])
+      }, /*#__PURE__*/React.createElement(Stack, {
+        space: "space.050"
       }, /*#__PURE__*/React.createElement(Heading, {
         size: "xsmall"
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement("div", {
-        id: addEmojiPreviewDescriptionId
+        id: addEmojiPreviewDescriptionId,
+        className: ax(["_19l3gktf _rtys12am"])
       }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.emojiPreview, {
         values: {
           emoji: emojiComponent
@@ -90,7 +85,7 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
       })))), /*#__PURE__*/React.createElement("div", {
         className: ax(["_19bv1b66 _19l31ylp _rtys53f4"])
       }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
-        className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0q19bv"])
+        className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0qu2gc"])
       }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
         errorStyle: "preview",
         message: errorMessage,

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

@@ -69,7 +69,6 @@ export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
     elemBeforeInput: /*#__PURE__*/React.createElement("span", {
       className: ax(["_tzy4105o _18u01i6y"])
     }, /*#__PURE__*/React.createElement(SearchIcon, {
-      LEGACY_margin: "0 0 0 2px",
       color: "currentColor",
       spacing: "spacious",
       label: ""

package/dist/esm/util/analytics/analytics.js

@@ -13,7 +13,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "0.0.0-development"
+      packageVersion: "69.10.0"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.9.6",
+	"version": "69.10.1",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^29.3.0",
+		"@atlaskit/icon": "^29.4.0",
 		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -47,9 +47,9 @@
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.3.0",
-		"@atlaskit/tokens": "^9.0.0",
-		"@atlaskit/tooltip": "^20.11.0",
+		"@atlaskit/tmp-editor-statsig": "^16.12.0",
+		"@atlaskit/tokens": "^9.1.0",
+		"@atlaskit/tooltip": "^20.12.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",