@zendeskgarden/react-avatars 9.12.2 → 9.12.4

package/dist/esm/elements/Avatar.js

@@ -12,7 +12,7 @@ import SvgClockStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/cloc
 import SvgClockStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js';
 import SvgArrowLeftSmStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg.js';
 import SvgArrowLeftSmStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/16/arrow-left-sm-stroke.svg.js';
-import { SIZE, STATUS } from '../types/index.js';
+import { STATUS, SIZE } from '../types/index.js';
 import { StyledAvatar } from '../styled/StyledAvatar.js';
 import '../styled/StyledStandaloneStatus.js';
 import '../styled/StyledStandaloneStatusCaption.js';
@@ -21,20 +21,19 @@ import { StyledStatusIndicator } from '../styled/StyledStatusIndicator.js';
 import '../styled/StyledText.js';
 import { Text } from './components/Text.js';
 
-const AvatarComponent = forwardRef((_ref, ref) => {
-  let {
-    'aria-hidden': ariaHidden,
-    backgroundColor,
-    badge,
-    children,
-    foregroundColor,
-    isSystem,
-    size = 'medium',
-    status,
-    statusLabel,
-    surfaceColor,
-    ...other
-  } = _ref;
+const AvatarComponent = forwardRef(({
+  'aria-hidden': ariaHidden,
+  backgroundColor,
+  badge,
+  children,
+  foregroundColor,
+  isSystem,
+  size = 'medium',
+  status,
+  statusLabel,
+  surfaceColor,
+  ...other
+}, ref) => {
   const computedStatus = badge === undefined ? status : 'active';
   let ClockIcon = SvgClockStroke;
   let ArrowLeftIcon = SvgArrowLeftSmStroke;

package/dist/esm/elements/StatusIndicator.js

@@ -19,14 +19,13 @@ import { StyledStandaloneStatusIndicator } from '../styled/StyledStandaloneStatu
 import '../styled/StyledStatusIndicator.js';
 import '../styled/StyledText.js';
 
-const StatusIndicator = forwardRef((_ref, ref) => {
-  let {
-    children,
-    type = 'offline',
-    isCompact,
-    'aria-label': label,
-    ...props
-  } = _ref;
+const StatusIndicator = forwardRef(({
+  children,
+  type = 'offline',
+  isCompact,
+  'aria-label': label,
+  ...props
+}, ref) => {
   let ClockIcon = SvgClockStroke;
   let ArrowLeftIcon = SvgArrowLeftSmStroke;
   if (isCompact) {

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg.js

@@ -6,20 +6,20 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, 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"
   })));
 };
 
-export { SvgArrowLeftSmStroke as default };
+export { SvgArrowLeftSmStroke$1 as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/clock-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _g;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgClockStroke = function SvgClockStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+var _g$1;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+var SvgClockStroke$1 = function SvgClockStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("circle", {
@@ -30,4 +30,4 @@ var SvgClockStroke = function SvgClockStroke(props) {
   }))));
 };
 
-export { SvgClockStroke as default };
+export { SvgClockStroke$1 as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js

@@ -7,9 +7,9 @@
 import * as React from 'react';
 
 var _g;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgClockStroke = function SvgClockStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,

package/dist/esm/styled/StyledAvatar.js

@@ -4,7 +4,7 @@
 * 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 styled, { keyframes, css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { SIZE } from '../types/index.js';
@@ -12,7 +12,7 @@ import { StyledText } from './StyledText.js';
 import { StyledStatusIndicator } from './StyledStatusIndicator.js';
 import { TRANSITION_DURATION, getStatusColor } from './utility.js';
 
-const COMPONENT_ID = 'avatars.avatar';
+const COMPONENT_ID$3 = 'avatars.avatar';
 const badgeStyles = props => {
   const [xxs, xs, s, m, l] = SIZE;
   let position = `${props.theme.space.base * -1}px`;
@@ -30,14 +30,13 @@ const badgeStyles = props => {
   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));
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $foregroundColor,
-    $surfaceColor,
-    $backgroundColor,
-    $status
-  } = _ref;
+const colorStyles = ({
+  theme,
+  $foregroundColor,
+  $surfaceColor,
+  $backgroundColor,
+  $status
+}) => {
   const statusColor = getStatusColor(theme, $status);
   let backgroundColor = 'transparent';
   let foregroundColor = theme.palette.white;
@@ -67,7 +66,7 @@ const colorStyles = _ref => {
   }
   return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
-const sizeStyles = props => {
+const sizeStyles$1 = props => {
   let boxShadow;
   let borderRadius;
   let size;
@@ -107,12 +106,12 @@ const 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);
 };
 const StyledAvatar = styled.figure.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4',
   $size: props.$size ?? 'medium'
 })).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, props => sizeStyles(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, componentStyles);
+})(["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, componentStyles);
 
 export { StyledAvatar };

package/dist/esm/styled/StyledStandaloneStatus.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { TRANSITION_DURATION } from './utility.js';
 
-const COMPONENT_ID = 'avatars.status-indicator.status';
+const COMPONENT_ID$2 = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled.figure.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"

package/dist/esm/styled/StyledStandaloneStatusCaption.js

@@ -7,14 +7,14 @@
 import styled, { css } from 'styled-components';
 import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'avatars.status-indicator.caption';
+const COMPONENT_ID$1 = 'avatars.status-indicator.caption';
 function sizeStyles(props) {
   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);
 }
 const StyledStandaloneStatusCaption = styled.figcaption.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"

package/dist/esm/styled/StyledStandaloneStatusIndicator.js

@@ -12,7 +12,7 @@ import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   $type: props.$type ?? 'offline'
 })).withConfig({
   displayName: "StyledStandaloneStatusIndicator",

package/dist/esm/styled/StyledStatusIndicator.js

@@ -11,9 +11,9 @@ import { SIZE } from '../types/index.js';
 import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
 import { getStatusBorderOffset, includes } from './utility.js';
 
-const COMPONENT_ID = 'avatars.status_indicator';
+const COMPONENT_ID$4 = 'avatars.status_indicator';
 const [xxs, xs, s, m, l] = SIZE;
-const sizeStyles = props => {
+const sizeStyles$2 = props => {
   const isVisible = props.$size !== xxs;
   const iconSize = props.$size === xs ? `${props.theme.space.base * 2}px` : undefined;
   const borderWidth = getStatusBorderOffset(props);
@@ -25,14 +25,13 @@ const sizeStyles = props => {
   }
   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{", " width:", ";height:", ";}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', iconSize, iconSize);
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $type,
-    $size,
-    $borderColor,
-    $surfaceColor
-  } = _ref;
+const colorStyles$1 = ({
+  theme,
+  $type,
+  $size,
+  $borderColor,
+  $surfaceColor
+}) => {
   const shadowSize = $size === xxs ? 'xs' : 'sm';
   let boxShadow;
   const surfaceColor = $surfaceColor?.includes('.') ? getColor({
@@ -50,12 +49,12 @@ const colorStyles = _ref => {
   return css(["border-color:", ";box-shadow:", ";"], $borderColor, boxShadow);
 };
 const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.12.4',
   $size: props.$size ?? 'medium'
 })).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
-})(["", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
+})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, componentStyles);
 
 export { StyledStatusIndicator };

