@atlaskit/avatar-group 9.6.1 → 9.8.0

package/README.md

@@ -10,4 +10,5 @@ yarn add @atlaskit/avatar-group
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlassian.design/components/avatar-group/).
+Detailed docs and example usage can be found
+[here](https://atlassian.design/components/avatar-group/).

package/__perf__/default.tsx

@@ -3,19 +3,19 @@ import React from 'react';
 import AvatarGroup from '../src';
 
 const data = [
-  { email: 'chaki@me.com', name: 'Chaki Caronni' },
-  { email: 'nanop@outlook.com', name: 'Nanop Rgiersig' },
+	{ email: 'chaki@me.com', name: 'Chaki Caronni' },
+	{ email: 'nanop@outlook.com', name: 'Nanop Rgiersig' },
 ];
 
 export default () => {
-  return (
-    <AvatarGroup
-      data={data.map((d) => ({
-        email: d.email,
-        key: d.email,
-        name: d.name,
-        href: '#',
-      }))}
-    />
-  );
+	return (
+		<AvatarGroup
+			data={data.map((d) => ({
+				email: d.email,
+				key: d.email,
+				name: d.name,
+				href: '#',
+			}))}
+		/>
+	);
 };

package/dist/cjs/components/avatar-group.js

@@ -27,7 +27,9 @@ var _moreIndicator = _interopRequireDefault(require("./more-indicator"));
 var _stack = _interopRequireDefault(require("./stack"));
 var _utils = require("./utils");
 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; } /** @jsx jsx */
+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; } /**
+ * @jsxRuntime classic
+ */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var MAX_COUNT = {
   grid: 11,
   stack: 5

package/dist/cjs/components/grid.js

@@ -6,26 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var gutter = "var(--ds-space-negative-050, -4px)";
 var listStyles = (0, _react2.css)({
-  // removes default ul styles. Needs !important to override contextual styles in product.
   display: 'flex',
   margin: "var(--ds-space-0, 0px)",
-  marginRight: gutter,
-  marginLeft: gutter,
   padding: "var(--ds-space-0, 0px)",
   justifyContent: 'flex-start',
   flexWrap: 'wrap',
   lineHeight: 1,
-  listStyleType: 'none !important'
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  listStyleType: 'none !important',
+  marginInlineEnd: gutter,
+  marginInlineStart: gutter
 });
 var listItemStyles = (0, _react2.css)({
   margin: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-100, 8px)",
-  paddingRight: "var(--ds-space-050, 4px)",
-  paddingLeft: "var(--ds-space-050, 4px)"
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  paddingInlineStart: "var(--ds-space-050, 4px)"
 });
 var Grid = function Grid(_ref) {
   var children = _ref.children,

package/dist/cjs/components/internal/components/popup-avatar-group.js

@@ -12,7 +12,11 @@ var _react2 = require("@emotion/react");
 var _menu = require("@atlaskit/menu");
 var _focusManager = require("./focus-manager");
 var _excluded = ["maxWidth", "minWidth", "setInitialFocusRef"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * It sets focus to the first avatar when popup is open.
  */

package/dist/cjs/components/more-indicator.js

@@ -13,28 +13,29 @@ var _react2 = require("@emotion/react");
 var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["testId", "className", "ref"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 && 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; }
-var FONT_SIZE = {
-  xsmall: '0.625rem',
-  // 10px
-  small: '0.625rem',
-  // 10px
-  medium: '0.6875rem',
-  // 11px
-  large: '0.75rem',
-  // 12px
-  xlarge: '1rem',
-  // 16px
-  xxlarge: '1rem' // 16px
+var buttonSizes = {
+  xsmall: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  medium: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  large: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  xlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  xxlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 var buttonActiveStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(_colors.B300, ")")),
     color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     transform: "scale(".concat(_avatar.ACTIVE_SCALE_FACTOR, ")"),
     '&:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.N30, ")"),
@@ -47,13 +48,10 @@ var buttonActiveStyles = (0, _react2.css)({
   }
 });
 var buttonStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     color: "var(--ds-text, ".concat(_colors.N500, ")"),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    fontFamily: 'inherit',
-    fontWeight: "var(--ds-font-weight-medium, 500)",
     '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")"),
       color: "var(--ds-text, ".concat(_colors.N500, ")")
@@ -62,7 +60,8 @@ var buttonStyles = (0, _react2.css)({
       backgroundColor: "var(--ds-background-neutral-pressed, ".concat(_colors.B50, ")"),
       color: "var(--ds-text, ".concat(_colors.B400, ")")
     },
-    '&:after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&::after': {
       display: 'none'
     }
   }
@@ -104,20 +103,27 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref2.className,
       ref = _ref2.ref,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    return (0, _react2.jsx)("button", (0, _extends2.default)({
-      type: "submit"
-    }, buttonProps, props, {
-      ref: ref,
-      "data-testid": testId,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHaspopup,
-      style: {
-        fontSize: FONT_SIZE[size]
-      },
-      css: [buttonStyles, isActive && buttonActiveStyles],
-      className: className
-    }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/no-html-button
+      (0, _react2.jsx)("button", (0, _extends2.default)({
+        type: "submit"
+      }, buttonProps, props, {
+        ref: ref,
+        "data-testid": testId,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: {
+          font: buttonSizes[size]
+        },
+        css: [buttonStyles, isActive && buttonActiveStyles]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: className
+      }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count)
+    );
   });
 });
 MoreIndicator.displayName = 'MoreIndicator';

