@zendeskgarden/react-avatars 9.0.0-next.9 → 9.1.0

package/dist/esm/elements/Avatar.js

@@ -51,18 +51,18 @@ const AvatarComponent = forwardRef((_ref, ref) => {
   const statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
   return React__default.createElement(StyledAvatar, Object.assign({
     ref: ref,
-    isSystem: isSystem,
-    size: size,
-    status: computedStatus,
-    surfaceColor: surfaceColor,
-    backgroundColor: backgroundColor,
-    foregroundColor: foregroundColor,
+    $isSystem: isSystem,
+    $size: size,
+    $status: computedStatus,
+    $surfaceColor: surfaceColor,
+    $backgroundColor: backgroundColor,
+    $foregroundColor: foregroundColor,
     "aria-atomic": "true",
     "aria-live": "polite"
-  }, props), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
-    size: size,
-    type: computedStatus,
-    surfaceColor: surfaceColor,
+  }, props), Children.only(children), !!computedStatus && React__default.createElement(StyledStatusIndicator, {
+    $size: size,
+    $type: computedStatus,
+    $surfaceColor: surfaceColor,
     "aria-label": statusLabel,
     as: "figcaption"
   }, computedStatus === 'active' ? React__default.createElement("span", {

package/dist/esm/elements/StatusIndicator.js

@@ -43,8 +43,8 @@ const StatusIndicator = forwardRef((_ref, ref) => {
       ref: ref
     }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
       role: "img",
-      type: type,
-      size: isCompact ? 'small' : 'medium',
+      $type: type,
+      $size: isCompact ? 'small' : 'medium',
       "aria-label": ariaLabel
     }, type === 'away' ? React__default.createElement(ClockIcon, {
       "data-icon-status": type,
@@ -52,7 +52,7 @@ const StatusIndicator = forwardRef((_ref, ref) => {
     }) : null, type === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
       "data-icon-status": type,
       "aria-hidden": "true"
-    }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children))
+    }) : null), !!children && React__default.createElement(StyledStandaloneStatusCaption, null, children))
   );
 });
 StatusIndicator.displayName = 'StatusIndicator';

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _g;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _g;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/StyledAvatar.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { keyframes, css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { SIZE } from '../types/index.js';
 import { StyledText } from './StyledText.js';
@@ -16,26 +16,56 @@ const COMPONENT_ID = '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(`${position}  + 2`);
-      break;
+  switch (props.$size) {
     case xxs:
     case xs:
-    case l:
       position = math(`${position}  + 3`);
       break;
+    case s:
+    case m:
+    case l:
+      position = math(`${position}  + 2`);
+      break;
   }
   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));
