@atlaskit/avatar-group 10.1.5 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/avatar-group
 
+## 11.0.0
+
+### Major Changes
+
+- [#104933](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104933)
+  [`8a592509504c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a592509504c7) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/avatar-group`, you will need to ensure
+  that your bundler is configured to handle `.css` imports correctly. Most bundlers come with
+  built-in support for `.css` imports, so you may not need to do anything. If you are using a
+  different bundler, please refer to the documentation for that bundler to understand how to handle
+  `.css` imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 10.1.5
 
 ### Patch Changes

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
@@ -18,7 +18,6 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _menu = require("@atlaskit/menu");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _avatarGroupItem = _interopRequireDefault(require("./avatar-group-item"));
 var _grid = _interopRequireDefault(require("./grid"));
@@ -28,11 +27,10 @@ var _moreIndicator = _interopRequireDefault(require("./more-indicator"));
 var _stack = _interopRequireDefault(require("./stack"));
 var _utils = require("./utils");
 var _excluded = ["aria-controls", "aria-expanded", "aria-haspopup", "onClick"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /**
- * @jsxRuntime classic
- * @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; }
 var MAX_COUNT = {
   grid: 11,
   stack: 5
@@ -41,21 +39,21 @@ function getOverrides(overrides) {
   return {
     AvatarGroupItem: _objectSpread({
       render: function render(Component, props, index) {
-        return (0, _react2.jsx)(Component, (0, _extends2.default)({}, props, {
+        return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
           key: (0, _utils.composeUniqueKey)(props.avatar, index)
         }));
       }
     }, overrides && overrides.AvatarGroupItem),
     Avatar: _objectSpread({
       render: function render(Component, props, index) {
-        return (0, _react2.jsx)(Component, (0, _extends2.default)({}, props, {
+        return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
           key: (0, _utils.composeUniqueKey)(props, index)
         }));
       }
     }, overrides && overrides.Avatar),
     MoreIndicator: _objectSpread({
       render: function render(Component, props) {
-        return (0, _react2.jsx)(Component, props);
+        return /*#__PURE__*/_react.default.createElement(Component, props);
       }
     }, overrides && overrides.MoreIndicator)
   };
@@ -203,25 +201,25 @@ var AvatarGroup = function AvatarGroup(_ref) {
       }
       return boundariesElement === 'window' ? 'document' : 'viewport';
     }();