package/dist/cjs/components/stack.js

@@ -8,24 +8,30 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _avatar = require("@atlaskit/avatar");
 var _constants = require("@atlaskit/theme/constants");
+/**
+ * @jsxRuntime classic
+ */
 /** @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-deprecated-imports
 
 var gutter = _avatar.BORDER_WIDTH * 2 + (0, _constants.gridSize)() / 2;
 var listStyles = (0, _react2.css)({
   display: 'flex',
   margin: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: gutter,
   padding: "var(--ds-space-0, 0px)",
   lineHeight: 1,
-  listStyleType: 'none !important'
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  listStyleType: 'none !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginInlineEnd: gutter
 });
 var listItemStyles = (0, _react2.css)({
   margin: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: -gutter
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginInlineEnd: -gutter
 });
 var Stack = function Stack(_ref) {
   var children = _ref.children,

package/dist/es2019/components/avatar-group.js

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';

package/dist/es2019/components/grid.js

@@ -1,24 +1,29 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Children } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const gutter = "var(--ds-space-negative-050, -4px)";
 const listStyles = css({
-  // removes default ul styles. Needs !important to override contextual styles in product.
   display: 'flex',
   margin: "var(--ds-space-0, 0px)",
-  marginRight: gutter,
-  marginLeft: gutter,
   padding: "var(--ds-space-0, 0px)",
   justifyContent: 'flex-start',
   flexWrap: 'wrap',
   lineHeight: 1,
-  listStyleType: 'none !important'
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  listStyleType: 'none !important',
+  marginInlineEnd: gutter,
+  marginInlineStart: gutter
 });
 const listItemStyles = css({
   margin: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-100, 8px)",
-  paddingRight: "var(--ds-space-050, 4px)",
-  paddingLeft: "var(--ds-space-050, 4px)"
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  paddingInlineStart: "var(--ds-space-050, 4px)"
 });
 const Grid = ({
   children,

package/dist/es2019/components/internal/components/popup-avatar-group.js

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useContext, useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { MenuGroup } from '@atlaskit/menu';
 import { FocusManagerContext } from './focus-manager';

package/dist/es2019/components/more-indicator.js

@@ -1,28 +1,30 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
-const FONT_SIZE = {
-  xsmall: '0.625rem',
-  // 10px
-  small: '0.625rem',
-  // 10px
-  medium: '0.6875rem',
-  // 11px
-  large: '0.75rem',
-  // 12px
-  xlarge: '1rem',
-  // 16px
-  xxlarge: '1rem' // 16px
+const buttonSizes = {
+  xsmall: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  medium: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  large: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  xlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  xxlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 const buttonActiveStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     backgroundColor: `var(--ds-background-selected, ${B50})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-selected, ${B300})`}`,
     color: `var(--ds-text-selected, ${B400})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     transform: `scale(${ACTIVE_SCALE_FACTOR})`,
     '&:hover': {
       backgroundColor: `var(--ds-background-selected-hovered, ${N30})`,
@@ -35,13 +37,10 @@ const buttonActiveStyles = css({
   }
 });
 const buttonStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     backgroundColor: `var(--ds-background-neutral, ${N20})`,
     color: `var(--ds-text, ${N500})`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    fontFamily: 'inherit',
-    fontWeight: "var(--ds-font-weight-medium, 500)",
     '&:hover': {
       backgroundColor: `var(--ds-background-neutral-hovered, ${N30})`,
       color: `var(--ds-text, ${N500})`
@@ -50,7 +49,8 @@ const buttonStyles = css({
       backgroundColor: `var(--ds-background-neutral-pressed, ${B50})`,
       color: `var(--ds-text, ${B400})`
     },
-    '&:after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&::after': {
       display: 'none'
     }
   }
@@ -88,18 +88,24 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
     className,
     ref,
     ...props
-  }) => jsx("button", _extends({
+  }) =>
+  // eslint-disable-next-line @atlaskit/design-system/no-html-button
+  jsx("button", _extends({
     type: "submit"
   }, buttonProps, props, {
     ref: ref,
     "data-testid": testId,
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHaspopup,
+    "aria-haspopup": ariaHaspopup
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
-      fontSize: FONT_SIZE[size]
+      font: buttonSizes[size]
     },
-    css: [buttonStyles, isActive && buttonActiveStyles],
+    css: [buttonStyles, isActive && buttonActiveStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className
   }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count));
 });

package/dist/es2019/components/stack.js

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Children } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { BORDER_WIDTH } from '@atlaskit/avatar';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -8,16 +13,17 @@ const gutter = BORDER_WIDTH * 2 + gridSize() / 2;
 const listStyles = css({
   display: 'flex',
   margin: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: gutter,
   padding: "var(--ds-space-0, 0px)",
   lineHeight: 1,
-  listStyleType: 'none !important'
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  listStyleType: 'none !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginInlineEnd: gutter
 });
 const listItemStyles = css({
   margin: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: -gutter
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginInlineEnd: -gutter
 });
 const Stack = ({
   children,

package/dist/esm/components/avatar-group.js

@@ -3,8 +3,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 */
 import { useCallback, useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';

package/dist/esm/components/grid.js

@@ -1,24 +1,29 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Children } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 var gutter = "var(--ds-space-negative-050, -4px)";
 var listStyles = css({
-  // removes default ul styles. Needs !important to override contextual styles in product.
   display: 'flex',
   margin: "var(--ds-space-0, 0px)",
-  marginRight: gutter,
-  marginLeft: gutter,
   padding: "var(--ds-space-0, 0px)",
   justifyContent: 'flex-start',
   flexWrap: 'wrap',
   lineHeight: 1,
-  listStyleType: 'none !important'
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  listStyleType: 'none !important',
+  marginInlineEnd: gutter,
+  marginInlineStart: gutter
 });
 var listItemStyles = css({
   margin: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-100, 8px)",
-  paddingRight: "var(--ds-space-050, 4px)",
-  paddingLeft: "var(--ds-space-050, 4px)"
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  paddingInlineStart: "var(--ds-space-050, 4px)"
 });
 var Grid = function Grid(_ref) {
   var children = _ref.children,

package/dist/esm/components/internal/components/popup-avatar-group.js

@@ -1,8 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["maxWidth", "minWidth", "setInitialFocusRef"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useContext, useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { MenuGroup } from '@atlaskit/menu';
 import { FocusManagerContext } from './focus-manager';

package/dist/esm/components/more-indicator.js

@@ -1,30 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["testId", "className", "ref"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
-var FONT_SIZE = {
-  xsmall: '0.625rem',
-  // 10px
-  small: '0.625rem',
-  // 10px
-  medium: '0.6875rem',
-  // 11px
-  large: '0.75rem',
-  // 12px
-  xlarge: '1rem',
-  // 16px
-  xxlarge: '1rem' // 16px
+var buttonSizes = {
+  xsmall: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  medium: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  large: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  xlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  xxlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 var buttonActiveStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(B300, ")")),
     color: "var(--ds-text-selected, ".concat(B400, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     transform: "scale(".concat(ACTIVE_SCALE_FACTOR, ")"),
     '&:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, ".concat(N30, ")"),
@@ -37,13 +39,10 @@ var buttonActiveStyles = css({
   }
 });
 var buttonStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
     color: "var(--ds-text, ".concat(N500, ")"),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    fontFamily: 'inherit',
-    fontWeight: "var(--ds-font-weight-medium, 500)",
     '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30, ")"),
       color: "var(--ds-text, ".concat(N500, ")")
@@ -52,7 +51,8 @@ var buttonStyles = css({
       backgroundColor: "var(--ds-background-neutral-pressed, ".concat(B50, ")"),
       color: "var(--ds-text, ".concat(B400, ")")
     },
-    '&:after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&::after': {
       display: 'none'
     }
   }
@@ -94,20 +94,27 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref2.className,
       ref = _ref2.ref,
       props = _objectWithoutProperties(_ref2, _excluded);
-    return jsx("button", _extends({
-      type: "submit"
-    }, buttonProps, props, {
-      ref: ref,
-      "data-testid": testId,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHaspopup,
-      style: {
-        fontSize: FONT_SIZE[size]
-      },
-      css: [buttonStyles, isActive && buttonActiveStyles],
-      className: className
-    }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/no-html-button
+      jsx("button", _extends({
+        type: "submit"
+      }, buttonProps, props, {
+        ref: ref,
+        "data-testid": testId,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: {
+          font: buttonSizes[size]
+        },
+        css: [buttonStyles, isActive && buttonActiveStyles]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: className
+      }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count)
+    );
   });
 });
 MoreIndicator.displayName = 'MoreIndicator';