@zendeskgarden/react-avatars 8.56.0 → 8.57.0

package/README.md

@@ -16,7 +16,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Avatar } from '@zendeskgarden/react-avatars';
+import { Avatar, StatusIndicator } from '@zendeskgarden/react-avatars';
 
 /**
  * Place a `ThemeProvider` at the root of your React application
@@ -25,5 +25,9 @@ import { Avatar } from '@zendeskgarden/react-avatars';
   <Avatar>
     <img src="images/user.png" alt="Example Avatar" />
   </Avatar>
+
+  <StatusIndicator type="available" aria-label="status: online">
+    Available
+  </StatusIndicator>
 </ThemeProvider>;
 ```

package/dist/index.cjs.js

@@ -97,22 +97,10 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
 function _iterableToArrayLimit(arr, i) {
   var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
@@ -160,10 +148,6 @@ function _arrayLikeToArray(arr, len) {
   return arr2;
 }
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 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.");
 }
@@ -259,125 +243,143 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
 var SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
 var STATUS = ['available', 'away', 'transfers', 'offline'];
 
-var COMPONENT_ID$2 = 'avatars.text';
+var COMPONENT_ID$6 = 'avatars.text';
 var StyledText = styled__default["default"].span.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.56.0'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.57.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
 })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
 });
 StyledText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _ref$1 = ['active'].concat(_toConsumableArray(STATUS)),
-    active$1 = _ref$1[0],
-    available$1 = _ref$1[1],
-    away$1 = _ref$1[2],
-    transfers$1 = _ref$1[3],
-    offline$1 = _ref$1[4];
-function getStatusColor(status) {
-  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : reactTheming.DEFAULT_THEME;
-  switch (status) {
-    case active$1:
+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;
+function getStatusColor(type, theme) {
+  switch (type) {
+    case 'active':
       return reactTheming.getColor('crimson', 400, theme);
-    case available$1:
+    case 'available':
       return reactTheming.getColor('mint', 400, theme);
-    case away$1:
+    case 'away':
       return reactTheming.getColor('orange', 400, theme);
-    case transfers$1:
+    case 'transfers':
       return reactTheming.getColor('azure', 400, theme);
-    case offline$1:
+    case 'offline':
       return reactTheming.getColor('grey', 500, theme);
     default:
       return 'transparent';
   }
 }
+function getStatusBorderOffset(props) {
+  return props.size === xxs$1 ? polished.math("".concat(props.theme.shadowWidths.sm, " - 1")) : props.theme.shadowWidths.sm;
+}
+function getStatusSize(props, offset) {
+  var isActive = props.type === 'active';
+  switch (props.size) {
+    case xxs$1:
+      return polished.math("".concat(props.theme.space.base, "px - ").concat(offset));
+    case xs$1:
+      return polished.math("".concat(props.theme.space.base * 2, "px - (").concat(offset, " * 2)"));
+    case s$1:
+      return polished.math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
+    case m$1:
+    case l$1:
+      return polished.math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
+    default:
+      return '0';
+  }
+}
+function includes(array, element) {
+  return array.includes(element);
+}
+
+var COMPONENT_ID$5 = 'avatars.status-indicator.base';
+var iconFadeIn = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
+var sizeStyles$3 = function sizeStyles(props) {
+  var offset = getStatusBorderOffset(props);
+  var size = getStatusSize(props, offset);
+  return styled.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;
+  if (props.type === 'offline') {
+    borderColor = getStatusColor(props.type, props.theme);
+    backgroundColor = props.theme.palette.white;
+  }
+  return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
+};
+var StyledStatusIndicatorBase = styled__default["default"].div.attrs({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.57.0'
+}).withConfig({
+  displayName: "StyledStatusIndicatorBase",
+  componentId: "sc-1rininy-0"
+})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
+});
+StyledStatusIndicatorBase.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME,
+  size: 'small'
+};
 
-var COMPONENT_ID$1 = 'avatars.status_indicator';
+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 _ref = ['active'].concat(_toConsumableArray(STATUS)),
-    active = _ref[0],
-    available = _ref[1],
-    away = _ref[2],
-    transfers = _ref[3],
-    offline = _ref[4];
-var sizeStyles$1 = function sizeStyles(props) {
-  var isActive = props.status === 'active';
-  var isVisible = true;
-  var height = '0';
+var sizeStyles$2 = function sizeStyles(props) {
+  var isVisible = !includes([xxs, xs], props.size);
+  var borderWidth = getStatusBorderOffset(props);
   var padding = '0';
-  var borderWidth = props.theme.shadowWidths.sm;
-  switch (props.size) {
-    case xxs:
-      isVisible = false;
-      borderWidth = polished.math("".concat(borderWidth, " - 1"));
-      height = polished.math("".concat(props.theme.space.base, "px - ").concat(borderWidth));
-      break;
-    case xs:
-      isVisible = false;
-      height = polished.math("".concat(props.theme.space.base * 2, "px - (").concat(borderWidth, " * 2)"));
-      break;
-    case s:
-      height = polished.math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
-      padding = polished.math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
-      break;
-    case m:
-    case l:
-      height = polished.math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
-      padding = polished.math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
-      break;
+  if (props.size === s) {
+    padding = polished.math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
+  } else if (includes([m, l], props.size)) {
+    padding = polished.math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
   }
-  return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";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{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
+  return styled.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 foregroundColor = props.foregroundColor || props.theme.palette.white;
-  var surfaceColor = props.surfaceColor || (props.status ? props.theme.colors.background : props.theme.palette.white);
-  var backgroundColor = props.backgroundColor || 'transparent';
-  var borderColor = props.borderColor || backgroundColor;
-  var boxShadow = props.theme.shadows.sm(surfaceColor);
-  if (props.size === xxs) {
-    boxShadow = boxShadow.replace(props.theme.shadowWidths.sm, '1px');
-  }
-  switch (props.status) {
-    case available:
-    case active:
-    case away:
-    case transfers:
-      backgroundColor = getStatusColor(props.status, props.theme);
-      borderColor = backgroundColor;
-      break;
-    case offline:
-      borderColor = getStatusColor(props.status, props.theme);
-      backgroundColor = props.theme.palette.white;
-      break;
+  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));
+  if (size === xxs) {
+    boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
   }
   return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
 };
-var StyledStatusIndicator = styled__default["default"].div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.56.0'
+var StyledStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.57.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
-})(["", " ", " transition:inherit;", ";"], sizeStyles$1, colorStyles$1, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
+})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
 });
 StyledStatusIndicator.defaultProps = {
   size: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'avatars.avatar';
-var TRANSITION_DURATION = 0.25;
+var COMPONENT_ID$3 = 'avatars.avatar';
 var badgeStyles = function badgeStyles(props) {
   var _SIZE = _slicedToArray(SIZE, 5),
       xxs = _SIZE[0],
@@ -407,7 +409,7 @@ var colorStyles = function colorStyles(props) {
   var surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
   return styled.css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
-var sizeStyles = function sizeStyles(props) {
+var sizeStyles$1 = function sizeStyles(props) {
   var boxShadow;
   var borderRadius;
   var size;
@@ -447,23 +449,72 @@ var sizeStyles = function sizeStyles(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);
 };
 var StyledAvatar = styled__default["default"].figure.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.56.0'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.57.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(props);
+  return sizeStyles$1(props);
 }, function (props) {
   return colorStyles(props);
 }, TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
 });
 StyledAvatar.defaultProps = {
   size: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 
+var COMPONENT_ID$2 = 'avatars.status-indicator.status';
+var StyledStandaloneStatus = styled__default["default"].figure.attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.57.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 reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
+});
+StyledStandaloneStatus.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+var 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;");
+  return styled.css(["", " line-height:", ";font-size:", ";"], marginRule, reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.theme.fontSizes.md);
+}
+var StyledStandaloneStatusCaption = styled__default["default"].figcaption.attrs({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.57.0'
+}).withConfig({
+  displayName: "StyledStandaloneStatusCaption",
+  componentId: "sc-aalyk1-0"
+})(["", " ", ";"], sizeStyles, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
+});
+StyledStandaloneStatusCaption.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+var COMPONENT_ID = 'avatars.status-indicator.indicator';
+var StyledStandaloneStatusIndicator = styled__default["default"](StyledStatusIndicatorBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.57.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 reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
+});
+StyledStandaloneStatusIndicator.defaultProps = {
+  type: 'offline',
+  theme: reactTheming.DEFAULT_THEME
+};
+
 var TextComponent = React.forwardRef(function (props, ref) {
   return React__default["default"].createElement(StyledText, _extends$4({
     ref: ref
@@ -472,7 +523,7 @@ var TextComponent = React.forwardRef(function (props, ref) {
 TextComponent.displayName = 'Avatar.Text';
 var Text = TextComponent;
 
-var _excluded = ["isSystem", "size", "status", "children", "badge", "surfaceColor", "backgroundColor", "foregroundColor"];
+var _excluded$1 = ["isSystem", "size", "status", "children", "badge", "surfaceColor", "backgroundColor", "foregroundColor"];
 var AvatarComponent = React.forwardRef(function (_ref, ref) {
   var isSystem = _ref.isSystem,
       size = _ref.size,
@@ -482,7 +533,7 @@ var AvatarComponent = React.forwardRef(function (_ref, ref) {
       surfaceColor = _ref.surfaceColor,
       backgroundColor = _ref.backgroundColor,
       foregroundColor = _ref.foregroundColor,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$1);
   var computedStatus = badge === undefined ? status : 'active';
   var ClockIcon = SvgClockStroke$1;
   var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
@@ -511,7 +562,7 @@ var AvatarComponent = React.forwardRef(function (_ref, ref) {
     "aria-live": "polite"
   }, props), React.Children.only(children), computedStatus && React__default["default"].createElement(StyledStatusIndicator, {
     size: size,
-    status: computedStatus,
+    type: computedStatus,
     backgroundColor: backgroundColor,
     foregroundColor: foregroundColor,
     surfaceColor: surfaceColor,
@@ -542,4 +593,50 @@ AvatarComponent.defaultProps = {
 var Avatar = AvatarComponent;
 Avatar.Text = Text;
 
+var _excluded = ["children", "type", "isCompact", "aria-label"];
+var StatusIndicatorComponent = React.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;
+  if (isCompact) {
+    ClockIcon = SvgClockStroke$1;
+    ArrowLeftIcon = SvgArrowLeftSmStroke$1;
+  }
+  var defaultLabel = React.useMemo(function () {
+    return ['status'].concat(type || []).join(': ');
+  }, [type]);
+  var ariaLabel = reactTheming.useText(StatusIndicatorComponent, {
+    '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));
+});
+StatusIndicatorComponent.displayName = 'StatusIndicator';
+StatusIndicatorComponent.propTypes = {
+  type: PropTypes__default["default"].oneOf(STATUS),
+  isCompact: PropTypes__default["default"].bool
+};
+StatusIndicatorComponent.defaultProps = {
+  type: 'offline'
+};
+var StatusIndicator = StatusIndicatorComponent;
+
 exports.Avatar = Avatar;
+exports.StatusIndicator = StatusIndicator;

package/dist/index.esm.js

@@ -8,8 +8,8 @@
 import * as React from 'react';
 import React__default, { forwardRef, useMemo, Children } from 'react';
 import PropTypes from 'prop-types';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText } from '@zendeskgarden/react-theming';
-import styled, { css, keyframes } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight, useText } from '@zendeskgarden/react-theming';
+import styled, { keyframes, css } from 'styled-components';
 import { math } from 'polished';
 
 function _extends$4() {
@@ -69,22 +69,10 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
 function _iterableToArrayLimit(arr, i) {
   var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
@@ -132,10 +120,6 @@ function _arrayLikeToArray(arr, len) {
   return arr2;
 }
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 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.");
 }
@@ -231,125 +215,143 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
 var SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
 var STATUS = ['available', 'away', 'transfers', 'offline'];
 
-var COMPONENT_ID$2 = 'avatars.text';
+var COMPONENT_ID$6 = 'avatars.text';
 var StyledText = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.56.0'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.57.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
 })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
+  return retrieveComponentStyles(COMPONENT_ID$6, props);
 });
 StyledText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _ref$1 = ['active'].concat(_toConsumableArray(STATUS)),
-    active$1 = _ref$1[0],
-    available$1 = _ref$1[1],
-    away$1 = _ref$1[2],
-    transfers$1 = _ref$1[3],
-    offline$1 = _ref$1[4];
-function getStatusColor(status) {
-  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_THEME;
-  switch (status) {
-    case active$1:
+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;
+function getStatusColor(type, theme) {
+  switch (type) {
+    case 'active':
       return getColor('crimson', 400, theme);
-    case available$1:
+    case 'available':
       return getColor('mint', 400, theme);
-    case away$1:
+    case 'away':
       return getColor('orange', 400, theme);
-    case transfers$1:
+    case 'transfers':
       return getColor('azure', 400, theme);
-    case offline$1:
+    case 'offline':
       return getColor('grey', 500, theme);
     default:
       return 'transparent';
   }
 }
+function getStatusBorderOffset(props) {
+  return props.size === xxs$1 ? math("".concat(props.theme.shadowWidths.sm, " - 1")) : props.theme.shadowWidths.sm;
+}
+function getStatusSize(props, offset) {
+  var isActive = props.type === 'active';
+  switch (props.size) {
+    case xxs$1:
+      return math("".concat(props.theme.space.base, "px - ").concat(offset));
+    case xs$1:
+      return math("".concat(props.theme.space.base * 2, "px - (").concat(offset, " * 2)"));
+    case s$1:
+      return math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
+    case m$1:
+    case l$1:
+      return math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(offset, " * 2)")));
+    default:
+      return '0';
+  }
+}
+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);
+  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;
+  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({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.57.0'
+}).withConfig({
+  displayName: "StyledStatusIndicatorBase",
+  componentId: "sc-1rininy-0"
+})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$5, props);
+});
+StyledStatusIndicatorBase.defaultProps = {
+  theme: DEFAULT_THEME,
+  size: 'small'
+};
 
-var COMPONENT_ID$1 = 'avatars.status_indicator';
+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 _ref = ['active'].concat(_toConsumableArray(STATUS)),
-    active = _ref[0],
-    available = _ref[1],
-    away = _ref[2],
-    transfers = _ref[3],
-    offline = _ref[4];
-var sizeStyles$1 = function sizeStyles(props) {
-  var isActive = props.status === 'active';
-  var isVisible = true;
-  var height = '0';
+var sizeStyles$2 = function sizeStyles(props) {
+  var isVisible = !includes([xxs, xs], props.size);
+  var borderWidth = getStatusBorderOffset(props);
   var padding = '0';
-  var borderWidth = props.theme.shadowWidths.sm;
-  switch (props.size) {
-    case xxs:
-      isVisible = false;
-      borderWidth = math("".concat(borderWidth, " - 1"));
-      height = math("".concat(props.theme.space.base, "px - ").concat(borderWidth));
-      break;
-    case xs:
-      isVisible = false;
-      height = math("".concat(props.theme.space.base * 2, "px - (").concat(borderWidth, " * 2)"));
-      break;
-    case s:
-      height = math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
-      padding = math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
-      break;
-    case m:
-    case l:
-      height = math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
-      padding = math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
-      break;
+  if (props.size === s) {
+    padding = math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
+  } else if (includes([m, l], props.size)) {
+    padding = math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
   }
-  return css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";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{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
+  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 foregroundColor = props.foregroundColor || props.theme.palette.white;
-  var surfaceColor = props.surfaceColor || (props.status ? props.theme.colors.background : props.theme.palette.white);
-  var backgroundColor = props.backgroundColor || 'transparent';
-  var borderColor = props.borderColor || backgroundColor;
-  var boxShadow = props.theme.shadows.sm(surfaceColor);
-  if (props.size === xxs) {
-    boxShadow = boxShadow.replace(props.theme.shadowWidths.sm, '1px');
-  }
-  switch (props.status) {
-    case available:
-    case active:
-    case away:
-    case transfers:
-      backgroundColor = getStatusColor(props.status, props.theme);
-      borderColor = backgroundColor;
-      break;
-    case offline:
-      borderColor = getStatusColor(props.status, props.theme);
-      backgroundColor = props.theme.palette.white;
-      break;
+  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));
+  if (size === xxs) {
+    boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
   }
   return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
 };
-var StyledStatusIndicator = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.56.0'
+var StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.57.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
-})(["", " ", " transition:inherit;", ";"], sizeStyles$1, colorStyles$1, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
+})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$4, props);
 });
 StyledStatusIndicator.defaultProps = {
   size: 'medium',
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'avatars.avatar';
-var TRANSITION_DURATION = 0.25;
+var COMPONENT_ID$3 = 'avatars.avatar';
 var badgeStyles = function badgeStyles(props) {
   var _SIZE = _slicedToArray(SIZE, 5),
       xxs = _SIZE[0],
@@ -379,7 +381,7 @@ var colorStyles = function colorStyles(props) {
   var 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 = function sizeStyles(props) {
+var sizeStyles$1 = function sizeStyles(props) {
   var boxShadow;
   var borderRadius;
   var size;
@@ -419,23 +421,72 @@ var sizeStyles = function sizeStyles(props) {
   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({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.56.0'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.57.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(props);
+  return sizeStyles$1(props);
 }, function (props) {
   return colorStyles(props);
 }, TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
+  return 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({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.57.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);
+});
+StyledStandaloneStatus.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var 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;");
+  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({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.57.0'
+}).withConfig({
+  displayName: "StyledStandaloneStatusCaption",
+  componentId: "sc-aalyk1-0"
+})(["", " ", ";"], sizeStyles, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$1, props);
+});
+StyledStandaloneStatusCaption.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID = 'avatars.status-indicator.indicator';
+var StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.57.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);
+});
+StyledStandaloneStatusIndicator.defaultProps = {
+  type: 'offline',
+  theme: DEFAULT_THEME
+};
+
 var TextComponent = forwardRef(function (props, ref) {
   return React__default.createElement(StyledText, _extends$4({
     ref: ref
@@ -444,7 +495,7 @@ var TextComponent = forwardRef(function (props, ref) {
 TextComponent.displayName = 'Avatar.Text';
 var Text = TextComponent;
 
-var _excluded = ["isSystem", "size", "status", "children", "badge", "surfaceColor", "backgroundColor", "foregroundColor"];
+var _excluded$1 = ["isSystem", "size", "status", "children", "badge", "surfaceColor", "backgroundColor", "foregroundColor"];
 var AvatarComponent = forwardRef(function (_ref, ref) {
   var isSystem = _ref.isSystem,
       size = _ref.size,
@@ -454,7 +505,7 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
       surfaceColor = _ref.surfaceColor,
       backgroundColor = _ref.backgroundColor,
       foregroundColor = _ref.foregroundColor,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$1);
   var computedStatus = badge === undefined ? status : 'active';
   var ClockIcon = SvgClockStroke$1;
   var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
@@ -483,7 +534,7 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
     "aria-live": "polite"
   }, props), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
     size: size,
-    status: computedStatus,
+    type: computedStatus,
     backgroundColor: backgroundColor,
     foregroundColor: foregroundColor,
     surfaceColor: surfaceColor,
@@ -514,4 +565,49 @@ AvatarComponent.defaultProps = {
 var Avatar = AvatarComponent;
 Avatar.Text = Text;
 
-export { Avatar };
+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;
+  if (isCompact) {
+    ClockIcon = SvgClockStroke$1;
+    ArrowLeftIcon = SvgArrowLeftSmStroke$1;
+  }
+  var defaultLabel = useMemo(function () {
+    return ['status'].concat(type || []).join(': ');
+  }, [type]);
+  var ariaLabel = useText(StatusIndicatorComponent, {
+    '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));
+});
+StatusIndicatorComponent.displayName = 'StatusIndicator';
+StatusIndicatorComponent.propTypes = {
+  type: PropTypes.oneOf(STATUS),
+  isCompact: PropTypes.bool
+};
+StatusIndicatorComponent.defaultProps = {
+  type: 'offline'
+};
+var StatusIndicator = StatusIndicatorComponent;
+
+export { Avatar, StatusIndicator };

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+import { IStatusIndicatorProps } from '../types';
+export declare const StatusIndicator: React.ForwardRefExoticComponent<IStatusIndicatorProps & React.RefAttributes<HTMLElement>>;

package/dist/typings/index.d.ts

@@ -5,4 +5,5 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export { Avatar } from './elements/Avatar';
-export type { IAvatarProps } from './types';
+export { StatusIndicator } from './elements/StatusIndicator';
+export type { IAvatarProps, IStatusIndicatorProps } from './types';

package/dist/typings/styled/StyledStandaloneStatus.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { ThemeProps, DefaultTheme } from 'styled-components';
+export declare const StyledStandaloneStatus: import("styled-components").StyledComponent<"figure", DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & ThemeProps<DefaultTheme>, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/StyledStandaloneStatusCaption.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { ThemeProps, DefaultTheme } from 'styled-components';
+export declare const StyledStandaloneStatusCaption: import("styled-components").StyledComponent<"figcaption", DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & ThemeProps<DefaultTheme>, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/StyledStandaloneStatusIndicator.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { IStyledStatusIndicatorProps } from './utility';
+export declare const StyledStandaloneStatusIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & IStyledStatusIndicatorProps & {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/StyledStatusIndicator.d.ts

@@ -6,11 +6,15 @@
  */
 import { DefaultTheme } from 'styled-components';
 import { IAvatarProps } from '../types';
