@atlaskit/avatar 25.9.1 → 25.10.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/avatar
 
+## 25.10.0
+
+### Minor Changes
+
+- [`bab17fe0fd7cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bab17fe0fd7cf) -
+  Allow avatar border to accept non colour values like css calculated values
+
+## 25.9.2
+
+### Patch Changes
+
+- [`1ba6ced5fedb9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1ba6ced5fedb9) -
+  Move some internal API into dedicated files to avoid them being inadvertently exported via
+  entrypoints.
+
 ## 25.9.1
 
 ### Patch Changes

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

@@ -1,4 +1,5 @@
 
+._11q7cxp3{background:var(--avatar-bg-color)}
 ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
 ._14mjidpf:after{border-radius:0}
 ._19itglyw{border:none}

package/dist/cjs/avatar-content.js

@@ -14,7 +14,8 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _context = require("./context");
+var _contentContext = require("./internal/content-context");
+var _ensureIsInsideAvatarContext = require("./internal/ensure-is-inside-avatar-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var boxShadowCssVar = '--avatar-box-shadow';
 var bgColorCssVar = '--avatar-bg-color';
@@ -26,9 +27,11 @@ var styles = {
   disabled: "_80om13gf _1hfkvuon _1peqs237"
 };
 var unboundStyles = {
+  rootCustomBorder: "_11q7cxp3",
   root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
   hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
   hexagonFocusContainerMarginFg: "_195g1ksc",
+  hexagonBorderContainerCustomBorder: "_11q7cxp3",
   hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
   hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
   hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
@@ -62,26 +65,26 @@ var marginAdjustmentMap = {
  */
 var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children;
-  (0, _context.useEnsureIsInsideAvatar)();
-  var _useAvatarContent = (0, _context.useAvatarContent)(),
-    Container = _useAvatarContent.as,
-    appearance = _useAvatarContent.appearance,
-    avatarImage = _useAvatarContent.avatarImage,
-    _useAvatarContent$bor = _useAvatarContent.borderColor,
-    borderColor = _useAvatarContent$bor === void 0 ? "var(--ds-surface, #FFFFFF)" : _useAvatarContent$bor,
-    href = _useAvatarContent.href,
-    isDisabled = _useAvatarContent.isDisabled,
-    label = _useAvatarContent.label,
-    onClick = _useAvatarContent.onClick,
-    contextRef = _useAvatarContent.ref,
-    tabIndex = _useAvatarContent.tabIndex,
-    target = _useAvatarContent.target,
-    testId = _useAvatarContent.testId,
-    size = _useAvatarContent.size,
-    stackIndex = _useAvatarContent.stackIndex,
-    ariaControls = _useAvatarContent['aria-controls'],
-    ariaExpanded = _useAvatarContent['aria-expanded'],
-    ariaHasPopup = _useAvatarContent['aria-haspopup'];
+  (0, _ensureIsInsideAvatarContext.useEnsureIsInsideAvatar)();
+  var _useContext = (0, _react.useContext)(_contentContext.AvatarContentContext),
+    Container = _useContext.as,
+    appearance = _useContext.appearance,
+    avatarImage = _useContext.avatarImage,
+    _useContext$borderCol = _useContext.borderColor,
+    borderColor = _useContext$borderCol === void 0 ? "var(--ds-surface, #FFFFFF)" : _useContext$borderCol,
+    href = _useContext.href,
+    isDisabled = _useContext.isDisabled,
+    label = _useContext.label,
+    onClick = _useContext.onClick,
+    contextRef = _useContext.ref,
+    tabIndex = _useContext.tabIndex,
+    target = _useContext.target,
+    testId = _useContext.testId,
+    size = _useContext.size,
+    stackIndex = _useContext.stackIndex,
+    ariaControls = _useContext['aria-controls'],
+    ariaExpanded = _useContext['aria-expanded'],
+    ariaHasPopup = _useContext['aria-haspopup'];
   var isInteractive = Boolean(onClick || href || isDisabled || ariaHasPopup);
   var renderedContent = /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
@@ -100,7 +103,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
   }, {
-    className: (0, _runtime.ax)([unboundStyles.root, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
+    className: (0, _runtime.ax)([unboundStyles.root, (0, _platformFeatureFlags.fg)('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
   }), children || avatarImage);
   if (appearance !== 'hexagon') {
     return renderedContent;
@@ -114,6 +117,6 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     className: (0, _runtime.ax)([unboundStyles.hexagonFocusContainer, !(0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
-    className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer, (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
+    className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer, (0, _platformFeatureFlags.fg)('avatar-custom-border') && unboundStyles.hexagonBorderContainerCustomBorder, (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
   }, renderedContent));
 });

package/dist/cjs/avatar-item.js

@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _utilities = require("./utilities");
+var _getCustomElement = _interopRequireDefault(require("./internal/get-custom-element"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var bgColorCssVar = '--avatar-item-bg-color';
 var styles = {
@@ -48,7 +48,7 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     target = _ref.target,
     testId = _ref.testId,
     label = _ref.label;
-  var Container = (0, _utilities.getCustomElement)(isDisabled, href, onClick);
+  var Container = (0, _getCustomElement.default)(isDisabled, href, onClick);
   var isInteractive = Boolean(onClick || href);
   return /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
     style: (0, _defineProperty2.default)({}, bgColorCssVar, backgroundColor),

package/dist/cjs/avatar.js

@@ -17,14 +17,16 @@ var _useId = require("@atlaskit/ds-lib/use-id");
 var _avatarContent = require("./avatar-content");
 var _context = require("./context");
 var _avatarImage = _interopRequireDefault(require("./internal/avatar-image"));
-var _presence = require("./presence");
-var _status = require("./status");
-var _utilities = require("./utilities");
+var _contentContext = require("./internal/content-context");
+var _ensureIsInsideAvatarContext = require("./internal/ensure-is-inside-avatar-context");
+var _getCustomElement = _interopRequireDefault(require("./internal/get-custom-element"));
+var _presenceWrapper = _interopRequireDefault(require("./internal/presence-wrapper"));
+var _statusWrapper = _interopRequireDefault(require("./internal/status-wrapper"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "0.0.0-development";
+var packageVersion = "25.9.2";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -118,7 +120,7 @@ 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 || ariaHasPopup;
   var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
-  return /*#__PURE__*/React.createElement(_context.EnsureIsInsideAvatarContext.Provider, {
+  return /*#__PURE__*/React.createElement(_ensureIsInsideAvatarContext.EnsureIsInsideAvatarContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
@@ -128,9 +130,9 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       zIndex: stackIndex
     },
     className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
-  }, /*#__PURE__*/React.createElement(_context.AvatarContentContext.Provider, {
+  }, /*#__PURE__*/React.createElement(_contentContext.AvatarContentContext.Provider, {
     value: {
-      as: (0, _utilities.getCustomElement)(isDisabled, href, onClick, ariaHasPopup),
+      as: (0, _getCustomElement.default)(isDisabled, href, onClick, ariaHasPopup),
       appearance: appearance,
       borderColor: borderColor,
       href: href,
@@ -154,12 +156,12 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         imgLoading: imgLoading
       })
     }
-  }, children || /*#__PURE__*/React.createElement(_avatarContent.AvatarContent, null)), isPresence && /*#__PURE__*/React.createElement(_presence.PresenceWrapper, {
+  }, children || /*#__PURE__*/React.createElement(_avatarContent.AvatarContent, null)), isPresence && /*#__PURE__*/React.createElement(_presenceWrapper.default, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
-  }, customPresenceNode), isStatus && /*#__PURE__*/React.createElement(_status.StatusWrapper, {
+  }, customPresenceNode), isStatus && /*#__PURE__*/React.createElement(_statusWrapper.default, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ICON_SIZES = exports.ICON_OFFSET = exports.CSS_VAR_AVATAR_BGCOLOR = exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
+exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
 var AVATAR_SIZES = exports.AVATAR_SIZES = {
   xsmall: 16,
   small: 24,
@@ -23,17 +23,4 @@ var AVATAR_RADIUS = exports.AVATAR_RADIUS = {
   xxlarge: 12
 };
 var BORDER_WIDTH = exports.BORDER_WIDTH = 2;
-var ACTIVE_SCALE_FACTOR = exports.ACTIVE_SCALE_FACTOR = 0.9;
-var CSS_VAR_AVATAR_BGCOLOR = exports.CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
-var ICON_SIZES = exports.ICON_SIZES = {
-  small: 12,
-  medium: 14,
-  large: 15,
-  xlarge: 18
-};
-var ICON_OFFSET = exports.ICON_OFFSET = {
-  small: 0,
-  medium: 0,
-  large: 1,
-  xlarge: 7
-};
+var ACTIVE_SCALE_FACTOR = exports.ACTIVE_SCALE_FACTOR = 0.9;

package/dist/cjs/context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEnsureIsInsideAvatar = exports.useAvatarContext = exports.useAvatarContent = exports.EnsureIsInsideAvatarContext = exports.AvatarContext = exports.AvatarContentContext = void 0;
+exports.useAvatarContext = exports.AvatarContext = void 0;
 var _react = require("react");
 /**
  * __Avatar context__
@@ -21,34 +21,4 @@ var _react = require("react");
 var AvatarContext = exports.AvatarContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var useAvatarContext = exports.useAvatarContext = function useAvatarContext() {
   return (0, _react.useContext)(AvatarContext);
-};
-var defaultAvatarContentProps = {
-  as: 'span',
-  appearance: 'circle',
-  avatarImage: null,
-  ref: null,
-  size: 'medium'
-};
-
-/**
- * __Avatar content context__
- *
- * This context provides the props for the AvatarContent component, enabling
- * consumers to compose the AvatarContent with the Avatar component.
- */
-var AvatarContentContext = exports.AvatarContentContext = /*#__PURE__*/(0, _react.createContext)(defaultAvatarContentProps);
-var useAvatarContent = exports.useAvatarContent = function useAvatarContent() {
-  return (0, _react.useContext)(AvatarContentContext);
-};
-
-/**
- * Used to ensure Avatar sub-components are used within a Avatar component,
- * and provide a useful error message if not.
- */
-var EnsureIsInsideAvatarContext = exports.EnsureIsInsideAvatarContext = /*#__PURE__*/(0, _react.createContext)(false);
-var useEnsureIsInsideAvatar = exports.useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
-  var context = (0, _react.useContext)(EnsureIsInsideAvatarContext);
-  if (!context) {
-    throw new Error('Avatar sub-components must be used within a Avatar component.');
-  }
 };

package/dist/cjs/get-appearance.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var getAppearanceForAppType = function getAppearanceForAppType(appType) {
+  switch (appType) {
+    case 'agent':
+      return 'hexagon';
+    case 'user':
+    case 'system':
+    default:
+      return 'circle';
+  }
+};
+var _default = exports.default = getAppearanceForAppType;

package/dist/cjs/index.js

@@ -73,7 +73,7 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "getAppearanceForAppType", {
   enumerable: true,
   get: function get() {
-    return _utilities.getAppearanceForAppType;
+    return _getAppearance.default;
   }
 });
 Object.defineProperty(exports, "useAvatarContext", {
@@ -88,6 +88,6 @@ var _avatarItem = _interopRequireDefault(require("./avatar-item"));
 var _presence = _interopRequireDefault(require("./presence"));
 var _status = _interopRequireDefault(require("./status"));
 var _skeleton = _interopRequireDefault(require("./skeleton"));
-var _utilities = require("./utilities");
+var _getAppearance = _interopRequireDefault(require("./get-appearance"));
 var _context = require("./context");
 var _constants = require("./constants");

package/dist/cjs/internal/content-context.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarContentContext = void 0;
+var _react = require("react");
+var defaultAvatarContentProps = {
+  as: 'span',
+  appearance: 'circle',
+  avatarImage: null,
+  ref: null,
+  size: 'medium'
+};
+
+/**
+ * __Avatar content context__
+ *
+ * This context provides the props for the AvatarContent component, enabling
+ * consumers to compose the AvatarContent with the Avatar component.
+ */
+var AvatarContentContext = exports.AvatarContentContext = /*#__PURE__*/(0, _react.createContext)(defaultAvatarContentProps);

package/dist/cjs/internal/ensure-is-inside-avatar-context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEnsureIsInsideAvatar = exports.EnsureIsInsideAvatarContext = void 0;
+var _react = require("react");
+/**
+ * Used to ensure Avatar sub-components are used within a Avatar component,
+ * and provide a useful error message if not.
+ */
+var EnsureIsInsideAvatarContext = exports.EnsureIsInsideAvatarContext = /*#__PURE__*/(0, _react.createContext)(false);
+var useEnsureIsInsideAvatar = exports.useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
+  var context = (0, _react.useContext)(EnsureIsInsideAvatarContext);
+  if (!context) {
+    throw new Error('Avatar sub-components must be used within a Avatar component.');
+  }
+};

package/dist/cjs/internal/get-custom-element.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var getCustomElement = function getCustomElement(isDisabled, href, onClick, ariaHasPopup) {
+  if (href && !isDisabled) {
+    return 'a';
+  }
+  if (onClick || isDisabled || ariaHasPopup) {
+    return 'button';
+  }
+  return 'span';
+};
+var _default = exports.default = getCustomElement;

package/dist/cjs/internal/presence-wrapper.js

@@ -0,0 +1,61 @@
+/* presence-wrapper.tsx generated by @compiled/babel-plugin v0.39.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("./presence-wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _presence = _interopRequireDefault(require("../presence"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_kqswstnw _lcxvglyw"
+};
+var iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+var circleIconOffsetMap = {
+  small: "_94n5idpf _1xi2idpf",
+  medium: "_94n5idpf _1xi2idpf",
+  large: "_94n5t94y _1xi2t94y",
+  xlarge: "_94n51v6z _1xi21v6z"
+};
+var squareIconOffsetMap = {
+  root: "_94n5myb0 _1xi2myb0"
+};
+var hexagonIconOffsetMap = {
+  small: "_94n51n1a _1xi21n1a",
+  medium: "_94n51n1a _1xi21n1a",
+  large: "_94n51y44 _1xi2myb0",
+  xlarge: "_94n5l52n _1xi21lpd"
+};
+
+/**
+ * __Presence wrapper__
+ *
+ * A presence wrapper is used internally to position presence ontop of the avatar.
+ */
+var PresenceWrapper = function PresenceWrapper(_ref) {
+  var size = _ref.size,
+    appearance = _ref.appearance,
+    children = _ref.children,
+    borderColor = _ref.borderColor,
+    presence = _ref.presence,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    "data-testid": testId && "".concat(testId, "--presence"),
+    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
+  }, /*#__PURE__*/React.createElement(_presence.default, {
+    borderColor: borderColor,
+    presence: !children ? presence : undefined
+  }, children));
+};
+var _default = exports.default = PresenceWrapper;

package/dist/cjs/internal/status-wrapper.js

@@ -0,0 +1,60 @@
+/* status-wrapper.tsx generated by @compiled/babel-plugin v0.39.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("./status-wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _status = _interopRequireDefault(require("../status"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_kqswstnw"
+};
+var iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+var circleIconOffsetMap = {
+  small: "_rjxpidpf _152tidpf",
+  medium: "_rjxpidpf _152tidpf",
+  large: "_rjxpt94y _152tt94y",
+  xlarge: "_rjxp1v6z _152t1v6z"
+};
+var squareIconOffsetMap = {
+  root: "_rjxpidpf _152tidpf"
+};
+var hexagonIconOffsetMap = {
+  small: "_rjxp1n1a _152t1n1a",
+  medium: "_rjxp1n1a _152t1n1a",
+  large: "_rjxpmyb0 _152t1y44",
+  xlarge: "_rjxp1lpd _152tl52n"
+};
+/**
+ * __Status wrapper__
+ *
+ * A status wrapper is used internally to position status on top of the avatar.
+ */
+var StatusWrapper = function StatusWrapper(_ref) {
+  var size = _ref.size,
+    status = _ref.status,
+    appearance = _ref.appearance,
+    borderColor = _ref.borderColor,
+    children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    "data-testid": testId && "".concat(testId, "--status"),
+    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
+  }, /*#__PURE__*/React.createElement(_status.default, {
+    borderColor: borderColor,
+    status: !children ? status : undefined
+  }, children));
+};
+var _default = exports.default = StatusWrapper;

package/dist/cjs/presence.js

@@ -6,8 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PresenceWrapper = void 0;
-require("./presence.compiled.css");
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
@@ -76,50 +75,4 @@ var AvatarPresence = function AvatarPresence(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, getPresence(presence)) : children);
 };
-var _default = exports.default = AvatarPresence;
-var styles = {
-  root: "_kqswstnw _lcxvglyw"
-};
-var iconSizeMap = {
-  small: "_4t3i1crf _1bsb1crf",
-  medium: "_4t3idlk8 _1bsbdlk8",
-  large: "_4t3io7ao _1bsbo7ao",
-  xlarge: "_4t3if6fq _1bsbf6fq"
-};
-var circleIconOffsetMap = {
-  small: "_94n5idpf _1xi2idpf",
-  medium: "_94n5idpf _1xi2idpf",
-  large: "_94n5t94y _1xi2t94y",
-  xlarge: "_94n51v6z _1xi21v6z"
-};
-var squareIconOffsetMap = {
-  root: "_94n5myb0 _1xi2myb0"
-};
-var hexagonIconOffsetMap = {
-  small: "_94n51n1a _1xi21n1a",
-  medium: "_94n51n1a _1xi21n1a",
-  large: "_94n51y44 _1xi2myb0",
-  xlarge: "_94n5l52n _1xi21lpd"
-};
-
-/**
- * __Presence wrapper__
- *
- * A presence wrapper is used internally to position presence ontop of the avatar.
- */
-var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2) {
-  var size = _ref2.size,
-    appearance = _ref2.appearance,
-    children = _ref2.children,
-    borderColor = _ref2.borderColor,
-    presence = _ref2.presence,
-    testId = _ref2.testId;
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    "data-testid": testId && "".concat(testId, "--presence"),
-    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
-  }, /*#__PURE__*/React.createElement(AvatarPresence, {
-    borderColor: borderColor,
-    presence: !children ? presence : undefined
-  }, children));
-};
+var _default = exports.default = AvatarPresence;

package/dist/cjs/status.js

@@ -6,38 +6,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StatusWrapper = void 0;
-require("./status.compiled.css");
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
 var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var styles = {
-  root: "_kqswstnw"
-};
-var iconSizeMap = {
-  small: "_4t3i1crf _1bsb1crf",
-  medium: "_4t3idlk8 _1bsbdlk8",
-  large: "_4t3io7ao _1bsbo7ao",
-  xlarge: "_4t3if6fq _1bsbf6fq"
-};
-var circleIconOffsetMap = {
-  small: "_rjxpidpf _152tidpf",
-  medium: "_rjxpidpf _152tidpf",
-  large: "_rjxpt94y _152tt94y",
-  xlarge: "_rjxp1v6z _152t1v6z"
-};
-var squareIconOffsetMap = {
-  root: "_rjxpidpf _152tidpf"
-};
-var hexagonIconOffsetMap = {
-  small: "_rjxp1n1a _152t1n1a",
-  medium: "_rjxp1n1a _152t1n1a",
-  large: "_rjxpmyb0 _152t1y44",
-  xlarge: "_rjxp1lpd _152tl52n"
-};
 var ApprovedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
   cx: "4",
@@ -98,25 +73,4 @@ var AvatarStatus = function AvatarStatus(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, getStatus(status)) : children);
 };
-var _default = exports.default = AvatarStatus;
-/**
- * __Status wrapper__
- *
- * A status wrapper is used internally to position status on top of the avatar.
- */
-var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
-  var size = _ref2.size,
-    status = _ref2.status,
-    appearance = _ref2.appearance,
-    borderColor = _ref2.borderColor,
-    children = _ref2.children,
-    testId = _ref2.testId;
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    "data-testid": testId && "".concat(testId, "--status"),
-    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
-  }, /*#__PURE__*/React.createElement(AvatarStatus, {
-    borderColor: borderColor,
-    status: !children ? status : undefined
-  }, children));
-};
+var _default = exports.default = AvatarStatus;

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

@@ -1,4 +1,5 @@
 
+._11q7cxp3{background:var(--avatar-bg-color)}
 ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
 ._14mjidpf:after{border-radius:0}
 ._19itglyw{border:none}