@atlaskit/avatar 21.3.2 → 21.3.4

package/dist/es2019/Text.js

@@ -3,19 +3,19 @@
 
 import { css, jsx } from '@emotion/react';
 import { N200, N900 } from '@atlaskit/theme/colors';
-const getStyles = (isSecondary, shouldTruncate) => css({
+const baseStyles = css({
   display: 'block',
   margin: "var(--ds-space-0, 0px)",
-  color: `var(--ds-text, ${N900})`,
-  ...(shouldTruncate && {
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }),
-  ...(isSecondary && {
-    color: `var(--ds-text-subtlest, ${N200})`,
-    fontSize: '0.85em'
-  })
+  color: `var(--ds-text, ${N900})`
+});
+const truncateStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const secondaryStyles = css({
+  color: `var(--ds-text-subtlest, ${N200})`,
+  fontSize: '0.85em'
 });
 
 /**
@@ -27,10 +27,7 @@ const Text = ({
   isSecondary,
   children,
   shouldTruncate
-}) =>
-// TODO: Refactor styles to follow css prop rules
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-jsx("span", {
-  css: getStyles(isSecondary, shouldTruncate)
+}) => jsx("span", {
+  css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
 }, children);
 export default Text;

package/dist/es2019/constants.js

@@ -20,6 +20,7 @@ export const AVATAR_RADIUS = {
 };
 export const BORDER_WIDTH = 2;
 export const ACTIVE_SCALE_FACTOR = 0.9;
+export const CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
 export const ICON_SIZES = {
   small: 12,
   medium: 14,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.2",
+	"version": "21.3.4",
 	"sideEffects": false
 }

package/dist/esm/Avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.2";
+var packageVersion = "21.3.4";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/esm/AvatarImage.js

@@ -1,13 +1,16 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
-import { background, N90 } from '@atlaskit/theme/colors';
+import { N0, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(background(), ")");
+export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
 export var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
 var avatarDefaultIconStyles = css({
   display: 'block',
@@ -15,24 +18,37 @@ var avatarDefaultIconStyles = css({
   height: '100%',
   backgroundColor: ICON_COLOR
 });
+var nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '& svg': {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px")
+    }
+  })));
+}, {});
 var avatarImageStyles = css({
   display: 'flex',
   width: '100%',
   height: '100%',
   flex: '1 1 100%'
 });
+
 /**
  * __Avatar image__
  *
  * 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;
+var AvatarImage = function AvatarImage(_ref3) {
+  var _ref3$alt = _ref3.alt,
+    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
+    src = _ref3.src,
+    appearance = _ref3.appearance,
+    size = _ref3.size,
+    testId = _ref3.testId;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageErrored = _useState2[0],
@@ -45,15 +61,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }, [src]);
   if (!src || hasImageErrored) {
     return 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
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      {
-        '& svg': {
-          width: "".concat(AVATAR_SIZES[size], "px"),
-          height: "".concat(AVATAR_SIZES[size], "px")
-        }
-      }]
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
     }, appearance === 'circle' ? jsx(PersonIcon, {
       label: alt,
       primaryColor: ICON_BACKGROUND,

package/dist/esm/AvatarItem.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
-import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
+import { B200, B50, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
@@ -25,7 +25,7 @@ var getStyles = function getStyles(css, _ref) {
     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 = _taggedTemplateLiteral(["\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, borderRadius(), 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(backgroundHover(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, borderRadius(), 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(N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };
 

package/dist/esm/IconWrapper.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
-import { background } from '@atlaskit/theme/colors';
+import { N0 } from '@atlaskit/theme/colors';
 import { BORDER_WIDTH } from './constants';
 var iconWrapperStyles = css({
   display: 'flex',
@@ -22,7 +22,7 @@ var iconWrapperStyles = css({
  */
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
-    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref$bgColor,
+    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(N0, ")") : _ref$bgColor,
     children = _ref.children,
     label = _ref.label;
   return jsx("span", {

package/dist/esm/Presence.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G300, N200, N40, purple, R300 } from '@atlaskit/theme/colors';
+import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,11 +12,11 @@ var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat(background(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
   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.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-icon-discovery, ".concat(purple(), ")"),
+  fill: "var(--ds-icon-discovery, ".concat(P300, ")"),
   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.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {

package/dist/esm/Skeleton.js

@@ -1,27 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
-import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
-var getStyles = function getStyles(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-    _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return css({
-    display: 'inline-block',
-    width: "".concat(AVATAR_SIZES[size], "px"),
-    height: "".concat(AVATAR_SIZES[size], "px"),
-    backgroundColor: color,
-    border: "".concat(BORDER_WIDTH, "px solid transparent"),
-    borderRadius: "".concat(appearance === 'square' ? "".concat(AVATAR_RADIUS[size], "px") : '50%'),
-    opacity: "".concat(weight === 'strong' ? 0.3 : 0.15)
-  });
-};
+import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH, CSS_VAR_AVATAR_BGCOLOR } from './constants';
+var skeletonStyles = css({
+  display: 'inline-block',
+  backgroundColor: "var(".concat(CSS_VAR_AVATAR_BGCOLOR, ")"),
+  border: "".concat(BORDER_WIDTH, "px solid transparent")
+});
+var sizeStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px")
+  })));
+}, {});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var radiusStyles = Object.entries(AVATAR_RADIUS).reduce(function (styles, _ref3) {
+  var _ref4 = _slicedToArray(_ref3, 2),
+    key = _ref4[0],
+    size = _ref4[1];
+  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    borderRadius: "".concat(size, "px")
+  })));
+}, {});
+var defaultRadiusStyles = css({
+  borderRadius: '50%'
+});
+var strongOpacityStyles = css({
+  opacity: 0.3
+});
+var defaultOpacityStyles = css({
+  opacity: 0.15
+});
 
 /**
  * __Skeleton__
@@ -31,20 +49,14 @@ var getStyles = function getStyles(_ref) {
  * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
  */
