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

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

@@ -17,15 +17,15 @@ 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;
     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));
@@ -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 = '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.24'
 }).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.24'
 }).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.24'
 }).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.24'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"

package/dist/esm/styled/StyledStatusIndicator.js

@@ -34,19 +34,23 @@ const colorStyles = _ref => {
   } = _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({
+    boxShadow = theme.shadows[shadowSize](surfaceColor || getColor({
       theme,
       variable: 'background.default'
     }));
   } else {
-    boxShadow = theme.shadows[shadowSize]($surfaceColor || theme.palette.white);
+    boxShadow = theme.shadows[shadowSize](surfaceColor || theme.palette.white);
   }
   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.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"

package/dist/esm/styled/StyledStatusIndicatorBase.js

@@ -13,7 +13,7 @@ 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 = _ref => {
   let {
@@ -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.24'
 }).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.24'
 }).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.24'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -218,7 +218,7 @@ 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 = _ref => {
   let {
@@ -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.24'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -278,19 +278,23 @@ const colorStyles$1 = _ref => {
   } = _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({
+    boxShadow = theme.shadows[shadowSize](surfaceColor || reactTheming.getColor({
       theme,
       variable: 'background.default'
     }));
   } else {
-    boxShadow = theme.shadows[shadowSize]($surfaceColor || theme.palette.white);
+    boxShadow = theme.shadows[shadowSize](surfaceColor || theme.palette.white);
   }
   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.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -305,15 +309,15 @@ 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;
     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));
@@ -329,7 +333,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 +346,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 = 'transparent';
   }
   return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
@@ -391,7 +400,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.24'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -404,7 +413,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.24'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -420,7 +429,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.24'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -432,7 +441,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.24'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -487,7 +496,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 +560,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.24",
   "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.24",
+    "@zendeskgarden/react-theming": "^9.0.0-next.24",
+    "@zendeskgarden/svg-icons": "7.2.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
+  "gitHead": "36ac3913276188edf8d187a9861be7ba765e487a"
 }