@atlaskit/avatar-group 10.1.5 → 11.0.0

package/dist/esm/components/stack.js

@@ -1,41 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* stack.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./stack.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
-import { css, jsx } from '@emotion/react';
-import { BORDER_WIDTH } from '@atlaskit/avatar';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-var gutter = BORDER_WIDTH * 2 + gridSize() / 2;
-var listStyles = 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 = 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
-});
+var listStyles = null;
+var listItemStyles = null;
 var Stack = function Stack(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
     label = _ref['aria-label'];
-  return jsx("ul", {
+  return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    css: listStyles
+    className: ax(["_18s8ze3t _1yt4ze3t _1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _12l2u2gc"])
   }, Children.map(children, function (child) {
-    return child && jsx("li", {
-      css: listItemStyles
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: ax(["_18s8ze3t _12l2x0bf"])
     }, child);
   }));
 };

package/dist/types/components/avatar-group.d.ts

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ElementType, type MouseEventHandler } from 'react';
-import { jsx } from '@emotion/react';
+import React, { type ElementType, type MouseEventHandler } from 'react';
 import Avatar from '@atlaskit/avatar';
 import { type PositionType } from '@atlaskit/tooltip';
 import { type AvatarGroupOverrides, type AvatarGroupSize, type AvatarProps, type onAvatarClickHandler } from './types';
@@ -116,5 +111,5 @@ export interface AvatarGroupProps {
  * - [Code](https://atlassian.design/components/avatar-group/code)
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
  */
-declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => jsx.JSX.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => JSX.Element;
 export default AvatarGroup;

package/dist/types/components/internal/components/popup-avatar-group.d.ts

@@ -1,7 +1,7 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type PopupAvatarGroupProps } from '../../types';
 /**
  * It sets focus to the first avatar when popup is open.
  */
-declare const PopupAvatarGroup: ({ children, isLoading, maxHeight, maxWidth, minHeight, minWidth, onClick, role, setInitialFocusRef, spacing, testId, ...rest }: PopupAvatarGroupProps) => jsx.JSX.Element;
+declare const PopupAvatarGroup: ({ children, isLoading, maxHeight, maxWidth, minHeight, minWidth, onClick, role, setInitialFocusRef, spacing, testId, ...rest }: PopupAvatarGroupProps) => JSX.Element;
 export default PopupAvatarGroup;

package/dist/types-ts4.5/components/avatar-group.d.ts

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ElementType, type MouseEventHandler } from 'react';
-import { jsx } from '@emotion/react';
+import React, { type ElementType, type MouseEventHandler } from 'react';
 import Avatar from '@atlaskit/avatar';
 import { type PositionType } from '@atlaskit/tooltip';
 import { type AvatarGroupOverrides, type AvatarGroupSize, type AvatarProps, type onAvatarClickHandler } from './types';
@@ -116,5 +111,5 @@ export interface AvatarGroupProps {
  * - [Code](https://atlassian.design/components/avatar-group/code)
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
  */
-declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => jsx.JSX.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => JSX.Element;
 export default AvatarGroup;

package/dist/types-ts4.5/components/internal/components/popup-avatar-group.d.ts

@@ -1,7 +1,7 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type PopupAvatarGroupProps } from '../../types';
 /**
  * It sets focus to the first avatar when popup is open.
  */
-declare const PopupAvatarGroup: ({ children, isLoading, maxHeight, maxWidth, minHeight, minWidth, onClick, role, setInitialFocusRef, spacing, testId, ...rest }: PopupAvatarGroupProps) => jsx.JSX.Element;
+declare const PopupAvatarGroup: ({ children, isLoading, maxHeight, maxWidth, minHeight, minWidth, onClick, role, setInitialFocusRef, spacing, testId, ...rest }: PopupAvatarGroupProps) => JSX.Element;
 export default PopupAvatarGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "10.1.5",
+	"version": "11.0.0",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,6 +26,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/avatar": "^21.17.0",
+		"@atlaskit/css": "^0.7.2",
 		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -34,7 +35,7 @@
 		"@atlaskit/tokens": "^3.2.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
+		"@compiled/react": "^0.18.1",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
@@ -56,7 +57,6 @@
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
-		"@emotion/styled": "^11.0.0",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/user-event": "^14.4.3",
 		"lodash": "^4.17.21",