@atlaskit/avatar-group 8.5.9 → 8.5.12

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/avatar-group
 
+## 8.5.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.5.11
+
+### Patch Changes
+
+- [`b2f8af359cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2f8af359cf) - Rewrite dynamic styles to be static to aid compiled migration.
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 8.5.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.5.9
 
 ### Patch Changes

package/dist/cjs/components/grid.js

@@ -1,23 +1,37 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("react");
 
 var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject;
-
-var gutter = (0, _constants.gridSize)() / 2;
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var gutter = gridSize / 2;
+var listStyles = (0, _core.css)({
+  // removes default ul styles. Needs !important to override contextual styles in product.
+  display: 'flex',
+  margin: 0,
+  marginRight: -gutter,
+  marginLeft: -gutter,
+  padding: 0,
+  justifyContent: 'flex-start',
+  flexWrap: 'wrap',
+  lineHeight: 1,
+  listStyleType: 'none !important'
+});
+var listItemStyles = (0, _core.css)({
+  margin: 0,
+  marginBottom: gridSize,
+  paddingRight: gutter,
+  paddingLeft: gutter
+});
 
 var Grid = function Grid(_ref) {
   var children = _ref.children,
@@ -25,11 +39,12 @@ var Grid = function Grid(_ref) {
       label = _ref['aria-label'];
   return (0, _core.jsx)("ul", {
     "data-testid": testId,
-    "aria-label": label // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    ,
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      // removes default ul styles. Needs !important to override contextual styles in product.\n      list-style-type: none !important;\n      margin: 0;\n      padding: 0;\n\n      > li {\n        margin: 0;\n        margin-bottom: ", "px;\n        padding-left: ", "px;\n        padding-right: ", "px;\n      }\n\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: flex-start;\n      line-height: 1;\n      margin-left: -", "px;\n      margin-right: -", "px;\n    "])), (0, _constants.gridSize)(), gutter, gutter, gutter, gutter)
+    "aria-label": label,
+    css: listStyles
   }, _react.Children.map(children, function (child) {
-    return child && (0, _core.jsx)("li", null, child);
+    return child && (0, _core.jsx)("li", {
+      css: listItemStyles
+    }, child);
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

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

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("react");
 
 var _core = require("@emotion/core");
@@ -25,48 +23,69 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _excluded = ["testId", "className", "ref"];
 
-var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var FONT_SIZE = {
-  xsmall: 10,
-  small: 10,
-  medium: 11,
-  large: 12,
-  xlarge: 16,
-  xxlarge: 16
-};
-
-var getButtonStyles = function getButtonStyles(css, _ref) {
-  var size = _ref.size,
-      isActive = _ref.isActive;
-  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-  var activeStyles = css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    transform: scale(", ");\n    box-shadow: 0 0 0 ", "px ", ";\n    color: ", ";\n  "])), "var(--ds-background-brand, ".concat(_colors.B50, ")"), _avatar.ACTIVE_SCALE_FACTOR, _avatar.BORDER_WIDTH, "var(--ds-text-brand, ".concat(_colors.B300, ")"), "var(--ds-text-brand, ".concat(_colors.B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-
-  return css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    background-color: ", ";\n    font-size: ", "px;\n    font-family: inherit;\n    font-weight: 500;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      &:after {\n        background-color: ", ";\n        opacity: 1;\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      &:after {\n        background-color: transparent;\n      }\n    }\n\n    ", "\n  "])), "var(--ds-text, ".concat(_colors.N500, ")"), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), FONT_SIZE[size], "var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")"), "var(--ds-text, ".concat(_colors.N500, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"), "var(--ds-background-neutral-pressed, ".concat(_colors.B50, ")"), "var(--ds-text, ".concat(_colors.B400, ")"), isActive && activeStyles);
+  xsmall: '10px',
+  small: '10px',
+  medium: '11px',
+  large: '12px',
+  xlarge: '16px',
+  xxlarge: '16px'
 };
-
+var buttonActiveStyles = (0, _core.css)({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&&': {
+    backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
+    boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ").concat("var(--ds-text-selected, ".concat(_colors.B300, ")")),
+    color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
+    transform: "scale(".concat(_avatar.ACTIVE_SCALE_FACTOR, ")")
+  }
+});
+var buttonStyles = (0, _core.css)({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&&': {
+    backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    color: "var(--ds-text, ".concat(_colors.N500, ")"),
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    '&:hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")"),
+      color: "var(--ds-text, ".concat(_colors.N500, ")"),
+      '&:after': {
+        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
+        opacity: 1
+      }
+    },
+    '&:active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, ".concat(_colors.B50, ")"),
+      color: "var(--ds-text, ".concat(_colors.B400, ")"),
+      '&:after': {
+        backgroundColor: 'transparent'
+      }
+    }
+  }
+});
 var MAX_DISPLAY_COUNT = 99;
-var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? 'circle' : _ref2$appearance,
-      _ref2$borderColor = _ref2.borderColor,
-      borderColor = _ref2$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref2$borderColor,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
-      _ref2$count = _ref2.count,
-      count = _ref2$count === void 0 ? 0 : _ref2$count,
-      testId = _ref2.testId,
-      onClick = _ref2.onClick,
-      ariaControls = _ref2['aria-controls'],
-      ariaExpanded = _ref2['aria-expanded'],
-      ariaHaspopup = _ref2['aria-haspopup'],
-      _ref2$buttonProps = _ref2.buttonProps,
-      buttonProps = _ref2$buttonProps === void 0 ? {} : _ref2$buttonProps,
-      isActive = _ref2.isActive;
+var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$borderColor,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 0 : _ref$count,
+      testId = _ref.testId,
+      onClick = _ref.onClick,
+      ariaControls = _ref['aria-controls'],
+      ariaExpanded = _ref['aria-expanded'],
+      ariaHaspopup = _ref['aria-haspopup'],
+      _ref$buttonProps = _ref.buttonProps,
+      buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+      isActive = _ref.isActive;
   var onClickHander = (0, _react.useCallback)(function (event, analyticsEvent) {
     if (buttonProps.onClick) {
       buttonProps.onClick(event);
@@ -81,28 +100,25 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     borderColor: borderColor,
     ref: ref,
     onClick: onClickHander
-  }, function (_ref3) {
-    var _ = _ref3.testId,
-        className = _ref3.className,
-        ref = _ref3.ref,
-        props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-    return (0, _core.jsx)(_core.ClassNames, null, function (_ref4) {
-      var css = _ref4.css,
-          cx = _ref4.cx;
-      return (0, _core.jsx)("button", (0, _extends2.default)({
-        type: "submit"
-      }, buttonProps, props, {
-        ref: ref,
-        "data-testid": testId,
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHaspopup,
-        className: cx(className, getButtonStyles(css, {
-          size: size,
-          isActive: isActive
-        }))
-      }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
-    });
+  }, function (_ref2) {
+    var _ = _ref2.testId,
+        className = _ref2.className,
+        ref = _ref2.ref,
+        props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return (0, _core.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);
   });
 });
 MoreIndicator.displayName = 'MoreIndicator'; // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/stack.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("react");
 
 var _core = require("@emotion/core");
@@ -17,9 +13,20 @@ var _avatar = require("@atlaskit/avatar");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject;
-
+/** @jsx jsx */
 var gutter = _avatar.BORDER_WIDTH * 2 + (0, _constants.gridSize)() / 2;
+var listStyles = (0, _core.css)({
+  display: 'flex',
+  margin: 0,
+  marginRight: gutter,
+  padding: 0,
+  lineHeight: 1,
+  listStyleType: 'none !important'
+});
+var listItemStyles = (0, _core.css)({
+  margin: 0,
+  marginRight: -gutter
+});
 
 var Stack = function Stack(_ref) {
   var children = _ref.children,
@@ -27,11 +34,12 @@ var Stack = function Stack(_ref) {
       label = _ref['aria-label'];
   return (0, _core.jsx)("ul", {
     "data-testid": testId,
-    "aria-label": label // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    ,
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      // removes default ul styles\n      list-style-type: none !important;\n      margin: 0;\n      padding: 0;\n\n      > li {\n        margin: 0;\n        margin-right: -", "px;\n      }\n\n      display: flex;\n      line-height: 1;\n      margin-right: ", "px;\n    "])), gutter, gutter)
+    "aria-label": label,
+    css: listStyles
   }, _react.Children.map(children, function (child) {
-    return child && (0, _core.jsx)("li", null, child);
+    return child && (0, _core.jsx)("li", {
+      css: listItemStyles
+    }, child);
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.9",
+	"version": "8.5.12",
 	"sideEffects": false
 }

package/dist/es2019/components/grid.js

@@ -1,8 +1,27 @@
 /** @jsx jsx */
 import { Children } from 'react';
 import { css, jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-const gutter = gridSize() / 2;
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+const gridSize = getGridSize();
+const gutter = gridSize / 2;
+const listStyles = css({
+  // removes default ul styles. Needs !important to override contextual styles in product.
+  display: 'flex',
+  margin: 0,
+  marginRight: -gutter,
+  marginLeft: -gutter,
+  padding: 0,
+  justifyContent: 'flex-start',
+  flexWrap: 'wrap',
+  lineHeight: 1,
+  listStyleType: 'none !important'
+});
+const listItemStyles = css({
+  margin: 0,
+  marginBottom: gridSize,
+  paddingRight: gutter,
+  paddingLeft: gutter
+});
 
 const Grid = ({
   children,
@@ -10,29 +29,11 @@ const Grid = ({
   'aria-label': label
 }) => jsx("ul", {
   "data-testid": testId,
-  "aria-label": label // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-  ,
-  css: css`
-      // removes default ul styles. Needs !important to override contextual styles in product.
-      list-style-type: none !important;
-      margin: 0;
-      padding: 0;
-
-      > li {
-        margin: 0;
-        margin-bottom: ${gridSize()}px;
-        padding-left: ${gutter}px;
-        padding-right: ${gutter}px;
-      }
-
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      line-height: 1;
-      margin-left: -${gutter}px;
-      margin-right: -${gutter}px;
-    `
-}, Children.map(children, child => child && jsx("li", null, child))); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+  "aria-label": label,
+  css: listStyles
+}, Children.map(children, child => child && jsx("li", {
+  css: listItemStyles
+}, child))); // eslint-disable-next-line @repo/internal/react/require-jsdoc
 
 
 export default Grid;

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

@@ -2,58 +2,50 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
-import { ClassNames, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B300, B400, B50, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
 const FONT_SIZE = {
-  xsmall: 10,
-  small: 10,
-  medium: 11,
-  large: 12,
-  xlarge: 16,
-  xxlarge: 16
+  xsmall: '10px',
+  small: '10px',
+  medium: '11px',
+  large: '12px',
+  xlarge: '16px',
+  xxlarge: '16px'
 };
-
-const getButtonStyles = (css, {
-  size,
-  isActive
-}) => {
-  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-  const activeStyles = css`
-    background-color: ${`var(--ds-background-brand, ${B50})`};
-    transform: scale(${ACTIVE_SCALE_FACTOR});
-    box-shadow: 0 0 0 ${BORDER_WIDTH}px ${`var(--ds-text-brand, ${B300})`};
-    color: ${`var(--ds-text-brand, ${B400})`};
-  `; // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-
-  return css`
-    color: ${`var(--ds-text, ${N500})`};
-    background-color: ${`var(--ds-background-neutral, ${N20})`};
-    font-size: ${FONT_SIZE[size]}px;
-    font-family: inherit;
-    font-weight: 500;
-
-    &:hover {
-      background-color: ${`var(--ds-background-neutral-hovered, ${N30})`};
-      color: ${`var(--ds-text, ${N500})`};
-      &:after {
-        background-color: ${`var(--ds-background-neutral-hovered, ${N30A})`};
-        opacity: 1;
+const buttonActiveStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&&': {
+    backgroundColor: `var(--ds-background-selected, ${B50})`,
+    boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-text-selected, ${B300})`}`,
+    color: `var(--ds-text-selected, ${B400})`,
+    transform: `scale(${ACTIVE_SCALE_FACTOR})`
+  }
+});
+const buttonStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&&': {
+    backgroundColor: `var(--ds-background-neutral, ${N20})`,
+    color: `var(--ds-text, ${N500})`,
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    '&:hover': {
+      backgroundColor: `var(--ds-background-neutral-hovered, ${N30})`,
+      color: `var(--ds-text, ${N500})`,
+      '&:after': {
+        backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`,
+        opacity: 1
       }
-    }
-
-    &:active {
-      background-color: ${`var(--ds-background-neutral-pressed, ${B50})`};
-      color: ${`var(--ds-text, ${B400})`};
-      &:after {
-        background-color: transparent;
+    },
+    '&:active': {
+      backgroundColor: `var(--ds-background-neutral-pressed, ${B50})`,
+      color: `var(--ds-text, ${B400})`,
+      '&:after': {
+        backgroundColor: 'transparent'
       }
     }
-
-    ${isActive && activeStyles}
-  `;
-};
-
+  }
+});
 const MAX_DISPLAY_COUNT = 99;
 const MoreIndicator = /*#__PURE__*/forwardRef(({
   appearance = 'circle',
@@ -87,9 +79,6 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
     className,
     ref,
     ...props
-  }) => jsx(ClassNames, null, ({
-    css,
-    cx
   }) => jsx("button", _extends({
     type: "submit"
   }, buttonProps, props, {
@@ -98,11 +87,12 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHaspopup,
-    className: cx(className, getButtonStyles(css, {
-      size,
-      isActive
-    }))
-  }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count)));
+    style: {
+      fontSize: FONT_SIZE[size]
+    },
+    css: [buttonStyles, isActive && buttonActiveStyles],
+    className: className
+  }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count));
 });
 MoreIndicator.displayName = 'MoreIndicator'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/es2019/components/stack.js

