@atlaskit/emoji 69.0.7 → 69.0.9

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

@@ -1,13 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* TonePreviewButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./TonePreviewButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { emojiButton, hidden } from './styles';
+import { B100 } from '@atlaskit/theme/colors';
 import Emoji from './Emoji';
 export var tonePreviewTestId = 'tone-preview';
+var emojiButton = null;
+var hidden = null;
 export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var emoji = props.emoji,
     selectOnHover = props.selectOnHover,
@@ -16,23 +16,23 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
-  return jsx("button", {
-    ref: ref
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: [emojiButton, !isVisible && hidden],
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
     onClick: onSelected,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
     "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"
-  }, jsx(Emoji, {
+    type: "button",
+    className: ax(["_19itidpf _2rkosqtm _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": ix("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")))
+    }
+  }, /*#__PURE__*/React.createElement(Emoji, {
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,

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

@@ -1,13 +1,11 @@
+/* ToneSelector.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "./ToneSelector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { memo, useEffect, useMemo, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
@@ -15,7 +13,7 @@ import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import EmojiRadioButton from './EmojiRadioButton';
 import { useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
-import { hidden } from './styles';
+var hidden = null;
 export var toneSelectorTestId = 'tone-selector';
 var extractAllTones = function extractAllTones(emoji) {
   if (emoji.skinVariations) {
@@ -81,16 +79,14 @@ export var ToneSelectorInternal = function ToneSelectorInternal(props) {
     fireAnalyticsEvent(toneSelectorOpenedEvent({}));
   }
   isMounted.current = true;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     "data-testid": toneSelectorTestId,
     id: "emoji-picker-tone-selector",
-    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: !isVisible && hidden
+    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
+    className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
   }, emojiToneCollection.map(function (tone) {
-    return jsx(EmojiRadioButton, {
+    return /*#__PURE__*/React.createElement(EmojiRadioButton, {
       ref: tone.isSelected ? selectedToneRadioRef : null,
       defaultChecked: tone.isSelected,
       ariaLabelText: tone.label,

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

@@ -1,18 +1,19 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* ToolTipContentWithKeymap.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolTipContentWithKeymap.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { N400 } from '@atlaskit/theme/colors';
 import { formatShortcut } from '../../util/keymaps';
-import { tooltipShortcutStyle } from './styles';
+var tooltipShortcutStyle = null;
 export var ToolTipContentWithKeymap = /*#__PURE__*/React.memo(function (_ref) {
   var description = _ref.description,
     shortcutOverride = _ref.shortcutOverride,
     keymap = _ref.keymap;
   var shortcut = shortcutOverride || keymap && formatShortcut(keymap);
-  return shortcut || description ? jsx(Fragment, null, description, shortcut && description && "\xA0", shortcut && jsx("span", {
-    css: tooltipShortcutStyle
+  return shortcut || description ? /*#__PURE__*/React.createElement(Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2rko1l7b _bfhk1v65 _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"]),
+    style: {
+      "--_1kd7x7o": ix("var(--ds-background-inverse-subtle, ".concat(N400, ")"))
+    }
   }, shortcut)) : null;
 });

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

@@ -1,9 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-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';
 export var commonSelectedStyles = 'emoji-common-selected';
 export var selectOnHoverStyles = 'emoji-common-select-on-hover';
 export var emojiSprite = 'emoji-common-emoji-sprite';
@@ -12,509 +6,5 @@ export var emojiImage = 'emoji-common-emoji-image';
 export var emojiDeleteButton = 'emoji-common-deleteButton';
 export var emojiMainStyle = 'emoji-common-main-styles';
 export var deletableEmoji = 'emoji-common-deletable';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var deleteButton = css({
-  // hide by default
-  visibility: 'hidden',
-  display: 'flex',
-  position: 'absolute',
-  top: "var(--ds-space-negative-100, -8px)",
-  right: "var(--ds-space-negative-100, -8px)",
-  zIndex: 1,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '& span': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 0
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiToneSelectorContainer = css({
-  flex: 1,
-  display: 'flex',
-  justifyContent: 'flex-end',
-  padding: '11px 10px 12px 0'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiImageContainer = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  backgroundColor: 'transparent',
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  // Ensure along with vertical align middle, we don't increase the line height for p and some
-  // headings. Smaller headings get a slight increase in height, cannot add more negative margin
-  // as a "selected" emoji (e.g. in the editor) will not look good.
-  margin: '-1px 0',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  img: {
-    display: 'block'
-  }
-}, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundColor: akEmojiSelectedBackgroundColor
-}), "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover .").concat(emojiDeleteButton), {
-  // show delete button on hover
-  visibility: 'visible'
-}), "&.".concat(deletableEmoji), {
-  position: 'relative'
-}), "&.".concat(deletableEmoji, ":focus-within .").concat(emojiDeleteButton), {
-  visibility: 'visible'
-}), '&:focus', {
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
-  transitionDuration: '0s, 0.2s',
-  outline: 'none'
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiSpriteContainer = css(_defineProperty(_defineProperty(_defineProperty({
-  display: 'inline-block',
-  // Ensure along with vertical align middle, we don't increase the line height for h1..h6, and p
-  margin: '-1px 0'
-}, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundColor: akEmojiSelectedBackgroundColor
-}), ".".concat(emojiSprite), {
-  background: 'transparent no-repeat',
-  display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  minHeight: "".concat(defaultEmojiHeight, "px"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  minWidth: "".concat(defaultEmojiHeight, "px"),
-  verticalAlign: 'middle'
-}), '&:focus', {
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
-  transitionDuration: '0s, 0.2s',
-  outline: 'none'
-}));
 export var placeholder = 'emoji-common-placeholder';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var placeholderContainer = css({
-  position: 'relative',
-  margin: '-1px 0',
-  display: 'inline-block',
-  background: "var(--ds-border, #f7f7f7)",
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  overflow: 'hidden',
-  verticalAlign: 'middle',
-  whiteSpace: 'nowrap',
-  textAlign: 'center'
-});
-var easeSweep = keyframes({
-  from: {
-    transform: 'translateX(-100%)'
-  },
-  to: {
-    transform: 'translateX(100%)'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var placeholderContainerAnimated = css({
-  '&::before': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    background: "var(--ds-background-neutral, ".concat(N20A, ")"),
-    height: '100%',
-    width: '100%',
-    animation: "".concat(easeSweep, " 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite")
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var hidden = css({
-  opacity: 0,
-  visibility: 'hidden',
-  display: 'none'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiButton = css(_defineProperty(_defineProperty(_defineProperty({
-  backgroundColor: 'transparent',
-  border: '0',
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  cursor: 'pointer',
-  padding: 0,
-  position: 'relative',
-  display: 'inline-block'
-}, '&::-moz-focus-inner', {
-  border: '0 none',
-  padding: 0
-}), '&>span', _defineProperty(_defineProperty({
-  padding: "var(--ds-space-075, 6px)"
-}, "&>.".concat(emojiSprite), {
-  height: '24px',
-  width: '24px'
-}), "&>img", {
-  height: '24px',
-  width: '24px'
-})), '&:focus', {
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
-  transitionDuration: '0s, 0.2s',
-  outline: 'none'
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiRadio = css({
-  opacity: 0,
-  position: 'absolute',
-  top: '-10px',
-  left: '-10px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '+span': {
-    borderRadius: "var(--ds-border-radius-100, 3px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:focus + span': {
-    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
-    transitionDuration: '0s, 0.2s',
-    outline: 'none'
-  }
-});
-
-// Emoji Preview
-export var emojiPickerAddEmoji = 'emoji-picker-add-emoji';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var previewText = css({
-  display: 'flex',
-  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 */,
-  flexGrow: 1,
-  flexShrink: 1
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiName = css(_defineProperty({
-  display: 'block',
-  color: "var(--ds-text, ".concat(N900, ")"),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-}, '&:first-letter', {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  textTransform: 'uppercase'
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiShortName = css(_defineProperty({
-  display: 'block',
-  color: "var(--ds-text-subtle, ".concat(N200, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 1,
-  marginBottom: "var(--ds-space-negative-025, -2px)",
-  overflow: 'hidden',
-  paddingBottom: "var(--ds-space-025, 2px)",
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-}, '&:first-of-type', {
-  color: "var(--ds-text, ".concat(N900, ")"),
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var previewImg = css(_defineProperty(_defineProperty({
-  display: 'inline-block',
-  flex: 'initial',
-  width: '32px'
-}, "& .".concat(emojiSprite, ", span[role=\"img\"]"), {
-  width: '32px',
-  height: '32px',
-  padding: 0,
-  maxHeight: 'inherit'
-}), "& span[role=\"img\"] > img", {
-  position: 'relative',
-  left: '50%',
-  top: '50%',
-  transform: 'translateX(-50%) translateY(-50%)',
-  maxHeight: '32px',
-  maxWidth: '32px',
-  padding: 0,
-  display: 'block'
-}));
-
-// Scrollable
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiScrollable = css({
-  border: "1px solid ".concat("var(--ds-border, #fff)"),
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  display: 'block',
-  margin: '0',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  padding: '0'
-});
-
-// EmojiUpload
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiUploadTop = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  paddingBottom: '7px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-end',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var uploadChooseFileMessage = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&&': {
-    color: "var(--ds-text-subtle, ".concat(N300, ")")
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var closeEmojiUploadButton = css({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiUploadBottom = css({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var uploadChooseFileRow = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  paddingBottom: '7px'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var uploadChooseFileEmojiName = css({
-  flex: '1 1 auto',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginRight: '5px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  input: _defineProperty(_defineProperty({
-    background: 'transparent',
-    border: 0,
-    outline: 'none'
-  }, '&:invalid', {
-    boxShadow: 'none'
-  }), '&::-ms-clear', {
-    display: 'none'
-  })
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var uploadPreviewFooter = css({
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100px',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  padding: '10px'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var uploadPreview = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var uploadPreviewText = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  h5: {
-    color: "var(--ds-text-subtle, ".concat(N300, ")"),
-    paddingBottom: "var(--ds-space-050, 4px)",
-    font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  img: {
-    maxHeight: '20px',
-    maxWidth: '50px'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var bigEmojiPreview = css({
-  paddingLeft: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  img: {
-    maxHeight: '40px',
-    maxWidth: '100px'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var uploadAddRow = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  paddingTop: '10px'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// Emoji Delete preview
-
-export var submitDelete = 'emoji-submit-delete';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var deletePreview = css({
-  height: '100px',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  padding: '10px',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'flex-end'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var deleteText = css({
-  height: '64px',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&:first-of-type': {
-    color: "var(--ds-text-subtle, ".concat(N300, ")"),
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '16px'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var headingH5 = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&&': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-    fontWeight: "var(--ds-font-weight-semibold, 600)"
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var requiredSymbol = css({
-  paddingLeft: "var(--ds-space-025, 2px)",
-  color: "var(--ds-text-danger, ".concat(R400, ")"),
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var previewButtonGroup = css({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var deleteFooter = css(_defineProperty({
-  display: 'flex',
-  height: '40px',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  img: {
-    maxHeight: '32px',
-    maxWidth: '72px'
-  }
-}, ".".concat(submitDelete), {
-  width: '84px',
-  fontWeight: "var(--ds-font-weight-bold, bold)",
-  marginRight: "var(--ds-space-050, 4px)"
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiDeleteErrorMessage = css({
-  display: 'flex',
-  color: "var(--ds-text-danger, ".concat(R400, ")"),
-  alignItems: 'center',
-  justifyContent: 'flex-end',
-  paddingRight: "var(--ds-space-050, 4px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var addCustomEmojiButton = css({
-  maxWidth: '285px'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiActionsWrapper = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var tooltipShortcutStyle = css({
-  borderRadius: '3px',
-  backgroundColor: "var(--ds-background-inverse-subtle, ".concat(N400, ")"),
-  padding: "0 ".concat("var(--ds-space-025, 2px)"),
-  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
-  /* stylelint-disable-next-line */
-  label: 'tooltip-shortcut'
-});
+export var emojiPickerAddEmoji = 'emoji-picker-add-emoji';