@atlaskit/emoji 69.0.7 → 69.0.8

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

@@ -1,17 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = 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.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
-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");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+exports.selectOnHoverStyles = exports.placeholder = exports.emojiSprite = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteButton = exports.deletableEmoji = exports.commonSelectedStyles = void 0;
 var commonSelectedStyles = exports.commonSelectedStyles = 'emoji-common-selected';
 var selectOnHoverStyles = exports.selectOnHoverStyles = 'emoji-common-select-on-hover';
 var emojiSprite = exports.emojiSprite = 'emoji-common-emoji-sprite';
@@ -20,509 +12,5 @@ var emojiImage = exports.emojiImage = 'emoji-common-emoji-image';
 var emojiDeleteButton = exports.emojiDeleteButton = 'emoji-common-deleteButton';
 var emojiMainStyle = exports.emojiMainStyle = 'emoji-common-main-styles';
 var deletableEmoji = exports.deletableEmoji = 'emoji-common-deletable';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var deleteButton = exports.deleteButton = (0, _react.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
-var emojiToneSelectorContainer = exports.emojiToneSelectorContainer = (0, _react.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
-var emojiImageContainer = exports.emojiImageContainer = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-  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: _sharedStyles.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(_colors.B100, ")")),
-  transitionDuration: '0s, 0.2s',
-  outline: 'none'
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var emojiSpriteContainer = exports.emojiSpriteContainer = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-  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: _sharedStyles.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(_constants.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(_constants.defaultEmojiHeight, "px"),
-  verticalAlign: 'middle'
-}), '&:focus', {
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
-  transitionDuration: '0s, 0.2s',
-  outline: 'none'
-}));
 var placeholder = exports.placeholder = 'emoji-common-placeholder';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var placeholderContainer = exports.placeholderContainer = (0, _react.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 = (0, _react.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
-var placeholderContainerAnimated = exports.placeholderContainerAnimated = (0, _react.css)({
-  '&::before': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    background: "var(--ds-background-neutral, ".concat(_colors.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
-var hidden = exports.hidden = (0, _react.css)({
-  opacity: 0,
-  visibility: 'hidden',
-  display: 'none'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var emojiButton = exports.emojiButton = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-  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', (0, _defineProperty2.default)((0, _defineProperty2.default)({
-  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(_colors.B100, ")")),
-  transitionDuration: '0s, 0.2s',
-  outline: 'none'
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var emojiRadio = exports.emojiRadio = (0, _react.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(_colors.B100, ")")),
-    transitionDuration: '0s, 0.2s',
-    outline: 'none'
-  }
-});
-
-// Emoji Preview
-var emojiPickerAddEmoji = exports.emojiPickerAddEmoji = 'emoji-picker-add-emoji';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var previewText = exports.previewText = (0, _react.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
-var emojiName = exports.emojiName = (0, _react.css)((0, _defineProperty2.default)({
-  display: 'block',
-  color: "var(--ds-text, ".concat(_colors.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
-var emojiShortName = exports.emojiShortName = (0, _react.css)((0, _defineProperty2.default)({
-  display: 'block',
-  color: "var(--ds-text-subtle, ".concat(_colors.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(_colors.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
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var previewImg = exports.previewImg = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-  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
-var emojiScrollable = exports.emojiScrollable = (0, _react.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
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var emojiUploadTop = exports.emojiUploadTop = (0, _react.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
-var uploadChooseFileMessage = exports.uploadChooseFileMessage = (0, _react.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(_colors.N300, ")")
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var closeEmojiUploadButton = exports.closeEmojiUploadButton = (0, _react.css)({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var emojiUploadBottom = exports.emojiUploadBottom = (0, _react.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
-var uploadChooseFileRow = exports.uploadChooseFileRow = (0, _react.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
-var uploadChooseFileEmojiName = exports.uploadChooseFileEmojiName = (0, _react.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: (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    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
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var uploadPreview = exports.uploadPreview = (0, _react.css)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var uploadPreviewText = exports.uploadPreviewText = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  h5: {
-    color: "var(--ds-text-subtle, ".concat(_colors.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
-var bigEmojiPreview = exports.bigEmojiPreview = (0, _react.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
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// Emoji Delete preview
-
-var submitDelete = exports.submitDelete = 'emoji-submit-delete';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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',
-  justifyContent: 'flex-end'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var deleteText = exports.deleteText = (0, _react.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(_colors.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
-var headingH5 = exports.headingH5 = (0, _react.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
-var requiredSymbol = exports.requiredSymbol = (0, _react.css)({
-  paddingLeft: "var(--ds-space-025, 2px)",
-  color: "var(--ds-text-danger, ".concat(_colors.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
-var previewButtonGroup = exports.previewButtonGroup = (0, _react.css)({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var deleteFooter = exports.deleteFooter = (0, _react.css)((0, _defineProperty2.default)({
-  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
-var emojiDeleteErrorMessage = exports.emojiDeleteErrorMessage = (0, _react.css)({
-  display: 'flex',
-  color: "var(--ds-text-danger, ".concat(_colors.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
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var addCustomEmojiButton = exports.addCustomEmojiButton = (0, _react.css)({
-  maxWidth: '285px'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var emojiActionsWrapper = exports.emojiActionsWrapper = (0, _react.css)({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var tooltipShortcutStyle = exports.tooltipShortcutStyle = (0, _react.css)({
-  borderRadius: '3px',
-  backgroundColor: "var(--ds-background-inverse-subtle, ".concat(_colors.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'
-});
+var emojiPickerAddEmoji = exports.emojiPickerAddEmoji = 'emoji-picker-add-emoji';

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

@@ -11,7 +11,7 @@ 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");
+var _EmojiPreviewComponent = require("../../common/EmojiPreviewComponent");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var emojiPickerFooter = null;

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

@@ -22,7 +22,6 @@ var _EmojiPickerSizes = require("./EmojiPickerSizes");
 var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
 var _EmojiPickerVirtualItems2 = require("../compiled/picker/EmojiPickerVirtualItems");
 var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
-var _EmojiActions2 = _interopRequireDefault(require("../compiled/common/EmojiActions"));
 var _utils = require("./utils");
 var _VirtualList = require("./VirtualList");
 var _VirtualList2 = require("../compiled/picker/VirtualList");
@@ -36,7 +35,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // when cleaning up `platform_editor_css_migrate_emoji`, delete these consts and rename the import
-var EmojiActions = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _EmojiActions2.default, _EmojiActions.default);
 var EmojiPickerTabPanel = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _EmojiPickerTabPanel2.default, _EmojiPickerTabPanel.default);
 var VirtualList = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _VirtualList2.VirtualList, _VirtualList.VirtualList);
 var virtualItemRenderer = (0, _platformFeatureFlagsReact.functionWithFG)('platform_editor_css_migrate_emoji', _EmojiPickerVirtualItems2.virtualItemRenderer, _EmojiPickerVirtualItems.virtualItemRenderer);
@@ -400,7 +398,7 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
       var virtualListHeight = _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
       return /*#__PURE__*/_react.default.createElement(EmojiPickerTabPanel, {
         showSearchResults: !!query
-      }, /*#__PURE__*/_react.default.createElement(EmojiActions, {
+      }, /*#__PURE__*/_react.default.createElement(_EmojiActions.default, {
         selectedTone: selectedTone,
         onToneSelected: onToneSelected,
         onToneSelectorCancelled: onToneSelectorCancelled,
@@ -794,7 +792,7 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
   }, [size]);
   return /*#__PURE__*/_react.default.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
-  }, /*#__PURE__*/_react.default.createElement(EmojiActions, {
+  }, /*#__PURE__*/_react.default.createElement(_EmojiActions.default, {
     selectedTone: selectedTone,
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,

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

@@ -15,9 +15,8 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _useDebounce = require("use-debounce");
 var _constants = require("../../util/constants");
-var _styles = require("../common/styles");
 var _i18n = require("../i18n");
-var _styles2 = require("./styles");
+var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -27,6 +26,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var hidden = (0, _react.css)({
+  opacity: 0,
+  visibility: 'hidden',
+  display: 'none'
+});
 var emojiPickerSearchTestId = exports.emojiPickerSearchTestId = 'emoji-picker-search';
 var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPickerListSearch(props) {
   var style = props.style,
@@ -66,7 +70,7 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react.jsx)("div", {
-      css: [_styles2.pickerSearch, !isVisible && _styles.hidden],
+      css: [_styles.pickerSearch, !isVisible && hidden],
       style: style
     }, (0, _react.jsx)(_visuallyHidden.default, {
       id: "emoji-search-results-status",
@@ -79,7 +83,7 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
       "aria-label": formatMessage(_i18n.messages.searchLabel)
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       ,
-      css: _styles2.input,
+      css: _styles.input,
       autoComplete: "off",
       name: "search",
       placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
@@ -88,7 +92,7 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
       elemBeforeInput:
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       (0, _react.jsx)("span", {
-        css: _styles2.searchIcon
+        css: _styles.searchIcon
       }, (0, _react.jsx)(_search.default, {
         LEGACY_margin: "0 0 0 2px",
         color: "currentColor",

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

@@ -13,7 +13,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _mouse = require("../../util/mouse");
 var _typeHelpers = require("../../util/type-helpers");
-var _EmojiPreviewComponent = require("../compiled/common/EmojiPreviewComponent");
+var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
 var _styles = require("./styles");
 var typeAheadWidth = 350;
 var typeAheadItem = null;