@atlaskit/avatar 22.0.0 → 23.0.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlaskit/avatar
 
+## 23.0.0
+
+### Major Changes
+
+- [#117222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117222)
+  [`a80e8994489e7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a80e8994489e7) -
+  Removes the option to provide a function to the `children` prop to create a custom avatar. A new
+  `AvatarContent` sub-component is now available, which similarly enables custom content to be
+  provided for the avatar. This change is in preparation for the migration from `@emotion/react` to
+  Compiled CSS-in-JS.
+
+  Example usage before and after:
+
+  ### Before
+
+  ```jsx
+  import Avatar from '@atlaskit/avatar';
+
+  <Avatar>
+  	{(props) => (
+  		<span {...props}>
+  			Custom content
+  		</span>
+  	)}
+  <Avatar>
+  ```
+
+  ### After
+
+  ```jsx
+  import Avatar, { AvatarContent } from '@atlaskit/avatar';
+
+  <Avatar>
+  	<AvatarContent>
+  		Custom content
+  	</AvatarContent>
+  <Avatar>
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.0.0
 
 ### Major Changes

package/dist/cjs/avatar-content.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarContent = void 0;
+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
+ */
+
+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)"
+    }
+  })
+};
+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'
+  })
+};
+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'
+    }
+  })
+};
+/**
+ * __Avatar content__
+ *
+ * Avatar content renders the avatar content. It can be composed with the Avatar component
+ * to create a custom avatar.
+ *
+ * - [Examples](https://atlassian.design/components/avatar/examples)
+ * - [Code](https://atlassian.design/components/avatar/code)
+ * - [Usage](https://atlassian.design/components/avatar/usage)
+ */
+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 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _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;
+  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],
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
+    ref: ref || contextRef,
+    "aria-label": isInteractive ? label : undefined,
+    onClick: onClick,
+    tabIndex: tabIndex,
+    "data-testid": testId,
+    disabled: isDisabled,
+    type: Container === 'button' ? 'button' : undefined
+  }, href && {
+    href: href,
+    target: target,
+    rel: target === '_blank' ? 'noopener noreferrer' : undefined
+  }), children || avatarImage);
+});

package/dist/cjs/avatar.js

@@ -6,53 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _useId = require("@atlaskit/ds-lib/use-id");
-var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
-var _avatarImage = _interopRequireDefault(require("./avatar-image"));
-var _constants = require("./constants");
+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 _templateObject;
-/**
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-function 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; }
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/avatar";
-var packageVersion = "22.0.0";
-var getTestId = function getTestId(testId, children) {
-  return !children ? {
-    'data-testid': "".concat(testId, "--inner")
-  } : {
-    testId: "".concat(testId, "--inner")
-  };
-};
+var packageVersion = "23.0.0";
+var containerStyles = (0, _react2.css)({
+  display: 'inline-block',
+  position: 'relative',
+  outline: 0
+});
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
-var getStyles = function getStyles(css, _ref) {
-  var size = _ref.size,
-    radius = _ref.radius,
-    appearance = _ref.appearance,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _ref$borderColor,
-    stackIndex = _ref.stackIndex,
-    isInteractive = _ref.isInteractive,
-    isDisabled = _ref.isDisabled;
-  return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus-visible {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :hover {\n        &::after {\n          background-color: ".concat("var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(", _constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
-  );
-};
-
 /**
  * __Avatar__
  *
@@ -62,31 +40,30 @@ var getStyles = function getStyles(css, _ref) {
  * - [Code](https://atlassian.design/components/avatar/code)
  * - [Usage](https://atlassian.design/components/avatar/usage)
  */
-var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var _ref3;
-  var analyticsContext = _ref2.analyticsContext,
-    _ref2$appearance = _ref2.appearance,
-    appearance = _ref2$appearance === void 0 ? 'circle' : _ref2$appearance,
-    label = _ref2.label,
-    borderColor = _ref2.borderColor,
-    children = _ref2.children,
-    href = _ref2.href,
-    isDisabled = _ref2.isDisabled,
-    name = _ref2.name,
-    onClick = _ref2.onClick,
-    presence = _ref2.presence,
-    sizeProp = _ref2.size,
-    src = _ref2.src,
-    stackIndex = _ref2.stackIndex,
-    status = _ref2.status,
-    target = _ref2.target,
-    testId = _ref2.testId,
-    _ref2$as = _ref2.as,
-    AvatarContainer = _ref2$as === void 0 ? 'div' : _ref2$as;
+var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var analyticsContext = _ref.analyticsContext,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
+    label = _ref.label,
+    borderColor = _ref.borderColor,
+    children = _ref.children,
+    href = _ref.href,
+    isDisabled = _ref.isDisabled,
+    name = _ref.name,
+    onClick = _ref.onClick,
+    presence = _ref.presence,
+    sizeProp = _ref.size,
+    src = _ref.src,
+    stackIndex = _ref.stackIndex,
+    status = _ref.status,
+    target = _ref.target,
+    testId = _ref.testId,
+    _ref$as = _ref.as,
+    AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var context = (0, _context.useAvatarContext)();
-  var size = (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : context === null || context === void 0 ? void 0 : context.size) !== null && _ref3 !== void 0 ? _ref3 : 'medium';
+  var size = sizeProp || (context === null || context === void 0 ? void 0 : context.size) || 'medium';
   var customPresenceNode = /*#__PURE__*/(0, _react.isValidElement)(presence) ? presence : null;
   var customStatusNode = /*#__PURE__*/(0, _react.isValidElement)(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
@@ -129,18 +106,6 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     }
     onClick(event, analyticsEvent);
   }, [createAnalyticsEvent, isDisabled, onClick]);
