@atlaskit/emoji 69.10.47 → 69.10.48

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

@@ -12,7 +12,6 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _mouse = require("../../util/mouse");
 var _typeHelpers = require("../../util/type-helpers");
@@ -44,15 +43,14 @@ function EmojiTypeAheadItemInternal(props) {
     emojiProvider: emojiProvider
   }, /*#__PURE__*/_react.default.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _80omtlke _1e0c1ule _2mzuglyw _1bsb1qjl", selected && "_bfhkptpz", "ak-emoji-typeahead-item ".concat(selected ? _styles.typeaheadSelected : '')]),
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _80omtlke _1e0c1ule _2mzuglyw _1bsb1qjl", selected && "_bfhki8nm", "ak-emoji-typeahead-item ".concat(selected ? _styles.typeaheadSelected : '')]),
     onMouseDown: onEmojiSelected,
     onMouseMove: onEmojiMenuItemMouseMove,
     "data-emoji-id": emoji.shortName,
     ref: forwardedRef,
     role: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? 'button' : undefined,
     style: {
-      "--_n55fzx": (0, _runtime.ix)("".concat(typeAheadWidth, "px")),
-      "--_19g1tth": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30, ")"))
+      "--_n55fzx": (0, _runtime.ix)("".concat(typeAheadWidth, "px"))
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw _2lx2vrvc _1n261g80 _s7n4nkob"])

package/dist/cjs/components/typeahead/EmojiTypeAheadListContainer.compiled.css

@@ -1,7 +1,7 @@
 
-._19it155r{border:var(--_gf55z1)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qsp2xt{box-shadow:var(--ds-shadow-overlay,0 3px 6px rgba(0,0,0,.2))}
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bsb1qjl{width:var(--_n55fzx)}
 ._1e0cglyw{display:none}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._syazc7r3{color:var(--ds-text-subtle,#333)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}

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

@@ -9,7 +9,6 @@ exports.EmojiTypeAheadListContainer = EmojiTypeAheadListContainer;
 require("./EmojiTypeAheadListContainer.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _colors = require("@atlaskit/theme/colors");
 var _styles = require("./styles");
 var typeAheadEmpty = null;
 var typeAheadWidth = 350;
@@ -19,9 +18,8 @@ function EmojiTypeAheadListContainer(props) {
     loading = props.loading;
   return /*#__PURE__*/_react.default.createElement("div", {
     /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */
-    className: (0, _runtime.ax)(["_19it155r _2rkofajl _bfhk1bhr _16qsp2xt _syazc7r3 _1bsb1qjl", !hasEmoji && !loading && "_1e0cglyw", 'ak-emoji-typeahead-list']),
+    className: (0, _runtime.ax)(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _syazazsu _1bsb1qjl", !hasEmoji && !loading && "_1e0cglyw", 'ak-emoji-typeahead-list']),
     style: {
-      "--_gf55z1": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")"))),
       "--_n55fzx": (0, _runtime.ix)("".concat(typeAheadWidth, "px"))
     }
   }, /*#__PURE__*/_react.default.createElement("div", {

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: "69.10.46"
+      packageVersion: "69.10.47"
     }, attributes)
   };
 };

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

@@ -4,16 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 var emojiPickerListWidth = exports.emojiPickerListWidth = _constants.emojiPickerWidth;
 var emojiPickerListHeight = exports.emojiPickerListHeight = 205;
-var emojiPickerBorderColor = exports.emojiPickerBorderColor = "var(--ds-border, ".concat(_colors.N40, ")");
-var emojiPickerBoxShadow = exports.emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
-var noDialogContainerBorderColor = exports.noDialogContainerBorderColor = "var(--ds-border, ".concat(_colors.N40, ")");
+var emojiPickerBorderColor = exports.emojiPickerBorderColor = "var(--ds-border, #0B120E24)";
+var emojiPickerBoxShadow = exports.emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
+var noDialogContainerBorderColor = exports.noDialogContainerBorderColor = "var(--ds-border, #0B120E24)";
 var noDialogContainerBorderRadius = exports.noDialogContainerBorderRadius = "var(--ds-radius-small, 3px)";
-var noDialogContainerBoxShadow = exports.noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
-var akEmojiSelectedBackgroundColor = exports.akEmojiSelectedBackgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")");
-var emojiPreviewSelectedColor = exports.emojiPreviewSelectedColor = "var(--ds-background-neutral, ".concat(_colors.N30, ")");
+var noDialogContainerBoxShadow = exports.noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
+var akEmojiSelectedBackgroundColor = exports.akEmojiSelectedBackgroundColor = "var(--ds-background-neutral-subtle-hovered, #0515240F)";
+var emojiPreviewSelectedColor = exports.emojiPreviewSelectedColor = "var(--ds-background-neutral, #0515240F)";
 var emojiTypeAheadMaxHeight = exports.emojiTypeAheadMaxHeight = 350;
 var emojiTypeAheadWidth = exports.emojiTypeAheadWidth = 350;

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

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import Button from '@atlaskit/button/standard-button';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
-import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
 import { emojiDeleteButton } from './styles';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -26,7 +25,7 @@ const DeleteButton = props => /*#__PURE__*/React.createElement("span", {
     xcss: styles.boxWrapperStyle
   }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: deleteEmojiLabel,
-    color: `var(--ds-text-subtle, ${N500})`,
+    color: "var(--ds-text-subtle, #505258)",
     size: "small"
   })),
   onClick: props.onClick

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

