@zendeskgarden/react-buttons - npm Package Compare versions

Comparing version 8.57.1 to 8.58.0

dist/index.cjs.js

@@ -44,43 +44,2 @@ /**
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends$2() {
@@ -90,3 +49,2 @@ _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -98,3 +56,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -105,52 +62,12 @@ };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
+const SIZE = ['small', 'medium', 'large'];
 
-  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'];
-
-var COMPONENT_ID$5 = 'buttons.button_group_view';
-var StyledButtonGroup = styled__default["default"].div.attrs({
+const COMPONENT_ID$5 = 'buttons.button_group_view';
+const StyledButtonGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
-})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledButtonGroup.defaultProps = {
@@ -160,32 +77,27 @@ theme: reactTheming.DEFAULT_THEME
 
-var _excluded$6 = ["children", "isRotated", "theme"];
-var COMPONENT_ID$4 = 'buttons.icon';
-var sizeStyles$1 = function sizeStyles(props) {
-  var marginProperty;
+const COMPONENT_ID$4 = 'buttons.icon';
+const sizeStyles$1 = props => {
+  let marginProperty;
   if (props.position === 'start') {
-    marginProperty = "margin-".concat(props.theme.rtl ? 'left' : 'right');
+    marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
   } else if (props.position === 'end') {
-    marginProperty = "margin-".concat(props.theme.rtl ? 'right' : 'left');
+    marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
   }
   return marginProperty && styled.css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
 };
-var StyledIcon = styled__default["default"](function (_ref) {
-  var children = _ref.children;
-      _ref.isRotated;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$6);
+const StyledIcon = styled__default["default"](_ref => {
+  let {
+    children,
+    isRotated,
+    theme,
+    ...props
+  } = _ref;
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], function (props) {
-  return props.isRotated && "rotate(".concat(props.theme.rtl ? '-' : '+', "180deg)");
-}, function (props) {
-  return sizeStyles$1(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledIcon.defaultProps = {
@@ -195,4 +107,4 @@ theme: reactTheming.DEFAULT_THEME
 
-var COMPONENT_ID$3 = 'buttons.button';
-var getBorderRadius = function getBorderRadius(props) {
+const COMPONENT_ID$3 = 'buttons.button';
+const getBorderRadius = props => {
   if (props.isLink) {
@@ -205,16 +117,16 @@ return 0;
 };
-var getDisabledBackgroundColor = function getDisabledBackgroundColor(props) {
+const getDisabledBackgroundColor = props => {
   return reactTheming.getColor('neutralHue', 200, props.theme);
 };
-var getHeight = function getHeight(props) {
+const getHeight = props => {
   if (props.size === 'small') {
-    return "".concat(props.theme.space.base * 8, "px");
+    return `${props.theme.space.base * 8}px`;
   } else if (props.size === 'large') {
-    return "".concat(props.theme.space.base * 12, "px");
+    return `${props.theme.space.base * 12}px`;
   }
-  return "".concat(props.theme.space.base * 10, "px");
+  return `${props.theme.space.base * 10}px`;
 };
-var colorStyles = function colorStyles(props) {
-  var retVal;
-  var hue;
+const colorStyles = props => {
+  let retVal;
+  let hue;
   if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) {
@@ -227,10 +139,12 @@ hue = 'neutralHue';
   }
-  var shade = 600;
-  var baseColor = reactTheming.getColor(hue, shade, props.theme);
-  var hoverColor = reactTheming.getColor(hue, shade + 100, props.theme);
-  var activeColor = reactTheming.getColor(hue, shade + 200, props.theme);
-  var disabledBackgroundColor = getDisabledBackgroundColor(props);
-  var disabledForegroundColor = reactTheming.getColor(hue, shade - 200, props.theme);
-  var boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
-  var boxShadow = "\n    ".concat(props.focusInset ? 'inset' : '', "\n    ").concat(props.theme.shadows.md(polished.rgba(boxShadowColor, 0.35)));
+  const shade = 600;
+  const baseColor = reactTheming.getColor(hue, shade, props.theme);
+  const hoverColor = reactTheming.getColor(hue, shade + 100, props.theme);
+  const activeColor = reactTheming.getColor(hue, shade + 200, props.theme);
+  const disabledBackgroundColor = getDisabledBackgroundColor(props);
+  const disabledForegroundColor = reactTheming.getColor(hue, shade - 200, props.theme);
+  const boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
+  const boxShadow = `
+    ${props.focusInset ? 'inset' : ''}
+    ${props.theme.shadows.md(polished.rgba(boxShadowColor, 0.35))}`;
   if (props.isLink) {
@@ -241,6 +155,6 @@ retVal = styled.css(["background-color:transparent;color:", ";&:focus{color:", ";}&:hover,&[data-garden-focus-visible]{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, baseColor, hoverColor, activeColor, disabledForegroundColor);
   } else {
-    var borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColor('neutralHue', 300, props.theme) : baseColor;
-    var foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
-    var hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
-    var hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
+    const borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColor('neutralHue', 300, props.theme) : baseColor;
+    const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
+    const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
+    const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
     retVal = styled.css(["border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{border-color:", ";box-shadow:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, props.isNeutral && baseColor, boxShadow, !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
@@ -250,85 +164,45 @@ }
 };
-var groupStyles = function groupStyles(props) {
-  var isPrimary = props.isPrimary;
-  var rtl = props.theme.rtl;
-  var lightBorderColor = props.theme.colors.background;
-  var disabledBackgroundColor = getDisabledBackgroundColor(props);
-  return styled.css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', polished.math("".concat(props.theme.borderWidths.sm, " * -1")), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
+const groupStyles = props => {
+  const isPrimary = props.isPrimary;
+  const rtl = props.theme.rtl;
+  const lightBorderColor = props.theme.colors.background;
+  const disabledBackgroundColor = getDisabledBackgroundColor(props);
+  return styled.css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', polished.math(`${props.theme.borderWidths.sm} * -1`), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
 };
-var iconStyles$1 = function iconStyles(props) {
-  var size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
+const iconStyles$1 = props => {
+  const size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
   return styled.css(["width:", ";min-width:", ";height:", ";vertical-align:", ";"], size, size, size, props.isLink && 'middle');
 };
-var sizeStyles = function sizeStyles(props) {
-  var retVal;
+const sizeStyles = props => {
+  let retVal;
   if (props.isLink) {
     retVal = styled.css(["padding:0;font-size:inherit;"]);
   } else {
-    var height = getHeight(props);
-    var lineHeight = polished.math("".concat(height, " - (").concat(props.theme.borderWidths.sm, " * 2)"));
-    var padding;
-    var fontSize;
+    const height = getHeight(props);
+    const lineHeight = polished.math(`${height} - (${props.theme.borderWidths.sm} * 2)`);
+    let padding;
+    let fontSize;
     if (props.size === 'small') {
       fontSize = props.theme.fontSizes.sm;
-      padding = "".concat(props.theme.space.base * 3, "px");
+      padding = `${props.theme.space.base * 3}px`;
     } else {
       fontSize = props.theme.fontSizes.md;
       if (props.size === 'large') {
-        padding = "".concat(props.theme.space.base * 5, "px");
+        padding = `${props.theme.space.base * 5}px`;
       } else {
-        padding = "".concat(props.theme.space.base * 4, "px");
+        padding = `${props.theme.space.base * 4}px`;
       }
     }
-    retVal = styled.css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], polished.em(polished.math("".concat(padding, " - ").concat(props.theme.borderWidths.sm)), fontSize), height, lineHeight, fontSize);
+    retVal = styled.css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], polished.em(polished.math(`${padding} - ${props.theme.borderWidths.sm}`), fontSize), height, lineHeight, fontSize);
   }
   return retVal;
 };
-var StyledButton = styled__default["default"].button.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.57.1',
-    type: props.type || 'button'
-  };
-}).withConfig({
+const StyledButton = styled__default["default"].button.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.58.0',
+  type: props.type || 'button'
+})).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], function (props) {
-  return props.isLink ? 'inline' : 'inline-flex';
-}, function (props) {
-  return !props.isLink && 'center';
-}, function (props) {
-  return !props.isLink && 'center';
-}, function (props) {
-  return props.isLink ? 'none' : "".concat(props.theme.borders.sm, " transparent");
-}, function (props) {
-  return getBorderRadius(props);
-}, function (props) {
-  return props.isStretched ? '100%' : '';
-}, function (props) {
-  return !props.isLink && 'nowrap';
-}, function (props) {
-  return props.isLink ? 'inherit' : props.theme.fontWeights.regular;
-}, function (props) {
-  return !props.isLink && 'none';
-}, function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return props.isLink && 'none';
-}, function (props) {
-  return props.isLink ? 'underline' : 'none';
-}, function (props) {
-  return props.isLink ? 'underline' : 'none';
-}, function (props) {
-  return props.isLink ? 'underline' : 'none';
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return props.isLink && 'none';
-}, StyledIcon, function (props) {
-  return iconStyles$1(props);
-}, StyledButtonGroup, function (props) {
-  return groupStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => props.isLink ? 'none' : `${props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), props => props.isLink && 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
@@ -338,20 +212,14 @@ theme: reactTheming.DEFAULT_THEME
 
-var COMPONENT_ID$2 = 'buttons.anchor';
-var StyledAnchor = styled__default["default"](StyledButton).attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.57.1',
-    as: 'a',
-    dir: props.theme.rtl ? 'rtl' : undefined,
-    isLink: true,
-    type: undefined
-  };
-}).withConfig({
+const COMPONENT_ID$2 = 'buttons.anchor';
+const StyledAnchor = styled__default["default"](StyledButton).attrs(props => ({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.58.0',
+  as: 'a',
+  dir: props.theme.rtl ? 'rtl' : undefined,
+  isLink: true,
+  type: undefined
+})).withConfig({
   displayName: "StyledAnchor",
   componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledAnchor.defaultProps = {
@@ -372,3 +240,4 @@ theme: reactTheming.DEFAULT_THEME
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -382,14 +251,10 @@ fill: "none",
 
-var COMPONENT_ID$1 = 'buttons.external_icon';
-var StyledExternalIcon = styled__default["default"](SvgNewWindowStroke).attrs({
+const COMPONENT_ID$1 = 'buttons.external_icon';
+const StyledExternalIcon = styled__default["default"](SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
-})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], function (props) {
-  return props.theme.rtl && 'scaleX(-1)';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledExternalIcon.defaultProps = {
@@ -399,31 +264,25 @@ theme: reactTheming.DEFAULT_THEME
 
-var COMPONENT_ID = 'buttons.icon_button';
-var iconColorStyles = function iconColorStyles(props) {
-  var shade = 600;
-  var baseColor = reactTheming.getColor('neutralHue', shade, props.theme);
-  var hoverColor = reactTheming.getColor('neutralHue', shade + 100, props.theme);
-  var activeColor = reactTheming.getColor('neutralHue', shade + 200, props.theme);
+const COMPONENT_ID = 'buttons.icon_button';
+const iconColorStyles = props => {
+  const shade = 600;
+  const baseColor = reactTheming.getColor('neutralHue', shade, props.theme);
+  const hoverColor = reactTheming.getColor('neutralHue', shade + 100, props.theme);
+  const activeColor = reactTheming.getColor('neutralHue', shade + 200, props.theme);
   return styled.css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
 };
-var iconButtonStyles = function iconButtonStyles(props) {
-  var width = getHeight(props);
+const iconButtonStyles = props => {
+  const width = getHeight(props);
   return styled.css(["border:", ";padding:0;width:", ";min-width:", ";", ";&:disabled{background-color:", ";}"], props.isBasic && 'none', width, width, props.isBasic && !(props.isPrimary || props.isDanger || props.disabled) && iconColorStyles(props), !props.isPrimary && 'transparent');
 };
-var iconStyles = function iconStyles(props) {
-  var size = props.theme.iconSizes.md;
+const iconStyles = props => {
+  const size = props.theme.iconSizes.md;
   return styled.css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
 };
-var StyledIconButton = styled__default["default"](StyledButton).attrs({
+const StyledIconButton = styled__default["default"](StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], function (props) {
-  return iconButtonStyles(props);
-}, StyledIcon, function (props) {
-  return iconStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledIconButton.defaultProps = {
@@ -433,34 +292,31 @@ theme: reactTheming.DEFAULT_THEME
 
-var ButtonGroupContext = React.createContext(undefined);
-var useButtonGroupContext = function useButtonGroupContext() {
+const ButtonGroupContext = React.createContext(undefined);
+const useButtonGroupContext = () => {
   return React.useContext(ButtonGroupContext);
 };
 
-var SplitButtonContext = React.createContext(undefined);
-var useSplitButtonContext = function useSplitButtonContext() {
+const SplitButtonContext = React.createContext(undefined);
+const useSplitButtonContext = () => {
   return React.useContext(SplitButtonContext);
 };
 
-var StartIconComponent = function StartIconComponent(props) {
-  return React__default["default"].createElement(StyledIcon, _extends$2({
-    position: "start"
-  }, props));
-};
+const StartIconComponent = props => React__default["default"].createElement(StyledIcon, _extends$2({
+  position: "start"
+}, props));
 StartIconComponent.displayName = 'Button.StartIcon';
-var StartIcon = StartIconComponent;
+const StartIcon = StartIconComponent;
 
-var EndIconComponent = function EndIconComponent(props) {
-  return React__default["default"].createElement(StyledIcon, _extends$2({
-    position: "end"
-  }, props));
-};
+const EndIconComponent = props => React__default["default"].createElement(StyledIcon, _extends$2({
+  position: "end"
+}, props));
 EndIconComponent.displayName = 'Button.EndIcon';
-var EndIcon = EndIconComponent;
+const EndIcon = EndIconComponent;
 
-var ButtonComponent = React.forwardRef(function (props, ref) {
-  var buttonGroupContext = useButtonGroupContext();
-  var splitButtonContext = useSplitButtonContext();
-  var computedProps = _objectSpread2(_objectSpread2({}, props), {}, {
+const ButtonComponent = React.forwardRef((props, ref) => {
+  const buttonGroupContext = useButtonGroupContext();
+  const splitButtonContext = useSplitButtonContext();
+  let computedProps = {
+    ...props,
     focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
-  });
+  };
   if (buttonGroupContext && !props.disabled) {
@@ -470,7 +326,8 @@ if (!props.value) {
     }
-    computedProps = buttonGroupContext.getButtonProps(_objectSpread2({
+    computedProps = buttonGroupContext.getButtonProps({
       item: props.value,
       focusRef: React__default["default"].createRef(),
-      isSelected: props.value === buttonGroupContext.selectedItem
-    }, computedProps));
+      isSelected: props.value === buttonGroupContext.selectedItem,
+      ...computedProps
+    });
   }
@@ -497,17 +354,19 @@ return React__default["default"].createElement(StyledButton, _extends$2({
 };
-var Button = ButtonComponent;
+const Button = ButtonComponent;
 Button.EndIcon = EndIcon;
 Button.StartIcon = StartIcon;
 
-var _excluded$5 = ["children", "isExternal"];
-var Anchor = React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      isExternal = _ref.isExternal,
-      otherProps = _objectWithoutProperties(_ref, _excluded$5);
-  var anchorProps = otherProps;
+const Anchor = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    isExternal,
+    ...otherProps
+  } = _ref;
+  let anchorProps = otherProps;
   if (isExternal) {
-    anchorProps = _objectSpread2({
+    anchorProps = {
       target: '_blank',
-      rel: 'noopener noreferrer'
-    }, anchorProps);
+      rel: 'noopener noreferrer',
+      ...anchorProps
+    };
   }
@@ -524,22 +383,22 @@ return React__default["default"].createElement(StyledAnchor, _extends$2({
 
-var _excluded$4 = ["children", "onSelect", "selectedItem"];
-var ButtonGroup = React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      onSelect = _ref.onSelect,
-      controlledSelectedItem = _ref.selectedItem,
-      otherProps = _objectWithoutProperties(_ref, _excluded$4);
-  var _useButtonGroup = containerButtongroup.useButtonGroup({
+const ButtonGroup = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    onSelect,
     selectedItem: controlledSelectedItem,
+    ...otherProps
+  } = _ref;
+  const {
+    selectedItem,
+    getButtonProps,
+    getGroupProps
+  } = containerButtongroup.useButtonGroup({
+    selectedItem: controlledSelectedItem,
     defaultSelectedIndex: 0,
-    onSelect: onSelect
-  }),
-      selectedItem = _useButtonGroup.selectedItem,
-      getButtonProps = _useButtonGroup.getButtonProps,
-      getGroupProps = _useButtonGroup.getGroupProps;
-  var contextValue = React.useMemo(function () {
-    return {
-      selectedItem: selectedItem,
-      getButtonProps: getButtonProps
-    };
-  }, [selectedItem, getButtonProps]);
+    onSelect
+  });
+  const contextValue = React.useMemo(() => ({
+    selectedItem,
+    getButtonProps
+  }), [selectedItem, getButtonProps]);
   return React__default["default"].createElement(ButtonGroupContext.Provider, {
@@ -557,8 +416,9 @@ value: contextValue
 
-var _excluded$3 = ["children", "isRotated"];
-var IconButton = React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      isRotated = _ref.isRotated,
-      otherProps = _objectWithoutProperties(_ref, _excluded$3);
-  var focusInset = useSplitButtonContext();
+const IconButton = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    isRotated,
+    ...otherProps
+  } = _ref;
+  const focusInset = useSplitButtonContext();
   return React__default["default"].createElement(StyledIconButton, _extends$2({
@@ -600,3 +460,4 @@ ref: ref
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
@@ -608,4 +469,6 @@ fill: "currentColor",
 
-var ChevronButton = React.forwardRef(function (_ref, ref) {
-  var buttonProps = _extends$2({}, _ref);
+const ChevronButton = React.forwardRef((_ref, ref) => {
+  let {
+    ...buttonProps
+  } = _ref;
   return React__default["default"].createElement(IconButton, _extends$2({
@@ -623,6 +486,7 @@ ref: ref
 
-var _excluded$2 = ["children"];
-var SplitButton = React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded$2);
+const SplitButton = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...other
+  } = _ref;
   return React__default["default"].createElement(SplitButtonContext.Provider, {
@@ -636,6 +500,7 @@ value: true
 
-var _excluded$1 = ["isPressed"];
-var ToggleButton = React.forwardRef(function (_ref, ref) {
-  var isPressed = _ref.isPressed,
-      otherProps = _objectWithoutProperties(_ref, _excluded$1);
+const ToggleButton = React.forwardRef((_ref, ref) => {
+  let {
+    isPressed,
+    ...otherProps
+  } = _ref;
   return React__default["default"].createElement(Button, _extends$2({
@@ -647,5 +512,6 @@ "aria-pressed": isPressed,
 ToggleButton.displayName = 'ToggleButton';
-ToggleButton.propTypes = _objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
+ToggleButton.propTypes = {
+  ...Button.propTypes,
   isPressed: PropTypes__default["default"].oneOf([true, false, 'mixed'])
-});
+};
 ToggleButton.defaultProps = {
@@ -655,6 +521,7 @@ size: 'medium'
 
-var _excluded = ["isPressed"];
-var ToggleIconButton = React.forwardRef(function (_ref, ref) {
-  var isPressed = _ref.isPressed,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+const ToggleIconButton = React.forwardRef((_ref, ref) => {
+  let {
+    isPressed,
+    ...otherProps
+  } = _ref;
   return React__default["default"].createElement(IconButton, _extends$2({
@@ -666,5 +533,6 @@ "aria-pressed": isPressed,
 ToggleIconButton.displayName = 'ToggleIconButton';
-ToggleIconButton.propTypes = _objectSpread2(_objectSpread2({}, IconButton.propTypes), {}, {
+ToggleIconButton.propTypes = {
+  ...IconButton.propTypes,
   isPressed: PropTypes__default["default"].oneOf([true, false, 'mixed'])
-});
+};
 ToggleIconButton.defaultProps = {
@@ -671,0 +539,0 @@ isPill: true,

dist/index.esm.js

@@ -16,43 +16,2 @@ /**
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends$2() {
@@ -62,3 +21,2 @@ _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -70,3 +28,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -77,52 +34,12 @@ };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
+const SIZE = ['small', 'medium', 'large'];
 
-  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'];
-
-var COMPONENT_ID$5 = 'buttons.button_group_view';
-var StyledButtonGroup = styled.div.attrs({
+const COMPONENT_ID$5 = 'buttons.button_group_view';
+const StyledButtonGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
-})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledButtonGroup.defaultProps = {
@@ -132,32 +49,27 @@ theme: DEFAULT_THEME
 
-var _excluded$6 = ["children", "isRotated", "theme"];
-var COMPONENT_ID$4 = 'buttons.icon';
-var sizeStyles$1 = function sizeStyles(props) {
-  var marginProperty;
+const COMPONENT_ID$4 = 'buttons.icon';
+const sizeStyles$1 = props => {
+  let marginProperty;
   if (props.position === 'start') {
-    marginProperty = "margin-".concat(props.theme.rtl ? 'left' : 'right');
+    marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
   } else if (props.position === 'end') {
-    marginProperty = "margin-".concat(props.theme.rtl ? 'right' : 'left');
+    marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
   }
   return marginProperty && css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
 };
-var StyledIcon = styled(function (_ref) {
-  var children = _ref.children;
-      _ref.isRotated;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$6);
+const StyledIcon = styled(_ref => {
+  let {
+    children,
+    isRotated,
+    theme,
+    ...props
+  } = _ref;
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], function (props) {
-  return props.isRotated && "rotate(".concat(props.theme.rtl ? '-' : '+', "180deg)");
-}, function (props) {
-  return sizeStyles$1(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledIcon.defaultProps = {
@@ -167,4 +79,4 @@ theme: DEFAULT_THEME
 
-var COMPONENT_ID$3 = 'buttons.button';
-var getBorderRadius = function getBorderRadius(props) {
+const COMPONENT_ID$3 = 'buttons.button';
+const getBorderRadius = props => {
   if (props.isLink) {
@@ -177,16 +89,16 @@ return 0;
 };
-var getDisabledBackgroundColor = function getDisabledBackgroundColor(props) {
+const getDisabledBackgroundColor = props => {
   return getColor('neutralHue', 200, props.theme);
 };
-var getHeight = function getHeight(props) {
+const getHeight = props => {
   if (props.size === 'small') {
-    return "".concat(props.theme.space.base * 8, "px");
+    return `${props.theme.space.base * 8}px`;
   } else if (props.size === 'large') {
-    return "".concat(props.theme.space.base * 12, "px");
+    return `${props.theme.space.base * 12}px`;
   }
-  return "".concat(props.theme.space.base * 10, "px");
+  return `${props.theme.space.base * 10}px`;
 };
-var colorStyles = function colorStyles(props) {
-  var retVal;
-  var hue;
+const colorStyles = props => {
+  let retVal;
+  let hue;
   if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) {
@@ -199,10 +111,12 @@ hue = 'neutralHue';
   }
-  var shade = 600;
-  var baseColor = getColor(hue, shade, props.theme);
-  var hoverColor = getColor(hue, shade + 100, props.theme);
-  var activeColor = getColor(hue, shade + 200, props.theme);
-  var disabledBackgroundColor = getDisabledBackgroundColor(props);
-  var disabledForegroundColor = getColor(hue, shade - 200, props.theme);
-  var boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
-  var boxShadow = "\n    ".concat(props.focusInset ? 'inset' : '', "\n    ").concat(props.theme.shadows.md(rgba(boxShadowColor, 0.35)));
+  const shade = 600;
+  const baseColor = getColor(hue, shade, props.theme);
+  const hoverColor = getColor(hue, shade + 100, props.theme);
+  const activeColor = getColor(hue, shade + 200, props.theme);
+  const disabledBackgroundColor = getDisabledBackgroundColor(props);
+  const disabledForegroundColor = getColor(hue, shade - 200, props.theme);
+  const boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
+  const boxShadow = `
+    ${props.focusInset ? 'inset' : ''}
+    ${props.theme.shadows.md(rgba(boxShadowColor, 0.35))}`;
   if (props.isLink) {
@@ -213,6 +127,6 @@ retVal = css(["background-color:transparent;color:", ";&:focus{color:", ";}&:hover,&[data-garden-focus-visible]{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, baseColor, hoverColor, activeColor, disabledForegroundColor);
   } else {
-    var borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor;
-    var foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
-    var hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
-    var hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
+    const borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor;
+    const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
+    const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
+    const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
     retVal = css(["border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{border-color:", ";box-shadow:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, props.isNeutral && baseColor, boxShadow, !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
@@ -222,85 +136,45 @@ }
 };
-var groupStyles = function groupStyles(props) {
-  var isPrimary = props.isPrimary;
-  var rtl = props.theme.rtl;
-  var lightBorderColor = props.theme.colors.background;
-  var disabledBackgroundColor = getDisabledBackgroundColor(props);
-  return css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', math("".concat(props.theme.borderWidths.sm, " * -1")), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
+const groupStyles = props => {
+  const isPrimary = props.isPrimary;
+  const rtl = props.theme.rtl;
+  const lightBorderColor = props.theme.colors.background;
+  const disabledBackgroundColor = getDisabledBackgroundColor(props);
+  return css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', math(`${props.theme.borderWidths.sm} * -1`), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
 };
-var iconStyles$1 = function iconStyles(props) {
-  var size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
+const iconStyles$1 = props => {
+  const size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
   return css(["width:", ";min-width:", ";height:", ";vertical-align:", ";"], size, size, size, props.isLink && 'middle');
 };
-var sizeStyles = function sizeStyles(props) {
-  var retVal;
+const sizeStyles = props => {
+  let retVal;
   if (props.isLink) {
     retVal = css(["padding:0;font-size:inherit;"]);
   } else {
-    var height = getHeight(props);
-    var lineHeight = math("".concat(height, " - (").concat(props.theme.borderWidths.sm, " * 2)"));
-    var padding;
-    var fontSize;
+    const height = getHeight(props);
+    const lineHeight = math(`${height} - (${props.theme.borderWidths.sm} * 2)`);
+    let padding;
+    let fontSize;
     if (props.size === 'small') {
       fontSize = props.theme.fontSizes.sm;
-      padding = "".concat(props.theme.space.base * 3, "px");
+      padding = `${props.theme.space.base * 3}px`;
     } else {
       fontSize = props.theme.fontSizes.md;
       if (props.size === 'large') {
-        padding = "".concat(props.theme.space.base * 5, "px");
+        padding = `${props.theme.space.base * 5}px`;
       } else {
-        padding = "".concat(props.theme.space.base * 4, "px");
+        padding = `${props.theme.space.base * 4}px`;
       }
     }
-    retVal = css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], em(math("".concat(padding, " - ").concat(props.theme.borderWidths.sm)), fontSize), height, lineHeight, fontSize);
+    retVal = css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], em(math(`${padding} - ${props.theme.borderWidths.sm}`), fontSize), height, lineHeight, fontSize);
   }
   return retVal;
 };
-var StyledButton = styled.button.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.57.1',
-    type: props.type || 'button'
-  };
-}).withConfig({
+const StyledButton = styled.button.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.58.0',
+  type: props.type || 'button'
+})).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], function (props) {
-  return props.isLink ? 'inline' : 'inline-flex';
-}, function (props) {
-  return !props.isLink && 'center';
-}, function (props) {
-  return !props.isLink && 'center';
-}, function (props) {
-  return props.isLink ? 'none' : "".concat(props.theme.borders.sm, " transparent");
-}, function (props) {
-  return getBorderRadius(props);
-}, function (props) {
-  return props.isStretched ? '100%' : '';
-}, function (props) {
-  return !props.isLink && 'nowrap';
-}, function (props) {
-  return props.isLink ? 'inherit' : props.theme.fontWeights.regular;
-}, function (props) {
-  return !props.isLink && 'none';
-}, function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return props.isLink && 'none';
-}, function (props) {
-  return props.isLink ? 'underline' : 'none';
-}, function (props) {
-  return props.isLink ? 'underline' : 'none';
-}, function (props) {
-  return props.isLink ? 'underline' : 'none';
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return props.isLink && 'none';
-}, StyledIcon, function (props) {
-  return iconStyles$1(props);
-}, StyledButtonGroup, function (props) {
-  return groupStyles(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => props.isLink ? 'none' : `${props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), props => props.isLink && 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
@@ -310,20 +184,14 @@ theme: DEFAULT_THEME
 
-var COMPONENT_ID$2 = 'buttons.anchor';
-var StyledAnchor = styled(StyledButton).attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.57.1',
-    as: 'a',
-    dir: props.theme.rtl ? 'rtl' : undefined,
-    isLink: true,
-    type: undefined
-  };
-}).withConfig({
+const COMPONENT_ID$2 = 'buttons.anchor';
+const StyledAnchor = styled(StyledButton).attrs(props => ({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.58.0',
+  as: 'a',
+  dir: props.theme.rtl ? 'rtl' : undefined,
+  isLink: true,
+  type: undefined
+})).withConfig({
   displayName: "StyledAnchor",
   componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledAnchor.defaultProps = {
@@ -344,3 +212,4 @@ theme: DEFAULT_THEME
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
@@ -354,14 +223,10 @@ fill: "none",
 
-var COMPONENT_ID$1 = 'buttons.external_icon';
-var StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
+const COMPONENT_ID$1 = 'buttons.external_icon';
+const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
-})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], function (props) {
-  return props.theme.rtl && 'scaleX(-1)';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledExternalIcon.defaultProps = {
@@ -371,31 +236,25 @@ theme: DEFAULT_THEME
 
-var COMPONENT_ID = 'buttons.icon_button';
-var iconColorStyles = function iconColorStyles(props) {
-  var shade = 600;
-  var baseColor = getColor('neutralHue', shade, props.theme);
-  var hoverColor = getColor('neutralHue', shade + 100, props.theme);
-  var activeColor = getColor('neutralHue', shade + 200, props.theme);
+const COMPONENT_ID = 'buttons.icon_button';
+const iconColorStyles = props => {
+  const shade = 600;
+  const baseColor = getColor('neutralHue', shade, props.theme);
+  const hoverColor = getColor('neutralHue', shade + 100, props.theme);
+  const activeColor = getColor('neutralHue', shade + 200, props.theme);
   return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
 };
-var iconButtonStyles = function iconButtonStyles(props) {
-  var width = getHeight(props);
+const iconButtonStyles = props => {
+  const width = getHeight(props);
   return css(["border:", ";padding:0;width:", ";min-width:", ";", ";&:disabled{background-color:", ";}"], props.isBasic && 'none', width, width, props.isBasic && !(props.isPrimary || props.isDanger || props.disabled) && iconColorStyles(props), !props.isPrimary && 'transparent');
 };
-var iconStyles = function iconStyles(props) {
-  var size = props.theme.iconSizes.md;
+const iconStyles = props => {
+  const size = props.theme.iconSizes.md;
   return css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
 };
-var StyledIconButton = styled(StyledButton).attrs({
+const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], function (props) {
-  return iconButtonStyles(props);
-}, StyledIcon, function (props) {
-  return iconStyles(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledIconButton.defaultProps = {
@@ -405,34 +264,31 @@ theme: DEFAULT_THEME
 
-var ButtonGroupContext = createContext(undefined);
-var useButtonGroupContext = function useButtonGroupContext() {
+const ButtonGroupContext = createContext(undefined);
+const useButtonGroupContext = () => {
   return useContext(ButtonGroupContext);
 };
 
-var SplitButtonContext = createContext(undefined);
-var useSplitButtonContext = function useSplitButtonContext() {
+const SplitButtonContext = createContext(undefined);
+const useSplitButtonContext = () => {
   return useContext(SplitButtonContext);
 };
 
-var StartIconComponent = function StartIconComponent(props) {
-  return React__default.createElement(StyledIcon, _extends$2({
-    position: "start"
-  }, props));
-};
+const StartIconComponent = props => React__default.createElement(StyledIcon, _extends$2({
+  position: "start"
+}, props));
 StartIconComponent.displayName = 'Button.StartIcon';
-var StartIcon = StartIconComponent;
+const StartIcon = StartIconComponent;
 
-var EndIconComponent = function EndIconComponent(props) {
-  return React__default.createElement(StyledIcon, _extends$2({
-    position: "end"
-  }, props));
-};
+const EndIconComponent = props => React__default.createElement(StyledIcon, _extends$2({
+  position: "end"
+}, props));
 EndIconComponent.displayName = 'Button.EndIcon';
-var EndIcon = EndIconComponent;
+const EndIcon = EndIconComponent;
 
-var ButtonComponent = forwardRef(function (props, ref) {
-  var buttonGroupContext = useButtonGroupContext();
-  var splitButtonContext = useSplitButtonContext();
-  var computedProps = _objectSpread2(_objectSpread2({}, props), {}, {
+const ButtonComponent = forwardRef((props, ref) => {
+  const buttonGroupContext = useButtonGroupContext();
+  const splitButtonContext = useSplitButtonContext();
+  let computedProps = {
+    ...props,
     focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
-  });
+  };
   if (buttonGroupContext && !props.disabled) {
@@ -442,7 +298,8 @@ if (!props.value) {
     }
-    computedProps = buttonGroupContext.getButtonProps(_objectSpread2({
+    computedProps = buttonGroupContext.getButtonProps({
       item: props.value,
       focusRef: React__default.createRef(),
-      isSelected: props.value === buttonGroupContext.selectedItem
-    }, computedProps));
+      isSelected: props.value === buttonGroupContext.selectedItem,
+      ...computedProps
+    });
   }
@@ -469,17 +326,19 @@ return React__default.createElement(StyledButton, _extends$2({
 };
-var Button = ButtonComponent;
+const Button = ButtonComponent;
 Button.EndIcon = EndIcon;
 Button.StartIcon = StartIcon;
 
-var _excluded$5 = ["children", "isExternal"];
-var Anchor = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      isExternal = _ref.isExternal,
-      otherProps = _objectWithoutProperties(_ref, _excluded$5);
-  var anchorProps = otherProps;
+const Anchor = forwardRef((_ref, ref) => {
+  let {
+    children,
+    isExternal,
+    ...otherProps
+  } = _ref;
+  let anchorProps = otherProps;
   if (isExternal) {
-    anchorProps = _objectSpread2({
+    anchorProps = {
       target: '_blank',
-      rel: 'noopener noreferrer'
-    }, anchorProps);
+      rel: 'noopener noreferrer',
+      ...anchorProps
+    };
   }
@@ -496,22 +355,22 @@ return React__default.createElement(StyledAnchor, _extends$2({
 
-var _excluded$4 = ["children", "onSelect", "selectedItem"];
-var ButtonGroup = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      onSelect = _ref.onSelect,
-      controlledSelectedItem = _ref.selectedItem,
-      otherProps = _objectWithoutProperties(_ref, _excluded$4);
-  var _useButtonGroup = useButtonGroup({
+const ButtonGroup = forwardRef((_ref, ref) => {
+  let {
+    children,
+    onSelect,
     selectedItem: controlledSelectedItem,
+    ...otherProps
+  } = _ref;
+  const {
+    selectedItem,
+    getButtonProps,
+    getGroupProps
+  } = useButtonGroup({
+    selectedItem: controlledSelectedItem,
     defaultSelectedIndex: 0,
-    onSelect: onSelect
-  }),
-      selectedItem = _useButtonGroup.selectedItem,
-      getButtonProps = _useButtonGroup.getButtonProps,
-      getGroupProps = _useButtonGroup.getGroupProps;
-  var contextValue = useMemo(function () {
-    return {
-      selectedItem: selectedItem,
-      getButtonProps: getButtonProps
-    };
-  }, [selectedItem, getButtonProps]);
+    onSelect
+  });
+  const contextValue = useMemo(() => ({
+    selectedItem,
+    getButtonProps
+  }), [selectedItem, getButtonProps]);
   return React__default.createElement(ButtonGroupContext.Provider, {
@@ -529,8 +388,9 @@ value: contextValue
 
-var _excluded$3 = ["children", "isRotated"];
-var IconButton = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      isRotated = _ref.isRotated,
-      otherProps = _objectWithoutProperties(_ref, _excluded$3);
-  var focusInset = useSplitButtonContext();
+const IconButton = forwardRef((_ref, ref) => {
+  let {
+    children,
+    isRotated,
+    ...otherProps
+  } = _ref;
+  const focusInset = useSplitButtonContext();
   return React__default.createElement(StyledIconButton, _extends$2({
@@ -572,3 +432,4 @@ ref: ref
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
@@ -580,4 +441,6 @@ fill: "currentColor",
 
-var ChevronButton = forwardRef(function (_ref, ref) {
-  var buttonProps = _extends$2({}, _ref);
+const ChevronButton = forwardRef((_ref, ref) => {
+  let {
+    ...buttonProps
+  } = _ref;
   return React__default.createElement(IconButton, _extends$2({
@@ -595,6 +458,7 @@ ref: ref
 
-var _excluded$2 = ["children"];
-var SplitButton = forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded$2);
+const SplitButton = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...other
+  } = _ref;
   return React__default.createElement(SplitButtonContext.Provider, {
@@ -608,6 +472,7 @@ value: true
 
-var _excluded$1 = ["isPressed"];
-var ToggleButton = forwardRef(function (_ref, ref) {
-  var isPressed = _ref.isPressed,
-      otherProps = _objectWithoutProperties(_ref, _excluded$1);
+const ToggleButton = forwardRef((_ref, ref) => {
+  let {
+    isPressed,
+    ...otherProps
+  } = _ref;
   return React__default.createElement(Button, _extends$2({
@@ -619,5 +484,6 @@ "aria-pressed": isPressed,
 ToggleButton.displayName = 'ToggleButton';
-ToggleButton.propTypes = _objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
+ToggleButton.propTypes = {
+  ...Button.propTypes,
   isPressed: PropTypes.oneOf([true, false, 'mixed'])
-});
+};
 ToggleButton.defaultProps = {
@@ -627,6 +493,7 @@ size: 'medium'
 
-var _excluded = ["isPressed"];
-var ToggleIconButton = forwardRef(function (_ref, ref) {
-  var isPressed = _ref.isPressed,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+const ToggleIconButton = forwardRef((_ref, ref) => {
+  let {
+    isPressed,
+    ...otherProps
+  } = _ref;
   return React__default.createElement(IconButton, _extends$2({
@@ -638,5 +505,6 @@ "aria-pressed": isPressed,
 ToggleIconButton.displayName = 'ToggleIconButton';
-ToggleIconButton.propTypes = _objectSpread2(_objectSpread2({}, IconButton.propTypes), {}, {
+ToggleIconButton.propTypes = {
+  ...IconButton.propTypes,
   isPressed: PropTypes.oneOf([true, false, 'mixed'])
-});
+};
 ToggleIconButton.defaultProps = {
@@ -643,0 +511,0 @@ isPill: true,

package.json

 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "8.57.1",
+  "version": "8.58.0",
   "description": "Components relating to buttons in the Garden Design System",
@@ -36,3 +36,3 @@ "license": "Apache-2.0",
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.57.1",
+    "@zendeskgarden/react-theming": "^8.58.0",
     "@zendeskgarden/svg-icons": "6.33.0"
@@ -50,3 +50,3 @@ },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "3e903f3c7013221ef01d3f81a50489505490be7b"
+  "gitHead": "07760a92573b619860e1252f6931467b9123f1b6"
 }

No alert changes

Worsened metrics

Total package byte prevSize

71378

decreased by-10.53%

Lines of code

1326

decreased by-14.34%

No dependency changes