@zendeskgarden/react-avatars 9.0.0-next.21 → 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

@@ -39,12 +39,32 @@ const colorStyles = _ref => {
     $status
   } = _ref;
   const statusColor = getStatusColor(theme, $status);
-  const backgroundColor = $backgroundColor || 'transparent';
-  const foregroundColor = $foregroundColor || theme.palette.white;
-  const surfaceColor = $status ? $surfaceColor || getColor({
-    variable: 'background.default',
-    theme
-  }) : 'transparent';
+  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 = $surfaceColor || 'transparent';
+  }
   return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
 const sizeStyles = props => {
@@ -88,7 +108,7 @@ const sizeStyles = props => {
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  '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.21'
+  '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.21'
+  '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.21'
+  '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.21'
+  '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.21'
+  '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.21'
+  '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.21'
+  '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.21'
+  '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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -327,12 +327,32 @@ const colorStyles = _ref => {
     $status
   } = _ref;
   const statusColor = getStatusColor(theme, $status);
-  const backgroundColor = $backgroundColor || 'transparent';
-  const foregroundColor = $foregroundColor || theme.palette.white;
-  const surfaceColor = $status ? $surfaceColor || reactTheming.getColor({
-    variable: 'background.default',
-    theme
-  }) : 'transparent';
+  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 = $surfaceColor || 'transparent';
+  }
   return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
 const sizeStyles$1 = props => {
@@ -376,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -389,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -405,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -417,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -472,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,
@@ -536,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/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.primary`) 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.21",
+  "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.21",
-    "@zendeskgarden/react-theming": "^9.0.0-next.21",
-    "@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": "a245ce2b794ea65142174a6a1f855a111b2677a2"
+  "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
 }