@atlaskit/avatar-group 10.1.5 → 11.1.0

package/dist/es2019/components/grid.js

@@ -1,40 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* grid.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./grid.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
-import { css, jsx } from '@emotion/react';
 const gutter = "var(--ds-space-negative-050, -4px)";
-const listStyles = 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
-});
-const listItemStyles = 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)"
-});
+const listStyles = null;
+const listItemStyles = null;
 const Grid = ({
   children,
   testId,
   'aria-label': label
-}) => jsx("ul", {
+}) => /*#__PURE__*/React.createElement("ul", {
   "data-testid": testId,
   "aria-label": label,
-  css: listStyles
-}, Children.map(children, child => child && jsx("li", {
-  css: listItemStyles
+  className: ax(["_18s8ze3t _1yt4ze3t _1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _12l2r5cr _ahbqr5cr"])
+}, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
+  className: ax(["_18s8ze3t _6rthu2gc _y4ti1b66 _bozg1b66"])
 }, child)));
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -1,10 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useContext, useEffect } from 'react';
-import { jsx } from '@emotion/react';
+import React, { useContext, useEffect } from 'react';
 import { MenuGroup } from '@atlaskit/menu';
 import { FocusManagerContext } from './focus-manager';
 
@@ -31,7 +26,7 @@ const PopupAvatarGroup = ({
   useEffect(() => {
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(menuItemRefs[0]);
   }, [menuItemRefs, setInitialFocusRef]);
-  return jsx(MenuGroup, _extends({
+  return /*#__PURE__*/React.createElement(MenuGroup, _extends({
     isLoading: isLoading,
     maxHeight: maxHeight,
     maxWidth: maxWidth,

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

@@ -0,0 +1,15 @@
+
+._16hg1s4m._16hg1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
+._16hg29zg._16hg29zg{background-color:var(--ds-background-selected,#deebff)}
+._1g4l1np6._1g4l1np6{transform:scale(.9)}
+._1w9010s3._1w9010s3{color:var(--ds-text,#42526e)}
+._1w901ldt._1w901ldt{color:var(--ds-text-selected,#0052cc)}
+._c6d7glyw._c6d7glyw:after{display:none}
+._so1e1gmm._so1e1gmm{box-shadow:0 0 0 2px var(--ds-border-selected,#0065ff)}
+._1fh110s3._1fh110s3:hover{color:var(--ds-text,#42526e)}
+._1fh11pwi._1fh11pwi:hover{color:var(--ds-text-selected,#42526e)}
+._u1mb1gf2._u1mb1gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
+._u1mbyucn._u1mbyucn:hover{background-color:var(--ds-background-neutral-hovered,#ebecf0)}._10fu18al._10fu18al:active{background-color:var(--ds-background-neutral-pressed,#deebff)}
+._10fu1elt._10fu1elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
+._1l5a1ldt._1l5a1ldt:active{color:var(--ds-text-selected,#0052cc)}
+._1l5a1x4z._1l5a1x4z:active{color:var(--ds-text,#0052cc)}

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

@@ -1,13 +1,18 @@
+/* more-indicator.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./more-indicator.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback } from 'react';
-import { css, jsx } from '@emotion/react';
-import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
+import Avatar from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
+const B300 = '#0065FF';
+const B400 = '#0052CC';
+const B50 = '#DEEBFF';
+const N0 = '#FFFFFF';
+const N20 = '#F4F5F7';
+const N30 = '#EBECF0';
+const N500 = '#42526E';
 const 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)",
@@ -15,44 +20,8 @@ const 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)"
 };
-const buttonActiveStyles = 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, ${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})`,
-      color: `var(--ds-text-selected, ${N500})`
-    },
-    '&:active': {
-      backgroundColor: `var(--ds-background-selected-pressed, ${B50})`,
-      color: `var(--ds-text-selected, ${B400})`
-    }
-  }
-});
-const buttonStyles = 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, ${N20})`,
-    color: `var(--ds-text, ${N500})`,
-    '&:hover': {
-      backgroundColor: `var(--ds-background-neutral-hovered, ${N30})`,
-      color: `var(--ds-text, ${N500})`
-    },
-    '&:active': {
-      backgroundColor: `var(--ds-background-neutral-pressed, ${B50})`,
-      color: `var(--ds-text, ${B400})`
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&::after': {
-      display: 'none'
-    }
-  }
-});
+const buttonActiveStyles = null;
+const buttonStyles = null;
 const MAX_DISPLAY_COUNT = 99;
 const MoreIndicator = /*#__PURE__*/forwardRef(({
   appearance = 'circle',
@@ -76,7 +45,7 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [buttonProps.onClick, onClick]);
-  return jsx(Avatar, {
+  return /*#__PURE__*/React.createElement(Avatar, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
@@ -87,9 +56,7 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
     className,
     ref,
     ...props
-  }) =>
-  // eslint-disable-next-line @atlaskit/design-system/no-html-button
-  jsx("button", _extends({
+  }) => /*#__PURE__*/React.createElement("button", _extends({
     type: "submit"
   }, buttonProps, props, {
     ref: ref,
@@ -103,10 +70,8 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
       // 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
+    className: ax(["_16hg1s4m _1w9010s3 _u1mbyucn _1fh110s3 _10fu18al _1l5a1x4z _c6d7glyw", isActive && "_16hg29zg _so1e1gmm _1w901ldt _1g4l1np6 _u1mb1gf2 _1fh11pwi _10fu1elt _1l5a1ldt", className])
   }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count));
 });
 MoreIndicator.displayName = 'MoreIndicator';

package/dist/es2019/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/es2019/components/stack.js

@@ -1,40 +1,20 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* stack.tsx generated by @compiled/babel-plugin v0.36.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';
-const gutter = BORDER_WIDTH * 2 + gridSize() / 2;
-const 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
-});
-const 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
-});
+const listStyles = null;
+const listItemStyles = null;
 const Stack = ({
   children,
   testId,
   'aria-label': label
-}) => jsx("ul", {
+}) => /*#__PURE__*/React.createElement("ul", {
   "data-testid": testId,
   "aria-label": label,
-  css: listStyles
-}, Children.map(children, child => child && jsx("li", {
-  css: listItemStyles
+  className: ax(["_18s8ze3t _1yt4ze3t _1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _12l2u2gc"])
+}, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
+  className: ax(["_18s8ze3t _12l2x0bf"])
 }, child)));
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -5,12 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["aria-controls", "aria-expanded", "aria-haspopup", "onClick"];
 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';
-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';
@@ -18,7 +13,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';
@@ -35,21 +29,21 @@ function getOverrides(overrides) {
   return {
     AvatarGroupItem: _objectSpread({
       render: function render(Component, props, index) {
-        return jsx(Component, _extends({}, props, {
+        return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
           key: composeUniqueKey(props.avatar, index)
         }));
       }
     }, overrides && overrides.AvatarGroupItem),
     Avatar: _objectSpread({
       render: function render(Component, props, index) {
-        return jsx(Component, _extends({}, props, {
+        return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
           key: composeUniqueKey(props, index)
         }));
       }
     }, overrides && overrides.Avatar),
     MoreIndicator: _objectSpread({
       render: function render(Component, props) {
-        return jsx(Component, props);
+        return /*#__PURE__*/React.createElement(Component, props);
       }
     }, overrides && overrides.MoreIndicator)
   };
@@ -197,25 +191,25 @@ var AvatarGroup = function AvatarGroup(_ref) {
       }
       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: function content(_ref4) {
         var setInitialFocusRef = _ref4.setInitialFocusRef;
-        return jsx(FocusManager, null, jsx(PopupAvatarGroup, {
+        return /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(PopupAvatarGroup, {
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
           minWidth: 250,
           maxHeight: 300,
           setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
-        }, jsx(Section, null, data.slice(max).map(function (avatar, index) {
+        }, /*#__PURE__*/React.createElement(Section, null, data.slice(max).map(function (avatar, index) {
           return getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
             avatar: avatar,
             onAvatarClick: onAvatarClick,
@@ -239,7 +233,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var total = data.length;
   var maxAvatar = total > max ? max - 1 : max;
   var Group = appearance === 'stack' ? Stack : Grid;
-  return jsx(Group, {
+  return /*#__PURE__*/React.createElement(Group, {
     testId: testId && "".concat(testId, "--avatar-group"),
     "aria-label": label
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
@@ -253,7 +247,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       } : 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 && "".concat(testId, "--tooltip-").concat(idx),

package/dist/esm/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/esm/components/grid.js

@@ -1,41 +1,22 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* grid.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./grid.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
-import { css, jsx } from '@emotion/react';
 var gutter = "var(--ds-space-negative-050, -4px)";
-var listStyles = 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 = 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 jsx("ul", {
+  return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    css: listStyles
+    className: ax(["_18s8ze3t _1yt4ze3t _1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _12l2r5cr _ahbqr5cr"])
   }, Children.map(children, function (child) {
-    return child && jsx("li", {
-      css: listItemStyles
+    return child && /*#__PURE__*/React.createElement("li", {
+      className: ax(["_18s8ze3t _6rthu2gc _y4ti1b66 _bozg1b66"])
     }, child);
   }));
 };

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

@@ -1,12 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "isLoading", "maxHeight", "maxWidth", "minHeight", "minWidth", "onClick", "role", "setInitialFocusRef", "spacing", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useContext, useEffect } from 'react';
-import { jsx } from '@emotion/react';
+import React, { useContext, useEffect } from 'react';
 import { MenuGroup } from '@atlaskit/menu';
 import { FocusManagerContext } from './focus-manager';
 
@@ -33,7 +28,7 @@ var PopupAvatarGroup = function PopupAvatarGroup(_ref) {
   useEffect(function () {
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(menuItemRefs[0]);
   }, [menuItemRefs, setInitialFocusRef]);
-  return jsx(MenuGroup, _extends({
+  return /*#__PURE__*/React.createElement(MenuGroup, _extends({
     isLoading: isLoading,
     maxHeight: maxHeight,
     maxWidth: maxWidth,

package/dist/esm/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/esm/components/more-indicator.js

@@ -1,15 +1,20 @@
+/* more-indicator.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["testId", "className", "ref"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./more-indicator.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback } from 'react';
-import { css, jsx } from '@emotion/react';
-import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
+import Avatar from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
+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)",
@@ -17,44 +22,8 @@ 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 = 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(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, ")"),
-      color: "var(--ds-text-selected, ".concat(N500, ")")
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-selected-pressed, ".concat(B50, ")"),
-      color: "var(--ds-text-selected, ".concat(B400, ")")
-    }
-  }
-});
-var buttonStyles = 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(N20, ")"),
-    color: "var(--ds-text, ".concat(N500, ")"),
-    '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30, ")"),
-      color: "var(--ds-text, ".concat(N500, ")")
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-neutral-pressed, ".concat(B50, ")"),
-      color: "var(--ds-text, ".concat(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__*/forwardRef(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
@@ -81,7 +50,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [buttonProps.onClick, onClick]);
-  return jsx(Avatar, {
+  return /*#__PURE__*/React.createElement(Avatar, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
@@ -92,28 +61,35 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref2.className,
       ref = _ref2.ref,
       props = _objectWithoutProperties(_ref2, _excluded);
-    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: {
-          // 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", _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
+      ,
+
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: 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": ix("var(--ds-background-neutral, ".concat(N20, ")")),
+        "--_h5fhc4": ix("var(--ds-text, ".concat(N500, ")")),
+        "--_hz7h6s": ix("var(--ds-background-neutral-hovered, ".concat(N30, ")")),
+        "--_1axggjc": ix("var(--ds-background-neutral-pressed, ".concat(B50, ")")),
+        "--_1lrmnoy": ix("var(--ds-text, ".concat(B400, ")")),
+        "--_rryx0a": ix("var(--ds-background-selected, ".concat(B50, ")")),
+        "--_1t841jg": ix("0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B300, ")"))),
+        "--_1hfkvbo": ix("var(--ds-text-selected, ".concat(B400, ")")),
+        "--_rkvepi": ix("var(--ds-background-selected-hovered, ".concat(N30, ")")),
+        "--_ph2vs": ix("var(--ds-text-selected, ".concat(N500, ")")),
+        "--_ohg1x3": ix("var(--ds-background-selected-pressed, ".concat(B50, ")"))
+      }
+    }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
   });
 });
 MoreIndicator.displayName = 'MoreIndicator';

package/dist/esm/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}