@zendeskgarden/react-avatars 8.62.1 → 8.63.0

package/dist/index.cjs.js

@@ -7,15 +7,13 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var reactTheming = require('@zendeskgarden/react-theming');
 var styled = require('styled-components');
 var polished = require('polished');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,14 +29,13 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 function _extends$4() {
   _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
@@ -56,9 +53,7 @@ function _extends$4() {
 }
 
 var _g$1;
-
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
 var SvgClockStroke$1 = function SvgClockStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -66,8 +61,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -83,9 +77,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
 };
 
 var _g;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
 var SvgClockStroke = function SvgClockStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -93,8 +85,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -110,9 +101,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -120,8 +109,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
@@ -129,9 +117,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
 };
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -139,8 +125,7 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
@@ -151,9 +136,9 @@ const SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
 const STATUS = ['available', 'away', 'transfers', 'offline'];
 
 const COMPONENT_ID$6 = 'avatars.text';
-const StyledText = styled__default["default"].span.attrs({
+const StyledText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -219,9 +204,9 @@ const colorStyles$2 = props => {
   }
   return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
 };
-const StyledStatusIndicatorBase = styled__default["default"].div.attrs({
+const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -258,9 +243,9 @@ const colorStyles$1 = props => {
   }
   return styled.css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
 };
-const StyledStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
+const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -334,9 +319,9 @@ const sizeStyles$1 = props => {
   }
   return styled.css(["border-radius:", ";width:", " !important;height:", " !important;::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
 };
-const StyledAvatar = styled__default["default"].figure.attrs({
+const StyledAvatar = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -347,9 +332,9 @@ StyledAvatar.defaultProps = {
 };
 
 const COMPONENT_ID$2 = 'avatars.status-indicator.status';
-const StyledStandaloneStatus = styled__default["default"].figure.attrs({
+const StyledStandaloneStatus = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -363,9 +348,9 @@ function sizeStyles(props) {
   const marginRule = `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 2}px;`;
   return styled.css(["", " line-height:", ";font-size:", ";"], marginRule, reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.theme.fontSizes.md);
 }
-const StyledStandaloneStatusCaption = styled__default["default"].figcaption.attrs({
+const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -375,9 +360,9 @@ StyledStandaloneStatusCaption.defaultProps = {
 };
 
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
-const StyledStandaloneStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
+const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -387,7 +372,7 @@ StyledStandaloneStatusIndicator.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const TextComponent = React.forwardRef((props, ref) => React__default["default"].createElement(StyledText, _extends$4({
+const TextComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledText, _extends$4({
   ref: ref
 }, props)));
 TextComponent.displayName = 'Avatar.Text';
@@ -421,7 +406,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
     return ['status'].concat(statusMessage || []).join(': ');
   }, [computedStatus, badge]);
   const statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
-  return React__default["default"].createElement(StyledAvatar, _extends$4({
+  return React__namespace.default.createElement(StyledAvatar, _extends$4({
     ref: ref,
     isSystem: isSystem,
     size: size,
@@ -431,30 +416,30 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
     foregroundColor: foregroundColor,
     "aria-atomic": "true",
     "aria-live": "polite"
-  }, props), React.Children.only(children), computedStatus && React__default["default"].createElement(StyledStatusIndicator, {
+  }, props), React.Children.only(children), computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
     size: size,
     type: computedStatus,
     surfaceColor: surfaceColor,
     "aria-label": statusLabel,
-    role: "img"
-  }, computedStatus === 'active' ? React__default["default"].createElement("span", {
+    as: "figcaption"
+  }, computedStatus === 'active' ? React__namespace.default.createElement("span", {
     "aria-hidden": "true"
-  }, badge) : React__default["default"].createElement(React__default["default"].Fragment, null, computedStatus === 'away' ? React__default["default"].createElement(ClockIcon, {
+  }, badge) : React__namespace.default.createElement(React__namespace.default.Fragment, null, computedStatus === 'away' ? React__namespace.default.createElement(ClockIcon, {
     "data-icon-status": computedStatus
-  }) : null, computedStatus === 'transfers' ? React__default["default"].createElement(ArrowLeftIcon, {
+  }) : null, computedStatus === 'transfers' ? React__namespace.default.createElement(ArrowLeftIcon, {
     "data-icon-status": computedStatus
   }) : null)));
 });
 AvatarComponent.displayName = 'Avatar';
 AvatarComponent.propTypes = {
-  backgroundColor: PropTypes__default["default"].string,
-  foregroundColor: PropTypes__default["default"].string,
-  surfaceColor: PropTypes__default["default"].string,
-  isSystem: PropTypes__default["default"].bool,
-  badge: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  size: PropTypes__default["default"].oneOf(SIZE),
-  status: PropTypes__default["default"].oneOf(STATUS),
-  statusLabel: PropTypes__default["default"].string
+  backgroundColor: PropTypes__default.default.string,
+  foregroundColor: PropTypes__default.default.string,
+  surfaceColor: PropTypes__default.default.string,
+  isSystem: PropTypes__default.default.bool,
+  badge: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  size: PropTypes__default.default.oneOf(SIZE),
+  status: PropTypes__default.default.oneOf(STATUS),
+  statusLabel: PropTypes__default.default.string
 };
 AvatarComponent.defaultProps = {
   size: 'medium'
@@ -480,26 +465,28 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
   const ariaLabel = reactTheming.useText(StatusIndicator, {
     'aria-label': label
   }, 'aria-label', defaultLabel);
-  return React__default["default"].createElement(StyledStandaloneStatus, _extends$4({
-    role: "status",
-    ref: ref
-  }, props), React__default["default"].createElement(StyledStandaloneStatusIndicator, {
-    role: "img",
-    type: type,
-    size: isCompact ? 'small' : 'medium',
-    "aria-label": ariaLabel
-  }, type === 'away' ? React__default["default"].createElement(ClockIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null, type === 'transfers' ? React__default["default"].createElement(ArrowLeftIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null), children && React__default["default"].createElement(StyledStandaloneStatusCaption, null, children));
+  return (
+    React__namespace.default.createElement(StyledStandaloneStatus, _extends$4({
+      role: "status",
+      ref: ref
+    }, props), React__namespace.default.createElement(StyledStandaloneStatusIndicator, {
+      role: "img",
+      type: type,
+      size: isCompact ? 'small' : 'medium',
+      "aria-label": ariaLabel
+    }, type === 'away' ? React__namespace.default.createElement(ClockIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null, type === 'transfers' ? React__namespace.default.createElement(ArrowLeftIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null), children && React__namespace.default.createElement(StyledStandaloneStatusCaption, null, children))
+  );
 });
 StatusIndicator.displayName = 'StatusIndicator';
 StatusIndicator.propTypes = {
-  type: PropTypes__default["default"].oneOf(STATUS),
-  isCompact: PropTypes__default["default"].bool
+  type: PropTypes__default.default.oneOf(STATUS),
+  isCompact: PropTypes__default.default.bool
 };
 StatusIndicator.defaultProps = {
   type: 'offline'

package/dist/index.esm.js

@@ -28,9 +28,7 @@ function _extends$4() {
 }
 
 var _g$1;
-
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
 var SvgClockStroke$1 = function SvgClockStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -38,8 +36,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -55,9 +52,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
 };
 
 var _g;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
 var SvgClockStroke = function SvgClockStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -65,8 +60,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -82,9 +76,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -92,8 +84,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
@@ -101,9 +92,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
 };
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -111,8 +100,7 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
@@ -125,7 +113,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
 const COMPONENT_ID$6 = 'avatars.text';
 const StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -193,7 +181,7 @@ const colorStyles$2 = props => {
 };
 const StyledStatusIndicatorBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -232,7 +220,7 @@ const colorStyles$1 = props => {
 };
 const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -308,7 +296,7 @@ const sizeStyles$1 = props => {
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -321,7 +309,7 @@ StyledAvatar.defaultProps = {
 const COMPONENT_ID$2 = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -337,7 +325,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -349,7 +337,7 @@ StyledStandaloneStatusCaption.defaultProps = {
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -408,7 +396,7 @@ const AvatarComponent = forwardRef((_ref, ref) => {
     type: computedStatus,
     surfaceColor: surfaceColor,
     "aria-label": statusLabel,
-    role: "img"
+    as: "figcaption"
   }, computedStatus === 'active' ? React__default.createElement("span", {
     "aria-hidden": "true"
   }, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
@@ -452,21 +440,23 @@ const StatusIndicator = forwardRef((_ref, ref) => {
   const ariaLabel = useText(StatusIndicator, {
     'aria-label': label
   }, 'aria-label', defaultLabel);
-  return React__default.createElement(StyledStandaloneStatus, _extends$4({
-    role: "status",
-    ref: ref
-  }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
-    role: "img",
-    type: type,
-    size: isCompact ? 'small' : 'medium',
-    "aria-label": ariaLabel
-  }, type === 'away' ? React__default.createElement(ClockIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null, type === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children));
+  return (
+    React__default.createElement(StyledStandaloneStatus, _extends$4({
+      role: "status",
+      ref: ref
+    }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
+      role: "img",
+      type: type,
+      size: isCompact ? 'small' : 'medium',
+      "aria-label": ariaLabel
+    }, type === 'away' ? React__default.createElement(ClockIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null, type === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children))
+  );
 });
 StatusIndicator.displayName = 'StatusIndicator';
 StatusIndicator.propTypes = {

package/dist/typings/elements/StatusIndicator.d.ts

@@ -6,6 +6,12 @@
  */
 import React from 'react';
 import { IStatusIndicatorProps } from '../types';
+/**
+ * 1. role='status' on `div` is valid WAI-ARIA usage in this context.
+ *    https://www.w3.org/TR/wai-aria-1.1/#status
+ * 2. role='img' on `svg` is valid WAI-ARIA usage in this context.
+ *    https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
+ */
 /**
  * @extends HTMLAttributes<HTMLElement>
  */

package/dist/typings/types/index.d.ts

@@ -17,9 +17,9 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
     /** Applies system styling for representing objects, brands, or products */
     isSystem?: boolean;
     /** Specifies the avatar size */
-    size?: typeof SIZE[number];
+    size?: (typeof SIZE)[number];
     /** Applies status styling */
-    status?: typeof STATUS[number];
+    status?: (typeof STATUS)[number];
     /** Specifies the status label */
     statusLabel?: string;
     /** Sets the badge text and applies active styling */
@@ -27,7 +27,7 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
 }
 export interface IStatusIndicatorProps extends HTMLAttributes<HTMLElement> {
     /** Applies status type for styling and default aria-label */
-    type?: typeof STATUS[number];
+    type?: (typeof STATUS)[number];
     /** Applies compact styling */
     isCompact?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "8.62.1",
+  "version": "8.63.0",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,7 +31,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.62.1",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }