@zendeskgarden/react-avatars 9.0.0-next.22 → 9.0.0-next.23

package/dist/esm/elements/Avatar.js

@@ -59,7 +59,7 @@ const AvatarComponent = forwardRef((_ref, ref) => {
     $foregroundColor: foregroundColor,
     "aria-atomic": "true",
     "aria-live": "polite"
-  }, props), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
+  }, props), Children.only(children), !!computedStatus && React__default.createElement(StyledStatusIndicator, {
     $size: size,
     $type: computedStatus,
     $surfaceColor: surfaceColor,

package/dist/esm/elements/StatusIndicator.js

@@ -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/styled/StyledAvatar.js

@@ -41,7 +41,7 @@ const colorStyles = _ref => {
   const statusColor = getStatusColor(theme, $status);
   let backgroundColor = 'transparent';
   let foregroundColor = theme.palette.white;
-  let surfaceColor = 'transparent';
+  let surfaceColor;
   if ($backgroundColor) {
     backgroundColor = $backgroundColor.includes('.') ? getColor({
       theme,
@@ -54,11 +54,16 @@ const colorStyles = _ref => {
       variable: $foregroundColor
     }) : $foregroundColor;
   }
-  if ($surfaceColor) {
-    surfaceColor = $surfaceColor.includes('.') ? getColor({
-      theme,
-      variable: $surfaceColor
-    }) : $surfaceColor;
+  if ($status) {
+    surfaceColor = $surfaceColor?.includes('.') ? getColor({
+      variable: $surfaceColor,
+      theme
+    }) : $surfaceColor || getColor({
+      variable: 'background.default',
+      theme
+    });
+  } else {
+    surfaceColor = $surfaceColor || 'transparent';
   }
   return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
@@ -103,7 +108,7 @@ const sizeStyles = props => {
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"

package/dist/esm/styled/StyledStandaloneStatus.js

@@ -11,7 +11,7 @@ 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.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"

package/dist/esm/styled/StyledStandaloneStatusCaption.js

@@ -14,7 +14,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled.figcaption.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).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({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"

package/dist/esm/styled/StyledStatusIndicator.js

@@ -46,7 +46,7 @@ const colorStyles = _ref => {
 };
 const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"

package/dist/esm/styled/StyledStatusIndicatorBase.js

@@ -40,7 +40,7 @@ const colorStyles = _ref => {
 };
 const StyledStatusIndicatorBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"

package/dist/esm/styled/StyledText.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'avatars.text';
 const StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"

package/dist/index.cjs.js

@@ -122,7 +122,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.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -245,7 +245,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -290,7 +290,7 @@ const colorStyles$1 = _ref => {
 };
 const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -329,7 +329,7 @@ const colorStyles = _ref => {
   const statusColor = getStatusColor(theme, $status);
   let backgroundColor = 'transparent';
   let foregroundColor = theme.palette.white;
-  let surfaceColor = 'transparent';
+  let surfaceColor;
   if ($backgroundColor) {
     backgroundColor = $backgroundColor.includes('.') ? reactTheming.getColor({
       theme,
@@ -342,11 +342,16 @@ const colorStyles = _ref => {
       variable: $foregroundColor
     }) : $foregroundColor;
   }
-  if ($surfaceColor) {
-    surfaceColor = $surfaceColor.includes('.') ? reactTheming.getColor({
-      theme,
-      variable: $surfaceColor
-    }) : $surfaceColor;
+  if ($status) {
+    surfaceColor = $surfaceColor?.includes('.') ? reactTheming.getColor({
+      variable: $surfaceColor,
+      theme
+    }) : $surfaceColor || reactTheming.getColor({
+      variable: 'background.default',
+      theme
+    });
+  } else {
+    surfaceColor = $surfaceColor || 'transparent';
   }
   return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
@@ -391,7 +396,7 @@ const sizeStyles$1 = props => {
 };
 const StyledAvatar = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -404,7 +409,7 @@ StyledAvatar.defaultProps = {
 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.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -420,7 +425,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -432,7 +437,7 @@ StyledStandaloneStatusCaption.defaultProps = {
 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.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -487,7 +492,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
     $foregroundColor: foregroundColor,
     "aria-atomic": "true",
     "aria-live": "polite"
-  }, props), React.Children.only(children), computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
+  }, props), React.Children.only(children), !!computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
     $size: size,
     $type: computedStatus,
     $surfaceColor: surfaceColor,
@@ -551,7 +556,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.0.0-next.22",
+  "version": "9.0.0-next.23",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -26,14 +26,14 @@
   },
   "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-dropdowns": "^9.0.0-next.22",
-    "@zendeskgarden/react-theming": "^9.0.0-next.22",
-    "@zendeskgarden/svg-icons": "7.1.1"
+    "@zendeskgarden/react-dropdowns": "^9.0.0-next.23",
+    "@zendeskgarden/react-theming": "^9.0.0-next.23",
+    "@zendeskgarden/svg-icons": "7.2.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
+  "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
 }