-  var componentProps = function componentProps() {
-    if (isDisabled) {
-      return {
-        disabled: true
-      };
-    }
-
-    // return only relevant props for either anchor or button elements
-    return _objectSpread(_objectSpread({}, href && (0, _utilities.getLinkProps)(href, target)), onClick && !href ? (0, _utilities.getButtonProps)(onClickHandler) : {
-      onClick: onClick
-    });
-  };
   var isPresence = isValidIconSize && presence && !status;
   var isStatus = isValidIconSize && status;
 
@@ -149,52 +114,39 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, 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)(AvatarContainer, {
+  return (0, _react2.jsx)(_context.EnsureIsInsideAvatarContext.Provider, {
+    value: true
+  }, (0, _react2.jsx)(AvatarContainer, {
     "data-testid": testId,
     role: containerShouldBeImage ? 'img' : undefined,
     "aria-labelledby": containerShouldBeImage ? labelId : undefined,
+    css: containerStyles,
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      display: 'inline-block',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      position: 'relative',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      outline: 0,
       zIndex: stackIndex
     }
-  }, (0, _react2.jsx)(_react2.ClassNames, null, function (_ref4) {
-    var css = _ref4.css;
-    var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-      className: getStyles(css, {
-        size: _constants.AVATAR_SIZES[size],
-        radius: _constants.AVATAR_RADIUS[size],
-        appearance: appearance,
-        borderColor: borderColor,
-        stackIndex: stackIndex,
-        isInteractive: Boolean(href || onClick) && !isDisabled,
-        isDisabled: isDisabled
-      })
-    }, componentProps()), testId && getTestId(testId, children)), (isInteractive || children) && {
-      'aria-label': label || defaultLabel
-    }), {}, {
-      children: (0, _react2.jsx)(_avatarImage.default
-      // Only pass in the name if an image is provided and the
-      // container is not being used as an `img` role
-      , {
+  }, (0, _react2.jsx)(_context.AvatarContentContext.Provider, {
+    value: {
+      as: (0, _utilities.getCustomElement)(isDisabled, href, onClick),
+      appearance: appearance,
+      borderColor: borderColor,
+      href: href,
+      isDisabled: isDisabled,
+      label: label || defaultLabel,
+      onClick: isInteractive ? onClickHandler : undefined,
+      ref: ref,
+      size: size,
+      stackIndex: stackIndex,
+      target: target,
+      testId: testId ? "".concat(testId, "--inner") : undefined,
+      avatarImage: (0, _react2.jsx)(_avatarImage.default, {
         alt: !containerShouldBeImage && src ? name : undefined,
+        src: src,
         appearance: appearance,
         size: size,
-        src: src,
         testId: testId
-      }),
-      ref: ref
-    });
-    if (children) {
-      return children(props);
+      })
     }
-    var element = (0, _utilities.getCustomElement)(isDisabled, href, onClick);
-    return element === 'a' || element === 'button' ? (0, _react2.jsx)(_focusRing.default, null, /*#__PURE__*/(0, _react.createElement)(element, props)) : ( /*#__PURE__*/(0, _react.createElement)(element, props));
-  }), isPresence && (0, _react2.jsx)(_presence.PresenceWrapper, {
+  }, children || (0, _react2.jsx)(_avatarContent.AvatarContent, null)), isPresence && (0, _react2.jsx)(_presence.PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
@@ -209,7 +161,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     "data-testid": testId && "".concat(testId, "--label"),
     id: labelId,
     hidden: true
-  }, defaultLabel) : undefined);
+  }, defaultLabel) : undefined));
 });
 Avatar.displayName = 'Avatar';
 var _default = exports.default = Avatar;

package/dist/cjs/context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useAvatarContext = exports.AvatarContext = void 0;
+exports.useEnsureIsInsideAvatar = exports.useAvatarContext = exports.useAvatarContent = exports.EnsureIsInsideAvatarContext = exports.AvatarContext = exports.AvatarContentContext = void 0;
 var _react = require("react");
 /**
  * __Avatar context__
@@ -21,4 +21,34 @@ 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/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "AVATAR_SIZES", {
     return _constants.AVATAR_SIZES;
   }
 });
+Object.defineProperty(exports, "AvatarContent", {
+  enumerable: true,
+  get: function get() {
+    return _avatarContent.AvatarContent;
+  }
+});
 Object.defineProperty(exports, "AvatarContext", {
   enumerable: true,
   get: function get() {
@@ -71,6 +77,7 @@ Object.defineProperty(exports, "useAvatarContext", {
   }
 });
 var _avatar = _interopRequireDefault(require("./avatar"));
+var _avatarContent = require("./avatar-content");
 var _avatarItem = _interopRequireDefault(require("./avatar-item"));
 var _presence = _interopRequireDefault(require("./presence"));
 var _status = _interopRequireDefault(require("./status"));

package/dist/cjs/{avatar-image.js → internal/avatar-image.js}

@@ -15,7 +15,7 @@ var _person2 = _interopRequireDefault(require("@atlaskit/icon/core/person"));
 var _release = _interopRequireDefault(require("@atlaskit/icon/core/release"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("./constants");
+var _constants = require("../constants");
 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

package/dist/cjs/{icon-wrapper.js → internal/icon-wrapper.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("./constants");
+var _constants = require("../constants");
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/dist/cjs/presence.js

@@ -9,7 +9,7 @@ exports.default = exports.PresenceWrapper = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
-var _iconWrapper = _interopRequireDefault(require("./icon-wrapper"));
+var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
 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 BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {

package/dist/cjs/status.js

@@ -9,7 +9,7 @@ exports.default = exports.StatusWrapper = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
-var _iconWrapper = _interopRequireDefault(require("./icon-wrapper"));
+var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
 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 ApprovedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {