@zendeskgarden/react-avatars 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/elements/Avatar.js

@@ -0,0 +1,93 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useMemo, Children } from 'react';
+import PropTypes from 'prop-types';
+import { useText } from '@zendeskgarden/react-theming';
+import SvgClockStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/clock-stroke.svg.js';
+import SvgClockStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js';
+import SvgArrowLeftSmStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg.js';
+import SvgArrowLeftSmStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/16/arrow-left-sm-stroke.svg.js';
+import { SIZE, STATUS } from '../types/index.js';
+import { StyledAvatar } from '../styled/StyledAvatar.js';
+import '../styled/StyledStandaloneStatus.js';
+import '../styled/StyledStandaloneStatusCaption.js';
+import '../styled/StyledStandaloneStatusIndicator.js';
+import { StyledStatusIndicator } from '../styled/StyledStatusIndicator.js';
+import '../styled/StyledText.js';
+import { Text } from './components/Text.js';
+
+const AvatarComponent = forwardRef((_ref, ref) => {
+  let {
+    isSystem,
+    size,
+    status,
+    children,
+    badge,
+    surfaceColor,
+    backgroundColor,
+    foregroundColor,
+    ...props
+  } = _ref;
+  const computedStatus = badge === undefined ? status : 'active';
+  let ClockIcon = SvgClockStroke;
+  let ArrowLeftIcon = SvgArrowLeftSmStroke;
+  if (['large', 'medium'].includes(size)) {
+    ClockIcon = SvgClockStroke$1;
+    ArrowLeftIcon = SvgArrowLeftSmStroke$1;
+  }
+  const defaultStatusLabel = useMemo(() => {
+    let statusMessage = computedStatus;
+    if (computedStatus === 'active') {
+      const count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
+      statusMessage = `active. ${count > 0 ? `${count} notification${count > 1 ? 's' : ''}` : 'no notifications'}`;
+    }
+    return ['status'].concat(statusMessage || []).join(': ');
+  }, [computedStatus, badge]);
+  const shouldValidate = computedStatus !== undefined;
+  const statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
+  return React__default.createElement(StyledAvatar, Object.assign({
+    ref: ref,
+    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,
+    "aria-label": statusLabel,
+    as: "figcaption"
+  }, computedStatus === 'active' ? React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
+    "data-icon-status": computedStatus
+  }) : null, computedStatus === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
+    "data-icon-status": computedStatus
+  }) : null)));
+});
+AvatarComponent.displayName = 'Avatar';
+AvatarComponent.propTypes = {
+  backgroundColor: PropTypes.string,
+  foregroundColor: PropTypes.string,
+  surfaceColor: PropTypes.string,
+  isSystem: PropTypes.bool,
+  badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOf(SIZE),
+  status: PropTypes.oneOf(STATUS),
+  statusLabel: PropTypes.string
+};
+AvatarComponent.defaultProps = {
+  size: 'medium'
+};
+const Avatar = AvatarComponent;
+Avatar.Text = Text;
+
+export { Avatar };

package/dist/esm/elements/StatusIndicator.js

