@atlaskit/reactions 22.7.0 → 22.7.2

package/afm-cc/tsconfig.json

@@ -48,6 +48,9 @@
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 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 packageName = "@atlaskit/reactions";
-var packageVersion = "22.7.0";
+var packageVersion = "22.7.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Counter/Counter.js

@@ -11,6 +11,8 @@ var _utils = require("../../shared/utils");
 var _styles = require("./styles");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 /**
@@ -58,8 +60,11 @@ var Counter = exports.Counter = function Counter(_ref) {
     return lastValue.current ? lastValue.current < value : false;
   }, [value]);
   return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
-    "data-testid": RENDER_COMPONENT_WRAPPER,
+    "data-testid": RENDER_COMPONENT_WRAPPER
+    // 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: _styles.countStyle
   }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_motion.SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
@@ -69,13 +74,22 @@ var Counter = exports.Counter = function Counter(_ref) {
   }, function (motion, direction) {
     return (0, _react2.jsx)("div", {
       ref: motion.ref,
-      css: [_styles.containerStyle, (0, _react2.css)({
+      css: [
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      _styles.containerStyle,
+      // 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, _react2.css)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         position: direction === 'exiting' ? 'absolute' : undefined
-      })],
+      })]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
     }, (0, _react2.jsx)("span", {
-      "data-testid": RENDER_LABEL_TESTID,
+      "data-testid": RENDER_LABEL_TESTID
+      // 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: highlight ? [_styles.counterLabelStyle, _styles.highlightStyle] : _styles.counterLabelStyle,
       key: value
     }, label));

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

@@ -7,7 +7,9 @@ exports.highlightStyle = exports.counterLabelStyle = exports.countStyle = export
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var countStyle = exports.countStyle = (0, _react.css)({
   fontSize: 11,
   color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
@@ -16,13 +18,19 @@ var countStyle = exports.countStyle = (0, _react.css)({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)", " 0"),
   lineHeight: '14px'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var containerStyle = exports.containerStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var highlightStyle = exports.highlightStyle = (0, _react.css)({
   color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var counterLabelStyle = exports.counterLabelStyle = (0, _react.css)({
   fontVariantNumeric: 'tabular-nums'
 });

package/dist/cjs/components/EmojiButton/EmojiButton.js

@@ -9,11 +9,28 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _emoji = require("@atlaskit/emoji");
+var _primitives = require("@atlaskit/primitives");
 var _i18n = require("../../shared/i18n");
 var _utils = require("../../shared/utils");
-var _styles = require("./styles");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var emojiButtonStyles = (0, _primitives.xcss)({
+  outline: 'none',
+  display: 'flex',
+  backgroundColor: 'color.background.neutral.subtle',
+  border: 0,
+  borderRadius: 'border.radius',
+  margin: 'space.0',
+  padding: 'space.100',
+  // @ts-expect-error - Nested selectors not supported in XCSS
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  ':hover > span': {
+    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
+    transform: 'scale(1.33)'
+  }
+});
 var RENDER_BUTTON_TESTID = exports.RENDER_BUTTON_TESTID = 'button-emoji-id';
 /**
  * custom button to render the custom emoji selector inside the reaction picker
@@ -29,14 +46,13 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
     }
   };
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react2.jsx)("button", {
-    "data-testid": RENDER_BUTTON_TESTID,
+  return (0, _react2.jsx)(_primitives.Pressable, {
+    testId: RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
     "aria-label": intl.formatMessage(_i18n.messages.reactWithEmoji, {
       emoji: emojiId.shortName
     }),
-    type: "button",
-    css: _styles.emojiButtonStyle
+    xcss: emojiButtonStyles
   }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId

package/dist/cjs/components/FlashAnimation/FlashAnimation.js

@@ -8,6 +8,8 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * Test id for wrapper FlashAnimation div
  */
