@zendeskgarden/react-tags 8.57.1 → 8.58.0

package/dist/index.cjs.js

@@ -44,99 +44,58 @@ 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);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var SIZE = ['small', 'medium', 'large'];
+const SIZE = ['small', 'medium', 'large'];
 
-var _excluded$1 = ["children"];
-var COMPONENT_ID$2 = 'tags.avatar';
-var StyledAvatar = styled__default["default"](function (_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+const COMPONENT_ID$2 = 'tags.avatar';
+const StyledAvatar = styled__default["default"](_ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
-})(["flex-shrink:0;font-size:0;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["flex-shrink:0;font-size:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledAvatar.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'tags.close';
-var StyledClose = styled__default["default"].div.attrs({
+const COMPONENT_ID$1 = 'tags.close';
+const StyledClose = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   'aria-label': 'Press delete to remove'
 }).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;cursor:pointer;padding:0;font-size:0;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], function (props) {
-  return 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:0.8;border:0;cursor:pointer;padding:0;font-size:0;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'tags.tag_view';
-var colorStyles = function colorStyles(props) {
-  var backgroundColor;
-  var boxShadowColor;
-  var foregroundColor;
-  var closeColor;
+const COMPONENT_ID = 'tags.tag_view';
+const colorStyles = props => {
+  let backgroundColor;
+  let boxShadowColor;
+  let foregroundColor;
+  let closeColor;
   if (props.hue) {
-    var shade = props.hue === 'yellow' ? 400 : 600;
+    const shade = props.hue === 'yellow' ? 400 : 600;
     backgroundColor = reactTheming.getColor(props.hue, shade, props.theme);
     boxShadowColor = reactTheming.getColor(props.hue, shade, props.theme, 0.35);
     if (props.hue === 'yellow' || props.hue === 'lemon') {
@@ -152,13 +111,13 @@ var colorStyles = function colorStyles(props) {
   }
   return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}&:focus{box-shadow:", ";}& ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, props.theme.shadows.sm(boxShadowColor), StyledClose, closeColor);
 };
-var sizeStyles = function sizeStyles(props) {
-  var borderRadius;
-  var padding;
-  var height;
-  var fontSize;
-  var minWidth;
-  var avatarSize;
+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;
@@ -178,9 +137,9 @@ var sizeStyles = function sizeStyles(props) {
     fontSize = props.theme.fontSizes.sm;
     avatarSize = props.theme.space.base * 4;
   }
-  var avatarBorderRadius = props.size === 'large' ? polished.math("".concat(borderRadius, " - 1")) : borderRadius;
-  var avatarMargin = (height - avatarSize) / 2;
-  var avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2;
+  let avatarBorderRadius = props.size === 'large' ? polished.math(`${borderRadius} - 1`) : borderRadius;
+  const avatarMargin = (height - avatarSize) / 2;
+  const avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2;
   if (props.isRound) {
     borderRadius = '50%';
     padding = 0;
@@ -198,33 +157,15 @@ var sizeStyles = function sizeStyles(props) {
       minWidth = props.theme.space.base * 7.5;
     }
   }
-  return styled.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 ? "".concat(minWidth, "px") : "calc(".concat(padding * 2, "px + 1ch)"), height, reactTheming.getLineHeight(height, fontSize), fontSize, minWidth ? "".concat(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);
+  return styled.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, reactTheming.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);
 };
-var StyledTag = styled__default["default"].div.attrs({
+const StyledTag = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).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;}&:focus{outline:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}&[data-garden-focus-visible]{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], function (props) {
-  return props.isRound && 'center';
-}, function (props) {
-  return !props.isRegular && props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.rtl ? 'rtl' : 'ltr';
-}, function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, StyledAvatar, function (props) {
-  return (props.isRound || props.size === 'small') && 'none';
-}, StyledClose, function (props) {
-  return props.isRound && 'none';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["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;}&:focus{outline:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}&[data-garden-focus-visible]{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), props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.isRound || props.size === 'small') && 'none', StyledClose, props => props.isRound && 'none', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTag.defaultProps = {
   size: 'medium',
   theme: reactTheming.DEFAULT_THEME
@@ -241,7 +182,8 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -249,25 +191,22 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var CloseComponent = React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledClose, _extends$1({
-    ref: ref
-  }, props), React__default["default"].createElement(SvgXStroke, null));
-});
+const CloseComponent = React.forwardRef((props, ref) => React__default["default"].createElement(StyledClose, _extends$1({
+  ref: ref
+}, props), React__default["default"].createElement(SvgXStroke, null)));
 CloseComponent.displayName = 'Tag.Close';
-var Close = CloseComponent;
+const Close = CloseComponent;
 
-var AvatarComponent = function AvatarComponent(props) {
-  return React__default["default"].createElement(StyledAvatar, props);
-};
+const AvatarComponent = props => React__default["default"].createElement(StyledAvatar, props);
 AvatarComponent.displayName = 'Tag.Avatar';
-var Avatar = AvatarComponent;
-
-var _excluded = ["size", "hue"];
-var TagComponent = React.forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      hue = _ref.hue,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+const Avatar = AvatarComponent;
+
+const TagComponent = React.forwardRef((_ref, ref) => {
+  let {
+    size,
+    hue,
+    ...otherProps
+  } = _ref;
   return React__default["default"].createElement(StyledTag, _extends$1({
     ref: ref,
     size: size,
@@ -285,7 +224,7 @@ TagComponent.propTypes = {
 TagComponent.defaultProps = {
   size: 'medium'
 };
-var Tag = TagComponent;
+const Tag = TagComponent;
 Tag.Avatar = Avatar;
 Tag.Close = Close;
 

package/dist/index.esm.js

@@ -16,99 +16,58 @@ 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);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var SIZE = ['small', 'medium', 'large'];
+const SIZE = ['small', 'medium', 'large'];
 
-var _excluded$1 = ["children"];
-var COMPONENT_ID$2 = 'tags.avatar';
-var StyledAvatar = styled(function (_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+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': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
-})(["flex-shrink:0;font-size:0;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledAvatar.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'tags.close';
-var StyledClose = styled.div.attrs({
+const COMPONENT_ID$1 = 'tags.close';
+const StyledClose = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   'aria-label': 'Press delete to remove'
 }).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;cursor:pointer;padding:0;font-size:0;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;cursor:pointer;padding:0;font-size:0;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'tags.tag_view';
-var colorStyles = function colorStyles(props) {
-  var backgroundColor;
-  var boxShadowColor;
-  var foregroundColor;
-  var closeColor;
+const COMPONENT_ID = 'tags.tag_view';
+const colorStyles = props => {
+  let backgroundColor;
+  let boxShadowColor;
+  let foregroundColor;
+  let closeColor;
   if (props.hue) {
-    var shade = props.hue === 'yellow' ? 400 : 600;
+    const shade = props.hue === 'yellow' ? 400 : 600;
     backgroundColor = getColor(props.hue, shade, props.theme);
     boxShadowColor = getColor(props.hue, shade, props.theme, 0.35);
     if (props.hue === 'yellow' || props.hue === 'lemon') {
@@ -124,13 +83,13 @@ var colorStyles = function colorStyles(props) {
   }
   return css(["background-color:", ";color:", ";&:hover{color:", ";}&:focus{box-shadow:", ";}& ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, props.theme.shadows.sm(boxShadowColor), StyledClose, closeColor);
 };
-var sizeStyles = function sizeStyles(props) {
-  var borderRadius;
-  var padding;
-  var height;
-  var fontSize;
-  var minWidth;
-  var avatarSize;
+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;
@@ -150,9 +109,9 @@ var sizeStyles = function sizeStyles(props) {
     fontSize = props.theme.fontSizes.sm;
     avatarSize = props.theme.space.base * 4;
   }
-  var avatarBorderRadius = props.size === 'large' ? math("".concat(borderRadius, " - 1")) : borderRadius;
-  var avatarMargin = (height - avatarSize) / 2;
-  var avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2;
+  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;
@@ -170,33 +129,15 @@ var sizeStyles = function sizeStyles(props) {
       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 ? "".concat(minWidth, "px") : "calc(".concat(padding * 2, "px + 1ch)"), height, getLineHeight(height, fontSize), fontSize, minWidth ? "".concat(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);
+  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);
 };
-var StyledTag = styled.div.attrs({
+const StyledTag = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).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;}&:focus{outline:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}&[data-garden-focus-visible]{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], function (props) {
-  return props.isRound && 'center';
-}, function (props) {
-  return !props.isRegular && props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.rtl ? 'rtl' : 'ltr';
-}, function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, StyledAvatar, function (props) {
-  return (props.isRound || props.size === 'small') && 'none';
-}, StyledClose, function (props) {
-  return props.isRound && 'none';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["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;}&:focus{outline:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}&[data-garden-focus-visible]{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), 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
@@ -213,7 +154,8 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -221,25 +163,22 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var CloseComponent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledClose, _extends$1({
-    ref: ref
-  }, props), React__default.createElement(SvgXStroke, null));
-});
+const CloseComponent = forwardRef((props, ref) => React__default.createElement(StyledClose, _extends$1({
+  ref: ref
+}, props), React__default.createElement(SvgXStroke, null)));
 CloseComponent.displayName = 'Tag.Close';
-var Close = CloseComponent;
+const Close = CloseComponent;
 
-var AvatarComponent = function AvatarComponent(props) {
-  return React__default.createElement(StyledAvatar, props);
-};
+const AvatarComponent = props => React__default.createElement(StyledAvatar, props);
 AvatarComponent.displayName = 'Tag.Avatar';
-var Avatar = AvatarComponent;
-
-var _excluded = ["size", "hue"];
-var TagComponent = forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      hue = _ref.hue,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+const Avatar = AvatarComponent;
+
+const TagComponent = forwardRef((_ref, ref) => {
+  let {
+    size,
+    hue,
+    ...otherProps
+  } = _ref;
   return React__default.createElement(StyledTag, _extends$1({
     ref: ref,
     size: size,
@@ -257,7 +196,7 @@ TagComponent.propTypes = {
 TagComponent.defaultProps = {
   size: 'medium'
 };
-var Tag = TagComponent;
+const Tag = TagComponent;
 Tag.Avatar = Avatar;
 Tag.Close = Close;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tags",
-  "version": "8.57.1",
+  "version": "8.58.0",
   "description": "Components relating to tags in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.57.1",
+    "@zendeskgarden/react-theming": "^8.58.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "3e903f3c7013221ef01d3f81a50489505490be7b"
+  "gitHead": "07760a92573b619860e1252f6931467b9123f1b6"
 }