@@ -9,7 +9,7 @@
 ._1kogh2mm.emoji-common-deletable{position:relative}
 ._1theewfl.emoji-common-selected{visibility:visible}
 ._2hwxidpf{margin-right:0}
-._3naf14ae.emoji-common-selected{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
+._3naf1dpa.emoji-common-selected{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._otyr1n1a{margin-bottom:-1px}
 ._pkaxgktf .emoji-common-emoji-sprite{min-height:20px}
@@ -20,6 +20,6 @@
 ._1hvw1o36:focus{outline-width:medium}
 ._491113zc:focus{transition-duration:0s,.2s}
 ._49pcglyw:focus{outline-style:none}
-._7ehi1n2i:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4c9aff)}
+._7ehi1y54:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
 ._nt751r31:focus{outline-color:currentColor}
-._tn8j14ae.emoji-common-select-on-hover:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
+._tn8j1dpa.emoji-common-select-on-hover:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}

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

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./Emoji.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useCallback, useMemo, forwardRef } from 'react';
-import { B100, N30 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
 import { deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -322,7 +321,7 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j14ae _3naf14ae _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j14ae _3naf14ae _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc", className]),
+    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
     onKeyDown: event => handleKeyDown(props, event),
     onMouseDown: event => {
       handleMouseDown(props, event);

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

@@ -1,7 +1,7 @@
 
-._n7zl1dd9{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,rgba(9,30,66,.08))}._16jlidpf{flex-grow:0}
+._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
-._16qs1ueq{box-shadow:0 1px 1px 0 var(--ds-border,rgba(0,0,0,.1))}
+._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
 ._18u019bv{margin-left:10px}
 ._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
 ._19bvidpf{padding-left:0}

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N30A } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
@@ -155,7 +154,7 @@ export const EmojiActions = props => {
   }, [showToneSelector, onToneSelectorCancelled]);
   if (uploading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1dd9 _16qs1ueq"])
+      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
       onUploadCancelled: onUploadCancelled,
       onUploadEmoji: onUploadEmoji,
@@ -166,7 +165,7 @@ export const EmojiActions = props => {
   }
   if (emojiToDelete) {
     return /*#__PURE__*/React.createElement("div", {
-      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1dd9 _16qs1ueq"])
+      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
       emoji: emojiToDelete,
       onDeleteEmoji: onDeleteEmoji,
@@ -177,7 +176,7 @@ export const EmojiActions = props => {
     "data-testid": emojiActionsTestId,
     onMouseLeave: onMouseLeaveHandler,
     onBlur: fg('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
-    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1dd9 _16qs1ueq"])
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement(EmojiPickerListSearch, {

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

@@ -5,7 +5,7 @@
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
 ._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
-._1txf1igg .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,bold)}
+._1txfwu06 .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,653)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i1ylp{height:40px}

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

@@ -90,7 +90,7 @@ class EmojiDeletePreview extends Component {
         emojiShortName: emoji.shortName
       }
     })))), /*#__PURE__*/React.createElement("div", {
-      className: ax(["_11c8fhey _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txf1igg _1qz31b66"])
+      className: ax(["_11c8fhey _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txfwu06 _1qz31b66"])
     }, /*#__PURE__*/React.createElement(CachingEmoji, {
       emoji: emoji
     }), /*#__PURE__*/React.createElement("div", {

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

@@ -3,7 +3,6 @@
 ._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._syaz1ick{color:var(--ds-text-danger,#de350b)}
-._syaz1l5o{color:var(--ds-text-danger,#ff5630)}
+._syaz1tmw{color:var(--ds-text-danger,#ae2e24)}
 ._u5f319bv{padding-right:10px}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

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

@@ -2,15 +2,14 @@
 import "./EmojiErrorMessage.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { R300, R400 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
 import { useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 const errorMessageStyles = {
-  chooseFile: "_1e0c1txw _syaz1l5o _u5f319bv _1bah1y6m",
-  delete: "_1e0c1txw _syaz1ick _4cvr1h6o _1bahesu3 _u5f31b66",
-  preview: "_1e0c116y _syaz1ick _u5f319bv _1bahesu3 _4cvr1h6o"
+  chooseFile: "_1e0c1txw _syaz1tmw _u5f319bv _1bah1y6m",
+  delete: "_1e0c1txw _syaz1tmw _4cvr1h6o _1bahesu3 _u5f31b66",
+  preview: "_1e0c116y _syaz1tmw _u5f319bv _1bahesu3 _4cvr1h6o"
 };
 export const emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 export const emojiErrorMessageTestId = 'emoji-error-message';

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

@@ -5,7 +5,7 @@
 ._1e0c1o8l{display:inline-block}
 ._1reo15vq{overflow-x:hidden}
 ._2hwxidpf{margin-right:0}
-._bfhkttw1{background-color:var(--ds-border,#f7f7f7)}
+._bfhk1l7x{background-color:var(--ds-border,#0b120e24)}
 ._kqswh2mm{position:relative}
 ._o5721q9c{white-space:nowrap}
 ._otyr1n1a{margin-bottom:-1px}

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

@@ -45,7 +45,7 @@ const EmojiPlaceholder = props => {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [placeholder, xcss].join(' ')]),
+    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhk1l7x _s7n4nkob _o5721q9c _y3gn1h6o", [placeholder, xcss].join(' ')]),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     title: showTooltip ? shortName : ''

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

@@ -1,5 +1,5 @@
 ._10hwfhey:first-of-type{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8rymc{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._118didpf span[role=img]>img{padding-bottom:0}
 ._12s6idpf .emoji-common-emoji-sprite{padding-top:0}
 ._16jlkb7n{flex-grow:1}
@@ -48,9 +48,9 @@
 ._otyr1i6y{margin-bottom:var(--ds-space-negative-025,-2px)}
 ._p12f3sup{max-width:285px}
 ._pdfdidpf .emoji-common-emoji-sprite{padding-left:0}
-._pnmbj3m3:first-of-type{color:var(--ds-text,#091e42)}
-._syaz1a45{color:var(--ds-text-subtle,#505f79)}
-._syazj3m3{color:var(--ds-text,#091e42)}
+._pnmbi7uo:first-of-type{color:var(--ds-text,#292a2e)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f319bv{padding-right:10px}
 ._u5wqzwfg span[role=img]{height:2pc}
 ._vwlxidpf span[role=img]{padding-right:0}

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

@@ -2,7 +2,6 @@
 import "./EmojiPreviewComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { N400, N900 } from '@atlaskit/theme/colors';
 import CachingEmoji from './CachingEmoji';
 const emojiName = null;
 const emojiShortName = null;
@@ -22,8 +21,8 @@ export const EmojiPreviewComponent = ({
   })), /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
   }, emoji.name && /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1reo15vq _18m915vq _1e0c1ule _syazj3m3 _1bto1l2s _o5721q9c _299mangw"])
+    className: ax(["_1reo15vq _18m915vq _1e0c1ule _syazi7uo _1bto1l2s _o5721q9c _299mangw"])
   }, emoji.name), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8rymc _1reo15vq _18m915vq _1e0c1ule _syaz1a45 _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hwfhey _pnmbj3m3"])
+    className: ax(["_11c8wadc _1reo15vq _18m915vq _1e0c1ule _syazazsu _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hwfhey _pnmbi7uo"])
   }, emoji.shortName)));
 };

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

@@ -22,7 +22,7 @@
 ._80omtlke{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
-._fh6w1n2i:focus+span{box-shadow:0 0 0 2px var(--ds-border-focused,#4c9aff)}
+._fh6w1y54:focus+span{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
 ._hjaq12x7>span{padding-right:var(--ds-space-075,6px)}
 ._hlt21tcg>span>.emoji-common-emoji-sprite{height:24px}
 ._kqswh2mm{position:relative}

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

@@ -2,7 +2,6 @@
 import "./EmojiRadioButton.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { memo, forwardRef } from 'react';
-import { B100 } from '@atlaskit/theme/colors';
 import { leftClick } from '../../util/mouse';
 import Emoji from './Emoji';
 import { TONESELECTOR_KEYBOARD_KEYS_SUPPORTED } from '../../util/constants';
@@ -10,7 +9,7 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 import { fg } from '@atlaskit/platform-feature-flags';
 const emojiButton = null;
 const emojiRadio = {
-  default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1n2i _1i1213zc"
+  default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1y54 _1i1213zc"
 };
 const handleMouseDown = (props, event) => {
   const {

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

@@ -1,4 +1,3 @@
-._11c8rymc{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._scffidpf input{border:0}
 ._16jlkb7n{flex-grow:1}
@@ -8,7 +7,7 @@
 ._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1rwq1j28 input{background-color:transparent}
-._1w901n3s._1w901n3s{color:var(--ds-text-subtle,#5e6c84)}
+._1w90azsu._1w90azsu{color:var(--ds-text-subtle,#505258)}
 ._2lx21bp4{flex-direction:column}
 ._34ir1o36 input{outline-width:medium}
 ._4cvresu3{align-items:flex-end}

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

@@ -3,7 +3,6 @@ import "./EmojiUploadPicker.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
-import { N300 } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
 import CrossIcon from '@atlaskit/icon/core/cross';
@@ -75,10 +74,10 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     "data-testid": uploadEmojiComponentTestId,
     className: ax(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8rymc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: ax(["_11c8wadc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: ax(["_1w901n3s", "_11c8wadc _k48p1pd9"])
+    className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw"])
   }, /*#__PURE__*/React.createElement(AkButton, {

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

@@ -1,5 +1,5 @@
 
-._19itbvkq{border:var(--ds-border-width,1px) solid var(--ds-border,#fff)}
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._18m91wug{overflow-y:auto}
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}

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

@@ -58,7 +58,7 @@ export default class Scrollable extends PureComponent {
     } : {};
     return /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: ax(["_19itbvkq _2rkofajl _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1ule _1reo15vq _18m91wug", `emoji-scrollable ${className}`]),
+      className: ax(["_19itia51 _2rkofajl _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1ule _1reo15vq _18m91wug", `emoji-scrollable ${className}`]),
       // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
       onMouseLeave: fg('platform_suppression_removal_fix_reactions') ? undefined : onMouseLeave,
       onScroll: this.handleScroll,

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

@@ -28,5 +28,5 @@
 ._1hvw1o36:focus{outline-width:medium}
 ._491113zc:focus{transition-duration:0s,.2s}
 ._49pcglyw:focus{outline-style:none}
-._7ehi1n2i:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4c9aff)}
+._7ehi1y54:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
 ._nt751r31:focus{outline-color:currentColor}

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

@@ -3,7 +3,6 @@ import "./TonePreviewButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo } from 'react';
-import { B100 } from '@atlaskit/theme/colors';
 import Emoji from './Emoji';
 export const tonePreviewTestId = 'tone-preview';
 const emojiButton = null;
@@ -30,7 +29,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     },
     "data-testid": tonePreviewTestId,
     type: "button",
-    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
   }, /*#__PURE__*/React.createElement(Emoji, {
     emoji: emoji,
     selectOnHover: selectOnHover,

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

@@ -1,6 +1,6 @@
 
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._19bvv77o{padding-left:var(--ds-space-025,2px)}
-._bfhk17rn{background-color:var(--ds-background-inverse-subtle,#505f79)}
+._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
 ._ca0qidpf{padding-top:0}
 ._jqf61teg{label:tooltip-shortcut}
 ._n3tdidpf{padding-bottom:0}

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

@@ -2,7 +2,6 @@
 import "./ToolTipContentWithKeymap.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';
-import { N400 } from '@atlaskit/theme/colors';
 import { formatShortcut } from '../../util/keymaps';
 const tooltipShortcutStyle = null;
 export const ToolTipContentWithKeymap = /*#__PURE__*/React.memo(({
@@ -12,6 +11,6 @@ export const ToolTipContentWithKeymap = /*#__PURE__*/React.memo(({
 }) => {
   const shortcut = shortcutOverride || keymap && formatShortcut(keymap);
   return shortcut || description ? /*#__PURE__*/React.createElement(Fragment, null, description, shortcut && description && '\u00A0', shortcut && /*#__PURE__*/React.createElement("span", {
-    className: ax(["_2rkofajl _bfhk17rn _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"])
+    className: ax(["_2rkofajl _bfhk1vck _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"])
   }, shortcut)) : null;
 });

package/dist/es2019/components/picker/CategorySelector.compiled.css

@@ -9,7 +9,7 @@
 ._1o9zidpf{flex-shrink:0}
 ._2lx2vrvc{flex-direction:row}
 ._4cvr1h6o{align-items:center}
-._bfhk1nmp{background-color:var(--ds-surface-sunken,#ebecf0)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}

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

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { cx } from '@atlaskit/css';
-import { N30 } from '@atlaskit/theme/colors';
 import { useIntl } from 'react-intl-next';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
@@ -130,7 +129,7 @@ const CategorySelector = props => {
     }));
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhk1nmp _dpd31txw"])
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkhfxm _dpd31txw"])
   }, categoriesSection);
 };
 export default CategorySelector;

package/dist/es2019/components/picker/EmojiPicker.compiled.css

@@ -1,6 +1,6 @@
 
-._19it11e4{border:var(--ds-border,#dfe1e6) var(--ds-border-width,1px) solid}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qsp2xt{box-shadow:var(--ds-shadow-overlay,0 3px 6px rgba(0,0,0,.2))}
+._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1edt{width:350px}
 ._1e0c1txw{display:flex}

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

@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./EmojiPicker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { N40 } from '@atlaskit/theme/colors';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
@@ -43,7 +42,7 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
     ufoExperiences['emoji-picker-opened'].markFMP();
     return /*#__PURE__*/React.createElement("div", {
       ref: handlePickerRef,
-      className: ax(["_19it11e4 _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
     }, item.renderItem());
   }
   renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {

package/dist/es2019/components/picker/EmojiPickerCategoryHeading.compiled.css

@@ -4,6 +4,6 @@
 ._299mangw:first-letter{text-transform:uppercase}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
-._syazj3m3{color:var(--ds-text,#091e42)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vchhusvi{box-sizing:border-box}

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

@@ -2,7 +2,6 @@
 import "./EmojiPickerCategoryHeading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { N900 } from '@atlaskit/theme/colors';
 import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
@@ -25,6 +24,6 @@ const EmojiPickerCategoryHeading = ({
   "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
   role: "rowheader"
 }, /*#__PURE__*/React.createElement("div", {
-  className: ax(["_11c8fhey _vchhusvi _syazj3m3 _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+  className: ax(["_11c8fhey _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
 }, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title));
 export default EmojiPickerCategoryHeading;

package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css

@@ -1,6 +1,6 @@
 
-._19it11e4{border:var(--ds-border,#dfe1e6) var(--ds-border-width,1px) solid}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qsp2xt{box-shadow:var(--ds-shadow-overlay,0 3px 6px rgba(0,0,0,.2))}
+._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1edt{width:350px}
 ._1e0c1txw{display:flex}

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

@@ -3,7 +3,6 @@ import "./EmojiPickerComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
-import { N40 } from '@atlaskit/theme/colors';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -21,7 +20,7 @@ import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPicker
 import { useEmoji } from '../../hooks/useEmoji';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { messages } from '../i18n';
-const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 const emojiPickerHeight = 295;
 const emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 const emojiPickerWidth = 350;
@@ -440,7 +439,7 @@ const EmojiPickerComponent = ({
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_19it11e4 _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
+    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
   }, /*#__PURE__*/React.createElement(CategorySelector, {
     activeCategoryId: activeCategory,
     dynamicCategories: dynamicCategories,

package/dist/es2019/components/picker/EmojiPickerFooter.compiled.css

@@ -1,5 +1,5 @@
 
-._x3do1dd9{border-top:var(--ds-border-width-selected,2px) solid var(--ds-border,rgba(9,30,66,.08))}._16jlidpf{flex-grow:0}
-._16qs2hsd{box-shadow:0 -1px 1px 0 var(--ds-border,rgba(0,0,0,.1))}
+._x3do1uh4{border-top:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
+._16qsvjqj{box-shadow:0 -1px 1px 0 var(--ds-border,#0b120e24)}
 ._1o9zidpf{flex-shrink:0}
 ._i0dl1wug{flex-basis:auto}

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

@@ -3,7 +3,6 @@ import "./EmojiPickerFooter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-import { N30A } from '@atlaskit/theme/colors';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 const emojiPickerFooter = null;
 const emojiPickerFooterWithTopShadow = null;
@@ -12,7 +11,7 @@ const EmojiPickerFooter = ({
   selectedEmoji
 }) => /*#__PURE__*/React.createElement("div", {
   "data-testid": emojiPickerFooterTestId,
-  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1dd9 _16qs2hsd"])
+  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1uh4 _16qsvjqj"])
 }, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
   emoji: selectedEmoji
 }));

package/dist/es2019/components/typeahead/EmojiTypeAheadItem.compiled.css

@@ -7,5 +7,5 @@
 ._2lx2vrvc{flex-direction:row}
 ._2mzuglyw{list-style-type:none}
 ._80omtlke{cursor:pointer}
-._bfhk1yrq{background-color:var(--ds-background-neutral,#ebecf0)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._s7n4nkob{vertical-align:middle}