@@ -4,6 +4,18 @@ import { css, jsx } from '@emotion/core';
 import { BORDER_WIDTH } from '@atlaskit/avatar';
 import { gridSize } from '@atlaskit/theme/constants';
 const gutter = BORDER_WIDTH * 2 + gridSize() / 2;
+const listStyles = css({
+  display: 'flex',
+  margin: 0,
+  marginRight: gutter,
+  padding: 0,
+  lineHeight: 1,
+  listStyleType: 'none !important'
+});
+const listItemStyles = css({
+  margin: 0,
+  marginRight: -gutter
+});
 
 const Stack = ({
   children,
@@ -11,24 +23,11 @@ const Stack = ({
   'aria-label': label
 }) => jsx("ul", {
   "data-testid": testId,
-  "aria-label": label // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-  ,
-  css: css`
-      // removes default ul styles
-      list-style-type: none !important;
-      margin: 0;
-      padding: 0;
-
-      > li {
-        margin: 0;
-        margin-right: -${gutter}px;
-      }
-
-      display: flex;
-      line-height: 1;
-      margin-right: ${gutter}px;
-    `
-}, Children.map(children, child => child && jsx("li", null, child))); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+  "aria-label": label,
+  css: listStyles
+}, Children.map(children, child => child && jsx("li", {
+  css: listItemStyles
+}, child))); // eslint-disable-next-line @repo/internal/react/require-jsdoc
 
 
 export default Stack;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.9",