package/dist/esm/styled/StyledStatusIndicatorBase.js

@@ -8,18 +8,17 @@ import styled, { keyframes, css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { getStatusBorderOffset, getStatusSize, TRANSITION_DURATION, getStatusColor } from './utility.js';
 
-const COMPONENT_ID = 'avatars.status-indicator.base';
+const COMPONENT_ID$5 = 'avatars.status-indicator.base';
 const iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-const sizeStyles = props => {
+const sizeStyles$3 = props => {
   const offset = getStatusBorderOffset(props);
   const size = getStatusSize(props, offset);
   return css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";inset-inline-start:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);inset-inline-start:", ";}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1, props.$size === 'extrasmall' ? '-1px' : undefined);
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $type
-  } = _ref;
+const colorStyles$2 = ({
+  theme,
+  $type
+}) => {
   const foregroundColor = getColor({
     variable: 'foreground.onEmphasis',
     theme
@@ -39,11 +38,11 @@ const colorStyles = _ref => {
   return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
 };
 const StyledStatusIndicatorBase = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
-})(["transition:inherit;", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
+})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, componentStyles);
 
 export { StyledStatusIndicatorBase };

package/dist/esm/styled/StyledText.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'avatars.text';
+const COMPONENT_ID$6 = 'avatars.text';
 const StyledText = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"

package/dist/esm/styled/utility.js

@@ -8,7 +8,7 @@ import { getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { SIZE } from '../types/index.js';
 
-const [xxs, xs, s, m, l] = SIZE;
+const [xxs$1, xs$1, s$1, m$1, l$1] = SIZE;
 const TRANSITION_DURATION = 0.25;
 const StatusColorParams = {
   active: {
@@ -68,19 +68,19 @@ function getStatusColor(theme, type) {
   }) : 'transparent';
 }
 function getStatusBorderOffset(props) {
-  return props.$size === xxs ? math(`${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) {
   const isActive = props.$type === 'active';
   switch (props.$size) {
-    case xxs:
+    case xxs$1:
       return math(`${props.theme.space.base}px - ${offset}`);
-    case xs:
+    case xs$1:
       return math(`${props.theme.space.base * 2}px - (${offset} * 2)`);
-    case s:
+    case s$1:
       return math(`${props.theme.space.base * 3}px ${isActive ? '' : `- (${offset} * 2)`}`);
-    case m:
-    case l:
+    case m$1:
+    case l$1:
       return math(`${props.theme.space.base * 4}px ${isActive ? '' : `- (${offset} * 2)`}`);
     default:
       return '0';

package/dist/index.cjs.js

@@ -123,7 +123,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
 const COMPONENT_ID$6 = 'avatars.text';
 const StyledText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -218,11 +218,10 @@ const sizeStyles$3 = props => {
   const size = getStatusSize(props, offset);
   return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";inset-inline-start:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);inset-inline-start:", ";}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1, props.$size === 'extrasmall' ? '-1px' : undefined);
 };
-const colorStyles$2 = _ref => {
-  let {
-    theme,
-    $type
-  } = _ref;
+const colorStyles$2 = ({
+  theme,
+  $type
+}) => {
   const foregroundColor = reactTheming.getColor({
     variable: 'foreground.onEmphasis',
     theme
@@ -243,7 +242,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -263,14 +262,13 @@ const sizeStyles$2 = props => {
   }
   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{", " width:", ";height:", ";}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', iconSize, iconSize);
 };
-const colorStyles$1 = _ref => {
-  let {
-    theme,
-    $type,
-    $size,
-    $borderColor,
-    $surfaceColor
-  } = _ref;
+const colorStyles$1 = ({
+  theme,
+  $type,
+  $size,
+  $borderColor,
+  $surfaceColor
+}) => {
   const shadowSize = $size === xxs ? 'xs' : 'sm';
   let boxShadow;
   const surfaceColor = $surfaceColor?.includes('.') ? reactTheming.getColor({
@@ -289,7 +287,7 @@ const colorStyles$1 = _ref => {
 };
 const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   $size: props.$size ?? 'medium'
 })).withConfig({
   displayName: "StyledStatusIndicator",
@@ -314,14 +312,13 @@ const badgeStyles = props => {
   const animation = styled.keyframes(["0%{transform:scale(.1);}"]);
   return styled.css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.$status === 'active' && styled.css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $foregroundColor,
-    $surfaceColor,
-    $backgroundColor,
-    $status
-  } = _ref;
+const colorStyles = ({
+  theme,
+  $foregroundColor,
+  $surfaceColor,
+  $backgroundColor,
+  $status
+}) => {
   const statusColor = getStatusColor(theme, $status);
   let backgroundColor = 'transparent';
   let foregroundColor = theme.palette.white;
@@ -392,7 +389,7 @@ const sizeStyles$1 = props => {
 };
 const StyledAvatar = styled__default.default.figure.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   $size: props.$size ?? 'medium'
 })).withConfig({
   displayName: "StyledAvatar",
@@ -402,7 +399,7 @@ const StyledAvatar = styled__default.default.figure.attrs(props => ({
 const COMPONENT_ID$2 = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -415,7 +412,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -424,7 +421,7 @@ const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   $type: props.$type ?? 'offline'
 })).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
@@ -437,20 +434,19 @@ const TextComponent = React.forwardRef((props, ref) => React__namespace.default.
 TextComponent.displayName = 'Avatar.Text';
 const Text = TextComponent;
 
-const AvatarComponent = React.forwardRef((_ref, ref) => {
-  let {
-    'aria-hidden': ariaHidden,
-    backgroundColor,
-    badge,
-    children,
-    foregroundColor,
-    isSystem,
-    size = 'medium',
-    status,
-    statusLabel,
-    surfaceColor,
-    ...other
-  } = _ref;
+const AvatarComponent = React.forwardRef(({
+  'aria-hidden': ariaHidden,
+  backgroundColor,
+  badge,
+  children,
+  foregroundColor,
+  isSystem,
+  size = 'medium',
+  status,
+  statusLabel,
+  surfaceColor,
+  ...other
+}, ref) => {
   const computedStatus = badge === undefined ? status : 'active';
   let ClockIcon = SvgClockStroke$1;
   let ArrowLeftIcon = SvgArrowLeftSmStroke$1;
@@ -510,14 +506,13 @@ AvatarComponent.propTypes = {
 const Avatar = AvatarComponent;
 Avatar.Text = Text;
 
-const StatusIndicator = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    type = 'offline',
-    isCompact,
-    'aria-label': label,
-    ...props
-  } = _ref;
+const StatusIndicator = React.forwardRef(({
+  children,
+  type = 'offline',
+  isCompact,
+  'aria-label': label,
+  ...props
+}, ref) => {
   let ClockIcon = SvgClockStroke;
   let ArrowLeftIcon = SvgArrowLeftSmStroke;
   if (isCompact) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.12.2",
+  "version": "9.12.4",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/react-typography": "^9.12.2",
+    "@zendeskgarden/react-typography": "^9.12.4",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
@@ -32,9 +32,9 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-dropdowns": "^9.12.2",
-    "@zendeskgarden/react-theming": "^9.12.2",
-    "@zendeskgarden/svg-icons": "7.5.0"
+    "@zendeskgarden/react-dropdowns": "^9.12.4",
+    "@zendeskgarden/react-theming": "^9.12.4",
+    "@zendeskgarden/svg-icons": "7.6.0"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9b6f34bf0eda4bee3b47f97a437aa9b7f3008af4"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }