@atlaskit/avatar 21.1.6 → 21.1.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/avatar
 
+## 21.1.7
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
 ## 21.1.6
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -1,58 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _AvatarImage = _interopRequireDefault(require("./AvatarImage"));
-
 var _constants = require("./constants");
-
 var _Presence = require("./Presence");
-
 var _Status = require("./Status");
-
 var _utilities = require("./utilities");
-
 var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.1.6";
-
+var packageVersion = "21.1.7";
 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 ? "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _ref$borderColor,
-      stackIndex = _ref.stackIndex,
-      isInteractive = _ref.isInteractive,
-      isDisabled = _ref.isDisabled;
+    radius = _ref.radius,
+    appearance = _ref.appearance,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? "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    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "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(").concat(_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      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, "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      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "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(").concat(_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 +45,27 @@ 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 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,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
-      src = _ref2.src,
-      stackIndex = _ref2.stackIndex,
-      status = _ref2.status,
-      target = _ref2.target,
-      testId = _ref2.testId;
-
+    _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,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    src = _ref2.src,
+    stackIndex = _ref2.stackIndex,
+    status = _ref2.status,
+    target = _ref2.target,
+    testId = _ref2.testId;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var customPresenceNode = (0, _typeof2.default)(presence) === 'object' ? presence : null;
   var customStatusNode = (0, _typeof2.default)(status) === 'object' ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
@@ -98,7 +77,6 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     if (isDisabled || typeof onClick !== 'function') {
       return;
     }
-
     var analyticsEvent = createAnalyticsEvent({
       action: 'clicked',
       actionSubject: 'avatar',
@@ -108,31 +86,27 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
         packageVersion: packageVersion
       }
     });
+
     /**
      * To avoid wrapping this component in AnalyticsContext we manually
      * push the parent context's meta data into the context.
      */
-
     var context = _objectSpread({
       componentName: 'avatar',
       packageName: packageName,
       packageVersion: packageVersion
     }, lastAnalytics.current);
-
     analyticsEvent.context.push(context);
+
     /**
      * Replicating the logic in the `withAnalyticsEvents` HOC
      */
-
     var clone = analyticsEvent.clone();
-
     if (clone) {
       clone.fire('atlaskit');
     }
-
     onClick(event, analyticsEvent);
   }, [createAnalyticsEvent, isDisabled, onClick]);
-
   var getTestId = function getTestId(testId, children) {
     return !children ? {
       'data-testid': "".concat(testId, "--inner")
@@ -140,20 +114,18 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       testId: "".concat(testId, "--inner")
     };
   };
-
   var componentProps = function componentProps() {
     if (isDisabled) {
       return {
         disabled: true
       };
-    } // return only relevant props for either anchor or button elements
-
+    }
 
+    // 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
     });
   };