-var Skeleton = function Skeleton(_ref2) {
-  var size = _ref2.size,
-    appearance = _ref2.appearance,
-    color = _ref2.color,
-    weight = _ref2.weight;
+var Skeleton = function Skeleton(_ref5) {
+  var size = _ref5.size,
+    appearance = _ref5.appearance,
+    color = _ref5.color,
+    weight = _ref5.weight;
   return jsx("div", {
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: getStyles({
-      size: size,
-      appearance: appearance,
-      color: color,
-      weight: weight
-    })
+    css: [skeletonStyles, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' ? radiusStyles[size !== null && size !== void 0 ? size : 'medium'] : defaultRadiusStyles, weight === 'strong' ? strongOpacityStyles : defaultOpacityStyles],
+    style: _defineProperty({}, CSS_VAR_AVATAR_BGCOLOR, color !== null && color !== void 0 ? color : 'currentColor')
   });
 };
 export default Skeleton;

package/dist/esm/Status.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G400, N40, N500, R400 } from '@atlaskit/theme/colors';
+import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,7 +12,7 @@ var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PU
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat(background(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
   d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
 }));
 var DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -21,7 +21,7 @@ var DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PU
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat(background(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
   d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
 }));
 var LockedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {

package/dist/esm/Text.js

@@ -1,25 +1,22 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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; }
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
 import { N200, N900 } from '@atlaskit/theme/colors';