+	"version": "8.5.12",
 	"sideEffects": false
 }

package/dist/esm/components/grid.js

@@ -1,12 +1,27 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
 /** @jsx jsx */
 import { Children } from 'react';
 import { css, jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-var gutter = gridSize() / 2;
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+var gridSize = getGridSize();
+var gutter = gridSize / 2;
+var listStyles = css({
+  // removes default ul styles. Needs !important to override contextual styles in product.
+  display: 'flex',
+  margin: 0,
+  marginRight: -gutter,
+  marginLeft: -gutter,
+  padding: 0,
+  justifyContent: 'flex-start',
+  flexWrap: 'wrap',
+  lineHeight: 1,
+  listStyleType: 'none !important'
+});
+var listItemStyles = css({
+  margin: 0,
+  marginBottom: gridSize,
+  paddingRight: gutter,
+  paddingLeft: gutter
+});
 
 var Grid = function Grid(_ref) {
   var children = _ref.children,
@@ -14,11 +29,12 @@ var Grid = function Grid(_ref) {
       label = _ref['aria-label'];
   return jsx("ul", {
     "data-testid": testId,
-    "aria-label": label // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    ,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      // removes default ul styles. Needs !important to override contextual styles in product.\n      list-style-type: none !important;\n      margin: 0;\n      padding: 0;\n\n      > li {\n        margin: 0;\n        margin-bottom: ", "px;\n        padding-left: ", "px;\n        padding-right: ", "px;\n      }\n\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: flex-start;\n      line-height: 1;\n      margin-left: -", "px;\n      margin-right: -", "px;\n    "])), gridSize(), gutter, gutter, gutter, gutter)
+    "aria-label": label,
+    css: listStyles
   }, Children.map(children, function (child) {
-    return child && jsx("li", null, child);
+    return child && jsx("li", {
+      css: listItemStyles
+    }, child);
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

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

@@ -1,51 +1,71 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["testId", "className", "ref"];
 
-var _templateObject, _templateObject2;
-
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
-import { ClassNames, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B300, B400, B50, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
 var FONT_SIZE = {
-  xsmall: 10,
-  small: 10,
-  medium: 11,
-  large: 12,
-  xlarge: 16,
-  xxlarge: 16
-};
-
-var getButtonStyles = function getButtonStyles(css, _ref) {
-  var size = _ref.size,
-      isActive = _ref.isActive;
-  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-  var activeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    transform: scale(", ");\n    box-shadow: 0 0 0 ", "px ", ";\n    color: ", ";\n  "])), "var(--ds-background-brand, ".concat(B50, ")"), ACTIVE_SCALE_FACTOR, BORDER_WIDTH, "var(--ds-text-brand, ".concat(B300, ")"), "var(--ds-text-brand, ".concat(B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n    background-color: ", ";\n    font-size: ", "px;\n    font-family: inherit;\n    font-weight: 500;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      &:after {\n        background-color: ", ";\n        opacity: 1;\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      &:after {\n        background-color: transparent;\n      }\n    }\n\n    ", "\n  "])), "var(--ds-text, ".concat(N500, ")"), "var(--ds-background-neutral, ".concat(N20, ")"), FONT_SIZE[size], "var(--ds-background-neutral-hovered, ".concat(N30, ")"), "var(--ds-text, ".concat(N500, ")"), "var(--ds-background-neutral-hovered, ".concat(N30A, ")"), "var(--ds-background-neutral-pressed, ".concat(B50, ")"), "var(--ds-text, ".concat(B400, ")"), isActive && activeStyles);
+  xsmall: '10px',
+  small: '10px',
+  medium: '11px',
+  large: '12px',
+  xlarge: '16px',
+  xxlarge: '16px'
 };
-
+var buttonActiveStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&&': {
+    backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
+    boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ").concat("var(--ds-text-selected, ".concat(B300, ")")),
+    color: "var(--ds-text-selected, ".concat(B400, ")"),
+    transform: "scale(".concat(ACTIVE_SCALE_FACTOR, ")")
+  }
+});
+var buttonStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&&': {
+    backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
+    color: "var(--ds-text, ".concat(N500, ")"),
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    '&:hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30, ")"),
+      color: "var(--ds-text, ".concat(N500, ")"),
+      '&:after': {
+        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
+        opacity: 1
+      }
+    },
+    '&:active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, ".concat(B50, ")"),
+      color: "var(--ds-text, ".concat(B400, ")"),
+      '&:after': {
+        backgroundColor: 'transparent'
+      }
+    }
+  }
+});
 var MAX_DISPLAY_COUNT = 99;
