@atlaskit/emoji 67.6.15 → 67.6.17

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/emoji
 
+## 67.6.17
+
+### Patch Changes
+
+- [#84829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84829) [`a6299ec57bc3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6299ec57bc3) - Internal change to replace hardcoded font fallback values with an exported constant. There is no expected visual difference.
+
+## 67.6.16
+
+### Patch Changes
+
+- [#83297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83297) [`6b1707c169e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1707c169e0) - The internal composition of this component has changed. There is no expected change in behaviour.
+
 ## 67.6.15
 
 ### Patch Changes

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.tooltipShortcutStyle = exports.submitDelete = exports.selectOnHoverStyles = exports.requiredSymbol = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hidden = exports.headingH5 = exports.emojiUploadTop = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiSpriteContainer = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiRadio = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImageContainer = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.deletableEmoji = exports.commonSelectedStyles = exports.closeEmojiUploadButton = exports.cancelButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _constants = require("../../util/constants");
 var _sharedStyles = require("../../util/shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _constants2 = require("@atlaskit/theme/constants");
-var _css, _css2, _templateObject, _span, _css3, _css6, _input;
+var _typography = require("@atlaskit/theme/typography");
+var _css, _css2, _span, _css3, _css6, _input;
 var commonSelectedStyles = exports.commonSelectedStyles = 'emoji-common-selected';
 var selectOnHoverStyles = exports.selectOnHoverStyles = 'emoji-common-select-on-hover';
 var emojiSprite = exports.emojiSprite = 'emoji-common-emoji-sprite';
@@ -91,7 +91,14 @@ var placeholderContainer = exports.placeholderContainer = (0, _react.css)({
   whiteSpace: 'nowrap',
   textAlign: 'center'
 });
-var easeSweep = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateX(-100%);\n  }\n  to   {\n    transform: translateX(100%);\n  }\n"])));
+var easeSweep = (0, _react.keyframes)({
+  from: {
+    transform: 'translateX(-100%)'
+  },
+  to: {
+    transform: 'translateX(100%)'
+  }
+});
 var placeholderContainerAnimated = exports.placeholderContainerAnimated = (0, _react.css)({
   '&::before': {
     content: '""',
@@ -154,6 +161,7 @@ var previewText = exports.previewText = (0, _react.css)({
   flexDirection: 'column',
   alignSelf: 'center',
   marginTop: "var(--ds-space-negative-025, -2px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -187,6 +195,7 @@ var preview = exports.preview = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'nowrap',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   height: '32px',
   alignItems: 'center'
@@ -227,12 +236,14 @@ var emojiScrollable = exports.emojiScrollable = (0, _react.css)({
 
 var emojiUpload = exports.emojiUpload = (0, _react.css)({
   height: '78px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around'
 });
 var emojiUploadTop = exports.emojiUploadTop = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingBottom: '7px',
   display: 'flex',
   justifyContent: 'space-between',
@@ -253,10 +264,12 @@ var emojiUploadBottom = exports.emojiUploadBottom = (0, _react.css)({
 var uploadChooseFileRow = exports.uploadChooseFileRow = (0, _react.css)({
   display: 'flex',
   justifyContent: 'space-between',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingBottom: '7px'
 });
 var uploadChooseFileEmojiName = exports.uploadChooseFileEmojiName = (0, _react.css)({
   flex: '1 1 auto',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginRight: '5px',
   input: (_input = {
     background: 'transparent',
@@ -275,6 +288,7 @@ var uploadPreviewFooter = exports.uploadPreviewFooter = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column',
   height: '100px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px'
 });
 var uploadPreview = exports.uploadPreview = (0, _react.css)({
@@ -283,6 +297,7 @@ var uploadPreview = exports.uploadPreview = (0, _react.css)({
   alignItems: 'center',
   background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
   borderRadius: "var(--ds-border-radius-100, 3px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px'
 });
 var uploadPreviewText = exports.uploadPreviewText = (0, _react.css)({
@@ -307,11 +322,14 @@ var uploadAddRow = exports.uploadAddRow = (0, _react.css)({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingTop: '10px'
 });
 var addCustomEmoji = exports.addCustomEmoji = (0, _react.css)({
   alignSelf: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBottom: '10px'
 });
 
@@ -320,6 +338,7 @@ var addCustomEmoji = exports.addCustomEmoji = (0, _react.css)({
 var submitDelete = exports.submitDelete = 'emoji-submit-delete';
 var deletePreview = exports.deletePreview = (0, _react.css)({
   height: '100px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
@@ -335,7 +354,7 @@ var deleteText = exports.deleteText = (0, _react.css)({
 });
 var headingH5 = exports.headingH5 = (0, _react.css)({
   '&&': {
-    font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: "var(--ds-font-body-UNSAFE_small, ".concat(_typography.fontFallback.body.UNSAFE_small, ")"),
     fontWeight: "var(--ds-font-weight-semibold, 600)"
   }
 });
@@ -352,7 +371,7 @@ var deleteFooter = exports.deleteFooter = (0, _react.css)((0, _defineProperty2.d
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")"),
   img: {
     maxHeight: '32px',
     maxWidth: '72px'
@@ -372,12 +391,14 @@ var emojiDeleteErrorMessage = exports.emojiDeleteErrorMessage = (0, _react.css)(
 var emojiChooseFileErrorMessage = exports.emojiChooseFileErrorMessage = (0, _react.css)({
   display: 'flex',
   color: "var(--ds-text-danger, ".concat(_colors.R300, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 var emojiPreviewErrorMessage = exports.emojiPreviewErrorMessage = (0, _react.css)({
   display: 'inline-flex',
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'
@@ -406,7 +427,9 @@ var cancelButton = exports.cancelButton = (0, _react.css)({
   maxWidth: '100px'
 });
 var buttonSpinner = exports.buttonSpinner = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginRight: '10px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px'
 });
 var emojiActionsWrapper = exports.emojiActionsWrapper = (0, _react.css)({

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

@@ -164,6 +164,7 @@ var emojiItem = exports.emojiItem = (0, _react.css)((_css5 = {
   height: '24px'
 }), (0, _defineProperty2.default)(_css5, "& .".concat(_styles.placeholder), {
   padding: "var(--ds-space-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '7px',
   minWidth: '24px',
   maxWidth: '24px'

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

@@ -18,6 +18,7 @@ var emojiUploadWidget = exports.emojiUploadWidget = (0, _react.css)({
   width: "".concat(_constants.emojiPickerWidth, "px"),
   marginBottom: "var(--ds-space-100, 8px)",
   minWidth: "".concat(_constants.emojiPickerWidth, "px"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '-10px',
   marginTop: "var(--ds-space-negative-200, -16px)"
 });

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

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

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

@@ -3,6 +3,7 @@ import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { B100, N20, N200, N20A, N300, N400, N900, R300, R400 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 export const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -90,14 +91,14 @@ export const placeholderContainer = css({
   whiteSpace: 'nowrap',
   textAlign: 'center'
 });
-const easeSweep = keyframes`
-  from {
-    transform: translateX(-100%);
-  }
-  to   {
-    transform: translateX(100%);
+const easeSweep = keyframes({
+  from: {
+    transform: 'translateX(-100%)'
+  },
+  to: {
+    transform: 'translateX(100%)'
   }
-`;
+});
 export const placeholderContainerAnimated = css({
   '&::before': {
     content: '""',
@@ -168,6 +169,7 @@ export const previewText = css({
   flexDirection: 'column',
   alignSelf: 'center',
   marginTop: "var(--ds-space-negative-025, -2px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -203,6 +205,7 @@ export const preview = css({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'nowrap',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   height: '32px',
   alignItems: 'center'
@@ -245,12 +248,14 @@ export const emojiScrollable = css({
 
 export const emojiUpload = css({
   height: '78px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around'
 });
 export const emojiUploadTop = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingBottom: '7px',
   display: 'flex',
   justifyContent: 'space-between',
@@ -271,10 +276,12 @@ export const emojiUploadBottom = css({
 export const uploadChooseFileRow = css({
   display: 'flex',
   justifyContent: 'space-between',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingBottom: '7px'
 });
 export const uploadChooseFileEmojiName = css({
   flex: '1 1 auto',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginRight: '5px',
   input: {
     background: 'transparent',
@@ -295,6 +302,7 @@ export const uploadPreviewFooter = css({
   display: 'flex',
   flexDirection: 'column',
   height: '100px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px'
 });
 export const uploadPreview = css({
@@ -303,6 +311,7 @@ export const uploadPreview = css({
   alignItems: 'center',
   background: `var(--ds-background-neutral, ${N20})`,
   borderRadius: "var(--ds-border-radius-100, 3px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px'
 });
 export const uploadPreviewText = css({
@@ -327,11 +336,14 @@ export const uploadAddRow = css({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingTop: '10px'
 });
 export const addCustomEmoji = css({
   alignSelf: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBottom: '10px'
 });
 
@@ -340,6 +352,7 @@ export const addCustomEmoji = css({
 export const submitDelete = 'emoji-submit-delete';
 export const deletePreview = css({
   height: '100px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
@@ -355,7 +368,7 @@ export const deleteText = css({
 });
 export const headingH5 = css({
   '&&': {
-    font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: `var(--ds-font-body-UNSAFE_small, ${fontFallback.body.UNSAFE_small})`,
     fontWeight: "var(--ds-font-weight-semibold, 600)"
   }
 });
@@ -372,7 +385,7 @@ export const deleteFooter = css({
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-body, ${fontFallback.body.medium})`,
   img: {
     maxHeight: '32px',
     maxWidth: '72px'
@@ -393,12 +406,14 @@ export const emojiDeleteErrorMessage = css({
 export const emojiChooseFileErrorMessage = css({
   display: 'flex',
   color: `var(--ds-text-danger, ${R300})`,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 export const emojiPreviewErrorMessage = css({
   display: 'inline-flex',
   color: `var(--ds-text-danger, ${R400})`,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'
@@ -427,7 +442,9 @@ export const cancelButton = css({
   maxWidth: '100px'
 });
 export const buttonSpinner = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginRight: '10px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px'
 });
 export const emojiActionsWrapper = css({

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

@@ -164,6 +164,7 @@ export const emojiItem = css({
   },
   [`& .${placeholder}`]: {
     padding: "var(--ds-space-0, 0px)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     margin: '7px',
     minWidth: '24px',
     maxWidth: '24px'

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

@@ -13,6 +13,7 @@ export const emojiUploadWidget = css({
   width: `${emojiPickerWidth}px`,
   marginBottom: "var(--ds-space-100, 8px)",
   minWidth: `${emojiPickerWidth}px`,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '-10px',
   marginTop: "var(--ds-space-negative-200, -16px)"
 });

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

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

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

@@ -1,11 +1,11 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css, _css2, _templateObject, _span, _css3, _css6, _input;
+var _css, _css2, _span, _css3, _css6, _input;
 import { css, keyframes } from '@emotion/react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { B100, N20, N200, N20A, N300, N400, N900, R300, R400 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 export var commonSelectedStyles = 'emoji-common-selected';
 export var selectOnHoverStyles = 'emoji-common-select-on-hover';
 export var emojiSprite = 'emoji-common-emoji-sprite';
@@ -84,7 +84,14 @@ export var placeholderContainer = css({
   whiteSpace: 'nowrap',
   textAlign: 'center'
 });
-var easeSweep = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: translateX(-100%);\n  }\n  to   {\n    transform: translateX(100%);\n  }\n"])));
+var easeSweep = keyframes({
+  from: {
+    transform: 'translateX(-100%)'
+  },
+  to: {
+    transform: 'translateX(100%)'
+  }
+});
 export var placeholderContainerAnimated = css({
   '&::before': {
     content: '""',
@@ -147,6 +154,7 @@ export var previewText = css({
   flexDirection: 'column',
   alignSelf: 'center',
   marginTop: "var(--ds-space-negative-025, -2px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -180,6 +188,7 @@ export var preview = css({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'nowrap',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   height: '32px',
   alignItems: 'center'
@@ -220,12 +229,14 @@ export var emojiScrollable = css({
 
 export var emojiUpload = css({
   height: '78px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around'
 });
 export var emojiUploadTop = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingBottom: '7px',
   display: 'flex',
   justifyContent: 'space-between',
@@ -246,10 +257,12 @@ export var emojiUploadBottom = css({
 export var uploadChooseFileRow = css({
   display: 'flex',
   justifyContent: 'space-between',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingBottom: '7px'
 });
 export var uploadChooseFileEmojiName = css({
   flex: '1 1 auto',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginRight: '5px',
   input: (_input = {
     background: 'transparent',
@@ -268,6 +281,7 @@ export var uploadPreviewFooter = css({
   display: 'flex',
   flexDirection: 'column',
   height: '100px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px'
 });
 export var uploadPreview = css({
@@ -276,6 +290,7 @@ export var uploadPreview = css({
   alignItems: 'center',
   background: "var(--ds-background-neutral, ".concat(N20, ")"),
   borderRadius: "var(--ds-border-radius-100, 3px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px'
 });
 export var uploadPreviewText = css({
@@ -300,11 +315,14 @@ export var uploadAddRow = css({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingTop: '10px'
 });
 export var addCustomEmoji = css({
   alignSelf: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBottom: '10px'
 });
 
@@ -313,6 +331,7 @@ export var addCustomEmoji = css({
 export var submitDelete = 'emoji-submit-delete';
 export var deletePreview = css({
   height: '100px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
@@ -328,7 +347,7 @@ export var deleteText = css({
 });
 export var headingH5 = css({
   '&&': {
-    font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: "var(--ds-font-body-UNSAFE_small, ".concat(fontFallback.body.UNSAFE_small, ")"),
     fontWeight: "var(--ds-font-weight-semibold, 600)"
   }
 });
@@ -345,7 +364,7 @@ export var deleteFooter = css(_defineProperty({
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body, ".concat(fontFallback.body.medium, ")"),
   img: {
     maxHeight: '32px',
     maxWidth: '72px'
@@ -365,12 +384,14 @@ export var emojiDeleteErrorMessage = css({
 export var emojiChooseFileErrorMessage = css({
   display: 'flex',
   color: "var(--ds-text-danger, ".concat(R300, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 export var emojiPreviewErrorMessage = css({
   display: 'inline-flex',
   color: "var(--ds-text-danger, ".concat(R400, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'
@@ -399,7 +420,9 @@ export var cancelButton = css({
   maxWidth: '100px'
 });
 export var buttonSpinner = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginRight: '10px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '10px'
 });
 export var emojiActionsWrapper = css({

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

@@ -158,6 +158,7 @@ export var emojiItem = css((_css5 = {
   height: '24px'
 }), _defineProperty(_css5, "& .".concat(placeholder), {
   padding: "var(--ds-space-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '7px',
   minWidth: '24px',
   maxWidth: '24px'

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

@@ -13,6 +13,7 @@ export var emojiUploadWidget = css({
   width: "".concat(emojiPickerWidth, "px"),
   marginBottom: "var(--ds-space-100, 8px)",
   minWidth: "".concat(emojiPickerWidth, "px"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '-10px',
   marginTop: "var(--ds-space-negative-200, -16px)"
 });

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.6.15",
+  "version": "67.6.17",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,13 +38,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.8.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/textfield": "^6.1.0",
-    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",