-var getStyles = function getStyles(isSecondary, shouldTruncate) {
-  return css(_objectSpread(_objectSpread({
-    display: 'block',
-    margin: "var(--ds-space-0, 0px)",
-    color: "var(--ds-text, ".concat(N900, ")")
-  }, shouldTruncate && {
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }), isSecondary && {
-    color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-    fontSize: '0.85em'
-  }));
-};
+var baseStyles = css({
+  display: 'block',
+  margin: "var(--ds-space-0, 0px)",
+  color: "var(--ds-text, ".concat(N900, ")")
+});
+var truncateStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var secondaryStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  fontSize: '0.85em'
+});
 
 /**
  * __Text__
@@ -30,12 +27,8 @@ var Text = function Text(_ref) {
   var isSecondary = _ref.isSecondary,
     children = _ref.children,
     shouldTruncate = _ref.shouldTruncate;
-  return (
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("span", {
-      css: getStyles(isSecondary, shouldTruncate)
-    }, children)
-  );
+  return jsx("span", {
+    css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
+  }, children);
 };
 export default Text;

package/dist/esm/constants.js

@@ -20,6 +20,7 @@ export var AVATAR_RADIUS = {
 };
 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,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.2",
+	"version": "21.3.4",
 	"sideEffects": false
 }

package/dist/types/constants.d.ts

@@ -3,5 +3,6 @@ export declare const AVATAR_SIZES: AvatarSizeMap;
 export declare const AVATAR_RADIUS: AvatarSizeMap;
 export declare const BORDER_WIDTH = 2;
 export declare const ACTIVE_SCALE_FACTOR = 0.9;
+export declare const CSS_VAR_AVATAR_BGCOLOR = "--avatar-background-color";
 export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
 export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;

package/dist/types-ts4.5/constants.d.ts

@@ -3,5 +3,6 @@ export declare const AVATAR_SIZES: AvatarSizeMap;
 export declare const AVATAR_RADIUS: AvatarSizeMap;
 export declare const BORDER_WIDTH = 2;
 export declare const ACTIVE_SCALE_FACTOR = 0.9;
+export declare const CSS_VAR_AVATAR_BGCOLOR = "--avatar-background-color";
 export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
 export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.2",
+  "version": "21.3.4",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Avatar",
       "category": "Components"
@@ -43,7 +43,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"
@@ -55,19 +55,17 @@
     "@atlaskit/button": "^16.7.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/field-base": "^15.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
     "@testing-library/react": "^12.1.5",
     "@types/jscodeshift": "^0.11.0",
     "color-contrast-checker": "^1.5.0",
+    "jest-axe": "^4.0.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,170 @@
+## API Report File for "@atlaskit/avatar"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { RefAttributes } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export const ACTIVE_SCALE_FACTOR = 0.9;
+
+// @public (undocumented)
+export type AppearanceType = 'circle' | 'square';
+
+// @public
+const Avatar: ForwardRefExoticComponent<AvatarPropTypes & RefAttributes<HTMLElement>>;
+export default Avatar;
+
+// @public (undocumented)
+export const AVATAR_RADIUS: AvatarSizeMap;
+
+// @public (undocumented)
+export const AVATAR_SIZES: AvatarSizeMap;
+
+// @public (undocumented)
+export type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;
+
+// @public
+export const AvatarItem: ForwardRefExoticComponent<AvatarItemProps & RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export interface AvatarItemProps {
+    avatar: ReactNode;
+    backgroundColor?: string;
+    children?: (props: CustomAvatarItemProps) => ReactNode;
+    href?: string;
+    isDisabled?: boolean;
+    isTruncationDisabled?: boolean;
+    label?: string;
+    onClick?: AvatarClickEventHandler;
+    primaryText?: ReactNode;
+    secondaryText?: ReactNode;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface AvatarPropTypes {
+    analyticsContext?: Record<string, any>;
+    appearance?: AppearanceType;
+    borderColor?: string;
+    children?: (props: CustomAvatarProps) => ReactNode;
+    href?: string;
+    isDisabled?: boolean;
+    label?: string;
+    name?: string;
+    onClick?: AvatarClickEventHandler;
+    presence?: ('busy' | 'focus' | 'offline' | 'online') | ReactNode;
+    size?: SizeType;
+    src?: string;
+    stackIndex?: number;
+    status?: ('approved' | 'declined' | 'locked') | ReactNode;
+    tabIndex?: number;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    testId?: string;
+}
+
+// @public (undocumented)
+type AvatarSizeMap = Record<SizeType, number>;
+
+// @public (undocumented)
+export const BORDER_WIDTH = 2;
+
+// @public (undocumented)
+export interface CustomAvatarItemProps {
+    // (undocumented)
+    'aria-disabled'?: 'false' | 'true' | boolean | undefined;
+    'aria-label'?: string;
+    // (undocumented)
+    children: ReactNode;
+    // (undocumented)
+    className?: string;
+    // (undocumented)
+    href?: string;
+    // (undocumented)
+    onClick?: MouseEventHandler;
+    // (undocumented)
+    ref: Ref<HTMLElement>;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface CustomAvatarProps {
+    'aria-label'?: string;
+    // (undocumented)
+    children: ReactNode;
+    // (undocumented)
+    className?: string;
+    // (undocumented)
+    href?: string;
+    // (undocumented)
+    onClick?: MouseEventHandler;
+    // (undocumented)
+    ref: Ref<HTMLElement>;
+    // (undocumented)
+    tabIndex?: number;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+export type IndicatorSizeType = 'large' | 'medium' | 'small' | 'xlarge';
+
+// @public
+export const Presence: FC<PresenceProps>;
+
+// @public (undocumented)
+export interface PresenceProps {
+    borderColor?: string;
+    children?: ReactNode;
+    presence?: PresenceType;
+    testId?: string;
+}
+
+// @public (undocumented)
+export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
+
+// @public (undocumented)
+export type SizeType = 'large' | 'medium' | 'small' | 'xlarge' | 'xsmall' | 'xxlarge';
+
+// @public
+export const Skeleton: FC<SkeletonProps>;
+
+// @public (undocumented)
+export interface SkeletonProps {
+    // (undocumented)
+    appearance?: AppearanceType;
+    // (undocumented)
+    color?: string;
+    // (undocumented)
+    size?: SizeType;
+    // (undocumented)
+    weight?: 'normal' | 'strong';
+}
+
+// @public
+export const Status: FC<StatusProps>;
+
+// @public (undocumented)
+export interface StatusProps {
+    borderColor?: string;
+    children?: ReactNode;
+    status?: StatusType;
+}
+
+// @public (undocumented)
+export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
+
+// (No @packageDocumentation comment for this package)
+
+```