@zendeskgarden/react-buttons 8.46.0 → 8.48.0

package/dist/index.cjs.js

@@ -27,14 +27,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -48,14 +46,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -63,19 +56,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    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;
@@ -151,9 +137,9 @@ function _objectWithoutProperties(source, excluded) {
 }
 
 var COMPONENT_ID$5 = 'buttons.button_group_view';
-var StyledButtonGroup = styled__default['default'].div.attrs({
+var StyledButtonGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -177,15 +163,15 @@ var sizeStyles$1 = function sizeStyles(props) {
   }
   return marginProperty && styled.css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
 };
-var StyledIcon = styled__default['default'](function (_ref) {
+var StyledIcon = styled__default["default"](function (_ref) {
   var children = _ref.children;
       _ref.isRotated;
       _ref.theme;
       var props = _objectWithoutProperties(_ref, _excluded$6);
-  return React__default['default'].cloneElement(React.Children.only(children), props);
+  return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -291,10 +277,10 @@ var sizeStyles = function sizeStyles(props) {
   }
   return retVal;
 };
-var StyledButton = styled__default['default'].button.attrs(function (props) {
+var StyledButton = styled__default["default"].button.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     type: props.type || 'button'
   };
 }).withConfig({
@@ -344,10 +330,10 @@ StyledButton.defaultProps = {
 };
 
 var COMPONENT_ID$2 = 'buttons.anchor';
-var StyledAnchor = styled__default['default'](StyledButton).attrs(function (props) {
+var StyledAnchor = styled__default["default"](StyledButton).attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     as: 'a',
     dir: props.theme.rtl ? 'rtl' : undefined,
     isLink: true,
@@ -365,30 +351,30 @@ StyledAnchor.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$1;
 
-var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M10.5 8.5V10c0 .3-.2.5-.5.5H2c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h1.5M6 6l4-4m-3.5-.5H10c.3 0 .5.2.5.5v3.5"
-});
+function _extends$1() { _extends$1 = Object.assign || 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 SvgNewWindowStroke(props) {
+var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
-    viewBox: "0 0 12 12",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M10.5 8.5V10c0 .3-.2.5-.5.5H2c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h1.5M6 6l4-4m-3.5-.5H10c.3 0 .5.2.5.5v3.5"
+  })));
+};
 
 var COMPONENT_ID$1 = 'buttons.external_icon';
-var StyledExternalIcon = styled__default['default'](SvgNewWindowStroke).attrs({
+var StyledExternalIcon = styled__default["default"](SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -417,9 +403,9 @@ var iconStyles = function iconStyles(props) {
   var 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({
+var StyledIconButton = styled__default["default"](StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -444,7 +430,23 @@ var useSplitButtonContext = function useSplitButtonContext() {
   return React.useContext(SplitButtonContext);
 };
 
-var Button = React__default['default'].forwardRef(function (props, ref) {
+var StartIconComponent = function StartIconComponent(props) {
+  return React__default["default"].createElement(StyledIcon, _extends$2({
+    position: "start"
+  }, props));
+};
+StartIconComponent.displayName = 'Button.StartIcon';
+var StartIcon = StartIconComponent;
+
+var EndIconComponent = function EndIconComponent(props) {
+  return React__default["default"].createElement(StyledIcon, _extends$2({
+    position: "end"
+  }, props));
+};
+EndIconComponent.displayName = 'Button.EndIcon';
+var EndIcon = EndIconComponent;
+
+var ButtonComponent = React.forwardRef(function (props, ref) {
   var buttonGroupContext = useButtonGroupContext();
   var splitButtonContext = useSplitButtonContext();
   var computedProps = _objectSpread2(_objectSpread2({}, props), {}, {
@@ -456,44 +458,36 @@ var Button = React__default['default'].forwardRef(function (props, ref) {
     }
     computedProps = buttonGroupContext.getButtonProps(_objectSpread2({
       item: props.value,
-      focusRef: React__default['default'].createRef(),
+      focusRef: React__default["default"].createRef(),
       isSelected: props.value === buttonGroupContext.selectedItem
     }, computedProps));
   }
-  return React__default['default'].createElement(StyledButton, _extends$2({
+  return React__default["default"].createElement(StyledButton, _extends$2({
     ref: ref
   }, computedProps));
 });
-Button.propTypes = {
-  isNeutral: PropTypes__default['default'].bool,
-  isPrimary: PropTypes__default['default'].bool,
-  isDanger: PropTypes__default['default'].bool,
-  isPill: PropTypes__default['default'].bool,
-  isBasic: PropTypes__default['default'].bool,
-  focusInset: PropTypes__default['default'].bool,
-  isLink: PropTypes__default['default'].bool,
-  isStretched: PropTypes__default['default'].bool,
-  isSelected: PropTypes__default['default'].bool,
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large'])
-};
-Button.defaultProps = {
+ButtonComponent.displayName = 'Button';
+ButtonComponent.propTypes = {
+  isNeutral: PropTypes__default["default"].bool,
+  isPrimary: PropTypes__default["default"].bool,
+  isDanger: PropTypes__default["default"].bool,
+  isPill: PropTypes__default["default"].bool,
+  isBasic: PropTypes__default["default"].bool,
+  focusInset: PropTypes__default["default"].bool,
+  isLink: PropTypes__default["default"].bool,
+  isStretched: PropTypes__default["default"].bool,
+  isSelected: PropTypes__default["default"].bool,
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large'])
+};
+ButtonComponent.defaultProps = {
   size: 'medium'
 };
-var StartIcon = function StartIcon(props) {
-  return React__default['default'].createElement(StyledIcon, _extends$2({
-    position: "start"
-  }, props));
-};
-var EndIcon = function EndIcon(props) {
-  return React__default['default'].createElement(StyledIcon, _extends$2({
-    position: "end"
-  }, props));
-};
-Button.StartIcon = StartIcon;
+var Button = ButtonComponent;
 Button.EndIcon = EndIcon;
+Button.StartIcon = StartIcon;
 
 var _excluded$5 = ["children", "isExternal"];
-var Anchor = React__default['default'].forwardRef(function (_ref, ref) {
+var Anchor = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       isExternal = _ref.isExternal,
       otherProps = _objectWithoutProperties(_ref, _excluded$5);
@@ -504,18 +498,18 @@ var Anchor = React__default['default'].forwardRef(function (_ref, ref) {
       rel: 'noopener noreferrer'
     }, anchorProps);
   }
-  return React__default['default'].createElement(StyledAnchor, _extends$2({
+  return React__default["default"].createElement(StyledAnchor, _extends$2({
     ref: ref
-  }, anchorProps), children, isExternal && React__default['default'].createElement(StyledExternalIcon, null));
+  }, anchorProps), children, isExternal && React__default["default"].createElement(StyledExternalIcon, null));
 });
 Anchor.displayName = 'Anchor';
 Anchor.propTypes = {
-  isExternal: PropTypes__default['default'].bool,
-  isDanger: PropTypes__default['default'].bool
+  isExternal: PropTypes__default["default"].bool,
+  isDanger: PropTypes__default["default"].bool
 };
 
 var _excluded$4 = ["children", "onSelect", "selectedItem"];
-var ButtonGroup = function ButtonGroup(_ref) {
+var ButtonGroup = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       onSelect = _ref.onSelect,
       controlledSelectedItem = _ref.selectedItem,
@@ -534,39 +528,42 @@ var ButtonGroup = function ButtonGroup(_ref) {
       getButtonProps: getButtonProps
     };
   }, [selectedItem, getButtonProps]);
-  return React__default['default'].createElement(ButtonGroupContext.Provider, {
+  return React__default["default"].createElement(ButtonGroupContext.Provider, {
     value: contextValue
-  }, React__default['default'].createElement(StyledButtonGroup, getGroupProps(otherProps), children));
-};
+  }, React__default["default"].createElement(StyledButtonGroup, _extends$2({
+    ref: ref
+  }, getGroupProps(otherProps)), children));
+});
+ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = {
-  selectedItem: PropTypes__default['default'].any,
-  onSelect: PropTypes__default['default'].func
+  selectedItem: PropTypes__default["default"].any,
+  onSelect: PropTypes__default["default"].func
 };
 
 var _excluded$3 = ["children", "isRotated"];
-var IconButton = React__default['default'].forwardRef(function (_ref, ref) {
+var IconButton = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       isRotated = _ref.isRotated,
       otherProps = _objectWithoutProperties(_ref, _excluded$3);
   var focusInset = useSplitButtonContext();
-  return React__default['default'].createElement(StyledIconButton, _extends$2({
+  return React__default["default"].createElement(StyledIconButton, _extends$2({
     ref: ref
   }, otherProps, {
     focusInset: otherProps.focusInset || focusInset
-  }), React__default['default'].createElement(StyledIcon, {
+  }), React__default["default"].createElement(StyledIcon, {
     isRotated: isRotated
   }, children));
 });
 IconButton.displayName = 'IconButton';
 IconButton.propTypes = {
-  isDanger: PropTypes__default['default'].bool,
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large']),
-  isNeutral: PropTypes__default['default'].bool,
-  isPrimary: PropTypes__default['default'].bool,
-  isBasic: PropTypes__default['default'].bool,
-  isPill: PropTypes__default['default'].bool,
-  focusInset: PropTypes__default['default'].bool,
-  isRotated: PropTypes__default['default'].bool
+  isDanger: PropTypes__default["default"].bool,
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large']),
+  isNeutral: PropTypes__default["default"].bool,
+  isPrimary: PropTypes__default["default"].bool,
+  isBasic: PropTypes__default["default"].bool,
+  isPill: PropTypes__default["default"].bool,
+  focusInset: PropTypes__default["default"].bool,
+  isRotated: PropTypes__default["default"].bool
 };
 IconButton.defaultProps = {
   isPill: true,
@@ -574,29 +571,29 @@ IconButton.defaultProps = {
   size: 'medium'
 };
 
-function _extends() { _extends = Object.assign || 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 _path;
 
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-});
+function _extends() { _extends = Object.assign || 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 SvgChevronDownStroke(props) {
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
 
-var ChevronButton = React__default['default'].forwardRef(function (_ref, ref) {
+var ChevronButton = React.forwardRef(function (_ref, ref) {
   var buttonProps = _extends$2({}, _ref);
-  return React__default['default'].createElement(IconButton, _extends$2({
+  return React__default["default"].createElement(IconButton, _extends$2({
     ref: ref
-  }, buttonProps), React__default['default'].createElement(SvgChevronDownStroke, null));
+  }, buttonProps), React__default["default"].createElement(SvgChevronDownStroke, null));
 });
 ChevronButton.displayName = 'ChevronButton';
 ChevronButton.propTypes = IconButton.propTypes;
@@ -607,49 +604,50 @@ ChevronButton.defaultProps = {
 };
 
 var _excluded$2 = ["children"];
-var SplitButton = function SplitButton(_ref) {
+var SplitButton = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       other = _objectWithoutProperties(_ref, _excluded$2);
-  return React__default['default'].createElement(SplitButtonContext.Provider, {
+  return React__default["default"].createElement(SplitButtonContext.Provider, {
     value: true
-  }, React__default['default'].createElement(StyledButtonGroup, other, children));
-};
+  }, React__default["default"].createElement(StyledButtonGroup, _extends$2({
+    ref: ref
+  }, other), children));
+});
+SplitButton.displayName = 'SplitButton';
 
 var _excluded$1 = ["isPressed"];
-var ToggleButton = React__default['default'].forwardRef(function (_ref, ref) {
+var ToggleButton = React.forwardRef(function (_ref, ref) {
   var isPressed = _ref.isPressed,
       otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  return React__default['default'].createElement(Button, _extends$2({
+  return React__default["default"].createElement(Button, _extends$2({
     "aria-pressed": isPressed,
     ref: ref
   }, otherProps));
 });
 ToggleButton.displayName = 'ToggleButton';
 ToggleButton.propTypes = _objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
-  isPressed: PropTypes__default['default'].oneOf([true, false, 'mixed'])
+  isPressed: PropTypes__default["default"].oneOf([true, false, 'mixed'])
 });
 ToggleButton.defaultProps = {
-  isPressed: false,
   size: 'medium'
 };
 
 var _excluded = ["isPressed"];
-var ToggleIconButton = React__default['default'].forwardRef(function (_ref, ref) {
+var ToggleIconButton = React.forwardRef(function (_ref, ref) {
   var isPressed = _ref.isPressed,
       otherProps = _objectWithoutProperties(_ref, _excluded);
-  return React__default['default'].createElement(IconButton, _extends$2({
+  return React__default["default"].createElement(IconButton, _extends$2({
     "aria-pressed": isPressed,
     ref: ref
   }, otherProps));
 });
 ToggleIconButton.displayName = 'ToggleIconButton';
 ToggleIconButton.propTypes = _objectSpread2(_objectSpread2({}, IconButton.propTypes), {}, {
-  isPressed: PropTypes__default['default'].oneOf([true, false, 'mixed'])
+  isPressed: PropTypes__default["default"].oneOf([true, false, 'mixed'])
 });
 ToggleIconButton.defaultProps = {
   isPill: true,
   isBasic: true,
-  isPressed: false,
   size: 'medium'
 };
 

package/dist/index.esm.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import React__default, { Children, createContext, useContext, useMemo } from 'react';
+import React__default, { Children, createContext, useContext, forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
@@ -18,14 +18,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -33,19 +28,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    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;
@@ -123,7 +111,7 @@ function _objectWithoutProperties(source, excluded) {
 var COMPONENT_ID$5 = 'buttons.button_group_view';
 var StyledButtonGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -155,7 +143,7 @@ var StyledIcon = styled(function (_ref) {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -264,7 +252,7 @@ var sizeStyles = function sizeStyles(props) {
 var StyledButton = styled.button.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     type: props.type || 'button'
   };
 }).withConfig({
@@ -317,7 +305,7 @@ var COMPONENT_ID$2 = 'buttons.anchor';
 var StyledAnchor = styled(StyledButton).attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     as: 'a',
     dir: props.theme.rtl ? 'rtl' : undefined,
     isLink: true,
@@ -335,30 +323,30 @@ StyledAnchor.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$1;
 
-var _ref$1 = /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M10.5 8.5V10c0 .3-.2.5-.5.5H2c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h1.5M6 6l4-4m-3.5-.5H10c.3 0 .5.2.5.5v3.5"
-});
+function _extends$1() { _extends$1 = Object.assign || 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 SvgNewWindowStroke(props) {
+var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
-    viewBox: "0 0 12 12",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M10.5 8.5V10c0 .3-.2.5-.5.5H2c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h1.5M6 6l4-4m-3.5-.5H10c.3 0 .5.2.5.5v3.5"
+  })));
+};
 
 var COMPONENT_ID$1 = 'buttons.external_icon';
 var StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -389,7 +377,7 @@ var iconStyles = function iconStyles(props) {
 };
 var StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -414,7 +402,23 @@ var useSplitButtonContext = function useSplitButtonContext() {
   return useContext(SplitButtonContext);
 };
 
-var Button = React__default.forwardRef(function (props, ref) {
+var StartIconComponent = function StartIconComponent(props) {
+  return React__default.createElement(StyledIcon, _extends$2({
+    position: "start"
+  }, props));
+};
+StartIconComponent.displayName = 'Button.StartIcon';
+var StartIcon = StartIconComponent;
+
+var EndIconComponent = function EndIconComponent(props) {
+  return React__default.createElement(StyledIcon, _extends$2({
+    position: "end"
+  }, props));
+};
+EndIconComponent.displayName = 'Button.EndIcon';
+var EndIcon = EndIconComponent;
+
+var ButtonComponent = forwardRef(function (props, ref) {
   var buttonGroupContext = useButtonGroupContext();
   var splitButtonContext = useSplitButtonContext();
   var computedProps = _objectSpread2(_objectSpread2({}, props), {}, {
@@ -434,7 +438,8 @@ var Button = React__default.forwardRef(function (props, ref) {
     ref: ref
   }, computedProps));
 });
-Button.propTypes = {
+ButtonComponent.displayName = 'Button';
+ButtonComponent.propTypes = {
   isNeutral: PropTypes.bool,
   isPrimary: PropTypes.bool,
   isDanger: PropTypes.bool,
@@ -446,24 +451,15 @@ Button.propTypes = {
   isSelected: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large'])
 };
-Button.defaultProps = {
+ButtonComponent.defaultProps = {
   size: 'medium'
 };
-var StartIcon = function StartIcon(props) {
-  return React__default.createElement(StyledIcon, _extends$2({
-    position: "start"
-  }, props));
-};
-var EndIcon = function EndIcon(props) {
-  return React__default.createElement(StyledIcon, _extends$2({
-    position: "end"
-  }, props));
-};
-Button.StartIcon = StartIcon;
+var Button = ButtonComponent;
 Button.EndIcon = EndIcon;
+Button.StartIcon = StartIcon;
 
 var _excluded$5 = ["children", "isExternal"];
-var Anchor = React__default.forwardRef(function (_ref, ref) {
+var Anchor = forwardRef(function (_ref, ref) {
   var children = _ref.children,
       isExternal = _ref.isExternal,
       otherProps = _objectWithoutProperties(_ref, _excluded$5);
@@ -485,7 +481,7 @@ Anchor.propTypes = {
 };
 
 var _excluded$4 = ["children", "onSelect", "selectedItem"];
-var ButtonGroup = function ButtonGroup(_ref) {
+var ButtonGroup = forwardRef(function (_ref, ref) {
   var children = _ref.children,
       onSelect = _ref.onSelect,
       controlledSelectedItem = _ref.selectedItem,
@@ -506,15 +502,18 @@ var ButtonGroup = function ButtonGroup(_ref) {
   }, [selectedItem, getButtonProps]);
   return React__default.createElement(ButtonGroupContext.Provider, {
     value: contextValue
-  }, React__default.createElement(StyledButtonGroup, getGroupProps(otherProps), children));
-};
+  }, React__default.createElement(StyledButtonGroup, _extends$2({
+    ref: ref
+  }, getGroupProps(otherProps)), children));
+});
+ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = {
   selectedItem: PropTypes.any,
   onSelect: PropTypes.func
 };
 
 var _excluded$3 = ["children", "isRotated"];
-var IconButton = React__default.forwardRef(function (_ref, ref) {
+var IconButton = forwardRef(function (_ref, ref) {
   var children = _ref.children,
       isRotated = _ref.isRotated,
       otherProps = _objectWithoutProperties(_ref, _excluded$3);
@@ -544,25 +543,25 @@ IconButton.defaultProps = {
   size: 'medium'
 };
 
-function _extends() { _extends = Object.assign || 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 _path;
 
-var _ref = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-});
+function _extends() { _extends = Object.assign || 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 SvgChevronDownStroke(props) {
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
 
-var ChevronButton = React__default.forwardRef(function (_ref, ref) {
+var ChevronButton = forwardRef(function (_ref, ref) {
   var buttonProps = _extends$2({}, _ref);
   return React__default.createElement(IconButton, _extends$2({
     ref: ref
@@ -577,16 +576,19 @@ ChevronButton.defaultProps = {
 };
 
 var _excluded$2 = ["children"];
-var SplitButton = function SplitButton(_ref) {
+var SplitButton = forwardRef(function (_ref, ref) {
   var children = _ref.children,
       other = _objectWithoutProperties(_ref, _excluded$2);
   return React__default.createElement(SplitButtonContext.Provider, {
     value: true
-  }, React__default.createElement(StyledButtonGroup, other, children));
-};
+  }, React__default.createElement(StyledButtonGroup, _extends$2({
+    ref: ref
+  }, other), children));
+});
+SplitButton.displayName = 'SplitButton';
 
 var _excluded$1 = ["isPressed"];
-var ToggleButton = React__default.forwardRef(function (_ref, ref) {
+var ToggleButton = forwardRef(function (_ref, ref) {
   var isPressed = _ref.isPressed,
       otherProps = _objectWithoutProperties(_ref, _excluded$1);
   return React__default.createElement(Button, _extends$2({
@@ -599,12 +601,11 @@ ToggleButton.propTypes = _objectSpread2(_objectSpread2({}, Button.propTypes), {}
   isPressed: PropTypes.oneOf([true, false, 'mixed'])
 });
 ToggleButton.defaultProps = {
-  isPressed: false,
   size: 'medium'
 };
 
 var _excluded = ["isPressed"];
-var ToggleIconButton = React__default.forwardRef(function (_ref, ref) {
+var ToggleIconButton = forwardRef(function (_ref, ref) {
   var isPressed = _ref.isPressed,
       otherProps = _objectWithoutProperties(_ref, _excluded);
   return React__default.createElement(IconButton, _extends$2({
@@ -619,7 +620,6 @@ ToggleIconButton.propTypes = _objectSpread2(_objectSpread2({}, IconButton.propTy
 ToggleIconButton.defaultProps = {
   isPill: true,
   isBasic: true,
-  isPressed: false,
   size: 'medium'
 };
 

package/dist/typings/elements/Anchor.d.ts

@@ -10,7 +10,7 @@ export interface IAnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     isDanger?: boolean;
     /**
      * Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
-     * navigates to an external resource. This ensures ensures that the anchor is a
+     * navigates to an external resource. This ensures that the anchor is a
      * safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
      **/
     isExternal?: boolean;
@@ -18,5 +18,4 @@ export interface IAnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 /**
  * @extends AnchorHTMLAttributes<HTMLAnchorElement>
  */
-declare const Anchor: React.FunctionComponent<IAnchorProps & React.RefAttributes<HTMLAnchorElement>>;
-export default Anchor;
+export declare const Anchor: React.ForwardRefExoticComponent<IAnchorProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/typings/elements/Button.d.ts

@@ -5,6 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { ButtonHTMLAttributes, SVGAttributes } from 'react';
+import { StartIcon } from './components/StartIcon';
+import { EndIcon } from './components/EndIcon';
+/**
+ * @deprecated use IButtonStartIconProps or IButtonEndIconProps instead
+ */
+export interface IIconProps extends SVGAttributes<SVGSVGElement> {
+    isRotated?: boolean;
+}
 export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Applies danger styling */
     isDanger?: boolean;
@@ -27,17 +35,10 @@ export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** @ignore prop used by `ButtonGroup` */
     isSelected?: boolean;
 }
-export interface IIconProps extends SVGAttributes<SVGSVGElement> {
-    isRotated?: boolean;
-    children: any;
-}
-declare const StartIcon: (props: IIconProps) => JSX.Element;
-declare const EndIcon: (props: IIconProps) => JSX.Element;
-declare const _default: React.FunctionComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> & {
-    StartIcon: typeof StartIcon;
-    EndIcon: typeof EndIcon;
-};
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-export default _default;
+export declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> & {
+    EndIcon: typeof EndIcon;
+    StartIcon: typeof StartIcon;
+};

package/dist/typings/elements/ButtonGroup.d.ts

@@ -18,5 +18,4 @@ export interface IButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const ButtonGroup: React.FunctionComponent<IButtonGroupProps>;
-export default ButtonGroup;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<IButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/ChevronButton.d.ts

@@ -5,9 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IIconButtonProps } from './IconButton';
+import { IIconButtonProps as IChevronButtonProps } from './IconButton';
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-declare const ChevronButton: React.FunctionComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ChevronButton;
+export declare const ChevronButton: React.ForwardRefExoticComponent<IChevronButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/IconButton.d.ts

@@ -26,5 +26,4 @@ export interface IIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-declare const IconButton: React.FunctionComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default IconButton;
+export declare const IconButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/SplitButton.d.ts

@@ -4,9 +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, { HTMLAttributes } from 'react';
+import React from 'react';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const SplitButton: React.FunctionComponent<HTMLAttributes<HTMLDivElement>>;
-export default SplitButton;
+export declare const SplitButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/ToggleButton.d.ts

@@ -16,5 +16,4 @@ export interface IToggleButtonProps extends IButtonProps {
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-declare const ToggleButton: React.FunctionComponent<IToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ToggleButton;
+export declare const ToggleButton: React.ForwardRefExoticComponent<IToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/ToggleIconButton.d.ts

@@ -16,5 +16,4 @@ export interface IToggleIconButtonProps extends IIconButtonProps {
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-declare const ToggleIconButton: React.FunctionComponent<IToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ToggleIconButton;
+export declare const ToggleIconButton: React.ForwardRefExoticComponent<IToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/components/EndIcon.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { SVGAttributes } from 'react';
+export interface IButtonEndIconProps extends SVGAttributes<SVGElement> {
+    /** Rotates icon 180 degrees */
+    isRotated?: boolean;
+}
+/**
+ * @extends SVGAttributes<SVGElement>
+ */
+export declare const EndIcon: {
+    (props: IButtonEndIconProps): JSX.Element;
+    displayName: string;
+};

package/dist/typings/elements/components/StartIcon.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { SVGAttributes } from 'react';
+export interface IButtonStartIconProps extends SVGAttributes<SVGElement> {
+    /** Rotates icon 180 degrees */
+    isRotated?: boolean;
+}
+/**
+ * @extends SVGAttributes<SVGElement>
+ */
+export declare const StartIcon: {
+    (props: IButtonStartIconProps): JSX.Element;
+    displayName: string;
+};

package/dist/typings/index.d.ts

@@ -4,16 +4,19 @@
  * 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 { default as Button } from './elements/Button';
+export { Button } from './elements/Button';
 export type { IButtonProps, IIconProps } from './elements/Button';
-export { default as Anchor } from './elements/Anchor';
+export type { IButtonEndIconProps } from './elements/components/EndIcon';
+export type { IButtonStartIconProps } from './elements/components/StartIcon';
+export { Anchor } from './elements/Anchor';
 export type { IAnchorProps } from './elements/Anchor';
-export { default as ButtonGroup } from './elements/ButtonGroup';
+export { ButtonGroup } from './elements/ButtonGroup';
 export type { IButtonGroupProps } from './elements/ButtonGroup';
-export { default as ChevronButton } from './elements/ChevronButton';
-export { default as IconButton } from './elements/IconButton';
-export { default as SplitButton } from './elements/SplitButton';
-export { default as ToggleButton } from './elements/ToggleButton';
+export { ChevronButton } from './elements/ChevronButton';
+export { IconButton } from './elements/IconButton';
+export type { IIconButtonProps, IIconButtonProps as IChevronButtonProps } from './elements/IconButton';
+export { SplitButton } from './elements/SplitButton';
+export { ToggleButton } from './elements/ToggleButton';
 export type { IToggleButtonProps } from './elements/ToggleButton';
-export { default as ToggleIconButton } from './elements/ToggleIconButton';
+export { ToggleIconButton } from './elements/ToggleIconButton';
 export type { IToggleIconButtonProps } from './elements/ToggleIconButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "8.46.0",
+  "version": "8.48.0",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.46.0",
+    "@zendeskgarden/react-theming": "^8.48.0",
     "@zendeskgarden/svg-icons": "6.30.2"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9e577b188009344c7ad0a035749930a4e19e400a"
+  "gitHead": "75f36aee62043004650c3eb2e1583b98a87d71f8"
 }