@@ -18,7 +20,10 @@ var RENDER_FLASHANIMATION_TESTID = exports.RENDER_FLASHANIMATION_TESTID = 'flash
  */
 var FlashAnimation = exports.FlashAnimation = function FlashAnimation(props) {
   return (0, _react.jsx)("div", {
-    className: props.className,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: props.className
+    // 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: [_styles.containerStyle, props.flash && _styles.flashStyle],
     "data-testid": RENDER_FLASHANIMATION_TESTID
   }, props.children);

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

@@ -7,8 +7,11 @@ exports.flashStyle = exports.flashAnimation = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var flashTime = 700;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 var flashAnimation = exports.flashAnimation = (0, _react.keyframes)({
   '0%': {
     backgroundColor: 'transparent'
@@ -26,10 +29,15 @@ var flashAnimation = exports.flashAnimation = (0, _react.keyframes)({
     borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var containerStyle = exports.containerStyle = (0, _react.css)({
   width: '100%',
   height: '100%'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var flashStyle = exports.flashStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });

package/dist/cjs/components/Reaction/Reaction.js

@@ -14,6 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _emoji = require("@atlaskit/emoji");
+var _primitives = require("@atlaskit/primitives");
 var _analytics = require("../../analytics");
 var _Counter = require("../Counter");
 var _FlashAnimation = require("../FlashAnimation");
@@ -26,10 +27,49 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && Object.prototype.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; }
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * Test id for Reaction item wrapper div
  */
 var RENDER_REACTION_TESTID = exports.RENDER_REACTION_TESTID = 'render_reaction_wrapper';
+var containerStyles = (0, _primitives.xcss)({
+  position: 'relative'
+});
+var reactionStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  borderWidth: 'border.width',
+  borderStyle: 'solid',
+  borderColor: 'color.border',
+  borderRadius: 'border.radius.circle',
+  color: 'color.text.subtle',
+  marginBlockStart: 'space.050',
+  marginInlineEnd: 'space.050',
+  padding: 'space.0',
+  overflow: 'hidden',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+var reactedStyles = (0, _primitives.xcss)({
+  backgroundColor: 'color.background.selected',
+  borderColor: 'color.border.selected',
+  ':hover': {
+    backgroundColor: 'color.background.selected.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.selected.pressed'
+  }
+});
+
 /**
  * Render an emoji reaction button
  */
@@ -41,7 +81,6 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     onMouseEnter = _ref$onMouseEnter === void 0 ? function () {} : _ref$onMouseEnter,
     _ref$onFocused = _ref.onFocused,
     onFocused = _ref$onFocused === void 0 ? function () {} : _ref$onFocused,
-    className = _ref.className,
     _ref$flash = _ref.flash,
     flash = _ref$flash === void 0 ? false : _ref$flash,
     _ref$showParticleEffe = _ref.showParticleEffect,
@@ -124,8 +163,8 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
-  return (0, _react2.jsx)("div", {
-    css: _styles.containerStyle
+  return (0, _react2.jsx)(_primitives.Box, {
+    xcss: containerStyles
   }, showParticleEffect && (0, _react2.jsx)(_ReactionParticleEffect.ReactionParticleEffect, {
     emojiId: emojiId,
     emojiProvider: emojiProvider
@@ -135,15 +174,13 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     handleUserListClick: handleOpenReactionsDialog,
     allowUserDialog: allowUserDialog,
     isEnabled: isTooltipEnabled
-  }, (0, _react2.jsx)("button", {
-    className: className,
-    css: [_styles.reactionStyle, reaction.reacted && _styles.reactedStyle],
+  }, (0, _react2.jsx)(_primitives.Pressable, {
+    xcss: [reactionStyles, reaction.reacted && reactedStyles],
     "aria-label": intl.formatMessage(_i18n.messages.reactWithEmoji, {
       emoji: emojiName
     }),
-    type: "button",
     "data-emoji-id": reaction.emojiId,
-    "data-testid": RENDER_REACTION_TESTID,
+    testId: RENDER_REACTION_TESTID,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onFocus: handleFocused,

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

@@ -7,6 +7,7 @@ exports.reactionStyle = exports.reactedStyle = exports.flashStyle = exports.flas
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 /**
  * Default styling px height for an emoji reaction
@@ -19,14 +20,19 @@ var akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var containerStyle = exports.containerStyle = (0, _react.css)({
   position: 'relative'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var emojiStyle = exports.emojiStyle = (0, _react.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-100, 8px)")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var reactionStyle = exports.reactionStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
@@ -54,6 +60,8 @@ var reactionStyle = exports.reactionStyle = (0, _react.css)({
   },
   overflow: 'hidden'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var reactedStyle = exports.reactedStyle = (0, _react.css)({
   backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
   borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")"),
@@ -63,13 +71,17 @@ var reactedStyle = exports.reactedStyle = (0, _react.css)({
 });
 var flashHeight = exports.flashHeight = akHeight - 2; // height without the 1px border
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var flashStyle = exports.flashStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   borderRadius: '10px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: "".concat(flashHeight, "px")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var emojiNoReactionStyle = exports.emojiNoReactionStyle = (0, _react.css)({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
 });

package/dist/cjs/components/ReactionDialog/ReactionView.js

@@ -20,6 +20,8 @@ var _i18n = require("../../shared/i18n");
 var _styles = require("./styles");
 /** @jsx   jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
@@ -64,32 +66,42 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
     })) || [];
   }, [reaction]);
   var tabPanelAttributes = (0, _tabs.useTabPanel)();
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: _styles.reactionViewStyle
-  }, tabPanelAttributes), (0, _react2.jsx)("p", null, (0, _react2.jsx)(_element.ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: {
-      id: selectedEmojiId,
-      shortName: ''
-    },
-    fitToHeight: 24
-  }), intl.formatMessage(_i18n.messages.emojiName, {
-    emojiName: emojiName
-  })), alphabeticalNames.length === 0 ? (0, _react2.jsx)("div", {
-    css: _styles.centerSpinner
-  }, (0, _react2.jsx)(_spinner.default, {
-    size: "large"
-  })) : (0, _react2.jsx)("ul", {
-    css: _styles.userListStyle
-  }, alphabeticalNames.map(function (user) {
-    var _user$profilePicture;
-    var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
-    return (0, _react2.jsx)("li", {
-      css: _styles.userStyle,
-      key: user.id
-    }, (0, _react2.jsx)(_Avatar.default, {
-      size: "large",
-      src: profile
-    }), (0, _react2.jsx)("span", null, user.displayName));
-  })));
+  return (
+    // 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, _react2.jsx)("div", (0, _extends2.default)({
+      css: _styles.reactionViewStyle
+    }, tabPanelAttributes), (0, _react2.jsx)("p", null, (0, _react2.jsx)(_element.ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: {
+        id: selectedEmojiId,
+        shortName: ''
+      },
+      fitToHeight: 24
+    }), intl.formatMessage(_i18n.messages.emojiName, {
+      emojiName: emojiName
+    })), alphabeticalNames.length === 0 ?
+    // 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, _react2.jsx)("div", {
+      css: _styles.centerSpinner
+    }, (0, _react2.jsx)(_spinner.default, {
+      size: "large"
+    })) :
+    // 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, _react2.jsx)("ul", {
+      css: _styles.userListStyle
+    }, alphabeticalNames.map(function (user) {
+      var _user$profilePicture;
+      var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+      return (
+        // 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, _react2.jsx)("li", {
+          css: _styles.userStyle,
+          key: user.id
+        }, (0, _react2.jsx)(_Avatar.default, {
+          size: "large",
+          src: profile
+        }), (0, _react2.jsx)("span", null, user.displayName))
+      );
+    })))
+  );
 };

package/dist/cjs/components/ReactionDialog/ReactionsDialog.js

@@ -20,6 +20,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && Object.prototype.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; }
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * Test id for the Reactions modal dialog
  */

package/dist/cjs/components/ReactionDialog/ReactionsList.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && Object.prototype.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; }
 /** @jsx   jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
     initialEmojiId = _ref.initialEmojiId,
@@ -62,7 +64,10 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
       shortName: ''
     };
     return (0, _react2.jsx)("div", {
-      css: (0, _styles.customTabWrapper)((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, colorMode),
+      // 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: (0, _styles.customTabWrapper)((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, colorMode)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "reaction-elements",
       key: reaction.emojiId,
       "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id

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

@@ -8,6 +8,7 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../shared/constants");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var REACTIONS_CONTAINER_WIDTH = 48;
 
@@ -24,24 +25,31 @@ in case the container overflows */
 var containerStyle = exports.containerStyle = function containerStyle(reactionsBorderWidth) {
   return (0, _react.css)({
     overflow: 'hidden',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     maxWidth: "".concat(CONTAINER_WIDTH, "px"),
     height: '100%',
     display: 'flex',
     justifyContent: 'start',
     position: 'relative',
     scrollBehavior: 'smooth',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&:after': {
       content: '""',
       zIndex: 0,
       display: 'block',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       minWidth: "".concat(reactionsBorderWidth, "%"),
       bottom: '0px',
       position: 'absolute'
     }
   });
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var titleStyle = exports.titleStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > h1': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     fontSize: '24px!important',
     color: "".concat("var(--ds-text, ".concat(_colors.N800, ")"))
   }
@@ -56,13 +64,17 @@ var counterStyle = exports.counterStyle = function counterStyle(isSelected) {
     alignSelf: 'center',
     lineHeight: '14px',
     fontSize: '11px',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     fontWeight: isSelected ? 700 : 400,
     paddingRight: '0px',
     marginTop: "var(--ds-space-075, 6px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {
       width: '100%',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       padding: "var(--ds-space-0, 0px)".concat("!important"),
       //Counter component has its own styles overriding them to match designs
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       color: isSelected ? "".concat("var(--ds-text, ".concat(_colors.B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(_colors.N500, ")"), "!important")
     }
   });
@@ -76,7 +88,9 @@ var fadedCss = function fadedCss(edge, theme) {
     width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
     height: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
     zIndex: 0,
-    background: theme === 'dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
+    background:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    theme === 'dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
   });
 };
 var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, theme) {
@@ -92,19 +106,25 @@ var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSe
     marginRight: REACTION_RIGHT_MARGIN_TOKEN,
     boxSizing: 'border-box',
     position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {
       minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
       minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       padding: '0px !important',
       alignItems: 'center',
       justifyContent: 'center'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& > span': {
       minHeight: '16px',
       minWidth: '16px'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     '&.disabled:after': fadedCss('rightEdge', theme),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     '&:after': isSelected ? {
       content: '""',
       borderBottom: "2px solid ".concat("var(--ds-text, ".concat(_colors.B400, ")")),
@@ -124,18 +144,25 @@ var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSe
     }
   });
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var navigationContainerStyle = exports.navigationContainerStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> button': {
     cursor: 'pointer'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'button:last-child': {
     marginLeft: "var(--ds-space-200, 16px)"
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
   marginTop: "var(--ds-space-300, 24px)",
   display: 'flex',
   flexDirection: 'column',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   p: {
     margin: 0,
     color: "".concat("var(--ds-text, ".concat(_colors.N800, ")")),
@@ -143,40 +170,52 @@ var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
     fontWeight: 600,
     fontSize: 16,
     lineHeight: '20px',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> span': {
       marginRight: "var(--ds-space-100, 8px)"
     }
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var userListStyle = exports.userListStyle = (0, _react.css)({
   listStyle: 'none',
   marginTop: "var(--ds-space-200, 16px)",
   padding: 0,
   textAlign: 'left',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: "".concat("var(--ds-text, ".concat(_colors.N500, ")")),
     fontSize: 14
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var userStyle = exports.userStyle = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
   padding: "var(--ds-space-100, 8px)".concat(" 0px ", "var(--ds-space-100, 8px)", " 0px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> span': {
     marginLeft: "var(--ds-space-200, 16px)"
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var customTabListStyles = exports.customTabListStyles = (0, _react.css)({
   overflow: 'auto',
   scrollBehavior: 'smooth',
   display: 'flex',
   paddingBottom: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'div[role=tablist]': {
     flexGrow: 1,
     // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
     paddingInline: "var(--ds-space-100, 8px)"
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var centerSpinner = exports.centerSpinner = (0, _react.css)({
   display: 'flex',
   justifyContent: 'center',