@atlaskit/avatar 24.0.0 → 25.0.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/avatar
 
+## 25.0.0
+
+### Major Changes
+
+- [#122909](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122909)
+  [`5330c20b7c5fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5330c20b7c5fd) -
+  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`, 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.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.0.0
 
 ### Major Changes

package/dist/cjs/avatar-content.compiled.css

@@ -0,0 +1,71 @@
+
+._14mj1crf:after{border-radius:9pt}
+._14mj1l7b:after{border-radius:3px}
+._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
+._14mji2wt:after{border-radius:6px}
+._14mjyh40:after{border-radius:2px}
+._19itglyw{border:none}
+._2rko1crf{border-radius:9pt}
+._2rko1l7b{border-radius:3px}
+._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
+._2rkoi2wt{border-radius:6px}
+._2rkoyh40{border-radius:2px}
+._9v7aze3t:after{inset:var(--ds-space-0,0)}
+._qc5o1p41:after{transition:opacity .2s}
+._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
+._12ji1r31{outline-color:currentColor}
+._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._12y31o36{outline-width:medium}
+._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
+._18m915vq{overflow-y:hidden}
+._18postnw:after{position:absolute}
+._1bah1h6o{justify-content:center}
+._1bsb16xz{width:6pc}
+._1bsb1qr7{width:8pc}
+._1bsb1tcg{width:24px}
+._1bsb1ylp{width:40px}
+._1bsb7vkz{width:1pc}
+._1bsbzwfg{width:2pc}
+._1e0c1txw{display:flex}
+._1hfk1j28:after{background-color:transparent}
+._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
+._1peqidpf:after{opacity:0}
+._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
+._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4cvr1fhb{align-items:stretch}
+._4t3i16xz{height:6pc}
+._4t3i1qr7{height:8pc}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3i7vkz{height:1pc}
+._4t3izwfg{height:2pc}
+._4tpu1g4v:hover:after{background-color:var(--ds-interaction-hovered,rgba(9,30,66,.36))}
+._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
+._80om13gf{cursor:not-allowed}
+._80om1kw7{cursor:inherit}
+._80omtlke{cursor:pointer}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._aetrf705:after{content:" "}
+._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
+._bfhkcxp3{background-color:var(--avatar-bg-color)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._eeh8kb7n:active:after{opacity:1}
+._ez1ykb7n:hover:after{opacity:1}
+._gcm1182g:active:after{background-color:var(--ds-interaction-pressed,rgba(9,30,66,.36))}
+._kqswh2mm{position:relative}
+._kqswpfqs{position:static}
+._t9ec1aqe{transform:translateZ(0)}
+._vchh1ntv{box-sizing:content-box}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
+._z0ai1osq:after{width:100%}
+._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._1ejjglyw:focus-visible{box-shadow:none}
+._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}}
+@media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}

package/dist/cjs/avatar-content.js

