@zendeskgarden/react-tags 9.0.0-next.2 → 9.0.0-next.20

package/dist/esm/elements/Avatar.js

@@ -0,0 +1,16 @@
+/**
+* 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 from 'react';
+import '../styled/StyledTag.js';
+import { StyledAvatar } from '../styled/StyledAvatar.js';
+import '../styled/StyledClose.js';
+
+const AvatarComponent = props => React__default.createElement(StyledAvatar, props);
+AvatarComponent.displayName = 'Tag.Avatar';
+const Avatar = AvatarComponent;
+
+export { Avatar };

package/dist/esm/elements/Close.js

@@ -0,0 +1,27 @@
+/**
+* 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/StyledTag.js';
+import '../styled/StyledAvatar.js';
+import { StyledClose } from '../styled/StyledClose.js';
+import SvgXStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js';
+import { useText } from '@zendeskgarden/react-theming';
+
+const CloseComponent = forwardRef((props, ref) => {
+  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Remove');
+  return React__default.createElement(StyledClose, Object.assign({
+    ref: ref,
+    "aria-label": ariaLabel
+  }, props, {
+    type: "button",
+    tabIndex: -1
+  }), React__default.createElement(SvgXStroke, null));
+});
+CloseComponent.displayName = 'Tag.Close';
+const Close = CloseComponent;
+
+export { Close };

package/dist/esm/elements/Tag.js

@@ -0,0 +1,43 @@
+/**
+* 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 PropTypes from 'prop-types';
+import { SIZE } from '../types/index.js';
+import { StyledTag } from '../styled/StyledTag.js';
+import '../styled/StyledAvatar.js';
+import '../styled/StyledClose.js';
+import { Close } from './Close.js';
+import { Avatar } from './Avatar.js';
+
+const TagComponent = forwardRef((_ref, ref) => {
+  let {
+    size,
+    hue,
+    ...otherProps
+  } = _ref;
+  return React__default.createElement(StyledTag, Object.assign({
+    ref: ref,
+    size: size,
+    hue: hue
+  }, otherProps));
+});
+TagComponent.displayName = 'Tag';
+TagComponent.propTypes = {
+  size: PropTypes.oneOf(SIZE),
+  hue: PropTypes.string,
+  isPill: PropTypes.bool,
+  isRound: PropTypes.bool,
+  isRegular: PropTypes.bool
+};
+TagComponent.defaultProps = {
+  size: 'medium'
+};
+const Tag = TagComponent;
+Tag.Avatar = Avatar;
+Tag.Close = Close;
+
+export { Tag };

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+/**
+* 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 { Tag } from './elements/Tag.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.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 * as React from 'react';
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgXStroke = function SvgXStroke(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", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })));
+};
+
+export { SvgXStroke as default };

package/dist/esm/styled/StyledAvatar.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 { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tags.avatar';
+const StyledAvatar = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledAvatar",
+  componentId: "sc-3kdmgt-0"
+})(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledAvatar.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledAvatar };

package/dist/esm/styled/StyledClose.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 = 'tags.close';
+const StyledClose = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledClose",
+  componentId: "sc-d6lrpn-0"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:", ";border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:", ";}&:focus{outline:none;}&:active{opacity:", ";}", ";"], props => props.theme.opacity[1000], props => props.theme.opacity[1100], props => props.theme.opacity[1200], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledClose };

package/dist/esm/styled/StyledTag.js

@@ -0,0 +1,198 @@
+/**
+* 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 { readableColor, math } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledAvatar } from './StyledAvatar.js';
+import { StyledClose } from './StyledClose.js';
+
+const COMPONENT_ID = 'tags.tag_view';
+const colorStyles = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
+  let backgroundColor;
+  let foregroundColor;
+  if (hue) {
+    foregroundColor = getColor({
+      theme,
+      variable: 'foreground.onEmphasis'
+    });
+    switch (hue) {
+      case 'grey':
+      case 'neutralHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.emphasis',
+          dark: {
+            offset: -300
+          }
+        });
+        break;
+      case 'blue':
+      case 'primaryHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.primaryEmphasis'
+        });
+        break;
+      case 'red':
+      case 'dangerHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.dangerEmphasis'
+        });
+        break;
+      case 'green':
+      case 'successHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.successEmphasis'
+        });
+        break;
+      case 'yellow':
+      case 'warningHue':
+        backgroundColor = getColor({
+          theme,
+          hue: 'warningHue',
+          shade: 400
+        });
+        if (theme.colors.base === 'light') {
+          foregroundColor = getColor({
+            theme,
+            variable: 'foreground.warningEmphasis'
+          });
+        }
+        break;
+      case 'kale':
+      case 'chromeHue':
+        backgroundColor = getColor({
+          theme,
+          hue: 'chromeHue',
+          dark: {
+            shade: 500
+          },
+          light: {
+            shade: 800
+          }
+        });
+        break;
+      default:
+        {
+          const lightTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'light'
+            }
+          };
+          const darkTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'dark'
+            }
+          };
+          const variable = 'foreground.onEmphasis';
+          backgroundColor = getColor({
+            theme,
+            hue
+          });
+          foregroundColor = readableColor(backgroundColor, getColor({
+            theme: darkTheme,
+            variable
+          }), getColor({
+            theme: lightTheme,
+            variable
+          }), false );
+          break;
+        }
+    }
+  } else {
+    backgroundColor = getColor({
+      theme,
+      hue: 'neutralHue',
+      dark: {
+        shade: 800
+      },
+      light: {
+        shade: 200
+      }
+    });
+    foregroundColor = getColor({
+      theme,
+      variable: 'foreground.default'
+    });
+  }
+  return css(["background-color:", ";color:", ";&:hover{color:", ";}", ""], backgroundColor, foregroundColor, foregroundColor, focusStyles({
+    theme,
+    shadowWidth: 'sm',
+    selector: '&:focus'
+  }));
+};
+const sizeStyles = props => {
+  let borderRadius;
+  let padding;
+  let height;
+  let fontSize;
+  let minWidth;
+  let avatarSize;
+  if (props.size === 'small') {
+    borderRadius = props.theme.borderRadii.sm;
+    padding = props.theme.space.base;
+    height = props.theme.space.base * 4;
+    fontSize = props.theme.fontSizes.xs;
+    avatarSize = 0;
+  } else if (props.size === 'large') {
+    borderRadius = props.theme.borderRadii.md;
+    padding = props.theme.space.base * 3;
+    height = props.theme.space.base * 8;
+    fontSize = props.theme.fontSizes.sm;
+    avatarSize = props.theme.space.base * 6;
+  } else {
+    borderRadius = props.theme.borderRadii.sm;
+    padding = props.theme.space.base * 2;
+    height = props.theme.space.base * 5;
+    fontSize = props.theme.fontSizes.sm;
+    avatarSize = props.theme.space.base * 4;
+  }
+  let avatarBorderRadius = props.size === 'large' ? math(`${borderRadius} - 1`) : borderRadius;
+  const avatarMargin = (height - avatarSize) / 2;
+  const avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2;
+  if (props.isRound) {
+    borderRadius = '50%';
+    padding = 0;
+    minWidth = height;
+    avatarBorderRadius = '50%';
+  } else if (props.isPill) {
+    borderRadius = '100px';
+    avatarBorderRadius = '50%';
+    if (props.size === 'small') {
+      padding = props.theme.space.base * 1.5;
+      minWidth = props.theme.space.base * 6;
+    } else if (props.size === 'large') {
+      minWidth = props.theme.space.base * 12;
+    } else {
+      minWidth = props.theme.space.base * 7.5;
+    }
+  }
+  return css(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, getLineHeight(height, fontSize), fontSize, minWidth ? `${minWidth - padding * 2}px` : '1ch', StyledAvatar, props.theme.rtl ? 'right' : 'left', padding - avatarMargin, props.theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, props.theme.rtl ? 'left' : 'right', padding, borderRadius, height, height);
+};
+const StyledTag = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledTag",
+  componentId: "sc-1jvbe03-0"
+})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.isRound && 'center', props => !props.isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.isRound || props.size === 'small') && 'none', StyledClose, props => props.isRound && 'none', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTag.defaultProps = {
+  size: 'medium',
+  theme: DEFAULT_THEME
+};
+
+export { StyledTag };

package/dist/esm/types/index.js

@@ -0,0 +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.
+*/
+const SIZE = ['small', 'medium', 'large'];
+
+export { SIZE };

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,33 +36,12 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-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);
-}
-
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$2 = 'tags.avatar';
-const StyledAvatar = styled__default.default(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledAvatar = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
@@ -75,38 +53,139 @@ StyledAvatar.defaultProps = {
 const COMPONENT_ID$1 = 'tags.close';
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-d6lrpn-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:", ";border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:", ";}&:focus{outline:none;}&:active{opacity:", ";}", ";"], props => props.theme.opacity[1000], props => props.theme.opacity[1100], props => props.theme.opacity[1200], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID = 'tags.tag_view';
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
   let backgroundColor;
   let foregroundColor;
-  let closeColor;
-  if (props.hue) {
-    const shade = props.hue === 'yellow' ? 400 : 600;
-    backgroundColor = reactTheming.getColor(props.hue, shade, props.theme);
-    if (props.hue === 'yellow' || props.hue === 'lemon') {
-      foregroundColor = reactTheming.getColor('yellow', 800, props.theme);
-    } else {
-      foregroundColor = polished.readableColor(backgroundColor, props.theme.palette.grey[800], props.theme.palette.white);
+  if (hue) {
+    foregroundColor = reactTheming.getColor({
+      theme,
+      variable: 'foreground.onEmphasis'
+    });
+    switch (hue) {
+      case 'grey':
+      case 'neutralHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.emphasis',
+          dark: {
+            offset: -300
+          }
+        });
+        break;
+      case 'blue':
+      case 'primaryHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.primaryEmphasis'
+        });
+        break;
+      case 'red':
+      case 'dangerHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.dangerEmphasis'
+        });
+        break;
+      case 'green':
+      case 'successHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.successEmphasis'
+        });
+        break;
+      case 'yellow':
+      case 'warningHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          hue: 'warningHue',
+          shade: 400
+        });
+        if (theme.colors.base === 'light') {
+          foregroundColor = reactTheming.getColor({
+            theme,
+            variable: 'foreground.warningEmphasis'
+          });
+        }
+        break;
+      case 'kale':
+      case 'chromeHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          hue: 'chromeHue',
+          dark: {
+            shade: 500
+          },
+          light: {
+            shade: 800
+          }
+        });
+        break;
+      default:
+        {
+          const lightTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'light'
+            }
+          };
+          const darkTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'dark'
+            }
+          };
+          const variable = 'foreground.onEmphasis';
+          backgroundColor = reactTheming.getColor({
+            theme,
+            hue
+          });
+          foregroundColor = polished.readableColor(backgroundColor, reactTheming.getColor({
+            theme: darkTheme,
+            variable
+          }), reactTheming.getColor({
+            theme: lightTheme,
+            variable
+          }), false );
+          break;
+        }
     }
   } else {
-    backgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
-    foregroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
-    closeColor = reactTheming.getColor('neutralHue', 600, props.theme);
+    backgroundColor = reactTheming.getColor({
+      theme,
+      hue: 'neutralHue',
+      dark: {
+        shade: 800
+      },
+      light: {
+        shade: 200
+      }
+    });
+    foregroundColor = reactTheming.getColor({
+      theme,
+      variable: 'foreground.default'
+    });
   }