@@ -0,0 +1,67 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useText } from '@zendeskgarden/react-theming';
+import SvgClockStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/12/clock-stroke.svg.js';
+import SvgClockStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js';
+import SvgArrowLeftSmStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg.js';
+import SvgArrowLeftSmStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/arrow-left-sm-stroke.svg.js';
+import { STATUS } from '../types/index.js';
+import '../styled/StyledAvatar.js';
+import { StyledStandaloneStatus } from '../styled/StyledStandaloneStatus.js';
+import { StyledStandaloneStatusCaption } from '../styled/StyledStandaloneStatusCaption.js';
+import { StyledStandaloneStatusIndicator } from '../styled/StyledStandaloneStatusIndicator.js';
+import '../styled/StyledStatusIndicator.js';
+import '../styled/StyledText.js';
+
+const StatusIndicator = forwardRef((_ref, ref) => {
+  let {
+    children,
+    type,
+    isCompact,
+    'aria-label': label,
+    ...props
+  } = _ref;
+  let ClockIcon = SvgClockStroke;
+  let ArrowLeftIcon = SvgArrowLeftSmStroke;
+  if (isCompact) {
+    ClockIcon = SvgClockStroke$1;
+    ArrowLeftIcon = SvgArrowLeftSmStroke$1;
+  }
+  const defaultLabel = useMemo(() => ['status'].concat(type || []).join(': '), [type]);
+  const ariaLabel = useText(StatusIndicator, {
+    'aria-label': label
+  }, 'aria-label', defaultLabel);
+  return (
+    React__default.createElement(StyledStandaloneStatus, Object.assign({
+      role: "status",
+      ref: ref
+    }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
+      role: "img",
+      type: type,
+      size: isCompact ? 'small' : 'medium',
+      "aria-label": ariaLabel
+    }, type === 'away' ? React__default.createElement(ClockIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null, type === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children))
+  );
+});
+StatusIndicator.displayName = 'StatusIndicator';
+StatusIndicator.propTypes = {
+  type: PropTypes.oneOf(STATUS),
+  isCompact: PropTypes.bool
+};
+StatusIndicator.defaultProps = {
+  type: 'offline'
+};
+
+export { StatusIndicator };

package/dist/esm/elements/components/Text.js

@@ -0,0 +1,21 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef } from 'react';
+import '../../styled/StyledAvatar.js';
+import '../../styled/StyledStandaloneStatus.js';
+import '../../styled/StyledStandaloneStatusCaption.js';
+import '../../styled/StyledStandaloneStatusIndicator.js';
+import '../../styled/StyledStatusIndicator.js';
+import { StyledText } from '../../styled/StyledText.js';
+
+const TextComponent = forwardRef((props, ref) => React__default.createElement(StyledText, Object.assign({
+  ref: ref
+}, props)));
+TextComponent.displayName = 'Avatar.Text';
+const Text = TextComponent;
+
+export { Text };

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { Avatar } from './elements/Avatar.js';
+export { StatusIndicator } from './elements/StatusIndicator.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
+  })));
+};
+
+export { SvgArrowLeftSmStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/clock-stroke.svg.js

@@ -0,0 +1,33 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * as React from 'react';
+
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgClockStroke = function SvgClockStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 6,
+    cy: 6,
+    r: 5.5
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M5.5 3v3.5H8"
+  }))));
+};
+
+export { SvgClockStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/arrow-left-sm-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
+  })));
+};
+
+export { SvgArrowLeftSmStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js

@@ -0,0 +1,33 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * as React from 'react';
+
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgClockStroke = function SvgClockStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 8,
+    cy: 8,
+    r: 7.5
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M7.5 3v5.5H11"
+  }))));
+};
+
+export { SvgClockStroke as default };

package/dist/esm/styled/StyledAvatar.js

