@atlaskit/avatar 22.0.0 → 23.0.0

package/dist/esm/avatar-content.js

@@ -0,0 +1,209 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N0, N70A } from '@atlaskit/theme/colors';
+import { useAvatarContent, useEnsureIsInsideAvatar } from './context';
+var boxShadowCssVar = '--avatar-box-shadow';
+var bgColorCssVar = '--avatar-bg-color';
+var styles = {
+  root: 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: css({
+    borderRadius: "var(--ds-border-radius-circle, 50%)",
+    '&::after': {
+      borderRadius: "var(--ds-border-radius-circle, 50%)"
+    }
+  }),
+  positionRelative: css({
+    position: 'relative'
+  }),
+  interactive: css({
+    cursor: 'pointer',
+    '&:hover': {
+      '&::after': {
+        backgroundColor: "var(--ds-interaction-hovered, ".concat(N70A, ")"),
+        opacity: 1
+      }
+    },
+    '&:active': {
+      transform: "scale(0.9)",
+      '&::after': {
+        backgroundColor: "var(--ds-interaction-pressed, ".concat(N70A, ")"),
+        opacity: 1
+      }
+    },
+    '@media screen and (forced-colors: active)': {
+      '&:focus-visible': {
+        outlineWidth: 1
+      }
+    }
+  }),
+  disabled: css({
+    cursor: 'not-allowed',
+    '&::after': {
+      backgroundColor: "var(--ds-surface, ".concat(N0, ")"),
+      opacity: "var(--ds-opacity-disabled, 0.7)"
+    }
+  })
+};
+var widthHeightMap = {
+  xsmall: css({
+    width: '16px',
+    height: '16px'
+  }),
+  small: css({
+    width: '24px',
+    height: '24px'
+  }),
+  medium: css({
+    width: '32px',
+    height: '32px'
+  }),
+  large: css({
+    width: '40px',
+    height: '40px'
+  }),
+  xlarge: css({
+    width: '96px',
+    height: '96px'
+  }),
+  xxlarge: css({
+    width: '128px',
+    height: '128px'
+  })
+};
+var borderRadiusMap = {
+  xsmall: css({
+    borderRadius: '2px',
+    '&::after': {
+      borderRadius: '2px'
+    }
+  }),
+  small: css({
+    borderRadius: '2px',
+    '&::after': {
+      borderRadius: '2px'
+    }
+  }),
+  medium: css({
+    borderRadius: '3px',
+    '&::after': {
+      borderRadius: '3px'
+    }
+  }),
+  large: css({
+    borderRadius: '3px',
+    '&::after': {
+      borderRadius: '3px'
+    }
+  }),
+  xlarge: css({
+    borderRadius: '6px',
+    '&::after': {
+      borderRadius: '6px'
+    }
+  }),
+  xxlarge: 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)
+ */
+export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children;
+  useEnsureIsInsideAvatar();
+  var _useAvatarContent = useAvatarContent(),
+    Container = _useAvatarContent.as,
+    appearance = _useAvatarContent.appearance,
+    avatarImage = _useAvatarContent.avatarImage,
+    _useAvatarContent$bor = _useAvatarContent.borderColor,
+    borderColor = _useAvatarContent$bor === void 0 ? fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(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 jsx(Container, _extends({
+    css: [styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && styles.interactive, isDisabled && styles.disabled],
+    style: _defineProperty(_defineProperty({}, 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/esm/avatar.js

@@ -1,51 +1,32 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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) { _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 { createElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
-import { ClassNames, jsx } from '@emotion/react';
+import { forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useId } from '@atlaskit/ds-lib/use-id';
-import FocusRing from '@atlaskit/focus-ring';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, N70A } from '@atlaskit/theme/colors';
-import AvatarImage from './avatar-image';
-import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
-import { useAvatarContext } from './context';
+import { AvatarContent } from './avatar-content';
+import { AvatarContentContext, EnsureIsInsideAvatarContext, useAvatarContext } from './context';
+import AvatarImage from './internal/avatar-image';
 import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
-import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
+import { getCustomElement } from './utilities';
 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 = 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 ? fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(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 = _taggedTemplateLiteral(["\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"), 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(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(", 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(N0, ")"), ";\n        }\n      "))
-  );
-};
-
 /**
  * __Avatar__
  *
@@ -55,31 +36,30 @@ var getStyles = function getStyles(css, _ref) {
  * - [Code](https://atlassian.design/components/avatar/code)
  * - [Usage](https://atlassian.design/components/avatar/usage)
  */
-var Avatar = /*#__PURE__*/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__*/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 = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var 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__*/isValidElement(presence) ? presence : null;
   var customStatusNode = /*#__PURE__*/isValidElement(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
@@ -122,18 +102,6 @@ var Avatar = /*#__PURE__*/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 && getLinkProps(href, target)), onClick && !href ? getButtonProps(onClickHandler) : {
-      onClick: onClick
-    });
-  };
   var isPresence = isValidIconSize && presence && !status;
   var isStatus = isValidIconSize && status;
 
@@ -142,52 +110,39 @@ var Avatar = /*#__PURE__*/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 jsx(AvatarContainer, {
+  return jsx(EnsureIsInsideAvatarContext.Provider, {
+    value: true
+  }, 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
     }
-  }, jsx(ClassNames, null, function (_ref4) {
-    var css = _ref4.css;
-    var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-      className: getStyles(css, {
-        size: AVATAR_SIZES[size],
-        radius: 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: jsx(AvatarImage
-      // Only pass in the name if an image is provided and the
-      // container is not being used as an `img` role
-      , {
+  }, jsx(AvatarContentContext.Provider, {
+    value: {
+      as: 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: jsx(AvatarImage, {
         alt: !containerShouldBeImage && src ? name : undefined,
+        src: src,
         appearance: appearance,
         size: size,
-        src: src,
         testId: testId
-      }),
-      ref: ref
-    });
-    if (children) {
-      return children(props);
+      })
     }
-    var element = getCustomElement(isDisabled, href, onClick);
-    return element === 'a' || element === 'button' ? jsx(FocusRing, null, /*#__PURE__*/createElement(element, props)) : ( /*#__PURE__*/createElement(element, props));
-  }), isPresence && jsx(PresenceWrapper, {
+  }, children || jsx(AvatarContent, null)), isPresence && jsx(PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
@@ -202,7 +157,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     "data-testid": testId && "".concat(testId, "--label"),
     id: labelId,
     hidden: true
-  }, defaultLabel) : undefined);
+  }, defaultLabel) : undefined));
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/dist/esm/context.js

@@ -15,4 +15,34 @@ import { createContext, useContext } from 'react';
 export var AvatarContext = /*#__PURE__*/createContext(undefined);
 export var useAvatarContext = function useAvatarContext() {
   return 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.
+ */
+export var AvatarContentContext = /*#__PURE__*/createContext(defaultAvatarContentProps);
+export var useAvatarContent = function useAvatarContent() {
+  return useContext(AvatarContentContext);
+};
+
+/**
+ * Used to ensure Avatar sub-components are used within a Avatar component,
+ * and provide a useful error message if not.
+ */
+export var EnsureIsInsideAvatarContext = /*#__PURE__*/createContext(false);
+export var useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
+  var context = useContext(EnsureIsInsideAvatarContext);
+  if (!context) {
+    throw new Error('Avatar sub-components must be used within a Avatar component.');
+  }
 };

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { default } from './avatar';
+export { AvatarContent } from './avatar-content';
 export { default as AvatarItem } from './avatar-item';
 export { default as Presence } from './presence';
 export { default as Status } from './status';

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

@@ -14,7 +14,7 @@ import PersonIcon from '@atlaskit/icon/core/person';
 import ReleaseIcon from '@atlaskit/icon/core/release';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
-import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
+import { AVATAR_RADIUS, AVATAR_SIZES } from '../constants';
 var avatarDefaultIconStyles = css({
   display: 'flex',
   width: '100%',

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

@@ -5,7 +5,7 @@
 
 import { css, jsx } from '@emotion/react';
 import { N0 } from '@atlaskit/theme/colors';
-import { BORDER_WIDTH } from './constants';
+import { BORDER_WIDTH } from '../constants';
 var iconWrapperStyles = css({
   display: 'flex',
   boxSizing: 'border-box',

package/dist/esm/presence.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
-import IconWrapper from './icon-wrapper';
+import IconWrapper from './internal/icon-wrapper';
 var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(R300, ")"),
   cx: "4",

package/dist/esm/status.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
-import IconWrapper from './icon-wrapper';
+import IconWrapper from './internal/icon-wrapper';
 var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(G400, ")"),
   cx: "4",

package/dist/types/avatar-content.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { type ReactNode } from 'react';
+type AvatarContentProps = {
+    children?: ReactNode;
+};
+/**
+ * __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)
+ */
+export declare const AvatarContent: import("react").ForwardRefExoticComponent<AvatarContentProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/types/avatar.d.ts

@@ -2,21 +2,8 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
+import { type ReactNode } from 'react';
 import { type AppearanceType, type AvatarClickEventHandler, type Presence, type SizeType, type Status } from './types';
-export interface CustomAvatarProps {
-    /**
-     * This is used in render props so is okay to be defined.
-     */
-    'aria-label'?: string;
-    tabIndex?: number;
-    testId?: string;
-    onClick?: MouseEventHandler;
-    className?: string;
-    href?: string;
-    children: ReactNode;
-    ref: Ref<HTMLElement>;
-}
 export interface AvatarPropTypes {
     /**
      * Indicates the shape of the avatar. Most avatars are circular, but square avatars
@@ -37,7 +24,7 @@ export interface AvatarPropTypes {
     /**
      * Supply a custom avatar component instead of the default.
      */
-    children?: (props: CustomAvatarProps) => ReactNode;
+    children?: ReactNode;
     /**
      * Provides a url for avatars being used as a link.
      */

package/dist/types/context.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { type SizeType } from './types';
+import { type ForwardedRef, type MouseEventHandler, type ReactNode } from 'react';
+import { type AppearanceType, type SizeType } from './types';
 export type AvatarContextProps = {
     size: SizeType;
 };
@@ -18,3 +18,34 @@ export type AvatarContextProps = {
  */
 export declare const AvatarContext: import("react").Context<AvatarContextProps | undefined>;
 export declare const useAvatarContext: () => AvatarContextProps | undefined;
+type AvatarContentContextProps = {
+    as: 'a' | 'button' | 'span';
+    appearance: AppearanceType;
+    avatarImage: ReactNode;
+    borderColor?: string;
+    href?: string;
+    isDisabled?: boolean;
+    label?: string;
+    onClick?: MouseEventHandler;
+    ref: ForwardedRef<HTMLElement>;
+    tabIndex?: number;
+    target?: '_blank' | '_self' | '_top' | '_parent';
+    testId?: string;
+    size: SizeType;
+    stackIndex?: number;
+};
+/**
+ * __Avatar content context__
+ *
+ * This context provides the props for the AvatarContent component, enabling
+ * consumers to compose the AvatarContent with the Avatar component.
+ */
+export declare const AvatarContentContext: import("react").Context<AvatarContentContextProps>;
+export declare const useAvatarContent: () => AvatarContentContextProps;
+/**
+ * Used to ensure Avatar sub-components are used within a Avatar component,
+ * and provide a useful error message if not.
+ */
+export declare const EnsureIsInsideAvatarContext: import("react").Context<boolean>;
+export declare const useEnsureIsInsideAvatar: () => void;
+export {};

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export { default } from './avatar';
-export type { AvatarPropTypes, CustomAvatarProps } from './avatar';
+export type { AvatarPropTypes } from './avatar';
+export { AvatarContent } from './avatar-content';
 export { default as AvatarItem } from './avatar-item';
 export type { AvatarItemProps, CustomAvatarItemProps } from './avatar-item';
 export { default as Presence } from './presence';

package/dist/types/{avatar-image.d.ts → internal/avatar-image.d.ts}

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type FC } from 'react';
-import { type AppearanceType, type SizeType } from './types';
+import { type AppearanceType, type SizeType } from '../types';
 interface AvatarImageProps {
     appearance: AppearanceType;
     size: SizeType;

package/dist/types/utilities.d.ts

@@ -8,4 +8,4 @@ export declare const getButtonProps: (onClick: MouseEventHandler) => {
     type: string;
     onClick: MouseEventHandler;
 };
-export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler) => "button" | "a" | "span";
+export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler) => "a" | "button" | "span";

package/dist/types-ts4.5/avatar-content.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { type ReactNode } from 'react';
+type AvatarContentProps = {
+    children?: ReactNode;
+};
+/**
+ * __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)
+ */
+export declare const AvatarContent: import("react").ForwardRefExoticComponent<AvatarContentProps & import("react").RefAttributes<HTMLElement>>;
+export {};