@atlaskit/avatar 25.9.1 → 25.9.2

package/dist/es2019/context.js

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

package/dist/es2019/get-appearance.js

@@ -0,0 +1,11 @@
+const getAppearanceForAppType = appType => {
+  switch (appType) {
+    case 'agent':
+      return 'hexagon';
+    case 'user':
+    case 'system':
+    default:
+      return 'circle';
+  }
+};
+export default getAppearanceForAppType;

package/dist/es2019/index.js

@@ -4,6 +4,6 @@ export { default as AvatarItem } from './avatar-item';
 export { default as Presence } from './presence';
 export { default as Status } from './status';
 export { default as Skeleton } from './skeleton';
-export { getAppearanceForAppType } from './utilities';
+export { default as getAppearanceForAppType } from './get-appearance';
 export { AvatarContext, useAvatarContext } from './context';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';

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

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+const 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 const AvatarContentContext = /*#__PURE__*/createContext(defaultAvatarContentProps);

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Used to ensure Avatar sub-components are used within a Avatar component,
+ * and provide a useful error message if not.
+ */
+export const EnsureIsInsideAvatarContext = /*#__PURE__*/createContext(false);
+export const useEnsureIsInsideAvatar = () => {
+  const context = useContext(EnsureIsInsideAvatarContext);
+  if (!context) {
+    throw new Error('Avatar sub-components must be used within a Avatar component.');
+  }
+};

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

@@ -0,0 +1,10 @@
+const getCustomElement = (isDisabled, href, onClick, ariaHasPopup) => {
+  if (href && !isDisabled) {
+    return 'a';
+  }
+  if (onClick || isDisabled || ariaHasPopup) {
+    return 'button';
+  }
+  return 'span';
+};
+export default getCustomElement;

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

@@ -0,0 +1,53 @@
+/* presence-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./presence-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import AvatarPresence from '../presence';
+const styles = {
+  root: "_kqswstnw _lcxvglyw"
+};
+const iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+const circleIconOffsetMap = {
+  small: "_94n5idpf _1xi2idpf",
+  medium: "_94n5idpf _1xi2idpf",
+  large: "_94n5t94y _1xi2t94y",
+  xlarge: "_94n51v6z _1xi21v6z"
+};
+const squareIconOffsetMap = {
+  root: "_94n5myb0 _1xi2myb0"
+};
+const 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.
+ */
+const PresenceWrapper = ({
+  size,
+  appearance,
+  children,
+  borderColor,
+  presence,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    "data-testid": testId && `${testId}--presence`,
+    className: 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));
+};
+export default PresenceWrapper;

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

@@ -0,0 +1,52 @@
+/* status-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./status-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import AvatarStatus from '../status';
+const styles = {
+  root: "_kqswstnw"
+};
+const iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+const circleIconOffsetMap = {
+  small: "_rjxpidpf _152tidpf",
+  medium: "_rjxpidpf _152tidpf",
+  large: "_rjxpt94y _152tt94y",
+  xlarge: "_rjxp1v6z _152t1v6z"
+};
+const squareIconOffsetMap = {
+  root: "_rjxpidpf _152tidpf"
+};
+const 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.
+ */
+const StatusWrapper = ({
+  size,
+  status,
+  appearance,
+  borderColor,
+  children,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    "data-testid": testId && `${testId}--status`,
+    className: 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));
+};
+export default StatusWrapper;

package/dist/es2019/presence.js

@@ -1,5 +1,4 @@
 /* presence.tsx generated by @compiled/babel-plugin v0.39.1 */
-import "./presence.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
@@ -66,51 +65,4 @@ const AvatarPresence = ({
   width: "100%",
   xmlns: "http://www.w3.org/2000/svg"
 }, getPresence(presence)) : children);
-export default AvatarPresence;
-const styles = {
-  root: "_kqswstnw _lcxvglyw"
-};
-const iconSizeMap = {
-  small: "_4t3i1crf _1bsb1crf",
-  medium: "_4t3idlk8 _1bsbdlk8",
-  large: "_4t3io7ao _1bsbo7ao",
-  xlarge: "_4t3if6fq _1bsbf6fq"
-};
-const circleIconOffsetMap = {
-  small: "_94n5idpf _1xi2idpf",
-  medium: "_94n5idpf _1xi2idpf",
-  large: "_94n5t94y _1xi2t94y",
-  xlarge: "_94n51v6z _1xi21v6z"
-};
-const squareIconOffsetMap = {
-  root: "_94n5myb0 _1xi2myb0"
-};
-const 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.
- */
-export const PresenceWrapper = ({
-  size,
-  appearance,
-  children,
-  borderColor,
-  presence,
-  testId
-}) => {
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    "data-testid": testId && `${testId}--presence`,
-    className: 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));
-};
+export default AvatarPresence;

package/dist/es2019/status.js

@@ -1,34 +1,9 @@
 /* status.tsx generated by @compiled/babel-plugin v0.39.1 */
-import "./status.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import IconWrapper from './internal/icon-wrapper';
-const styles = {
-  root: "_kqswstnw"
-};
-const iconSizeMap = {
-  small: "_4t3i1crf _1bsb1crf",
-  medium: "_4t3idlk8 _1bsbdlk8",
-  large: "_4t3io7ao _1bsbo7ao",
-  xlarge: "_4t3if6fq _1bsbf6fq"
-};
-const circleIconOffsetMap = {
-  small: "_rjxpidpf _152tidpf",
-  medium: "_rjxpidpf _152tidpf",
-  large: "_rjxpt94y _152tt94y",
-  xlarge: "_rjxp1v6z _152t1v6z"
-};
-const squareIconOffsetMap = {
-  root: "_rjxpidpf _152tidpf"
-};
-const hexagonIconOffsetMap = {
-  small: "_rjxp1n1a _152t1n1a",
-  medium: "_rjxp1n1a _152t1n1a",
-  large: "_rjxpmyb0 _152t1y44",
-  xlarge: "_rjxp1lpd _152tl52n"
-};
 const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: `var(--ds-icon-success, ${G400})`,
   cx: "4",