+  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 = 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 || getColorV8('background', 600 , props.theme) : 'transparent';
-  return css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
+const colorStyles = _ref => {
+  let {
+    theme,
+    $foregroundColor,
+    $surfaceColor,
+    $backgroundColor,
+    $status
+  } = _ref;
+  const statusColor = getStatusColor(theme, $status);
+  let backgroundColor = 'transparent';
+  let foregroundColor = theme.palette.white;
+  let surfaceColor;
+  if ($backgroundColor) {
+    backgroundColor = $backgroundColor.includes('.') ? getColor({
+      theme,
+      variable: $backgroundColor
+    }) : $backgroundColor;
+  }
+  if ($foregroundColor) {
+    foregroundColor = $foregroundColor.includes('.') ? getColor({
+      theme,
+      variable: $foregroundColor
+    }) : $foregroundColor;
+  }
+  if ($status) {
+    surfaceColor = $surfaceColor?.includes('.') ? getColor({
+      variable: $surfaceColor,
+      theme
+    }) : $surfaceColor || getColor({
+      variable: 'background.default',
+      theme
+    });
+  } else {
+    surfaceColor = 'transparent';
+  }
+  return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
 const sizeStyles = props => {
   let boxShadow;
@@ -43,33 +73,33 @@ const sizeStyles = props => {
   let size;
   let fontSize;
   let svgSize;
-  if (props.size === 'extraextrasmall') {
+  if (props.$size === 'extraextrasmall') {
     boxShadow = `0 0 0 ${math(`${props.theme.shadowWidths.sm} - 1`)}`;
-    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    borderRadius = props.$isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
     size = `${props.theme.space.base * 4}px`;
     fontSize = 0;
     svgSize = `${props.theme.space.base * 3}px`;
-  } else if (props.size === 'extrasmall') {
+  } else if (props.$size === 'extrasmall') {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    borderRadius = props.$isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
     size = `${props.theme.space.base * 6}px`;
     fontSize = props.theme.fontSizes.sm;
     svgSize = `${props.theme.space.base * 3}px`;
-  } else if (props.size === 'small') {
+  } else if (props.$size === 'small') {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    borderRadius = props.$isSystem ? math(`${props.theme.borderRadii.md} - 1`) : '50%';
     size = `${props.theme.space.base * 8}px`;
     fontSize = props.theme.fontSizes.md;
     svgSize = `${props.theme.space.base * 3}px`;
-  } else if (props.size === 'large') {
+  } else if (props.$size === 'large') {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} + 1`) : '50%';
+    borderRadius = props.$isSystem ? math(`${props.theme.borderRadii.md} + 1`) : '50%';
     size = `${props.theme.space.base * 12}px`;
     fontSize = props.theme.fontSizes.xl;
     svgSize = `${props.theme.space.base * 6}px`;
   } else {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? props.theme.borderRadii.md : '50%';
+    borderRadius = props.$isSystem ? props.theme.borderRadii.md : '50%';
     size = `${props.theme.space.base * 10}px`;
     fontSize = props.theme.fontSizes.lg;
     svgSize = `${props.theme.space.base * 4}px`;
@@ -78,13 +108,13 @@ const sizeStyles = props => {
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.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, props => sizeStyles(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledAvatar.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: DEFAULT_THEME
 };
 

package/dist/esm/styled/StyledStandaloneStatus.js

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { TRANSITION_DURATION } from './utility.js';
 
 const COMPONENT_ID = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.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, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledStandaloneStatus.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledStandaloneStatus };

package/dist/esm/styled/StyledStandaloneStatusCaption.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'avatars.status-indicator.caption';
 function sizeStyles(props) {
@@ -14,13 +14,10 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled.figcaption.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
 })(["", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledStandaloneStatusCaption.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledStandaloneStatusCaption };

package/dist/esm/styled/StyledStandaloneStatusIndicator.js

@@ -12,13 +12,13 @@ import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
 })(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledStandaloneStatusIndicator.defaultProps = {
-  type: 'offline',
+  $type: 'offline',
   theme: DEFAULT_THEME
 };
 

package/dist/esm/styled/StyledStatusIndicator.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { SIZE } from '../types/index.js';
 import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
@@ -14,39 +14,49 @@ import { includes, getStatusBorderOffset } from './utility.js';
 const COMPONENT_ID = 'avatars.status_indicator';
 const [xxs, xs, s, m, l] = SIZE;
 const sizeStyles = props => {
-  const isVisible = !includes([xxs, xs], props.size);
+  const isVisible = !includes([xxs, xs], props.$size);
   const borderWidth = getStatusBorderOffset(props);
   let padding = '0';
-  if (props.size === s) {
+  if (props.$size === s) {
     padding = math(`${props.theme.space.base + 1}px - (${borderWidth} * 2)`);
-  } else if (includes([m, l], props.size)) {
+  } else if (includes([m, l], props.$size)) {
     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;');
 };
-const colorStyles = props => {
-  const {
+const colorStyles = _ref => {
+  let {
     theme,
-    type,
-    size,
-    borderColor,
-    surfaceColor
-  } = props;
-  let boxShadow = theme.shadows.sm(surfaceColor || (type ? getColorV8('background', 600 , theme) : theme.palette.white));
-  if (size === xxs) {
-    boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
+    $type,
+    $size,
+    $borderColor,
+    $surfaceColor
+  } = _ref;
+  const shadowSize = $size === xxs ? 'xs' : 'sm';
+  let boxShadow;
+  const surfaceColor = $surfaceColor?.includes('.') ? getColor({
+    variable: $surfaceColor,
+    theme
+  }) : $surfaceColor;
+  if ($type) {
+    boxShadow = theme.shadows[shadowSize](surfaceColor || getColor({
+      theme,
+      variable: 'background.default'
+    }));
+  } else {
+    boxShadow = theme.shadows[shadowSize](surfaceColor || theme.palette.white);
   }
-  return css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
+  return css(["border-color:", ";box-shadow:", ";"], $borderColor, boxShadow);
 };
 const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
 })(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledStatusIndicator.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: DEFAULT_THEME
 };
 

package/dist/esm/styled/StyledStatusIndicatorBase.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { keyframes, css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { getStatusBorderOffset, getStatusSize, TRANSITION_DURATION, getStatusColor } from './utility.js';
 
 const COMPONENT_ID = 'avatars.status-indicator.base';
@@ -13,27 +13,41 @@ const iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const sizeStyles = 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);
+  return css(["border:", " ", ";border-radius:", ";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, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
 };
-const colorStyles = 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;
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  const foregroundColor = getColor({
+    variable: 'foreground.onEmphasis',
+    theme
+  });
+  let backgroundColor;
+  let borderColor;
+  if ($type === 'offline') {
+    borderColor = getStatusColor(theme, $type);
+    backgroundColor = getColor({
+      variable: 'background.default',
+      theme
+    });
+  } else {
+    backgroundColor = getStatusColor(theme, $type);
+    borderColor = backgroundColor;
   }
-  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
+  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
 };
 const StyledStatusIndicatorBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
 })(["transition:inherit;", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledStatusIndicatorBase.defaultProps = {
   theme: DEFAULT_THEME,
-  size: 'small'
+  $size: 'small'
 };
 
 export { StyledStatusIndicatorBase };

package/dist/esm/styled/StyledText.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'avatars.text';
 const StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
 })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledText.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledText };

package/dist/esm/styled/utility.js

@@ -4,34 +4,75 @@
 * 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 { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { SIZE } from '../types/index.js';
 
 const [xxs, xs, s, m, l] = SIZE;
 const TRANSITION_DURATION = 0.25;
-function getStatusColor(type, theme) {
-  switch (type) {
-    case 'active':
-      return getColorV8('crimson', 400, theme);
-    case 'available':
-      return getColorV8('mint', 400, theme);
-    case 'away':
-      return getColorV8('orange', 400, theme);
-    case 'transfers':
-      return getColorV8('azure', 400, theme);
-    case 'offline':
-      return getColorV8('grey', 500, theme);
-    default:
-      return 'transparent';
+const StatusColorParams = {
+  active: {
+    hue: 'crimson',
+    light: {
+      shade: 700
+    },
+    dark: {
+      shade: 600
+    }
+  },
+  available: {
+    hue: 'mint',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
+  },
+  away: {
+    hue: 'orange',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
+  },
+  transfers: {
+    hue: 'azure',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
+  },
+  offline: {
+    hue: 'grey',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
+  }
+};
+function getStatusColor(theme, type) {
+  if (type === undefined) {
+    return 'transparent';
   }
+  const colorArgs = StatusColorParams[type];
+  return colorArgs ? getColor({
+    ...colorArgs,
+    theme
+  }) : 'transparent';
 }
 function getStatusBorderOffset(props) {
-  return props.size === xxs ? math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
+  return props.$size === xxs ? math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
 }
 function getStatusSize(props, offset) {
-  const isActive = props.type === 'active';
-  switch (props.size) {
+  const isActive = props.$type === 'active';
+  switch (props.$size) {
     case xxs:
       return math(`${props.theme.space.base}px - ${offset}`);
     case xs:

package/dist/index.cjs.js

@@ -37,7 +37,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 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); }
+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__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -61,7 +61,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
 };
 
 var _g;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+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__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -85,7 +85,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
 };
 
 var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+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__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -101,7 +101,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
 };
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -122,39 +122,77 @@ 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.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
 })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledText.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 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':
-      return reactTheming.getColorV8('crimson', 400, theme);
-    case 'available':
-      return reactTheming.getColorV8('mint', 400, theme);
-    case 'away':
-      return reactTheming.getColorV8('orange', 400, theme);
-    case 'transfers':
-      return reactTheming.getColorV8('azure', 400, theme);
-    case 'offline':
-      return reactTheming.getColorV8('grey', 500, theme);
-    default:
-      return 'transparent';
+const StatusColorParams = {
+  active: {
+    hue: 'crimson',
+    light: {
+      shade: 700
+    },
+    dark: {
+      shade: 600
+    }
+  },
+  available: {
+    hue: 'mint',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
+  },
+  away: {
+    hue: 'orange',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
+  },
+  transfers: {
+    hue: 'azure',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
+  },
+  offline: {
+    hue: 'grey',
+    light: {
+      shade: 500
+    },
+    dark: {
+      shade: 400
+    }
   }
+};
+function getStatusColor(theme, type) {
+  if (type === undefined) {
+    return 'transparent';
+  }
+  const colorArgs = StatusColorParams[type];
+  return colorArgs ? reactTheming.getColor({
+    ...colorArgs,
+    theme
+  }) : 'transparent';
 }
 function getStatusBorderOffset(props) {
-  return props.size === xxs$1 ? polished.math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
+  return props.$size === xxs$1 ? polished.math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
 }
 function getStatusSize(props, offset) {
-  const isActive = props.type === 'active';
-  switch (props.size) {
+  const isActive = props.$type === 'active';
+  switch (props.$size) {
     case xxs$1:
       return polished.math(`${props.theme.space.base}px - ${offset}`);
     case xs$1:
@@ -177,65 +215,89 @@ const iconFadeIn = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const sizeStyles$3 = props => {
   const offset = getStatusBorderOffset(props);
   const 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);
+  return styled.css(["border:", " ", ";border-radius:", ";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, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
 };
-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;
+const colorStyles$2 = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  const foregroundColor = reactTheming.getColor({
+    variable: 'foreground.onEmphasis',
+    theme
+  });
+  let backgroundColor;
+  let borderColor;
+  if ($type === 'offline') {
+    borderColor = getStatusColor(theme, $type);
+    backgroundColor = reactTheming.getColor({
+      variable: 'background.default',
+      theme
+    });
+  } else {
+    backgroundColor = getStatusColor(theme, $type);
+    borderColor = backgroundColor;
   }
-  return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
+  return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
 };
 const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
 })(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledStatusIndicatorBase.defaultProps = {
   theme: reactTheming.DEFAULT_THEME,
-  size: 'small'
+  $size: 'small'
 };
 
 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 isVisible = !includes([xxs, xs], props.$size);
   const borderWidth = getStatusBorderOffset(props);
   let padding = '0';
-  if (props.size === s) {
+  if (props.$size === s) {
     padding = polished.math(`${props.theme.space.base + 1}px - (${borderWidth} * 2)`);
-  } else if (includes([m, l], props.size)) {
+  } else if (includes([m, l], props.$size)) {
     padding = polished.math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
   }
   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;');
 };
-const colorStyles$1 = props => {
-  const {
+const colorStyles$1 = _ref => {
+  let {
     theme,
-    type,
-    size,
-    borderColor,
-    surfaceColor
-  } = props;
-  let boxShadow = theme.shadows.sm(surfaceColor || (type ? reactTheming.getColorV8('background', 600 , theme) : theme.palette.white));
-  if (size === xxs) {
-    boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
+    $type,
+    $size,
+    $borderColor,
+    $surfaceColor
+  } = _ref;
+  const shadowSize = $size === xxs ? 'xs' : 'sm';
+  let boxShadow;
+  const surfaceColor = $surfaceColor?.includes('.') ? reactTheming.getColor({
+    variable: $surfaceColor,
+    theme
+  }) : $surfaceColor;
+  if ($type) {
+    boxShadow = theme.shadows[shadowSize](surfaceColor || reactTheming.getColor({
+      theme,
+      variable: 'background.default'
+    }));
+  } else {
+    boxShadow = theme.shadows[shadowSize](surfaceColor || theme.palette.white);
   }
-  return styled.css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
+  return styled.css(["border-color:", ";box-shadow:", ";"], $borderColor, boxShadow);
 };
 const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
 })(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledStatusIndicator.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -243,26 +305,56 @@ 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 = polished.math(`${position}  + 2`);
-      break;
+  switch (props.$size) {
     case xxs:
     case xs:
-    case l:
       position = polished.math(`${position}  + 3`);
       break;
+    case s:
+    case m:
+    case l:
+      position = polished.math(`${position}  + 2`);
+      break;
   }
   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));
+  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 = 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 || reactTheming.getColorV8('background', 600 , props.theme) : 'transparent';
-  return styled.css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
+const colorStyles = _ref => {
+  let {
+    theme,
+    $foregroundColor,
+    $surfaceColor,
+    $backgroundColor,
+    $status
+  } = _ref;
+  const statusColor = getStatusColor(theme, $status);
+  let backgroundColor = 'transparent';
+  let foregroundColor = theme.palette.white;
+  let surfaceColor;
+  if ($backgroundColor) {
+    backgroundColor = $backgroundColor.includes('.') ? reactTheming.getColor({
+      theme,
+      variable: $backgroundColor
+    }) : $backgroundColor;
+  }
+  if ($foregroundColor) {
+    foregroundColor = $foregroundColor.includes('.') ? reactTheming.getColor({
+      theme,
+      variable: $foregroundColor
+    }) : $foregroundColor;
+  }
+  if ($status) {
+    surfaceColor = $surfaceColor?.includes('.') ? reactTheming.getColor({
+      variable: $surfaceColor,
+      theme
+    }) : $surfaceColor || reactTheming.getColor({
+      variable: 'background.default',
+      theme
+    });
+  } else {
+    surfaceColor = 'transparent';
+  }
+  return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
 const sizeStyles$1 = props => {
   let boxShadow;
@@ -270,33 +362,33 @@ const sizeStyles$1 = props => {
   let size;
   let fontSize;
   let svgSize;
-  if (props.size === 'extraextrasmall') {
+  if (props.$size === 'extraextrasmall') {
     boxShadow = `0 0 0 ${polished.math(`${props.theme.shadowWidths.sm} - 1`)}`;
-    borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    borderRadius = props.$isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
     size = `${props.theme.space.base * 4}px`;
     fontSize = 0;
     svgSize = `${props.theme.space.base * 3}px`;
-  } else if (props.size === 'extrasmall') {
+  } else if (props.$size === 'extrasmall') {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    borderRadius = props.$isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
     size = `${props.theme.space.base * 6}px`;
     fontSize = props.theme.fontSizes.sm;
     svgSize = `${props.theme.space.base * 3}px`;
-  } else if (props.size === 'small') {
+  } else if (props.$size === 'small') {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
+    borderRadius = props.$isSystem ? polished.math(`${props.theme.borderRadii.md} - 1`) : '50%';
     size = `${props.theme.space.base * 8}px`;
     fontSize = props.theme.fontSizes.md;
     svgSize = `${props.theme.space.base * 3}px`;
-  } else if (props.size === 'large') {
+  } else if (props.$size === 'large') {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? polished.math(`${props.theme.borderRadii.md} + 1`) : '50%';
+    borderRadius = props.$isSystem ? polished.math(`${props.theme.borderRadii.md} + 1`) : '50%';
     size = `${props.theme.space.base * 12}px`;
     fontSize = props.theme.fontSizes.xl;
     svgSize = `${props.theme.space.base * 6}px`;
   } else {
     boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? props.theme.borderRadii.md : '50%';
+    borderRadius = props.$isSystem ? props.theme.borderRadii.md : '50%';
     size = `${props.theme.space.base * 10}px`;
     fontSize = props.theme.fontSizes.lg;
     svgSize = `${props.theme.space.base * 4}px`;
@@ -305,27 +397,24 @@ const sizeStyles$1 = props => {
 };
 const StyledAvatar = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.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, props => sizeStyles$1(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledAvatar.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 
 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.0.0-next.9'
+  'data-garden-version': '9.1.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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledStandaloneStatus.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$1 = 'avatars.status-indicator.caption';
 function sizeStyles(props) {
@@ -334,25 +423,22 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
 })(["", " ", ";"], sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledStandaloneStatusCaption.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
 })(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledStandaloneStatusIndicator.defaultProps = {
-  type: 'offline',
+  $type: 'offline',
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -393,18 +479,18 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
   const statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
   return React__namespace.default.createElement(StyledAvatar, Object.assign({
     ref: ref,
-    isSystem: isSystem,
-    size: size,
-    status: computedStatus,
-    surfaceColor: surfaceColor,
-    backgroundColor: backgroundColor,
-    foregroundColor: foregroundColor,
+    $isSystem: isSystem,
+    $size: size,
+    $status: computedStatus,
+    $surfaceColor: surfaceColor,
+    $backgroundColor: backgroundColor,
+    $foregroundColor: foregroundColor,
     "aria-atomic": "true",
     "aria-live": "polite"
-  }, props), React.Children.only(children), computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
-    size: size,
-    type: computedStatus,
-    surfaceColor: surfaceColor,
+  }, props), React.Children.only(children), !!computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
+    $size: size,
+    $type: computedStatus,
+    $surfaceColor: surfaceColor,
     "aria-label": statusLabel,
     as: "figcaption"
   }, computedStatus === 'active' ? React__namespace.default.createElement("span", {
@@ -456,8 +542,8 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
       ref: ref
     }, props), React__namespace.default.createElement(StyledStandaloneStatusIndicator, {
       role: "img",
-      type: type,
-      size: isCompact ? 'small' : 'medium',
+      $type: type,
+      $size: isCompact ? 'small' : 'medium',
       "aria-label": ariaLabel
     }, type === 'away' ? React__namespace.default.createElement(ClockIcon, {
       "data-icon-status": type,
@@ -465,7 +551,7 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
     }) : null, type === 'transfers' ? React__namespace.default.createElement(ArrowLeftIcon, {
       "data-icon-status": type,
       "aria-hidden": "true"
-    }) : null), children && React__namespace.default.createElement(StyledStandaloneStatusCaption, null, children))
+    }) : null), !!children && React__namespace.default.createElement(StyledStandaloneStatusCaption, null, children))
   );
 });
 StatusIndicator.displayName = 'StatusIndicator';

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

@@ -7,9 +7,11 @@
 import React from 'react';
 import { IAvatarProps } from '../types';
 import { Text } from './components/Text';
+declare const AvatarComponent: React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>>;
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export declare const Avatar: React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> & {
+export declare const Avatar: typeof AvatarComponent & {
     Text: typeof Text;
 };
+export {};

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

@@ -6,8 +6,13 @@
  */
 import { DefaultTheme } from 'styled-components';
 import { IAvatarProps } from '../types';
-export interface IStyledAvatarProps extends Pick<IAvatarProps, 'backgroundColor' | 'foregroundColor' | 'surfaceColor' | 'isSystem' | 'size'> {
-    status?: IAvatarProps['status'] | 'active';
+export interface IStyledAvatarProps {
+    $status?: IAvatarProps['status'] | 'active';
+    $backgroundColor?: IAvatarProps['backgroundColor'];
+    $foregroundColor?: IAvatarProps['foregroundColor'];
+    $surfaceColor?: IAvatarProps['surfaceColor'];
+    $isSystem?: IAvatarProps['isSystem'];
+    $size?: IAvatarProps['size'];
 }
 /**
  * Accepts all `<figure>` props

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

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

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

@@ -8,10 +8,10 @@ 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';
+    readonly $size?: IAvatarProps['size'];
+    readonly $type?: IAvatarProps['status'] | 'active';
 }
-export declare function getStatusColor(type?: IStyledStatusIndicatorProps['type'], theme?: IStyledStatusIndicatorProps['theme']): string;
+export declare function getStatusColor(theme: IStyledStatusIndicatorProps['theme'], type?: IStyledStatusIndicatorProps['$type']): 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

@@ -8,11 +8,25 @@ import { HTMLAttributes } from 'react';
 export declare const SIZE: readonly ["extraextrasmall", "extrasmall", "small", "medium", "large"];
 export declare const STATUS: readonly ["available", "away", "transfers", "offline"];
 export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
-    /** Sets the avatar background color */
+    /**
+     * Sets the avatar background color. Accepts a [color
+     * variable](/components/theme-object#colors) key (i.e.
+     * `background.emphasis`) to render based on light/dark mode, or any hex
+     * value.
+     */
     backgroundColor?: string;
-    /** Sets the color for child SVG or `Avatar.Text` components */
+    /**
+     * Sets the color for child SVG or `Avatar.Text` components. Accepts a [color
+     * variable](/components/theme-object#colors) key (i.e.
+     * `foreground.onEmphasis`) to render based on light/dark mode, or any hex
+     * value.
+     */
     foregroundColor?: string;
-    /** Provides surface color for an avatar placed on a non-white background */
+    /**
+     * Provides surface color for an avatar placed on a non-default background.
+     * Accepts a [color variable](/components/theme-object#colors) key (i.e.
+     * `background.subtle`) to render based on light/dark mode, or any hex value.
+     */
     surfaceColor?: string;
     /** Applies system styling for representing objects, brands, or products */
     isSystem?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.0.0-next.9",
+  "version": "9.1.0",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,18 +21,19 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.9",
-    "@zendeskgarden/svg-icons": "7.0.0"
+    "@zendeskgarden/react-dropdowns": "^9.1.0",
+    "@zendeskgarden/react-theming": "^9.1.0",
+    "@zendeskgarden/svg-icons": "7.3.0"
   },
   "keywords": [
     "components",
@@ -44,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
+  "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
 }