@@ -0,0 +1,91 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { keyframes, css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+import { SIZE } from '../types/index.js';
+import { StyledText } from './StyledText.js';
+import { StyledStatusIndicator } from './StyledStatusIndicator.js';
+import { TRANSITION_DURATION, getStatusColor } from './utility.js';
+
+const COMPONENT_ID = 'avatars.avatar';
+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;
+  }
+  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));
+};
+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 sizeStyles = props => {
+  let boxShadow;
+  let borderRadius;
+  let size;
+  let fontSize;
+  let svgSize;
+  if (props.size === 'extraextrasmall') {
+    boxShadow = `0 0 0 ${math(`${props.theme.shadowWidths.sm} - 1`)}`;
+    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') {
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
+    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') {
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
+    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') {
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
+    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} + 1`) : '50%';
+    size = `${props.theme.space.base * 12}px`;
+    fontSize = props.theme.fontSizes.xl;
+    svgSize = `${props.theme.space.base * 6}px`;
+  } else {
+    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
+    borderRadius = props.isSystem ? props.theme.borderRadii.md : '50%';
+    size = `${props.theme.space.base * 10}px`;
+    fontSize = props.theme.fontSizes.lg;
+    svgSize = `${props.theme.space.base * 4}px`;
+  }
+  return css(["border-radius:", ";width:", " !important;height:", " !important;::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
+};
+const StyledAvatar = styled.figure.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledAvatar",
+  componentId: "sc-608m04-0"
+})(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, props => sizeStyles(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledAvatar.defaultProps = {
+  size: 'medium',
+  theme: DEFAULT_THEME
+};
+
+export { StyledAvatar };

package/dist/esm/styled/StyledStandaloneStatus.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.8'
+}).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

@@ -0,0 +1,26 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* 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';
+
+const COMPONENT_ID = 'avatars.status-indicator.caption';
+function sizeStyles(props) {
+  const marginRule = `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 2}px;`;
+  return css(["", " line-height:", ";font-size:", ";"], marginRule, getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.theme.fontSizes.md);
+}
+const StyledStandaloneStatusCaption = styled.figcaption.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getStatusSize } from './utility.js';
+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.8'
+}).withConfig({
+  displayName: "StyledStandaloneStatusIndicator",
+  componentId: "sc-1xt1heq-0"
+})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledStandaloneStatusIndicator.defaultProps = {
+  type: 'offline',
+  theme: DEFAULT_THEME
+};
+
+export { StyledStandaloneStatusIndicator };

package/dist/esm/styled/StyledStatusIndicator.js

@@ -0,0 +1,53 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+import { SIZE } from '../types/index.js';
+import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
+import { includes, getStatusBorderOffset } from './utility.js';
+
+const COMPONENT_ID = 'avatars.status_indicator';
+const [xxs, xs, s, m, l] = SIZE;
+const sizeStyles = props => {
+  const isVisible = !includes([xxs, xs], props.size);
+  const borderWidth = getStatusBorderOffset(props);
+  let padding = '0';
+  if (props.size === s) {
+    padding = math(`${props.theme.space.base + 1}px - (${borderWidth} * 2)`);
+  } else if (includes([m, l], props.size)) {
+    padding = math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
+  }
+  return css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", "}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;');
+};
+const colorStyles = props => {
+  const {
+    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');
+  }
+  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.8'
+}).withConfig({
+  displayName: "StyledStatusIndicator",
+  componentId: "sc-16t9if3-0"
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledStatusIndicator.defaultProps = {
+  size: 'medium',
+  theme: DEFAULT_THEME
+};
+
+export { StyledStatusIndicator };

package/dist/esm/styled/StyledStatusIndicatorBase.js

@@ -0,0 +1,39 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { keyframes, css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getStatusBorderOffset, getStatusSize, TRANSITION_DURATION, getStatusColor } from './utility.js';
+
+const COMPONENT_ID = 'avatars.status-indicator.base';
+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);
+};
+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;
+  }
+  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
+};
+const StyledStatusIndicatorBase = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledStatusIndicatorBase",
+  componentId: "sc-1rininy-0"
+})(["transition:inherit;", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledStatusIndicatorBase.defaultProps = {
+  theme: DEFAULT_THEME,
+  size: 'small'
+};
+
+export { StyledStatusIndicatorBase };

package/dist/esm/styled/StyledText.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.8'
+}).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/esm/styled/utility.js

@@ -0,0 +1,52 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { getColorV8 } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+import { SIZE } from '../types/index.js';
+
+const [xxs, xs, s, m, l] = SIZE;
+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';
+  }
+}
+function getStatusBorderOffset(props) {
+  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) {
+    case xxs:
+      return math(`${props.theme.space.base}px - ${offset}`);
+    case xs:
+      return math(`${props.theme.space.base * 2}px - (${offset} * 2)`);
+    case s:
+      return math(`${props.theme.space.base * 3}px ${isActive ? '' : `- (${offset} * 2)`}`);
+    case m:
+    case l:
+      return math(`${props.theme.space.base * 4}px ${isActive ? '' : `- (${offset} * 2)`}`);
+    default:
+      return '0';
+  }
+}
+function includes(array, element) {
+  return array.includes(element);
+}
+
+export { TRANSITION_DURATION, getStatusBorderOffset, getStatusColor, getStatusSize, includes };

package/dist/esm/types/index.js

@@ -0,0 +1,10 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
+const STATUS = ['available', 'away', 'transfers', 'offline'];
+
+export { SIZE, STATUS };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -37,21 +36,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
-
 var _g$1;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgClockStroke$1 = function SvgClockStroke(props) {
@@ -138,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.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -206,7 +190,7 @@ const colorStyles$2 = props => {
 };
 const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -245,7 +229,7 @@ const colorStyles$1 = props => {
 };
 const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -321,7 +305,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.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -334,7 +318,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.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -350,7 +334,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -362,7 +346,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.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -372,7 +356,7 @@ StyledStandaloneStatusIndicator.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const TextComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledText, _extends$4({
+const TextComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledText, Object.assign({
   ref: ref
 }, props)));
 TextComponent.displayName = 'Avatar.Text';
@@ -407,7 +391,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
   }, [computedStatus, badge]);
   const shouldValidate = computedStatus !== undefined;
   const statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
-  return React__namespace.default.createElement(StyledAvatar, _extends$4({
+  return React__namespace.default.createElement(StyledAvatar, Object.assign({
     ref: ref,
     isSystem: isSystem,
     size: size,
@@ -467,7 +451,7 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
     'aria-label': label
   }, 'aria-label', defaultLabel);
   return (
-    React__namespace.default.createElement(StyledStandaloneStatus, _extends$4({
+    React__namespace.default.createElement(StyledStandaloneStatus, Object.assign({
       role: "status",
       ref: ref
     }, props), React__namespace.default.createElement(StyledStandaloneStatusIndicator, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.0.0-next.7",
+  "version": "9.0.0-next.8",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -25,13 +25,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.65.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.7",
+    "@zendeskgarden/react-theming": "^9.0.0-next.8",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
+  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
 }

package/dist/index.esm.js

@@ -1,471 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import * as React from 'react';
-import React__default, { forwardRef, useMemo, Children } from 'react';
-import PropTypes from 'prop-types';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getLineHeight, useText } from '@zendeskgarden/react-theming';
-import styled, { keyframes, css } from 'styled-components';
-import { math } from 'polished';
-
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
-
-var _g$1;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var SvgClockStroke$1 = function SvgClockStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: 6,
-    cy: 6,
-    r: 5.5
-  }), /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M5.5 3v3.5H8"
-  }))));
-};
-
-var _g;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var SvgClockStroke = function SvgClockStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 7.5
-  }), /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M7.5 3v5.5H11"
-  }))));
-};
-
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
-  })));
-};
-
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
-  })));
-};
-
-const SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
-const STATUS = ['available', 'away', 'transfers', 'offline'];
-
-const COMPONENT_ID$6 = 'avatars.text';
-const StyledText = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledText",
-  componentId: "sc-1a6hivh-0"
-})(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledText.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const [xxs$1, xs$1, s$1, m$1, l$1] = SIZE;
-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';
-  }
-}
-function getStatusBorderOffset(props) {
-  return props.size === xxs$1 ? math(`${props.theme.shadowWidths.sm} - 1`) : props.theme.shadowWidths.sm;
-}
-function getStatusSize(props, offset) {
-  const isActive = props.type === 'active';
-  switch (props.size) {
-    case xxs$1:
-      return math(`${props.theme.space.base}px - ${offset}`);
-    case xs$1:
-      return math(`${props.theme.space.base * 2}px - (${offset} * 2)`);
-    case s$1:
-      return math(`${props.theme.space.base * 3}px ${isActive ? '' : `- (${offset} * 2)`}`);
-    case m$1:
-    case l$1:
-      return math(`${props.theme.space.base * 4}px ${isActive ? '' : `- (${offset} * 2)`}`);
-    default:
-      return '0';
-  }
-}
-function includes(array, element) {
-  return array.includes(element);
-}
-
-const COMPONENT_ID$5 = 'avatars.status-indicator.base';
-const iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-const sizeStyles$3 = 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);
-};
-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;
-  }
-  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, props.theme.palette.white);
-};
-const StyledStatusIndicatorBase = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledStatusIndicatorBase",
-  componentId: "sc-1rininy-0"
-})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledStatusIndicatorBase.defaultProps = {
-  theme: DEFAULT_THEME,
-  size: 'small'
-};
-
-const COMPONENT_ID$4 = 'avatars.status_indicator';
-const [xxs, xs, s, m, l] = SIZE;
-const sizeStyles$2 = props => {
-  const isVisible = !includes([xxs, xs], props.size);
-  const borderWidth = getStatusBorderOffset(props);
-  let padding = '0';
-  if (props.size === s) {
-    padding = math(`${props.theme.space.base + 1}px - (${borderWidth} * 2)`);
-  } else if (includes([m, l], props.size)) {
-    padding = math(`${props.theme.space.base + 3}px - (${borderWidth} * 2)`);
-  }
-  return css(["max-width:calc(2em + (", " * 3));box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", "}"], borderWidth, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;');
-};
-const colorStyles$1 = props => {
-  const {
-    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');
-  }
-  return css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
-};
-const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledStatusIndicator",
-  componentId: "sc-16t9if3-0"
-})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledStatusIndicator.defaultProps = {
-  size: 'medium',
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'avatars.avatar';
-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;
-  }
-  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));
-};
-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 sizeStyles$1 = props => {
-  let boxShadow;
-  let borderRadius;
-  let size;
-  let fontSize;
-  let svgSize;
-  if (props.size === 'extraextrasmall') {
-    boxShadow = `0 0 0 ${math(`${props.theme.shadowWidths.sm} - 1`)}`;
-    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') {
-    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    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') {
-    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    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') {
-    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? math(`${props.theme.borderRadii.md} + 1`) : '50%';
-    size = `${props.theme.space.base * 12}px`;
-    fontSize = props.theme.fontSizes.xl;
-    svgSize = `${props.theme.space.base * 6}px`;
-  } else {
-    boxShadow = `inset 0 0 0 ${props.theme.shadowWidths.sm}`;
-    borderRadius = props.isSystem ? props.theme.borderRadii.md : '50%';
-    size = `${props.theme.space.base * 10}px`;
-    fontSize = props.theme.fontSizes.lg;
-    svgSize = `${props.theme.space.base * 4}px`;
-  }
-  return css(["border-radius:", ";width:", " !important;height:", " !important;::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
-};
-const StyledAvatar = styled.figure.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledAvatar",
-  componentId: "sc-608m04-0"
-})(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, props => sizeStyles$1(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledAvatar.defaultProps = {
-  size: 'medium',
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'avatars.status-indicator.status';
-const StyledStandaloneStatus = styled.figure.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
-}).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$2, props));
-StyledStandaloneStatus.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'avatars.status-indicator.caption';
-function sizeStyles(props) {
-  const marginRule = `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 2}px;`;
-  return css(["", " line-height:", ";font-size:", ";"], marginRule, getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.theme.fontSizes.md);
-}
-const StyledStandaloneStatusCaption = styled.figcaption.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledStandaloneStatusCaption",
-  componentId: "sc-aalyk1-0"
-})(["", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledStandaloneStatusCaption.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'avatars.status-indicator.indicator';
-const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledStandaloneStatusIndicator",
-  componentId: "sc-1xt1heq-0"
-})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledStandaloneStatusIndicator.defaultProps = {
-  type: 'offline',
-  theme: DEFAULT_THEME
-};
-
-const TextComponent = forwardRef((props, ref) => React__default.createElement(StyledText, _extends$4({
-  ref: ref
-}, props)));
-TextComponent.displayName = 'Avatar.Text';
-const Text = TextComponent;
-
-const AvatarComponent = forwardRef((_ref, ref) => {
-  let {
-    isSystem,
-    size,
-    status,
-    children,
-    badge,
-    surfaceColor,
-    backgroundColor,
-    foregroundColor,
-    ...props
-  } = _ref;
-  const computedStatus = badge === undefined ? status : 'active';
-  let ClockIcon = SvgClockStroke$1;
-  let ArrowLeftIcon = SvgArrowLeftSmStroke$1;
-  if (['large', 'medium'].includes(size)) {
-    ClockIcon = SvgClockStroke;
-    ArrowLeftIcon = SvgArrowLeftSmStroke;
-  }
-  const defaultStatusLabel = useMemo(() => {
-    let statusMessage = computedStatus;
-    if (computedStatus === 'active') {
-      const count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
-      statusMessage = `active. ${count > 0 ? `${count} notification${count > 1 ? 's' : ''}` : 'no notifications'}`;
-    }
-    return ['status'].concat(statusMessage || []).join(': ');
-  }, [computedStatus, badge]);
-  const shouldValidate = computedStatus !== undefined;
-  const statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
-  return React__default.createElement(StyledAvatar, _extends$4({
-    ref: ref,
-    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,
-    "aria-label": statusLabel,
-    as: "figcaption"
-  }, computedStatus === 'active' ? React__default.createElement("span", {
-    "aria-hidden": "true"
-  }, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
-    "data-icon-status": computedStatus
-  }) : null, computedStatus === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
-    "data-icon-status": computedStatus
-  }) : null)));
-});
-AvatarComponent.displayName = 'Avatar';
-AvatarComponent.propTypes = {
-  backgroundColor: PropTypes.string,
-  foregroundColor: PropTypes.string,
-  surfaceColor: PropTypes.string,
-  isSystem: PropTypes.bool,
-  badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  size: PropTypes.oneOf(SIZE),
-  status: PropTypes.oneOf(STATUS),
-  statusLabel: PropTypes.string
-};
-AvatarComponent.defaultProps = {
-  size: 'medium'
-};
-const Avatar = AvatarComponent;
-Avatar.Text = Text;
-
-const StatusIndicator = forwardRef((_ref, ref) => {
-  let {
-    children,
-    type,
-    isCompact,
-    'aria-label': label,
-    ...props
-  } = _ref;
-  let ClockIcon = SvgClockStroke;
-  let ArrowLeftIcon = SvgArrowLeftSmStroke;
-  if (isCompact) {
-    ClockIcon = SvgClockStroke$1;
-    ArrowLeftIcon = SvgArrowLeftSmStroke$1;
-  }
-  const defaultLabel = useMemo(() => ['status'].concat(type || []).join(': '), [type]);
-  const ariaLabel = useText(StatusIndicator, {
-    'aria-label': label
-  }, 'aria-label', defaultLabel);
-  return (
-    React__default.createElement(StyledStandaloneStatus, _extends$4({
-      role: "status",
-      ref: ref
-    }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
-      role: "img",
-      type: type,
-      size: isCompact ? 'small' : 'medium',
-      "aria-label": ariaLabel
-    }, type === 'away' ? React__default.createElement(ClockIcon, {
-      "data-icon-status": type,
-      "aria-hidden": "true"
-    }) : null, type === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
-      "data-icon-status": type,
-      "aria-hidden": "true"
-    }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children))
-  );
-});
-StatusIndicator.displayName = 'StatusIndicator';
-StatusIndicator.propTypes = {
-  type: PropTypes.oneOf(STATUS),
-  isCompact: PropTypes.bool
-};
-StatusIndicator.defaultProps = {
-  type: 'offline'
-};
-
-export { Avatar, StatusIndicator };