-var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? 'circle' : _ref2$appearance,
-      _ref2$borderColor = _ref2.borderColor,
-      borderColor = _ref2$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref2$borderColor,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
-      _ref2$count = _ref2.count,
-      count = _ref2$count === void 0 ? 0 : _ref2$count,
-      testId = _ref2.testId,
-      onClick = _ref2.onClick,
-      ariaControls = _ref2['aria-controls'],
-      ariaExpanded = _ref2['aria-expanded'],
-      ariaHaspopup = _ref2['aria-haspopup'],
-      _ref2$buttonProps = _ref2.buttonProps,
-      buttonProps = _ref2$buttonProps === void 0 ? {} : _ref2$buttonProps,
-      isActive = _ref2.isActive;
+var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref$borderColor,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 0 : _ref$count,
+      testId = _ref.testId,
+      onClick = _ref.onClick,
+      ariaControls = _ref['aria-controls'],
+      ariaExpanded = _ref['aria-expanded'],
+      ariaHaspopup = _ref['aria-haspopup'],
+      _ref$buttonProps = _ref.buttonProps,
+      buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+      isActive = _ref.isActive;
   var onClickHander = useCallback(function (event, analyticsEvent) {
     if (buttonProps.onClick) {
       buttonProps.onClick(event);
@@ -60,29 +80,26 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     borderColor: borderColor,
     ref: ref,
     onClick: onClickHander
-  }, function (_ref3) {
-    var _ = _ref3.testId,
-        className = _ref3.className,
-        ref = _ref3.ref,
-        props = _objectWithoutProperties(_ref3, _excluded);
+  }, function (_ref2) {
+    var _ = _ref2.testId,
+        className = _ref2.className,
+        ref = _ref2.ref,
+        props = _objectWithoutProperties(_ref2, _excluded);
 
-    return jsx(ClassNames, null, function (_ref4) {
-      var css = _ref4.css,
-          cx = _ref4.cx;
-      return jsx("button", _extends({
-        type: "submit"
-      }, buttonProps, props, {
-        ref: ref,
-        "data-testid": testId,
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHaspopup,
-        className: cx(className, getButtonStyles(css, {
-          size: size,
-          isActive: isActive
-        }))
-      }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
-    });
+    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);
   });
 });
 MoreIndicator.displayName = 'MoreIndicator'; // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/stack.js