-
   return (0, _react2.jsx)("div", {
     "data-testid": testId,
     style: {
@@ -164,7 +136,6 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     }
   }, (0, _react2.jsx)(_react2.ClassNames, null, function (_ref3) {
     var css = _ref3.css;
-
     var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       className: getStyles(css, {
         size: _constants.AVATAR_SIZES[size],
@@ -187,7 +158,6 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       }),
       ref: ref
     });
-
     return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
   }), isValidIconSize && presence && !status && (0, _react2.jsx)(_Presence.PresenceWrapper, {
     appearance: appearance,

package/dist/cjs/AvatarImage.js

@@ -1,28 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ICON_COLOR = exports.ICON_BACKGROUND = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _person = _interopRequireDefault(require("@atlaskit/icon/glyph/person"));
-
 var _ship = _interopRequireDefault(require("@atlaskit/icon/glyph/ship"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("./constants");
-
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+
 var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat((0, _colors.background)(), ")");
 exports.ICON_BACKGROUND = ICON_BACKGROUND;
 var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
@@ -44,29 +36,27 @@ var avatarImageStyles = (0, _react2.css)({
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-
 var AvatarImage = function AvatarImage(_ref) {
   var _ref$alt = _ref.alt,
-      alt = _ref$alt === void 0 ? '' : _ref$alt,
-      src = _ref.src,
-      appearance = _ref.appearance,
-      size = _ref.size,
-      testId = _ref.testId;
-
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    src = _ref.src,
+    appearance = _ref.appearance,
+    size = _ref.size,
+    testId = _ref.testId;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      hasImageErrored = _useState2[0],
-      setHasImageErrored = _useState2[1];
-
-  var borderRadius = appearance === 'circle' ? '50%' : "".concat(_constants.AVATAR_RADIUS[size], "px"); // If src changes, reset state
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+  var borderRadius = appearance === 'circle' ? '50%' : "".concat(_constants.AVATAR_RADIUS[size], "px");
 
+  // If src changes, reset state
   (0, _react.useEffect)(function () {
     setHasImageErrored(false);
   }, [src]);
-
   if (!src || hasImageErrored) {
     return (0, _react2.jsx)("span", {
-      css: [avatarDefaultIconStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
+      css: [avatarDefaultIconStyles,
+      // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       {
         '& svg': {
@@ -86,7 +76,6 @@ var AvatarImage = function AvatarImage(_ref) {
       testId: testId && "".concat(testId, "--ship")
     }));
   }
-
   return (0, _react2.jsx)("img", {
     src: src,
     alt: alt,
@@ -100,6 +89,5 @@ var AvatarImage = function AvatarImage(_ref) {
     }
   });
 };
-
 var _default = AvatarImage;
 exports.default = _default;

package/dist/cjs/AvatarItem.js

@@ -1,54 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _constants2 = require("./constants");
-
 var _Text = _interopRequireDefault(require("./Text"));
-
 var _utilities = require("./utilities");
-
 var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var avatarItemStyles = (0, _react2.css)({
   minWidth: 0,
   maxWidth: '100%',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize()}px``
-  paddingLeft: "var(--ds-scale-100, 8px)",
+  paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   lineHeight: '1.4'
 });
-
 var getStyles = function getStyles(css, _ref) {
   var backgroundColor = _ref.backgroundColor,
-      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    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
+    isInteractive = _ref.isInteractive,
+    isDisabled = _ref.isDisabled;
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };
+
 /**
  * __Avatar item__
  *
@@ -57,23 +42,20 @@ var getStyles = function getStyles(css, _ref) {
  * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
  */
-
-
 var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var avatar = _ref2.avatar,
-      _ref2$backgroundColor = _ref2.backgroundColor,
-      backgroundColor = _ref2$backgroundColor === void 0 ? 'transparent' : _ref2$backgroundColor,
-      children = _ref2.children,
-      isTruncationDisabled = _ref2.isTruncationDisabled,
-      href = _ref2.href,
-      isDisabled = _ref2.isDisabled,
-      onClick = _ref2.onClick,
-      primaryText = _ref2.primaryText,
-      secondaryText = _ref2.secondaryText,
-      target = _ref2.target,
-      testId = _ref2.testId,
-      label = _ref2.label;
-
+    _ref2$backgroundColor = _ref2.backgroundColor,
+    backgroundColor = _ref2$backgroundColor === void 0 ? 'transparent' : _ref2$backgroundColor,
+    children = _ref2.children,
+    isTruncationDisabled = _ref2.isTruncationDisabled,
+    href = _ref2.href,
+    isDisabled = _ref2.isDisabled,
+    onClick = _ref2.onClick,
+    primaryText = _ref2.primaryText,
+    secondaryText = _ref2.secondaryText,
+    target = _ref2.target,
+    testId = _ref2.testId,
+    label = _ref2.label;
   var getTestId = function getTestId(testId, children) {
     return !children ? {
       'data-testid': "".concat(testId, "--itemInner")
@@ -81,23 +63,20 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       testId: "".concat(testId, "--itemInner")
     };
   };
-
   var componentProps = function componentProps() {
     if (isDisabled) {
       return {
         disabled: true
       };
-    } // return only relevant props for either anchor or button elements
-
+    }
 
+    // return only relevant props for either anchor or button elements
     return _objectSpread(_objectSpread({}, href && (0, _utilities.getLinkProps)(href, target)), onClick && !href ? (0, _utilities.getButtonProps)(onClick) : {
       onClick: onClick
     });
   };
-
   return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref3) {
     var css = _ref3.css;
-
     var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       ref: ref,
       className: getStyles(css, {
@@ -117,7 +96,6 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
         shouldTruncate: !isTruncationDisabled
       }, secondaryText)))
     });
-
     return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
   });
 });