@@ -1,173 +1,49 @@
+/* avatar-content.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarContent = void 0;
+require("./avatar-content.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _context = require("./context");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- * @jsxFrag
- */
-
+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 boxShadowCssVar = '--avatar-box-shadow';
 var bgColorCssVar = '--avatar-bg-color';
 var styles = {
-  root: (0, _react2.css)({
-    display: 'flex',
-    boxSizing: 'content-box',
-    position: 'static',
-    alignItems: 'stretch',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    backgroundColor: "var(".concat(bgColorCssVar, ")"),
-    border: 'none',
-    boxShadow: "var(".concat(boxShadowCssVar, ")"),
-    cursor: 'inherit',
-    marginBlockEnd: "var(--ds-space-025, 2px)",
-    marginBlockStart: "var(--ds-space-025, 2px)",
-    marginInlineEnd: "var(--ds-space-025, 2px)",
-    marginInlineStart: "var(--ds-space-025, 2px)",
-    outline: 'none',
-    overflow: 'hidden',
-    paddingBlockEnd: "var(--ds-space-0, 0px)",
-    paddingBlockStart: "var(--ds-space-0, 0px)",
-    paddingInlineEnd: "var(--ds-space-0, 0px)",
-    paddingInlineStart: "var(--ds-space-0, 0px)",
-    transform: 'translateZ(0)',
-    transition: 'transform 200ms, opacity 200ms',
-    '&::after': {
-      width: '100%',
-      position: 'absolute',
-      inset: "var(--ds-space-0, 0px)",
-      backgroundColor: 'transparent',
-      content: "' '",
-      opacity: 0,
-      pointerEvents: 'none',
-      transition: 'opacity 200ms'
-    },
-    '&:focus-visible': {
-      boxShadow: 'none',
-      outlineColor: "var(--ds-border-focused, #2684FF)",
-      outlineOffset: "var(--ds-border-width-outline, 2px)",
-      outlineStyle: 'solid',
-      outlineWidth: "var(--ds-border-width-outline, 2px)"
-    },
-    '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-      '&:focus-visible': {
-        outlineWidth: "var(--ds-border-width, 1px)"
-      }
-    }
-  }),
-  circle: (0, _react2.css)({
-    borderRadius: "var(--ds-border-radius-circle, 50%)",
-    '&::after': {
-      borderRadius: "var(--ds-border-radius-circle, 50%)"
-    }
-  }),
-  positionRelative: (0, _react2.css)({
-    position: 'relative'
-  }),
-  interactive: (0, _react2.css)({
-    cursor: 'pointer',
-    '&:hover': {
-      '&::after': {
-        backgroundColor: "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"),
-        opacity: 1
-      }
-    },
-    '&:active': {
-      transform: "scale(0.9)",
-      '&::after': {
-        backgroundColor: "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"),
-        opacity: 1
-      }
-    },
-    '@media screen and (forced-colors: active)': {
-      '&:focus-visible': {
-        outlineWidth: 1
-      }
-    }
-  }),
-  disabled: (0, _react2.css)({
-    cursor: 'not-allowed',
-    '&::after': {
-      backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
-      opacity: "var(--ds-opacity-disabled, 0.7)"
-    }
-  })
+  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw _1ejjglyw _mizu194a _1ah3v77o _ra3xnqa1 _128m1bk5 _4dave4h9",
+  circle: "_2rko1q5u _14mj1q5u",
+  positionRelative: "_kqswh2mm",
+  disabled: "_80om13gf _1hfkvuon _1peqs237"
+};
+var unboundStyles = {
+  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
+  interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
 };
 var widthHeightMap = {
-  xsmall: (0, _react2.css)({
-    width: '16px',
-    height: '16px'
-  }),
-  small: (0, _react2.css)({
-    width: '24px',
-    height: '24px'
-  }),
-  medium: (0, _react2.css)({
-    width: '32px',
-    height: '32px'
-  }),
-  large: (0, _react2.css)({
-    width: '40px',
-    height: '40px'
-  }),
-  xlarge: (0, _react2.css)({
-    width: '96px',
-    height: '96px'
-  }),
-  xxlarge: (0, _react2.css)({
-    width: '128px',
-    height: '128px'
-  })
+  xsmall: "_1bsb7vkz _4t3i7vkz",
+  small: "_1bsb1tcg _4t3i1tcg",
+  medium: "_1bsbzwfg _4t3izwfg",
+  large: "_1bsb1ylp _4t3i1ylp",
+  xlarge: "_1bsb16xz _4t3i16xz",
+  xxlarge: "_1bsb1qr7 _4t3i1qr7"
 };
 var borderRadiusMap = {
-  xsmall: (0, _react2.css)({
-    borderRadius: '2px',
-    '&::after': {
-      borderRadius: '2px'
-    }
-  }),
-  small: (0, _react2.css)({
-    borderRadius: '2px',
-    '&::after': {
-      borderRadius: '2px'
-    }
-  }),
-  medium: (0, _react2.css)({
-    borderRadius: '3px',
-    '&::after': {
-      borderRadius: '3px'
-    }
-  }),
-  large: (0, _react2.css)({
-    borderRadius: '3px',
-    '&::after': {
-      borderRadius: '3px'
-    }
-  }),
-  xlarge: (0, _react2.css)({
-    borderRadius: '6px',
-    '&::after': {
-      borderRadius: '6px'
-    }
-  }),
-  xxlarge: (0, _react2.css)({
-    borderRadius: '12px',
-    '&::after': {
-      borderRadius: '12px'
-    }
-  })
+  xsmall: "_2rkoyh40 _14mjyh40",
+  small: "_2rkoyh40 _14mjyh40",
+  medium: "_2rko1l7b _14mj1l7b",
+  large: "_2rko1l7b _14mj1l7b",
+  xlarge: "_2rkoi2wt _14mji2wt",
+  xxlarge: "_2rko1crf _14mj1crf"
 };
 /**
  * __Avatar content__
@@ -187,7 +63,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     appearance = _useAvatarContent.appearance,
     avatarImage = _useAvatarContent.avatarImage,
     _useAvatarContent$bor = _useAvatarContent.borderColor,
-    borderColor = _useAvatarContent$bor === void 0 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _useAvatarContent$bor,
+    borderColor = _useAvatarContent$bor === void 0 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, #FFFFFF)" : _useAvatarContent$bor,
     href = _useAvatarContent.href,
     isDisabled = _useAvatarContent.isDisabled,
     label = _useAvatarContent.label,
@@ -199,8 +75,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     size = _useAvatarContent.size,
     stackIndex = _useAvatarContent.stackIndex;
   var isInteractive = Boolean(onClick || href || isDisabled);
-  return (0, _react2.jsx)(Container, (0, _extends2.default)({
-    css: [styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && styles.interactive, isDisabled && styles.disabled],
+  return /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
     ref: ref || contextRef,
     "aria-label": isInteractive ? label : undefined,
@@ -213,5 +88,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     href: href,
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
+  }, {
+    className: (0, _runtime.ax)([unboundStyles.root, styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
   }), children || avatarImage);
 });

package/dist/cjs/avatar-item.compiled.css

@@ -0,0 +1,56 @@
+
+._2rko1l7b{border-radius:3px}
+._189e1bk5{border-width:var(--ds-border-width-outline,2px)}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}._12ji1r31{outline-color:currentColor}
+._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
+._12y31o36{outline-width:medium}
+._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1hmsglyw{text-decoration-line:none}
+._1o9zkb7n{flex-shrink:1}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._1wyb181o{font-size:.85em}
+._1wyb1kw7{font-size:inherit}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
+._80om13gf{cursor:not-allowed}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1g13{background-color:var(--avatar-item-bg-color)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._i0dl1osq{flex-basis:100%}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._lcxvglyw{pointer-events:none}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1kw7{color:inherit}
+._tzy41e4z{opacity:var(--ds-opacity-disabled,.5)}
+._vchhusvi{box-sizing:border-box}
+._vwz419ii{line-height:1.4}
+._vwz4kb7n{line-height:1}
+._y3gn1e5h{text-align:left}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._zg8l4jg8{font-style:normal}
+._858u194a:focus{border-color:var(--ds-border-focused,#2684ff)}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._d0altlke:hover{cursor:pointer}
+._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di61l7b:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}

package/dist/cjs/avatar-item.js

@@ -1,95 +1,32 @@
+/* avatar-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 "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;
+require("./avatar-item.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
-var _colors = require("@atlaskit/theme/colors");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _utilities = require("./utilities");
-/**
- * @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 bgColorCssVar = '--avatar-item-bg-color';
 var styles = {
-  root: (0, _react2.css)({
-    display: 'flex',
-    boxSizing: 'border-box',
-    width: '100%',
-    alignItems: 'center',
-    backgroundColor: "var(".concat(bgColorCssVar, ")"),
-    borderColor: 'transparent',
-    borderRadius: '3px',
-    borderStyle: 'solid',
-    borderWidth: "var(--ds-border-width-outline, 2px)",
-    color: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: 'inherit',
-    fontStyle: 'normal',
-    fontWeight: "var(--ds-font-weight-regular, 400)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '1',
-    marginBlockEnd: "var(--ds-space-0, 0px)",
-    marginBlockStart: "var(--ds-space-0, 0px)",
-    marginInlineEnd: "var(--ds-space-0, 0px)",
-    marginInlineStart: "var(--ds-space-0, 0px)",
-    outline: 'none',
-    paddingBlockEnd: "var(--ds-space-050, 4px)",
-    paddingBlockStart: "var(--ds-space-050, 4px)",
-    paddingInlineEnd: "var(--ds-space-050, 4px)",
-    paddingInlineStart: "var(--ds-space-050, 4px)",
-    textAlign: 'left',
-    textDecoration: 'none'
-  }),
-  rootDisabled: (0, _react2.css)({
-    cursor: 'not-allowed',
-    opacity: "var(--ds-opacity-disabled, 0.5)",
-    pointerEvents: 'none'
-  }),
-  rootInteractive: (0, _react2.css)({
-    '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
-      cursor: 'pointer',
-      textDecoration: 'none'
-    },
-    '&:focus': {
-      borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
-      outline: 'none'
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
-    }
-  }),
-  avatarItem: (0, _react2.css)({
-    minWidth: 0,
-    maxWidth: '100%',
-    flex: '1 1 100%',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '1.4',
-    paddingInlineStart: "var(--ds-space-100, 8px)"
-  }),
-  baseText: (0, _react2.css)({
-    display: 'block',
-    color: "var(--ds-text, #172B4D)"
-  }),
-  truncation: (0, _react2.css)({
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }),
-  secondaryTextLegacy: (0, _react2.css)({
-    color: "var(--ds-text-subtlest, #626F86)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: '0.85em'
-  })
+  root: "_2rko1l7b _12ji1r31 _1qu2glyw _12y31o36 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1h6d1j28 _1dqonqa1 _189e1bk5 _1e0c1txw _vchhusvi _1bsb1osq _4cvr1h6o _bfhk1g13 _syaz1kw7 _1wyb1kw7 _zg8l4jg8 _k48pi7a9 _vwz4kb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i51b66 _1q511b66 _y4ti1b66 _bozg1b66 _y3gn1e5h",
+  rootDisabled: "_80om13gf _tzy41e4z _lcxvglyw",
+  rootInteractive: "_nt751r31 _49pcglyw _1hvw1o36 _858u194a _9oik1r31 _1bnxglyw _jf4cnqa1 _irr314ae _d0altlke _1di61l7b",
+  avatarItem: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _vwz419ii _bozgu2gc",
+  baseText: "_1e0c1ule _syaz1fxt",
+  truncation: "_1reo15vq _1bto1l2s _o5721q9c",
+  secondaryTextLegacy: "_syaz131l _1wyb181o"
 };
 /**
  * __Avatar item__
@@ -114,8 +51,7 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     label = _ref.label;
   var Container = (0, _utilities.getCustomElement)(isDisabled, href, onClick);
   var isInteractive = Boolean(onClick || href);
-  return (0, _react2.jsx)(Container, (0, _extends2.default)({
-    css: [styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled],
+  return /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
     style: (0, _defineProperty2.default)({}, bgColorCssVar, backgroundColor),
     ref: ref,
     "aria-label": isInteractive ? label : undefined,
@@ -127,18 +63,20 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     href: href,
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
-  }), avatar, (0, _react2.jsx)("div", {
-    css: styles.avatarItem
-  }, (0, _platformFeatureFlags.fg)('platform.design-system-team.avatar-item-font-size_830x6') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Text, {
+  }, {
+    className: (0, _runtime.ax)([styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled])
+  }), avatar, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.avatarItem])
+  }, (0, _platformFeatureFlags.fg)('platform.design-system-team.avatar-item-font-size_830x6') ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_compiled.Text, {
     maxLines: isTruncationDisabled ? undefined : 1
-  }, primaryText), (0, _react2.jsx)(_primitives.Text, {
+  }, primaryText), /*#__PURE__*/React.createElement(_compiled.Text, {
     color: "color.text.subtlest",
     maxLines: isTruncationDisabled ? undefined : 1,
     size: "UNSAFE_small"
-  }, secondaryText)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
-    css: [styles.baseText, !isTruncationDisabled && styles.truncation]
-  }, primaryText), (0, _react2.jsx)("span", {
-    css: [styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation]
+  }, secondaryText)) : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([styles.baseText, !isTruncationDisabled && styles.truncation])
+  }, primaryText), /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation])
   }, secondaryText))));
 });
 AvatarItem.displayName = 'AvatarItem';