-  return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
-    theme: props.theme,
+  return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}", ""], backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
+    theme,
     shadowWidth: 'sm',
     selector: '&:focus'
-  }), StyledClose, closeColor);
+  }));
 };
 const sizeStyles = props => {
   let borderRadius;
@@ -158,7 +237,7 @@ const sizeStyles = props => {
 };
 const StyledTag = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
@@ -169,7 +248,7 @@ StyledTag.defaultProps = {
 };
 
 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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -187,7 +266,7 @@ var SvgXStroke = function SvgXStroke(props) {
 
 const CloseComponent = React.forwardRef((props, ref) => {
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Remove');
-  return React__namespace.default.createElement(StyledClose, _extends$1({
+  return React__namespace.default.createElement(StyledClose, Object.assign({
     ref: ref,
     "aria-label": ariaLabel
   }, props, {
@@ -208,7 +287,7 @@ const TagComponent = React.forwardRef((_ref, ref) => {
     hue,
     ...otherProps
   } = _ref;
-  return React__namespace.default.createElement(StyledTag, _extends$1({
+  return React__namespace.default.createElement(StyledTag, Object.assign({
     ref: ref,
     size: size,
     hue: hue

package/dist/typings/styled/StyledAvatar.d.ts

@@ -4,8 +4,8 @@
  * 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 from 'react';
-export declare const StyledAvatar: import("styled-components").StyledComponent<({ children, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
+/// <reference types="react" />
+export declare const StyledAvatar: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/types/index.d.ts

@@ -11,7 +11,8 @@ export interface ITagProps extends HTMLAttributes<HTMLDivElement> {
     size?: (typeof SIZE)[number];
     /**
      * Sets the color of the tag. Refer to
-     * [PALETTE](/components/palette#palette)
+     * theming [colors](components/theme-object#colors)
+     * or [PALETTE](/components/palette#palette)
      * for available colors. Accepts any hex value.
      */
     hue?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tags",
-  "version": "9.0.0-next.2",
+  "version": "9.0.0-next.20",
   "description": "Components relating to tags 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"
   ],
@@ -22,18 +22,18 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.2",
-    "@zendeskgarden/svg-icons": "7.0.0"
+    "@zendeskgarden/react-theming": "^9.0.0-next.20",
+    "@zendeskgarden/svg-icons": "7.1.1"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
+  "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
 }

package/dist/index.esm.js

@@ -1,207 +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, { Children, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import { readableColor, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColor, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
-
-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);
-}
-
-const SIZE = ['small', 'medium', 'large'];
-
-const COMPONENT_ID$2 = 'tags.avatar';
-const StyledAvatar = styled(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledAvatar",
-  componentId: "sc-3kdmgt-0"
-})(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledAvatar.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'tags.close';
-const StyledClose = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledClose",
-  componentId: "sc-d6lrpn-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'tags.tag_view';
-const colorStyles = props => {
-  let backgroundColor;
-  let foregroundColor;
-  let closeColor;
-  if (props.hue) {
-    const shade = props.hue === 'yellow' ? 400 : 600;
-    backgroundColor = getColor(props.hue, shade, props.theme);
-    if (props.hue === 'yellow' || props.hue === 'lemon') {
-      foregroundColor = getColor('yellow', 800, props.theme);
-    } else {
-      foregroundColor = readableColor(backgroundColor, props.theme.palette.grey[800], props.theme.palette.white);
-    }
-  } else {
-    backgroundColor = getColor('neutralHue', 200, props.theme);
-    foregroundColor = getColor('neutralHue', 700, props.theme);
-    closeColor = getColor('neutralHue', 600, props.theme);
-  }
-  return css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, focusStyles({
-    theme: props.theme,
-    shadowWidth: 'sm',
-    selector: '&:focus'
-  }), StyledClose, closeColor);
-};
-const sizeStyles = props => {
-  let borderRadius;
-  let padding;
-  let height;
-  let fontSize;
-  let minWidth;
-  let avatarSize;
-  if (props.size === 'small') {
-    borderRadius = props.theme.borderRadii.sm;
-    padding = props.theme.space.base;
-    height = props.theme.space.base * 4;
-    fontSize = props.theme.fontSizes.xs;
-    avatarSize = 0;
-  } else if (props.size === 'large') {
-    borderRadius = props.theme.borderRadii.md;
-    padding = props.theme.space.base * 3;
-    height = props.theme.space.base * 8;
-    fontSize = props.theme.fontSizes.sm;
-    avatarSize = props.theme.space.base * 6;
-  } else {
-    borderRadius = props.theme.borderRadii.sm;
-    padding = props.theme.space.base * 2;
-    height = props.theme.space.base * 5;
-    fontSize = props.theme.fontSizes.sm;
-    avatarSize = props.theme.space.base * 4;
-  }
-  let avatarBorderRadius = props.size === 'large' ? math(`${borderRadius} - 1`) : borderRadius;
-  const avatarMargin = (height - avatarSize) / 2;
-  const avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2;
-  if (props.isRound) {
-    borderRadius = '50%';
-    padding = 0;
-    minWidth = height;
-    avatarBorderRadius = '50%';
-  } else if (props.isPill) {
-    borderRadius = '100px';
-    avatarBorderRadius = '50%';
-    if (props.size === 'small') {
-      padding = props.theme.space.base * 1.5;
-      minWidth = props.theme.space.base * 6;
-    } else if (props.size === 'large') {
-      minWidth = props.theme.space.base * 12;
-    } else {
-      minWidth = props.theme.space.base * 7.5;
-    }
-  }
-  return css(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, getLineHeight(height, fontSize), fontSize, minWidth ? `${minWidth - padding * 2}px` : '1ch', StyledAvatar, props.theme.rtl ? 'right' : 'left', padding - avatarMargin, props.theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, props.theme.rtl ? 'left' : 'right', padding, borderRadius, height, height);
-};
-const StyledTag = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTag",
-  componentId: "sc-1jvbe03-0"
-})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.isRound && 'center', props => !props.isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.isRound || props.size === 'small') && 'none', StyledClose, props => props.isRound && 'none', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTag.defaultProps = {
-  size: 'medium',
-  theme: DEFAULT_THEME
-};
-
-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 SvgXStroke = function SvgXStroke(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", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 9l6-6m0 6L3 3"
-  })));
-};
-
-const CloseComponent = forwardRef((props, ref) => {
-  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Remove');
-  return React__default.createElement(StyledClose, _extends$1({
-    ref: ref,
-    "aria-label": ariaLabel
-  }, props, {
-    type: "button",
-    tabIndex: -1
-  }), React__default.createElement(SvgXStroke, null));
-});
-CloseComponent.displayName = 'Tag.Close';
-const Close = CloseComponent;
-
-const AvatarComponent = props => React__default.createElement(StyledAvatar, props);
-AvatarComponent.displayName = 'Tag.Avatar';
-const Avatar = AvatarComponent;
-
-const TagComponent = forwardRef((_ref, ref) => {
-  let {
-    size,
-    hue,
-    ...otherProps
-  } = _ref;
-  return React__default.createElement(StyledTag, _extends$1({
-    ref: ref,
-    size: size,
-    hue: hue
-  }, otherProps));
-});
-TagComponent.displayName = 'Tag';
-TagComponent.propTypes = {
-  size: PropTypes.oneOf(SIZE),
-  hue: PropTypes.string,
-  isPill: PropTypes.bool,
-  isRound: PropTypes.bool,
-  isRegular: PropTypes.bool
-};
-TagComponent.defaultProps = {
-  size: 'medium'
-};
-const Tag = TagComponent;
-Tag.Avatar = Avatar;
-Tag.Close = Close;
-
-export { Tag };