@@ -88,26 +63,4 @@ const AvatarStatus = ({
   width: "100%",
   xmlns: "http://www.w3.org/2000/svg"
 }, getStatus(status)) : children);
-export default AvatarStatus;
-/**
- * __Status wrapper__
- *
- * A status wrapper is used internally to position status on top of the avatar.
- */
-export const StatusWrapper = ({
-  size,
-  status,
-  appearance,
-  borderColor,
-  children,
-  testId
-}) => {
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    "data-testid": testId && `${testId}--status`,
-    className: 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));
-};
+export default AvatarStatus;

package/dist/esm/avatar-content.js

@@ -4,9 +4,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./avatar-content.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useAvatarContent, useEnsureIsInsideAvatar } from './context';
+import { AvatarContentContext } from './internal/content-context';
+import { useEnsureIsInsideAvatar } from './internal/ensure-is-inside-avatar-context';
 var boxShadowCssVar = '--avatar-box-shadow';
 var bgColorCssVar = '--avatar-bg-color';
 var styles = {
@@ -54,25 +55,25 @@ var marginAdjustmentMap = {
 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 ? "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'];
+  var _useContext = useContext(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, _extends({
     style: _defineProperty(_defineProperty({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),

package/dist/esm/avatar-item.js

@@ -7,7 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
-import { getCustomElement } from './utilities';
+import getCustomElement from './internal/get-custom-element';
 var bgColorCssVar = '--avatar-item-bg-color';
 var styles = {
   root: "_2rkofajl _12ji1r31 _1qu2glyw _12y31o36 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1txw _vchhusvi _1bsb1osq _4cvr1h6o _bfhk1g13 _syaz1kw7 _1wyb1kw7 _zg8l4jg8 _k48pi7a9 _vwz4kb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i51b66 _1q511b66 _y4ti1b66 _bozg1b66 _y3gn1e5h",

package/dist/esm/avatar.js

@@ -9,11 +9,13 @@ import { forwardRef, isValidElement, useCallback, useEffect, useRef } from 'reac
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { AvatarContent } from './avatar-content';
-import { AvatarContentContext, EnsureIsInsideAvatarContext, useAvatarContext } from './context';
+import { useAvatarContext } from './context';
 import AvatarImage from './internal/avatar-image';
-import { PresenceWrapper } from './presence';
-import { StatusWrapper } from './status';
-import { getCustomElement } from './utilities';
+import { AvatarContentContext } from './internal/content-context';
+import { EnsureIsInsideAvatarContext } from './internal/ensure-is-inside-avatar-context';
+import getCustomElement from './internal/get-custom-element';
+import PresenceWrapper from './internal/presence-wrapper';
+import StatusWrapper from './internal/status-wrapper';
 var packageName = "@atlaskit/avatar";
 var packageVersion = "0.0.0-development";
 var containerStyles = null;

package/dist/esm/constants.js

@@ -17,17 +17,4 @@ export var AVATAR_RADIUS = {
   xxlarge: 12
 };
 export var BORDER_WIDTH = 2;
-export var ACTIVE_SCALE_FACTOR = 0.9;
-export var CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
-export var ICON_SIZES = {
-  small: 12,
-  medium: 14,
-  large: 15,
-  xlarge: 18
-};
-export var ICON_OFFSET = {
-  small: 0,
-  medium: 0,
-  large: 1,
-  xlarge: 7
-};
+export var ACTIVE_SCALE_FACTOR = 0.9;

package/dist/esm/context.js

@@ -15,34 +15,4 @@ 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/get-appearance.js

@@ -0,0 +1,11 @@
+var getAppearanceForAppType = function getAppearanceForAppType(appType) {
+  switch (appType) {
+    case 'agent':
+      return 'hexagon';
+    case 'user':
+    case 'system':
+    default:
+      return 'circle';
+  }
+};
+export default getAppearanceForAppType;

package/dist/esm/index.js

@@ -4,6 +4,6 @@ export { default as AvatarItem } from './avatar-item';
 export { default as Presence } from './presence';
 export { default as Status } from './status';
 export { default as Skeleton } from './skeleton';
-export { getAppearanceForAppType } from './utilities';
+export { default as getAppearanceForAppType } from './get-appearance';
 export { AvatarContext, useAvatarContext } from './context';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';

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

@@ -0,0 +1,16 @@
+import { createContext } from '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.
+ */
+export var AvatarContentContext = /*#__PURE__*/createContext(defaultAvatarContentProps);

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * 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/internal/get-custom-element.js

@@ -0,0 +1,10 @@
+var getCustomElement = function getCustomElement(isDisabled, href, onClick, ariaHasPopup) {
+  if (href && !isDisabled) {
+    return 'a';
+  }
+  if (onClick || isDisabled || ariaHasPopup) {
+    return 'button';
+  }
+  return 'span';
+};
+export default getCustomElement;

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

@@ -0,0 +1,52 @@
+/* presence-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./presence-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import AvatarPresence from '../presence';
+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: 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));
+};
+export default PresenceWrapper;

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

@@ -0,0 +1,51 @@
+/* status-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./status-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import AvatarStatus from '../status';
+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: 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));
+};
+export default StatusWrapper;