+import { IStyledStatusIndicatorProps } from './utility';
 export interface IStatusIndicatorProps extends Omit<IAvatarProps, 'badge' | 'isSystem' | 'status'> {
-    readonly status?: IAvatarProps['status'] | 'active';
+    readonly type?: IStyledStatusIndicatorProps['type'];
     borderColor?: string;
 }
 export declare const StyledStatusIndicator: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
+} & IStyledStatusIndicatorProps & {
+    'data-garden-id': string;
+    'data-garden-version': string;
 } & IStatusIndicatorProps, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/StyledStatusIndicatorBase.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { IStyledStatusIndicatorProps } from './utility';
+export declare const StyledStatusIndicatorBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & IStyledStatusIndicatorProps, "data-garden-id" | "data-garden-version">;

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

@@ -5,5 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export * from './StyledAvatar';
+export * from './StyledStandaloneStatus';
+export * from './StyledStandaloneStatusCaption';
+export * from './StyledStandaloneStatusIndicator';
 export * from './StyledStatusIndicator';
 export * from './StyledText';

package/dist/typings/styled/utility.d.ts

@@ -4,5 +4,14 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { STATUS } from '../types';
-export declare function getStatusColor(status: typeof STATUS[number] | 'active' | undefined, theme?: import("@zendeskgarden/react-theming").IGardenTheme): string;
+import { ThemeProps, DefaultTheme } from 'styled-components';
+import { IAvatarProps } from '../types';
+export declare const TRANSITION_DURATION = 0.25;
+export interface IStyledStatusIndicatorProps extends ThemeProps<DefaultTheme> {
+    readonly size?: IAvatarProps['size'];
+    readonly type?: IAvatarProps['status'] | 'active';
+}
+export declare function getStatusColor(type?: IStyledStatusIndicatorProps['type'], theme?: IStyledStatusIndicatorProps['theme']): string;
+export declare function getStatusBorderOffset(props: IStyledStatusIndicatorProps): string;
+export declare function getStatusSize(props: IStyledStatusIndicatorProps, offset: string): string;
+export declare function includes<T extends U, U>(array: readonly T[], element: U): element is T;

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

@@ -25,3 +25,9 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
     /** Sets the badge text and applies active styling */
     badge?: string | number;
 }
+export interface IStatusIndicatorProps extends HTMLAttributes<HTMLElement> {
+    /** Applies status type for styling and default aria-label */
+    type?: typeof STATUS[number];
+    /** Applies compact styling */
+    isCompact?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "8.56.0",
+  "version": "8.57.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.56.0",
+    "@zendeskgarden/react-theming": "^8.57.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "c0e1cb7669a366ff510cc9613e2b426d48019732"
+  "gitHead": "165b6a453118f93e9e760642b632ce3d31e3a231"
 }