@zendeskgarden/react-avatars - npm Package Compare versions

Comparing version 9.0.0-next.17 to 9.0.0-next.18

dist/esm/elements/Avatar.js

@@ -54,14 +54,14 @@ /**
     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,
+    $size: size,
+    $type: computedStatus,
+    $surfaceColor: surfaceColor,
     "aria-label": statusLabel,
@@ -68,0 +68,0 @@ as: "figcaption"

dist/esm/elements/StatusIndicator.js

@@ -46,4 +46,4 @@ /**
       role: "img",
-      type: type,
-      size: isCompact ? 'small' : 'medium',
+      $type: type,
+      $size: isCompact ? 'small' : 'medium',
       "aria-label": ariaLabel
@@ -50,0 +50,0 @@ }, type === 'away' ? React__default.createElement(ClockIcon, {

dist/esm/styled/StyledAvatar.js

@@ -8,3 +8,3 @@ /**
 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';
@@ -20,3 +20,3 @@ import { SIZE } from '../types/index.js';
   let position = `${props.theme.space.base * -1}px`;
-  switch (props.size) {
+  switch (props.$size) {
     case s:
@@ -33,10 +33,20 @@ case m:
   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);
+  const backgroundColor = $backgroundColor || 'transparent';
+  const foregroundColor = $foregroundColor || theme.palette.white;
+  const surfaceColor = $status ? $surfaceColor || getColor({
+    variable: 'background.default',
+    theme
+  }) : 'transparent';
+  return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
@@ -49,23 +59,23 @@ const sizeStyles = props => {
   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`;
@@ -76,3 +86,3 @@ fontSize = props.theme.fontSizes.xl;
     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`;
@@ -86,3 +96,3 @@ fontSize = props.theme.fontSizes.lg;
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -93,3 +103,3 @@ displayName: "StyledAvatar",
 StyledAvatar.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: DEFAULT_THEME
@@ -96,0 +106,0 @@ };

dist/esm/styled/StyledStandaloneStatus.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledStandaloneStatus",

dist/esm/styled/StyledStandaloneStatusCaption.js

@@ -17,3 +17,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -20,0 +20,0 @@ displayName: "StyledStandaloneStatusCaption",

dist/esm/styled/StyledStandaloneStatusIndicator.js

@@ -15,3 +15,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -22,3 +22,3 @@ displayName: "StyledStandaloneStatusIndicator",
 StyledStandaloneStatusIndicator.defaultProps = {
-  type: 'offline',
+  $type: 'offline',
   theme: DEFAULT_THEME
@@ -25,0 +25,0 @@ };

dist/esm/styled/StyledStatusIndicator.js

@@ -8,3 +8,3 @@ /**
 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';
@@ -18,8 +18,8 @@ import { SIZE } from '../types/index.js';
 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)`);
@@ -29,19 +29,25 @@ }
 };
-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;
+  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.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -52,3 +58,3 @@ displayName: "StyledStatusIndicator",
 StyledStatusIndicator.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: DEFAULT_THEME
@@ -55,0 +61,0 @@ };

dist/esm/styled/StyledStatusIndicatorBase.js

@@ -8,3 +8,3 @@ /**
 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';
@@ -19,14 +19,28 @@
 };
-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.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -38,5 +52,5 @@ displayName: "StyledStatusIndicatorBase",
   theme: DEFAULT_THEME,
-  size: 'small'
+  $size: 'small'
 };
 
 export { StyledStatusIndicatorBase };

dist/esm/styled/StyledText.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledText",

dist/esm/styled/utility.js

@@ -7,3 +7,3 @@ /**
 */
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
@@ -14,24 +14,65 @@ import { SIZE } from '../types/index.js';
 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:
@@ -38,0 +79,0 @@ return math(`${props.theme.space.base}px - ${offset}`);

dist/index.cjs.js