package/dist/cjs/avatar.compiled.css

@@ -0,0 +1,5 @@
+._12ji1r31{outline-color:currentColor}
+._12y3idpf{outline-width:0}
+._1e0c1o8l{display:inline-block}
+._1qu2glyw{outline-style:none}
+._kqswh2mm{position:relative}

package/dist/cjs/avatar.js

@@ -1,13 +1,17 @@
+/* avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
 "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;
+require("./avatar.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _avatarContent = require("./avatar-content");
@@ -16,18 +20,13 @@ var _avatarImage = _interopRequireDefault(require("./internal/avatar-image"));
 var _presence = require("./presence");
 var _status = require("./status");
 var _utilities = require("./utilities");
+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
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 packageName = "@atlaskit/avatar";
-var packageVersion = "24.0.0";
-var containerStyles = (0, _react2.css)({
-  display: 'inline-block',
-  position: 'relative',
-  outline: 0
-});
+var packageVersion = "25.0.0";
+var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -114,17 +113,17 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
   var isInteractive = onClick || href || isDisabled;
   var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
-  return (0, _react2.jsx)(_context.EnsureIsInsideAvatarContext.Provider, {
+  return /*#__PURE__*/React.createElement(_context.EnsureIsInsideAvatarContext.Provider, {
     value: true
-  }, (0, _react2.jsx)(AvatarContainer, {
+  }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
     role: containerShouldBeImage ? 'img' : undefined,
     "aria-labelledby": containerShouldBeImage ? labelId : undefined,
-    css: containerStyles,
     style: {
       zIndex: stackIndex
-    }
-  }, (0, _react2.jsx)(_context.AvatarContentContext.Provider, {
+    },
+    className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
+  }, /*#__PURE__*/React.createElement(_context.AvatarContentContext.Provider, {
     value: {
       as: (0, _utilities.getCustomElement)(isDisabled, href, onClick),
       appearance: appearance,
@@ -138,7 +137,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       stackIndex: stackIndex,
       target: target,
       testId: testId ? "".concat(testId, "--inner") : undefined,
-      avatarImage: (0, _react2.jsx)(_avatarImage.default, {
+      avatarImage: /*#__PURE__*/React.createElement(_avatarImage.default, {
         alt: !containerShouldBeImage && src ? name : undefined,
         src: src,
         appearance: appearance,
@@ -146,18 +145,18 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         testId: testId
       })
     }
-  }, children || (0, _react2.jsx)(_avatarContent.AvatarContent, null)), isPresence && (0, _react2.jsx)(_presence.PresenceWrapper, {
+  }, children || /*#__PURE__*/React.createElement(_avatarContent.AvatarContent, null)), isPresence && /*#__PURE__*/React.createElement(_presence.PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
-  }, customPresenceNode), isStatus && (0, _react2.jsx)(_status.StatusWrapper, {
+  }, customPresenceNode), isStatus && /*#__PURE__*/React.createElement(_status.StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
     status: typeof status === 'string' ? status : undefined,
     testId: testId
-  }, customStatusNode), containerShouldBeImage ? (0, _react2.jsx)("span", {
+  }, customStatusNode), containerShouldBeImage ? /*#__PURE__*/React.createElement("span", {
     "data-testid": testId && "".concat(testId, "--label"),
     id: labelId,
     hidden: true