@@ -1,13 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
 /** @jsx jsx */
 import { Children } from 'react';
 import { css, jsx } from '@emotion/core';
 import { BORDER_WIDTH } from '@atlaskit/avatar';
 import { gridSize } from '@atlaskit/theme/constants';
 var gutter = BORDER_WIDTH * 2 + gridSize() / 2;
+var listStyles = css({
+  display: 'flex',
+  margin: 0,
+  marginRight: gutter,
+  padding: 0,
+  lineHeight: 1,
+  listStyleType: 'none !important'
+});
+var listItemStyles = css({
+  margin: 0,
+  marginRight: -gutter
+});
 
 var Stack = function Stack(_ref) {
   var children = _ref.children,
@@ -15,11 +23,12 @@ var Stack = function Stack(_ref) {
       label = _ref['aria-label'];
   return jsx("ul", {
     "data-testid": testId,
-    "aria-label": label // eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    ,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      // removes default ul styles\n      list-style-type: none !important;\n      margin: 0;\n      padding: 0;\n\n      > li {\n        margin: 0;\n        margin-right: -", "px;\n      }\n\n      display: flex;\n      line-height: 1;\n      margin-right: ", "px;\n    "])), gutter, gutter)
+    "aria-label": label,
+    css: listStyles
   }, Children.map(children, function (child) {
-    return child && jsx("li", null, child);
+    return child && jsx("li", {
+      css: listItemStyles
+    }, child);
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.9",
+	"version": "8.5.12",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "8.5.9",
+  "version": "8.5.12",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,10 +24,10 @@
   },
   "dependencies": {
     "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/menu": "^1.2.0",
+    "@atlaskit/menu": "^1.3.0",
     "@atlaskit/popup": "^1.3.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/field-base": "^15.0.0",
+    "@atlaskit/form": "^8.4.5",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/section-message": "^6.1.0",
@@ -53,7 +53,7 @@
     "@testing-library/react": "^8.0.1",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
-    "typescript": "3.9.6",
+    "typescript": "3.9.10",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -72,7 +72,8 @@
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [
-        "emotion"
+        "emotion",
+        "static"
       ]
     }
   },