@@ -125,3 +125,3 @@ /**
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -137,24 +137,65 @@ displayName: "StyledText",
 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:
@@ -184,14 +225,28 @@ return polished.math(`${props.theme.space.base}px - ${offset}`);
 };
-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.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -203,3 +258,3 @@ displayName: "StyledStatusIndicatorBase",
   theme: reactTheming.DEFAULT_THEME,
-  size: 'small'
+  $size: 'small'
 };
@@ -210,8 +265,8 @@
 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)`);
@@ -221,19 +276,25 @@ }
 };
-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;
+  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.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -244,3 +305,3 @@ displayName: "StyledStatusIndicator",
 StyledStatusIndicator.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: reactTheming.DEFAULT_THEME
@@ -253,3 +314,3 @@ };
   let position = `${props.theme.space.base * -1}px`;
-  switch (props.size) {
+  switch (props.$size) {
     case s:
@@ -266,10 +327,20 @@ case m:
   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);
+  const backgroundColor = $backgroundColor || 'transparent';
+  const foregroundColor = $foregroundColor || theme.palette.white;
+  const surfaceColor = $status ? $surfaceColor || reactTheming.getColor({
+    variable: 'background.default',
+    theme
+  }) : 'transparent';
+  return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
@@ -282,23 +353,23 @@ const sizeStyles$1 = props => {
   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`;
@@ -309,3 +380,3 @@ fontSize = props.theme.fontSizes.xl;
     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`;
@@ -319,3 +390,3 @@ fontSize = props.theme.fontSizes.lg;
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -326,3 +397,3 @@ displayName: "StyledAvatar",
 StyledAvatar.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: reactTheming.DEFAULT_THEME
@@ -334,3 +405,3 @@ };
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -351,3 +422,3 @@ displayName: "StyledStandaloneStatus",
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -364,3 +435,3 @@ displayName: "StyledStandaloneStatusCaption",
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.17'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
@@ -371,3 +442,3 @@ displayName: "StyledStandaloneStatusIndicator",
 StyledStandaloneStatusIndicator.defaultProps = {
-  type: 'offline',
+  $type: 'offline',
   theme: reactTheming.DEFAULT_THEME
@@ -413,14 +484,14 @@ };
     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,
+    $size: size,
+    $type: computedStatus,
+    $surfaceColor: surfaceColor,
     "aria-label": statusLabel,
@@ -477,4 +548,4 @@ as: "figcaption"
       role: "img",
-      type: type,
-      size: isCompact ? 'small' : 'medium',
+      $type: type,
+      $size: isCompact ? 'small' : 'medium',
       "aria-label": ariaLabel
@@ -481,0 +552,0 @@ }, type === 'away' ? React__namespace.default.createElement(ClockIcon, {

dist/typings/styled/StyledAvatar.d.ts

@@ -9,4 +9,9 @@ /**
 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'];
 }
@@ -13,0 +18,0 @@ /**

dist/typings/styled/StyledStatusIndicator.d.ts

@@ -11,4 +11,6 @@ /**
 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'];
 }
@@ -15,0 +17,0 @@ export declare const StyledStatusIndicator: import("styled-components").StyledComponent<"div", DefaultTheme, {

dist/typings/styled/utility.d.ts

@@ -11,8 +11,8 @@ /**
 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.json

 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.0.0-next.17",
+  "version": "9.0.0-next.18",
   "description": "Components relating to avatars in the Garden Design System",
@@ -34,3 +34,4 @@ "license": "Apache-2.0",
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.17",
+    "@zendeskgarden/react-dropdowns": "^9.0.0-next.18",
+    "@zendeskgarden/react-theming": "^9.0.0-next.18",
     "@zendeskgarden/svg-icons": "7.1.1"
@@ -48,3 +49,3 @@ },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7a7e39c2a9e854ad0fe914d82e28c052aa102d2e"
+  "gitHead": "31680e30a7c9b1f2bd1f8f711f540dfaaf4ee4ec"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70617

increased by2.58%

Lines of code

1446

increased by11.49%

Worsened metrics

Dev dependency count

3

increased by50%

No dependency changes