@zendeskgarden/react-avatars 8.57.0 → 8.58.0

package/dist/index.esm.js

@@ -16,114 +16,17 @@ function _extends$4() {
   _extends$4 = 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$4.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 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); }
@@ -135,7 +38,8 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -161,7 +65,8 @@ var SvgClockStroke = function SvgClockStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -187,7 +92,8 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, 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"
@@ -205,37 +111,31 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, 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"
   })));
 };
 
-var SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
-var STATUS = ['available', 'away', 'transfers', 'offline'];
+const SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
+const STATUS = ['available', 'away', 'transfers', 'offline'];
 
-var COMPONENT_ID$6 = 'avatars.text';
-var StyledText = styled.span.attrs({
+const COMPONENT_ID$6 = 'avatars.text';
+const StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
-})(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _SIZE$1 = _slicedToArray(SIZE, 5),
-    xxs$1 = _SIZE$1[0],
-    xs$1 = _SIZE$1[1],
-    s$1 = _SIZE$1[2],
-    m$1 = _SIZE$1[3],
-    l$1 = _SIZE$1[4];
-var TRANSITION_DURATION = 0.25;
+const [xxs$1, xs$1, s$1, m$1, l$1] = SIZE;
+const TRANSITION_DURATION = 0.25;
 function getStatusColor(type, theme) {
   switch (type) {
     case 'active':
@@ -253,20 +153,20 @@ function getStatusColor(type, theme) {
   }
 }
 function getStatusBorderOffset(props) {
-  return props.size === xxs$1 ? math("".concat(props.theme.shadowWidths.sm, " - 1")) : props.theme.shadowWidths.sm;
+  return props.size === xxs$1 ? math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
 }
 function getStatusSize(props, offset) {
-  var isActive = props.type === 'active';
+  const isActive = props.type === 'active';
   switch (props.size) {
     case xxs$1:
-      return math("".concat(props.theme.space.base, "px - ").concat(offset));
+      return math(`${props.theme.space.base}px - ${offset}`);
     case xs$1:
-      return math("".concat(props.theme.space.base * 2, "px - (").concat(offset, " * 2)"));
+      return math(`${props.theme.space.base * 2}px - (${offset} * 2)`);
     case s$1:
-      return math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
+      return math(`${props.theme.space.base * 3}px ${isActive ? '' : `- (${offset} * 2)`}`);
     case m$1:
     case l$1:
-      return math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
+      return math(`${props.theme.space.base * 4}px ${isActive ? '' : `- (${offset} * 2)`}`);
     default:
       return '0';
   }
@@ -275,253 +175,224 @@ function includes(array, element) {
   return array.includes(element);
 }
 
-var COMPONENT_ID$5 = 'avatars.status-indicator.base';
-var iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-var sizeStyles$3 = function sizeStyles(props) {
-  var offset = getStatusBorderOffset(props);
-  var size = getStatusSize(props, offset);
+const COMPONENT_ID$5 = 'avatars.status-indicator.base';
+const iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
+const sizeStyles$3 = props => {
+  const offset = getStatusBorderOffset(props);
+  const size = getStatusSize(props, offset);
   return css(["border:", " ", ";border-radius:", ";width:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
 };
-var colorStyles$2 = function colorStyles(props) {
-  var backgroundColor = getStatusColor(props.type, props.theme);
-  var borderColor = backgroundColor;
+const colorStyles$2 = props => {
+  let backgroundColor = getStatusColor(props.type, props.theme);
+  let borderColor = backgroundColor;
   if (props.type === 'offline') {
     borderColor = getStatusColor(props.type, props.theme);
     backgroundColor = props.theme.palette.white;
   }
   return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
 };
-var StyledStatusIndicatorBase = styled.div.attrs({
+const StyledStatusIndicatorBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
-})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledStatusIndicatorBase.defaultProps = {
   theme: DEFAULT_THEME,
   size: 'small'
 };
 
-var COMPONENT_ID$4 = 'avatars.status_indicator';
-var _SIZE = _slicedToArray(SIZE, 5),
-    xxs = _SIZE[0],
-    xs = _SIZE[1],
-    s = _SIZE[2],
-    m = _SIZE[3],
-    l = _SIZE[4];
-var sizeStyles$2 = function sizeStyles(props) {
-  var isVisible = !includes([xxs, xs], props.size);
-  var borderWidth = getStatusBorderOffset(props);
-  var padding = '0';
+const COMPONENT_ID$4 = 'avatars.status_indicator';
+const [xxs, xs, s, m, l] = SIZE;
+const sizeStyles$2 = props => {
+  const isVisible = !includes([xxs, xs], props.size);
+  const borderWidth = getStatusBorderOffset(props);
+  let padding = '0';
   if (props.size === s) {
-    padding = math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
+    padding = math(`${props.theme.space.base + 1}px - (${borderWidth} * 2)`);
   } else if (includes([m, l], props.size)) {
-    padding = math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
+    padding = math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
   }
   return css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", "}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;');
 };
-var colorStyles$1 = function colorStyles(props) {
-  var theme = props.theme,
-      type = props.type,
-      size = props.size,
-      foregroundColor = props.foregroundColor,
-      backgroundColor = props.backgroundColor,
-      borderColor = props.borderColor,
-      surfaceColor = props.surfaceColor;
-  var boxShadow = theme.shadows.sm(surfaceColor || (type ? theme.colors.background : theme.palette.white));
+const colorStyles$1 = props => {
+  const {
+    theme,
+    type,
+    size,
+    borderColor,
+    surfaceColor
+  } = props;
+  let boxShadow = theme.shadows.sm(surfaceColor || (type ? theme.colors.background : theme.palette.white));
   if (size === xxs) {
     boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
   }
-  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
+  return css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
 };
-var StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
+const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
-})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledStatusIndicator.defaultProps = {
   size: 'medium',
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'avatars.avatar';
-var badgeStyles = function badgeStyles(props) {
-  var _SIZE = _slicedToArray(SIZE, 5),
-      xxs = _SIZE[0],
-      xs = _SIZE[1],
-      s = _SIZE[2],
-      m = _SIZE[3],
-      l = _SIZE[4];
-  var position = "".concat(props.theme.space.base * -1, "px");
+const COMPONENT_ID$3 = 'avatars.avatar';
+const badgeStyles = props => {
+  const [xxs, xs, s, m, l] = SIZE;
+  let position = `${props.theme.space.base * -1}px`;
   switch (props.size) {
     case s:
     case m:
-      position = math("".concat(position, "  + 2"));
+      position = math(`${position}  + 2`);
       break;
     case xxs:
     case xs:
     case l:
-      position = math("".concat(position, "  + 3"));
+      position = math(`${position}  + 3`);
       break;
   }
-  var animation = keyframes(["0%{transform:scale(.1);}"]);
+  const animation = keyframes(["0%{transform:scale(.1);}"]);
   return css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.status === 'active' && css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
 };
-var colorStyles = function colorStyles(props) {
-  var statusColor = getStatusColor(props.status, props.theme);
-  var backgroundColor = props.backgroundColor || 'transparent';
-  var foregroundColor = props.foregroundColor || props.theme.palette.white;
-  var surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
+const colorStyles = props => {
+  const statusColor = getStatusColor(props.status, props.theme);
+  const backgroundColor = props.backgroundColor || 'transparent';
+  const foregroundColor = props.foregroundColor || props.theme.palette.white;
+  const surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
   return css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
-var sizeStyles$1 = function sizeStyles(props) {
-  var boxShadow;
-  var borderRadius;
-  var size;
-  var fontSize;
-  var svgSize;
+const sizeStyles$1 = props => {
+  let boxShadow;
+  let borderRadius;
+  let size;
+  let fontSize;
+  let svgSize;
   if (props.size === 'extraextrasmall') {
-    boxShadow = "0 0 0 ".concat(math("".concat(props.theme.shadowWidths.sm, " - 1")));
-    borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
-    size = "".concat(props.theme.space.base * 4, "px");
+    boxShadow = `0 0 0 ${math(`${props.theme.shadowWidths.sm} - 1`)}`;
+    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    size = `${props.theme.space.base * 4}px`;
     fontSize = 0;
-    svgSize = "".concat(props.theme.space.base * 3, "px");
+    svgSize = `${props.theme.space.base * 3}px`;
   } else if (props.size === 'extrasmall') {
-    boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
-    borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
-    size = "".concat(props.theme.space.base * 6, "px");
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
+    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    size = `${props.theme.space.base * 6}px`;
     fontSize = props.theme.fontSizes.sm;
-    svgSize = "".concat(props.theme.space.base * 3, "px");
+    svgSize = `${props.theme.space.base * 3}px`;
   } else if (props.size === 'small') {
-    boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
-    borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " - 1")) : '50%';
-    size = "".concat(props.theme.space.base * 8, "px");
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
+    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    size = `${props.theme.space.base * 8}px`;
     fontSize = props.theme.fontSizes.md;
-    svgSize = "".concat(props.theme.space.base * 3, "px");
+    svgSize = `${props.theme.space.base * 3}px`;
   } else if (props.size === 'large') {
-    boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
-    borderRadius = props.isSystem ? math("".concat(props.theme.borderRadii.md, " + 1")) : '50%';
-    size = "".concat(props.theme.space.base * 12, "px");
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
+    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} + 1`) : '50%';
+    size = `${props.theme.space.base * 12}px`;
     fontSize = props.theme.fontSizes.xl;
-    svgSize = "".concat(props.theme.space.base * 6, "px");
+    svgSize = `${props.theme.space.base * 6}px`;
   } else {
-    boxShadow = "inset 0 0 0 ".concat(props.theme.shadowWidths.sm);
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
     borderRadius = props.isSystem ? props.theme.borderRadii.md : '50%';
-    size = "".concat(props.theme.space.base * 10, "px");
+    size = `${props.theme.space.base * 10}px`;
     fontSize = props.theme.fontSizes.lg;
-    svgSize = "".concat(props.theme.space.base * 4, "px");
+    svgSize = `${props.theme.space.base * 4}px`;
   }
   return 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);
 };
-var StyledAvatar = styled.figure.attrs({
+const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
-})(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, function (props) {
-  return sizeStyles$1(props);
-}, function (props) {
-  return colorStyles(props);
-}, TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, props => sizeStyles$1(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledAvatar.defaultProps = {
   size: 'medium',
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'avatars.status-indicator.status';
-var StyledStandaloneStatus = styled.figure.attrs({
+const COMPONENT_ID$2 = 'avatars.status-indicator.status';
+const StyledStandaloneStatus = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
-})(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledStandaloneStatus.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'avatars.status-indicator.caption';
+const COMPONENT_ID$1 = 'avatars.status-indicator.caption';
 function sizeStyles(props) {
-  var marginRule = "margin-".concat(props.theme.rtl ? 'right' : 'left', ": ").concat(props.theme.space.base * 2, "px;");
+  const marginRule = `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 2}px;`;
   return css(["", " line-height:", ";font-size:", ";"], marginRule, getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.theme.fontSizes.md);
 }
-var StyledStandaloneStatusCaption = styled.figcaption.attrs({
+const StyledStandaloneStatusCaption = styled.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
-})(["", " ", ";"], sizeStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledStandaloneStatusCaption.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'avatars.status-indicator.indicator';
-var StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
+const COMPONENT_ID = 'avatars.status-indicator.indicator';
+const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
-})(["position:relative;margin-top:", ";", ";"], function (props) {
-  return "calc((".concat(props.theme.lineHeights.md, " - ").concat(getStatusSize(props, '0'), ") / 2)");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["position:relative;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledStandaloneStatusIndicator.defaultProps = {
   type: 'offline',
   theme: DEFAULT_THEME
 };
 
-var TextComponent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledText, _extends$4({
-    ref: ref
-  }, props));
-});
+const TextComponent = forwardRef((props, ref) => React__default.createElement(StyledText, _extends$4({
+  ref: ref
+}, props)));
 TextComponent.displayName = 'Avatar.Text';
-var Text = TextComponent;
-
-var _excluded$1 = ["isSystem", "size", "status", "children", "badge", "surfaceColor", "backgroundColor", "foregroundColor"];
-var AvatarComponent = forwardRef(function (_ref, ref) {
-  var isSystem = _ref.isSystem,
-      size = _ref.size,
-      status = _ref.status,
-      children = _ref.children,
-      badge = _ref.badge,
-      surfaceColor = _ref.surfaceColor,
-      backgroundColor = _ref.backgroundColor,
-      foregroundColor = _ref.foregroundColor,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var computedStatus = badge === undefined ? status : 'active';
-  var ClockIcon = SvgClockStroke$1;
-  var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
+const Text = TextComponent;
+
+const AvatarComponent = forwardRef((_ref, ref) => {
+  let {
+    isSystem,
+    size,
+    status,
+    children,
+    badge,
+    surfaceColor,
+    backgroundColor,
+    foregroundColor,
+    ...props
+  } = _ref;
+  const computedStatus = badge === undefined ? status : 'active';
+  let ClockIcon = SvgClockStroke$1;
+  let ArrowLeftIcon = SvgArrowLeftSmStroke$1;
   if (['large', 'medium'].includes(size)) {
     ClockIcon = SvgClockStroke;
     ArrowLeftIcon = SvgArrowLeftSmStroke;
   }
-  var defaultStatusLabel = useMemo(function () {
-    var statusMessage = computedStatus;
+  const defaultStatusLabel = useMemo(() => {
+    let statusMessage = computedStatus;
     if (computedStatus === 'active') {
-      var count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
-      statusMessage = "active. ".concat(count > 0 ? "".concat(count, " notification").concat(count > 1 ? 's' : '') : 'no notifications');
+      const count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
+      statusMessage = `active. ${count > 0 ? `${count} notification${count > 1 ? 's' : ''}` : 'no notifications'}`;
     }
     return ['status'].concat(statusMessage || []).join(': ');
   }, [computedStatus, badge]);
-  var statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
+  const statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
   return React__default.createElement(StyledAvatar, _extends$4({
     ref: ref,
     isSystem: isSystem,
@@ -535,8 +406,6 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
   }, props), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
     size: size,
     type: computedStatus,
-    backgroundColor: backgroundColor,
-    foregroundColor: foregroundColor,
     surfaceColor: surfaceColor,
     "aria-label": statusLabel,
     role: "img"
@@ -562,26 +431,25 @@ AvatarComponent.propTypes = {
 AvatarComponent.defaultProps = {
   size: 'medium'
 };
-var Avatar = AvatarComponent;
+const Avatar = AvatarComponent;
 Avatar.Text = Text;
 
-var _excluded = ["children", "type", "isCompact", "aria-label"];
-var StatusIndicatorComponent = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      type = _ref.type,
-      isCompact = _ref.isCompact,
-      label = _ref['aria-label'],
-      props = _objectWithoutProperties(_ref, _excluded);
-  var ClockIcon = SvgClockStroke;
-  var ArrowLeftIcon = SvgArrowLeftSmStroke;
+const StatusIndicator = forwardRef((_ref, ref) => {
+  let {
+    children,
+    type,
+    isCompact,
+    'aria-label': label,
+    ...props
+  } = _ref;
+  let ClockIcon = SvgClockStroke;
+  let ArrowLeftIcon = SvgArrowLeftSmStroke;
   if (isCompact) {
     ClockIcon = SvgClockStroke$1;
     ArrowLeftIcon = SvgArrowLeftSmStroke$1;
   }
-  var defaultLabel = useMemo(function () {
-    return ['status'].concat(type || []).join(': ');
-  }, [type]);
-  var ariaLabel = useText(StatusIndicatorComponent, {
+  const defaultLabel = useMemo(() => ['status'].concat(type || []).join(': '), [type]);
+  const ariaLabel = useText(StatusIndicator, {
     'aria-label': label
   }, 'aria-label', defaultLabel);
   return React__default.createElement(StyledStandaloneStatus, _extends$4({
@@ -600,14 +468,13 @@ var StatusIndicatorComponent = forwardRef(function (_ref, ref) {
     "aria-hidden": "true"
   }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children));
 });
-StatusIndicatorComponent.displayName = 'StatusIndicator';
-StatusIndicatorComponent.propTypes = {
+StatusIndicator.displayName = 'StatusIndicator';
+StatusIndicator.propTypes = {
   type: PropTypes.oneOf(STATUS),
   isCompact: PropTypes.bool
 };
-StatusIndicatorComponent.defaultProps = {
+StatusIndicator.defaultProps = {
   type: 'offline'
 };
-var StatusIndicator = StatusIndicatorComponent;
 
 export { Avatar, StatusIndicator };