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

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));
@@ -63,7 +63,7 @@ const colorStyles = _ref => {
       theme
     });
   } else {
-    surfaceColor = $surfaceColor || 'transparent';
+    surfaceColor = 'transparent';
   }
   return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
@@ -108,7 +108,7 @@ const sizeStyles = props => {
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.23'
+  'data-garden-version': '9.0.0-next.25'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"

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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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,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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"

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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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/index.cjs.js

@@ -122,14 +122,11 @@ 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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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;
@@ -218,7 +215,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 +242,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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -278,19 +275,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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -305,15 +306,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));
@@ -351,7 +352,7 @@ const colorStyles = _ref => {
       theme
     });
   } else {
-    surfaceColor = $surfaceColor || 'transparent';
+    surfaceColor = 'transparent';
   }
   return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
 };
@@ -396,7 +397,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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -409,14 +410,11 @@ 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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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) {
@@ -425,19 +423,16 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.23'
+  'data-garden-version': '9.0.0-next.25'
 }).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.23'
+  'data-garden-version': '9.0.0-next.25'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.0.0-next.23",
+  "version": "9.0.0-next.25",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,8 +31,8 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-dropdowns": "^9.0.0-next.23",
-    "@zendeskgarden/react-theming": "^9.0.0-next.23",
+    "@zendeskgarden/react-dropdowns": "^9.0.0-next.25",
+    "@zendeskgarden/react-theming": "^9.0.0-next.25",
     "@zendeskgarden/svg-icons": "7.2.0"
   },
   "keywords": [
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
+  "gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
 }