-    return (0, _react2.jsx)(_popup.default, {
+    return /*#__PURE__*/_react.default.createElement(_popup.default, {
       isOpen: isOpen,
       onClose: onClose,
       placement: "bottom-end",
       boundary: boundary,
       rootBoundary: rootBoundary,
       shouldFlip: true,
-      zIndex: _constants.layers.modal(),
+      zIndex: 510,
       shouldRenderToParent: shouldPopupRenderToParent,
       content: function content(_ref4) {
         var setInitialFocusRef = _ref4.setInitialFocusRef;
-        return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_popupAvatarGroup.default, {
+        return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_popupAvatarGroup.default, {
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
           minWidth: 250,
           maxHeight: 300,
           setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
-        }, (0, _react2.jsx)(_menu.Section, null, data.slice(max).map(function (avatar, index) {
+        }, /*#__PURE__*/_react.default.createElement(_menu.Section, null, data.slice(max).map(function (avatar, index) {
           return getOverrides(overrides).AvatarGroupItem.render(_avatarGroupItem.default, {
             avatar: avatar,
             onAvatarClick: onAvatarClick,
@@ -245,7 +243,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var total = data.length;
   var maxAvatar = total > max ? max - 1 : max;
   var Group = appearance === 'stack' ? _stack.default : _grid.default;
-  return (0, _react2.jsx)(Group, {
+  return /*#__PURE__*/_react.default.createElement(Group, {
     testId: testId && "".concat(testId, "--avatar-group"),
     "aria-label": label
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
@@ -259,7 +257,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       } : undefined,
       stackIndex: max - idx
     }), idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? (0, _react2.jsx)(_tooltip.default, {
+    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       key: (0, _utils.composeUniqueKey)(avatarData, idx),
       content: avatarData.name,
       testId: testId && "".concat(testId, "--tooltip-").concat(idx),

package/dist/cjs/components/grid.compiled.css

@@ -0,0 +1,13 @@
+
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
+._19121cl4{isolation:isolate}
+._1bah1y6m{justify-content:flex-start}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._2mzuagmp{list-style-type:none!important}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbqr5cr{margin-inline-start:var(--ds-space-negative-050,-4px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._vwz4kb7n{line-height:1}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

package/dist/cjs/components/grid.js

@@ -1,48 +1,31 @@
+/* grid.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+require("./grid.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var gutter = "var(--ds-space-negative-050, -4px)";
-var listStyles = (0, _react2.css)({
-  display: 'flex',
-  margin: "var(--ds-space-0, 0px)",
-  padding: "var(--ds-space-0, 0px)",
-  justifyContent: 'flex-start',
-  flexWrap: 'wrap',
-  isolation: 'isolate',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 1,
-  // 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)",
-  marginBlockEnd: "var(--ds-space-100, 8px)",
-  paddingInlineEnd: "var(--ds-space-050, 4px)",
-  paddingInlineStart: "var(--ds-space-050, 4px)"
-});
+var listStyles = null;
+var listItemStyles = null;
 var Grid = function Grid(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
     label = _ref['aria-label'];
-  return (0, _react2.jsx)("ul", {
+  return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    css: listStyles
+    className: (0, _runtime.ax)(["_18s8ze3t _1yt4ze3t _1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _12l2r5cr _ahbqr5cr"])
   }, _react.Children.map(children, function (child) {
-    return child && (0, _react2.jsx)("li", {
-      css: listItemStyles
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: (0, _runtime.ax)(["_18s8ze3t _6rthu2gc _y4ti1b66 _bozg1b66"])
     }, child);
   }));
 };

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

@@ -1,21 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _menu = require("@atlaskit/menu");
 var _focusManager = require("./focus-manager");
 var _excluded = ["children", "isLoading", "maxHeight", "maxWidth", "minHeight", "minWidth", "onClick", "role", "setInitialFocusRef", "spacing", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * It sets focus to the first avatar when popup is open.
  */
@@ -39,7 +37,7 @@ var PopupAvatarGroup = function PopupAvatarGroup(_ref) {
   (0, _react.useEffect)(function () {
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(menuItemRefs[0]);
   }, [menuItemRefs, setInitialFocusRef]);
-  return (0, _react2.jsx)(_menu.MenuGroup, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, (0, _extends2.default)({
     isLoading: isLoading,
     maxHeight: maxHeight,
     maxWidth: maxWidth,

package/dist/cjs/components/more-indicator.compiled.css

@@ -0,0 +1,15 @@
+
+._16hg1kxl._16hg1kxl{background-color:var(--_rryx0a)}
+._16hglslw._16hglslw{background-color:var(--_1jkcdu5)}
+._1g4l1np6._1g4l1np6{transform:scale(.9)}
+._1w901hoq._1w901hoq{color:var(--_h5fhc4)}
+._1w90ln51._1w90ln51{color:var(--_1hfkvbo)}
+._c6d7glyw._c6d7glyw:after{display:none}
+._so1ehi7p._so1ehi7p{box-shadow:var(--_1t841jg)}
+._1fh11hoq._1fh11hoq:hover{color:var(--_h5fhc4)}
+._1fh13htb._1fh13htb:hover{color:var(--_ph2vs)}
+._u1mbaek3._u1mbaek3:hover{background-color:var(--_hz7h6s)}
+._u1mbg85j._u1mbg85j:hover{background-color:var(--_rkvepi)}._10fu1kgi._10fu1kgi:active{background-color:var(--_1axggjc)}
+._10fu1smf._10fu1smf:active{background-color:var(--_ohg1x3)}
+._1l5a17km._1l5a17km:active{color:var(--_1lrmnoy)}
+._1l5aln51._1l5aln51:active{color:var(--_1hfkvbo)}

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

@@ -1,3 +1,4 @@
+/* more-indicator.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,20 +7,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./more-indicator.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["testId", "className", "ref"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var B300 = '#0065FF';
+var B400 = '#0052CC';
+var B50 = '#DEEBFF';
+var N0 = '#FFFFFF';
+var N20 = '#F4F5F7';
+var N30 = '#EBECF0';
+var N500 = '#42526E';
 var buttonSizes = {
   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)",
@@ -27,50 +32,14 @@ var buttonSizes = {
   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, @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, ")"),
-      color: "var(--ds-text-selected, ".concat(_colors.N500, ")")
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B50, ")"),
-      color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
-    }
-  }
-});
-var buttonStyles = (0, _react2.css)({
-  // 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, ")"),
-    '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")"),
-      color: "var(--ds-text, ".concat(_colors.N500, ")")
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-neutral-pressed, ".concat(_colors.B50, ")"),
-      color: "var(--ds-text, ".concat(_colors.B400, ")")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&::after': {
-      display: 'none'
-    }
-  }
-});
+var buttonActiveStyles = null;
+var buttonStyles = null;
 var MAX_DISPLAY_COUNT = 99;
 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 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-border-inverse, ".concat(_colors.N0, ")") : _ref$borderColor,
+    borderColor = _ref$borderColor === void 0 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-border-inverse, ".concat(N0, ")") : _ref$borderColor,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$count = _ref.count,
@@ -91,7 +60,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [buttonProps.onClick, onClick]);
-  return (0, _react2.jsx)(_avatar.default, {
+  return /*#__PURE__*/React.createElement(_avatar.default, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
@@ -102,28 +71,35 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref2.className,
       ref = _ref2.ref,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    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: {
-          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-          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)
-    );
+    return /*#__PURE__*/React.createElement("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
+      ,
+
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: (0, _runtime.ax)(["_16hglslw _1w901hoq _u1mbaek3 _1fh11hoq _10fu1kgi _1l5a17km _c6d7glyw", isActive && "_16hg1kxl _so1ehi7p _1w90ln51 _1g4l1np6 _u1mbg85j _1fh13htb _10fu1smf _1l5aln51", className]),
+      style: {
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        font: buttonSizes[size],
+        "--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(N20, ")")),
+        "--_h5fhc4": (0, _runtime.ix)("var(--ds-text, ".concat(N500, ")")),
+        "--_hz7h6s": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(N30, ")")),
+        "--_1axggjc": (0, _runtime.ix)("var(--ds-background-neutral-pressed, ".concat(B50, ")")),
+        "--_1lrmnoy": (0, _runtime.ix)("var(--ds-text, ".concat(B400, ")")),
+        "--_rryx0a": (0, _runtime.ix)("var(--ds-background-selected, ".concat(B50, ")")),
+        "--_1t841jg": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B300, ")"))),
+        "--_1hfkvbo": (0, _runtime.ix)("var(--ds-text-selected, ".concat(B400, ")")),
+        "--_rkvepi": (0, _runtime.ix)("var(--ds-background-selected-hovered, ".concat(N30, ")")),
+        "--_ph2vs": (0, _runtime.ix)("var(--ds-text-selected, ".concat(N500, ")")),
+        "--_ohg1x3": (0, _runtime.ix)("var(--ds-background-selected-pressed, ".concat(B50, ")"))
+      }
+    }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
   });
 });
 MoreIndicator.displayName = 'MoreIndicator';

package/dist/cjs/components/stack.compiled.css

@@ -0,0 +1,8 @@
+
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._12l2x0bf{margin-inline-end:var(--ds-space-negative-100,-8px)}
+._19121cl4{isolation:isolate}
+._1e0c1txw{display:flex}
+._2mzuagmp{list-style-type:none!important}
+._vwz4kb7n{line-height:1}

package/dist/cjs/components/stack.js

@@ -1,49 +1,30 @@
+/* stack.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-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/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)",
-  padding: "var(--ds-space-0, 0px)",
-  isolation: 'isolate',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 1,
-  // 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, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginInlineEnd: -gutter
-});
+require("./stack.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var listStyles = null;
+var listItemStyles = null;
 var Stack = function Stack(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
     label = _ref['aria-label'];
-  return (0, _react2.jsx)("ul", {
+  return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    css: listStyles
+    className: (0, _runtime.ax)(["_18s8ze3t _1yt4ze3t _1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _12l2u2gc"])
   }, _react.Children.map(children, function (child) {
-    return child && (0, _react2.jsx)("li", {
-      css: listItemStyles
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: (0, _runtime.ax)(["_18s8ze3t _12l2x0bf"])
     }, child);
   }));
 };

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

@@ -1,10 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useState } from 'react';
-import { jsx } from '@emotion/react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
@@ -12,7 +7,6 @@ import noop from '@atlaskit/ds-lib/noop';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import { Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
-import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import AvatarGroupItem from './avatar-group-item';
 import Grid from './grid';
@@ -28,19 +22,19 @@ const MAX_COUNT = {
 function getOverrides(overrides) {
   return {
     AvatarGroupItem: {
-      render: (Component, props, index) => jsx(Component, _extends({}, props, {
+      render: (Component, props, index) => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
         key: composeUniqueKey(props.avatar, index)
       })),
       ...(overrides && overrides.AvatarGroupItem)
     },
     Avatar: {
-      render: (Component, props, index) => jsx(Component, _extends({}, props, {
+      render: (Component, props, index) => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
         key: composeUniqueKey(props, index)
       })),
       ...(overrides && overrides.Avatar)
     },
     MoreIndicator: {
-      render: (Component, props) => jsx(Component, props),
+      render: (Component, props) => /*#__PURE__*/React.createElement(Component, props),
       ...(overrides && overrides.MoreIndicator)
     }
   };
@@ -174,23 +168,23 @@ const AvatarGroup = ({
       }
       return boundariesElement === 'window' ? 'document' : 'viewport';
     })();
-    return jsx(Popup, {
+    return /*#__PURE__*/React.createElement(Popup, {
       isOpen: isOpen,
       onClose: onClose,
       placement: "bottom-end",
       boundary: boundary,
       rootBoundary: rootBoundary,
       shouldFlip: true,
-      zIndex: layers.modal(),
+      zIndex: 510,
       shouldRenderToParent: shouldPopupRenderToParent,
       content: ({
         setInitialFocusRef
-      }) => jsx(FocusManager, null, jsx(PopupAvatarGroup, {
+      }) => /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(PopupAvatarGroup, {
         onClick: e => e.stopPropagation(),
         minWidth: 250,
         maxHeight: 300,
         setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
-      }, jsx(Section, null, data.slice(max).map((avatar, index) => getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
+      }, /*#__PURE__*/React.createElement(Section, null, data.slice(max).map((avatar, index) => getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
         avatar,
         onAvatarClick,
         testId: testId && `${testId}--avatar-group-item-${index + max}`,
@@ -211,7 +205,7 @@ const AvatarGroup = ({
   const total = data.length;
   const maxAvatar = total > max ? max - 1 : max;
   const Group = appearance === 'stack' ? Stack : Grid;
-  return jsx(Group, {
+  return /*#__PURE__*/React.createElement(Group, {
     testId: testId && `${testId}--avatar-group`,
     "aria-label": label
   }, data.slice(0, maxAvatar).map((avatarData, idx) => {
@@ -226,7 +220,7 @@ const AvatarGroup = ({
       } : undefined,
       stackIndex: max - idx
     }, idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? jsx(Tooltip, {
+    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
       key: composeUniqueKey(avatarData, idx),
       content: avatarData.name,
       testId: testId && `${testId}--tooltip-${idx}`,

package/dist/es2019/components/grid.compiled.css

@@ -0,0 +1,13 @@
+
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
+._19121cl4{isolation:isolate}
+._1bah1y6m{justify-content:flex-start}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._2mzuagmp{list-style-type:none!important}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbqr5cr{margin-inline-start:var(--ds-space-negative-050,-4px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._vwz4kb7n{line-height:1}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}