@atlaskit/emoji 69.10.47 → 69.10.48

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/emoji
 
+## 69.10.48
+
+### Patch Changes
+
+- [`608c375f6f9b9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/608c375f6f9b9) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+
 ## 69.10.47
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -56,9 +56,6 @@
 		{
 			"path": "../../../design-system/textfield/afm-cc/tsconfig.json"
 		},
-		{
-			"path": "../../../design-system/theme/afm-cc/tsconfig.json"
-		},
 		{
 			"path": "../../../editor/tmp-editor-statsig/afm-cc/tsconfig.json"
 		},

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

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
-var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../util/constants");
 var _styles = require("./styles");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -36,7 +35,7 @@ var DeleteButton = function DeleteButton(props) {
       xcss: styles.boxWrapperStyle
     }, /*#__PURE__*/React.createElement(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
-      color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+      color: "var(--ds-text-subtle, #505258)",
       size: "small"
     })),
     onClick: props.onClick

package/dist/cjs/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}
-._3naf2tgk.emoji-common-selected{background-color:var(--_1y60f1n)}
+._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}
-._7ehi1r2v:focus{box-shadow:var(--_1rebzxw)}
+._7ehi1y54:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
 ._nt751r31:focus{outline-color:currentColor}
-._tn8j2tgk.emoji-common-select-on-hover:hover{background-color:var(--_1y60f1n)}
+._tn8j1dpa.emoji-common-select-on-hover:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}

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

@@ -14,7 +14,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _EmojiUtils = require("../../api/EmojiUtils");
 var _constants = require("../../util/constants");
@@ -330,7 +329,7 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
     "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: (0, _runtime.ax)([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j2tgk _3naf2tgk _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j2tgk _3naf2tgk _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc", className]),
+    className: (0, _runtime.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: function onKeyDown(event) {
       return handleKeyDown(props, event);
     },
@@ -344,12 +343,7 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
       handleFocus(props, event);
     },
     title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
-  }, other, {
-    style: {
-      "--_1y60f1n": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")),
-      "--_1rebzxw": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
-    }
-  }), children);
+  }, other), children);
 });
 var Emoji = exports.Emoji = function Emoji(props) {
   var emoji = props.emoji;

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

@@ -1,7 +1,7 @@
 
-._n7zl1syp{border-bottom:var(--_10k8kuu)}._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/cjs/components/common/EmojiActions.js

@@ -14,7 +14,6 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _EmojiDeletePreview = _interopRequireDefault(require("./EmojiDeletePreview"));
 var _EmojiUploadPicker = _interopRequireDefault(require("./EmojiUploadPicker"));
@@ -167,10 +166,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
   }, [showToneSelector, onToneSelectorCancelled]);
   if (uploading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1syp _16qs1ueq"]),
-      style: {
-        "--_10k8kuu": (0, _runtime.ix)("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N30A, ")")))
-      }
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
       onUploadCancelled: onUploadCancelled,
       onUploadEmoji: onUploadEmoji,
@@ -181,10 +177,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
   }
   if (emojiToDelete) {
     return /*#__PURE__*/React.createElement("div", {
-      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1syp _16qs1ueq"]),
-      style: {
-        "--_10k8kuu": (0, _runtime.ix)("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N30A, ")")))
-      }
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
       emoji: emojiToDelete,
       onDeleteEmoji: onDeleteEmoji,
@@ -195,10 +188,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     "data-testid": emojiActionsTestId,
     onMouseLeave: onMouseLeaveHandler,
     onBlur: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
-    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1syp _16qs1ueq"]),
-    style: {
-      "--_10k8kuu": (0, _runtime.ix)("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N30A, ")")))
-    }
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement(_EmojiPickerListSearch.EmojiPickerListSearch, {

package/dist/cjs/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/cjs/components/common/EmojiDeletePreview.js

@@ -109,7 +109,7 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
           emojiShortName: emoji.shortName
         }
       })))), /*#__PURE__*/React.createElement("div", {
-        className: (0, _runtime.ax)(["_11c8fhey _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txf1igg _1qz31b66"])
+        className: (0, _runtime.ax)(["_11c8fhey _1e0c1txw _4t3i1ylp _4cvr1h6o _1bah1yb4 _19l3zwfg _rtyst9kd _m73io7ol _1txfwu06 _1qz31b66"])
       }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
         emoji: emoji
       }), /*#__PURE__*/React.createElement("div", {

package/dist/cjs/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/cjs/components/common/EmojiErrorMessage.js

@@ -10,16 +10,15 @@ exports.emojiErrorScreenreaderTestId = exports.emojiErrorMessageTooltipTestId =
 require("./EmojiErrorMessage.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("../i18n");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var 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"
 };
 var emojiErrorScreenreaderTestId = exports.emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 var emojiErrorMessageTestId = exports.emojiErrorMessageTestId = 'emoji-error-message';

package/dist/cjs/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/cjs/components/common/EmojiPlaceholder.js

@@ -55,7 +55,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [_styles.placeholder, xcss].join(' ')]),
+    className: (0, _runtime.ax)(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhk1l7x _s7n4nkob _o5721q9c _y3gn1h6o", [_styles.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/cjs/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}
-._pnmbovqm:first-of-type{color:var(--_5xk3r4)}
-._syaz121t{color:var(--_1pseksa)}
-._syazovqm{color:var(--_5xk3r4)}
+._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/cjs/components/common/EmojiPreviewComponent.js

@@ -10,7 +10,6 @@ exports.EmojiPreviewComponent = void 0;
 require("./EmojiPreviewComponent.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var emojiName = null;
@@ -30,15 +29,8 @@ var EmojiPreviewComponent = exports.EmojiPreviewComponent = function EmojiPrevie
   })), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
   }, emoji.name && /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1ule _syazovqm _1bto1l2s _o5721q9c _299mangw"]),
-    style: {
-      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")"))
-    }
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1ule _syazi7uo _1bto1l2s _o5721q9c _299mangw"])
   }, emoji.name), /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_11c8rymc _1reo15vq _18m915vq _1e0c1ule _syaz121t _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hwfhey _pnmbovqm"]),
-    style: {
-      "--_1pseksa": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N400, ")")),
-      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")"))
-    }
+    className: (0, _runtime.ax)(["_11c8wadc _1reo15vq _18m915vq _1e0c1ule _syazazsu _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hwfhey _pnmbi7uo"])
   }, emoji.shortName)));
 };

package/dist/cjs/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/cjs/components/common/EmojiRadioButton.js

@@ -10,7 +10,6 @@ exports.default = exports.EmojiRadioButton = void 0;
 require("./EmojiRadioButton.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _colors = require("@atlaskit/theme/colors");
 var _mouse = require("../../util/mouse");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 var _constants = require("../../util/constants");
@@ -19,7 +18,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var emojiButton = null;
 var emojiRadio = {
-  default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1n2i _1i1213zc"
+  default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1y54 _1i1213zc"
 };
 var handleMouseDown = function handleMouseDown(props, event) {
   var onSelected = props.onSelected;

package/dist/cjs/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}
-._1w901vvm._1w901vvm{color:var(--_bbz764)}
+._1w90azsu._1w90azsu{color:var(--ds-text-subtle,#505258)}
 ._2lx21bp4{flex-direction:column}
 ._34ir1o36 input{outline-width:medium}
 ._4cvresu3{align-items:flex-end}

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

@@ -14,7 +14,6 @@ var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
@@ -84,13 +83,10 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     "data-testid": uploadEmojiComponentTestId,
     className: (0, _runtime.ax)(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_11c8rymc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
+    className: (0, _runtime.ax)(["_11c8wadc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
-    className: (0, _runtime.ax)(["_1w901vvm", "_11c8wadc _k48p1pd9"]),
-    style: {
-      "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
-    }
+    className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
   }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw"])
   }, /*#__PURE__*/React.createElement(_standardButton.default, {

package/dist/cjs/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/cjs/components/common/Scrollable.js

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

package/dist/cjs/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}
-._7ehi1r2v:focus{box-shadow:var(--_1rebzxw)}
+._7ehi1y54:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
 ._nt751r31:focus{outline-color:currentColor}

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

@@ -11,7 +11,6 @@ require("./TonePreviewButton.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var tonePreviewTestId = exports.tonePreviewTestId = 'tone-preview';
@@ -33,14 +32,12 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     "aria-controls": "emoji-picker-tone-selector"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-
+    style: {
+      overflow: 'hidden'
+    },
     "data-testid": tonePreviewTestId,
     type: "button",
-    className: (0, _runtime.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 _7ehi1r2v _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"]),
-    style: {
-      overflow: 'hidden',
-      "--_1rebzxw": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
-    }
+    className: (0, _runtime.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.default, {
     emoji: emoji,
     selectOnHover: selectOnHover,

package/dist/cjs/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)}
-._bfhk1v65{background-color:var(--_1kd7x7o)}
+._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
 ._ca0qidpf{padding-top:0}
 ._jqf61teg{label:tooltip-shortcut}
 ._n3tdidpf{padding-bottom:0}

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

@@ -9,7 +9,6 @@ exports.ToolTipContentWithKeymap = void 0;
 require("./ToolTipContentWithKeymap.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _colors = require("@atlaskit/theme/colors");
 var _keymaps = require("../../util/keymaps");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var tooltipShortcutStyle = null;
@@ -19,9 +18,6 @@ var ToolTipContentWithKeymap = exports.ToolTipContentWithKeymap = /*#__PURE__*/_
     keymap = _ref.keymap;
   var shortcut = shortcutOverride || keymap && (0, _keymaps.formatShortcut)(keymap);
   return shortcut || description ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_2rkofajl _bfhk1v65 _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"]),
-    style: {
-      "--_1kd7x7o": (0, _runtime.ix)("var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"))
-    }
+    className: (0, _runtime.ax)(["_2rkofajl _bfhk1vck _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"])
   }, shortcut)) : null;
 });

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

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

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

@@ -13,7 +13,6 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _css = require("@atlaskit/css");
-var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -151,10 +150,7 @@ var CategorySelector = function CategorySelector(props) {
     }));
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkxd9y _dpd31txw"]),
-    style: {
-      "--_mj39lq": (0, _runtime.ix)("var(--ds-surface-sunken, ".concat(_colors.N30, ")"))
-    }
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkhfxm _dpd31txw"])
   }, categoriesSection);
 };
 var _default = exports.default = CategorySelector;

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

@@ -1,6 +1,6 @@
 
-._19itc0ux{border:var(--_6l0v0b)}
-._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/cjs/components/picker/EmojiPicker.js

@@ -17,7 +17,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _colors = require("@atlaskit/theme/colors");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../util/analytics");
 var _LoadingEmojiComponent = _interopRequireDefault(require("../common/LoadingEmojiComponent"));
@@ -79,10 +78,7 @@ var EmojiPickerInternal = exports.EmojiPickerInternal = /*#__PURE__*/function (_
       _analytics.ufoExperiences['emoji-picker-opened'].markFMP();
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: handlePickerRef,
-        className: (0, _runtime.ax)(["_19itc0ux _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"]),
-        style: {
-          "--_6l0v0b": (0, _runtime.ix)("".concat("var(--ds-border, ".concat(_colors.N40, ")"), " ", "var(--ds-border-width, 1px)", " solid"))
-        }
+        className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
       }, item.renderItem());
     }
   }, {

package/dist/cjs/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)}
-._syazovqm{color:var(--_5xk3r4)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vchhusvi{box-sizing:border-box}

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

@@ -9,7 +9,6 @@ exports.default = exports.RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID = void 0;
 require("./EmojiPickerCategoryHeading.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _typeHelpers = require("../../util/type-helpers");
 var _i18n = require("../i18n");
@@ -33,10 +32,7 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
     role: "rowheader"
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_11c8fhey _vchhusvi _syazovqm _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"]),
-    style: {
-      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")"))
-    }
+    className: (0, _runtime.ax)(["_11c8fhey _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
   }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
 };
 var _default = exports.default = EmojiPickerCategoryHeading;

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

@@ -1,6 +1,6 @@
 
-._19itc0ux{border:var(--_6l0v0b)}
-._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}
 ._1bsb10mj{width:var(--_gsvyy7)}
 ._1e0c1txw{display:flex}

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

@@ -14,7 +14,6 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _colors = require("@atlaskit/theme/colors");
 var _reactDom = require("react-dom");
 var _reactIntlNext = require("react-intl-next");
 var _EmojiRepository = require("../../api/EmojiRepository");
@@ -35,7 +34,7 @@ var _i18n = require("../i18n");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 var emojiPickerWidth = 350;
@@ -502,9 +501,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: (0, _runtime.ax)(["_19itc0ux _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+    className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
     style: {
-      "--_6l0v0b": (0, _runtime.ix)("".concat("var(--ds-border, ".concat(_colors.N40, ")"), " ", "var(--ds-border-width, 1px)", " solid")),
       "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
     }

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

@@ -1,5 +1,5 @@
 
-._x3do1syp{border-top:var(--_10k8kuu)}._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/cjs/components/picker/EmojiPickerFooter.js

@@ -10,7 +10,6 @@ require("./EmojiPickerFooter.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var emojiPickerFooter = null;
@@ -20,10 +19,7 @@ var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
   var selectedEmoji = _ref.selectedEmoji;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiPickerFooterTestId,
-    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1syp _16qs2hsd"]),
-    style: {
-      "--_10k8kuu": (0, _runtime.ix)("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N30A, ")")))
-    }
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1uh4 _16qsvjqj"])
   }, selectedEmoji && /*#__PURE__*/React.createElement(_EmojiPreviewComponent.EmojiPreviewComponent, {
     emoji: selectedEmoji
   }));

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

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