package/dist/cjs/IconWrapper.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("./constants");
-
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+
 var iconWrapperStyles = (0, _react.css)({
   display: 'flex',
   boxSizing: 'border-box',
@@ -23,16 +20,16 @@ var iconWrapperStyles = (0, _react.css)({
   borderRadius: '50%',
   overflow: 'hidden'
 });
+
 /**
  * __Icon wrapper__
  *
  * An icon wrapper is used internally only.
  */
-
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
-      bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
-      children = _ref.children;
+    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
+    children = _ref.children;
   return (0, _react.jsx)("span", {
     css: iconWrapperStyles,
     style: {
@@ -41,6 +38,5 @@ var IconWrapper = function IconWrapper(_ref) {
     }
   }, children);
 };
-
 var _default = IconWrapper;
 exports.default = _default;

package/dist/cjs/Presence.js

@@ -1,27 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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("./IconWrapper"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+
 var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
   cx: "4",
@@ -31,12 +23,10 @@ var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, n
   fill: "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")"),
   d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
 }));
-
 var FocusIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {
   fill: "var(--ds-icon-discovery, ".concat((0, _colors.purple)(), ")"),
   d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
 }));
-
 var OfflineIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {
   fill: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
   d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
@@ -44,29 +34,25 @@ var OfflineIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment
   fill: "var(--ds-surface-overlay, ".concat(_colors.N40, ")"),
   d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }));
-
 var OnlineIndicator = /*#__PURE__*/_react.default.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 });
-
 function getPresence(presence) {
   switch (presence) {
     case 'busy':
       return BusyIndicator;
-
     case 'focus':
       return FocusIndicator;
-
     case 'offline':
       return OfflineIndicator;
-
     case 'online':
       return OnlineIndicator;
   }
 }
+
 /**
  * __Avatar presence__
  *
@@ -76,12 +62,10 @@ function getPresence(presence) {
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
  * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
  */
-
-
 var AvatarPresence = function AvatarPresence(_ref) {
   var borderColor = _ref.borderColor,
-      children = _ref.children,
-      presence = _ref.presence;
+    children = _ref.children,
+    presence = _ref.presence;
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
     bgColor: borderColor
   }, presence ? /*#__PURE__*/_react.default.createElement("svg", {
@@ -92,10 +76,8 @@ var AvatarPresence = function AvatarPresence(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, getPresence(presence)) : children);
 };
-
 var _default = AvatarPresence;
 exports.default = _default;
-
 /**
  * __Presence wrapper__
  *
@@ -103,11 +85,11 @@ exports.default = _default;
  */
 var PresenceWrapper = function PresenceWrapper(_ref2) {
   var size = _ref2.size,
-      appearance = _ref2.appearance,
-      children = _ref2.children,
-      borderColor = _ref2.borderColor,
-      presence = _ref2.presence,
-      testId = _ref2.testId;
+    appearance = _ref2.appearance,
+    children = _ref2.children,
+    borderColor = _ref2.borderColor,
+    presence = _ref2.presence,
+    testId = _ref2.testId;
   var position = appearance === 'square' ? -4 : _constants.ICON_OFFSET[size];
   return /*#__PURE__*/_react.default.createElement("span", {
     "data-testid": testId && "".concat(testId, "--presence"),
@@ -124,5 +106,4 @@ var PresenceWrapper = function PresenceWrapper(_ref2) {
     presence: !children && presence
   }, children));
 };
-
 exports.PresenceWrapper = PresenceWrapper;