@zendeskgarden/react-buttons 9.12.3 → 9.12.4

package/dist/esm/elements/Anchor.js

@@ -14,15 +14,14 @@ import '../styled/StyledIcon.js';
 import '../styled/StyledIconButton.js';
 import { useText } from '@zendeskgarden/react-theming';
 
-const Anchor = forwardRef((_ref, ref) => {
-  let {
-    children,
-    externalIconLabel,
-    isDanger,
-    isExternal,
-    isUnderlined = true,
-    ...other
-  } = _ref;
+const Anchor = forwardRef(({
+  children,
+  externalIconLabel,
+  isDanger,
+  isExternal,
+  isUnderlined = true,
+  ...other
+}, ref) => {
   let anchorProps = other;
   if (isExternal) {
     anchorProps = {

package/dist/esm/elements/Button.js

@@ -17,19 +17,18 @@ import { useSplitButtonContext } from '../utils/useSplitButtonContext.js';
 import { StartIcon } from './components/StartIcon.js';
 import { EndIcon } from './components/EndIcon.js';
 
-const ButtonComponent = forwardRef((_ref, ref) => {
-  let {
-    focusInset,
-    isBasic,
-    isDanger,
-    isLink,
-    isNeutral,
-    isPill,
-    isPrimary,
-    isStretched,
-    size = 'medium',
-    ...other
-  } = _ref;
+const ButtonComponent = forwardRef(({
+  focusInset,
+  isBasic,
+  isDanger,
+  isLink,
+  isNeutral,
+  isPill,
+  isPrimary,
+  isStretched,
+  size = 'medium',
+  ...other
+}, ref) => {
   const splitButtonFocusInset = useSplitButtonContext();
   return React__default.createElement(StyledButton, Object.assign({}, other, {
     $focusInset: focusInset || splitButtonFocusInset,

package/dist/esm/elements/ChevronButton.js

@@ -8,20 +8,17 @@ import React__default, { forwardRef } from 'react';
 import { IconButton } from './IconButton.js';
 import SvgChevronDownStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 
-const ChevronButton = forwardRef((_ref, ref) => {
-  let {
-    isBasic = false,
-    isPill = false,
-    size = 'medium',
-    ...props
-  } = _ref;
-  return React__default.createElement(IconButton, Object.assign({
-    ref: ref,
-    isBasic: isBasic,
-    isPill: isPill,
-    size: size
-  }, props), React__default.createElement(SvgChevronDownStroke, null));
-});
+const ChevronButton = forwardRef(({
+  isBasic = false,
+  isPill = false,
+  size = 'medium',
+  ...props
+}, ref) => React__default.createElement(IconButton, Object.assign({
+  ref: ref,
+  isBasic: isBasic,
+  isPill: isPill,
+  size: size
+}, props), React__default.createElement(SvgChevronDownStroke, null)));
 ChevronButton.displayName = 'ChevronButton';
 ChevronButton.propTypes = IconButton.propTypes;
 

package/dist/esm/elements/IconButton.js

@@ -15,19 +15,18 @@ import { StyledIcon } from '../styled/StyledIcon.js';
 import { StyledIconButton } from '../styled/StyledIconButton.js';
 import { useSplitButtonContext } from '../utils/useSplitButtonContext.js';
 
-const IconButton = forwardRef((_ref, ref) => {
-  let {
-    children,
-    focusInset,
-    isBasic = true,
-    isDanger,
-    isNeutral,
-    isPill = true,
-    isPrimary,
-    isRotated,
-    size = 'medium',
-    ...other
-  } = _ref;
+const IconButton = forwardRef(({
+  children,
+  focusInset,
+  isBasic = true,
+  isDanger,
+  isNeutral,
+  isPill = true,
+  isPrimary,
+  isRotated,
+  size = 'medium',
+  ...other
+}, ref) => {
   const splitButtonFocusInset = useSplitButtonContext();
   return React__default.createElement(StyledIconButton, Object.assign({}, other, {
     $isBasic: isBasic,

package/dist/esm/elements/SplitButton.js

@@ -13,17 +13,14 @@ import '../styled/StyledIcon.js';
 import '../styled/StyledIconButton.js';
 import { SplitButtonContext } from '../utils/useSplitButtonContext.js';
 
-const SplitButton = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...other
-  } = _ref;
-  return React__default.createElement(SplitButtonContext.Provider, {
-    value: true
-  }, React__default.createElement(StyledSplitButton, Object.assign({
-    ref: ref
-  }, other), children));
-});
+const SplitButton = forwardRef(({
+  children,
+  ...other
+}, ref) => React__default.createElement(SplitButtonContext.Provider, {
+  value: true
+}, React__default.createElement(StyledSplitButton, Object.assign({
+  ref: ref
+}, other), children)));
 SplitButton.displayName = 'SplitButton';
 
 export { SplitButton };

package/dist/esm/elements/ToggleButton.js

@@ -8,18 +8,15 @@ import React__default, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from './Button.js';
 
-const ToggleButton = forwardRef((_ref, ref) => {
-  let {
-    isPressed,
-    size = 'medium',
-    ...otherProps
-  } = _ref;
-  return React__default.createElement(Button, Object.assign({
-    "aria-pressed": isPressed,
-    size: size,
-    ref: ref
-  }, otherProps));
-});
+const ToggleButton = forwardRef(({
+  isPressed,
+  size = 'medium',
+  ...otherProps
+}, ref) => React__default.createElement(Button, Object.assign({
+  "aria-pressed": isPressed,
+  size: size,
+  ref: ref
+}, otherProps)));
 ToggleButton.displayName = 'ToggleButton';
 ToggleButton.propTypes = {
   ...Button.propTypes,

package/dist/esm/elements/ToggleIconButton.js

@@ -8,22 +8,19 @@ import React__default, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { IconButton } from './IconButton.js';
 
-const ToggleIconButton = forwardRef((_ref, ref) => {
-  let {
-    isPressed,
-    isPill = true,
-    isBasic = true,
-    size = 'medium',
-    ...otherProps
-  } = _ref;
-  return React__default.createElement(IconButton, Object.assign({
-    "aria-pressed": isPressed,
-    isPill: isPill,
-    isBasic: isBasic,
-    size: size,
-    ref: ref
-  }, otherProps));
-});
+const ToggleIconButton = forwardRef(({
+  isPressed,
+  isPill = true,
+  isBasic = true,
+  size = 'medium',
+  ...otherProps
+}, ref) => React__default.createElement(IconButton, Object.assign({
+  "aria-pressed": isPressed,
+  isPill: isPill,
+  isBasic: isBasic,
+  size: size,
+  ref: ref
+}, otherProps)));
 ToggleIconButton.displayName = 'ToggleIconButton';
 ToggleIconButton.propTypes = {
   ...IconButton.propTypes,

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

@@ -12,16 +12,13 @@ import '../../styled/StyledExternalIcon.js';
 import { StyledIcon } from '../../styled/StyledIcon.js';
 import '../../styled/StyledIconButton.js';
 
-const EndIconComponent = _ref => {
-  let {
-    isRotated,
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledIcon, Object.assign({
-    $position: "end",
-    $isRotated: isRotated
-  }, props));
-};
+const EndIconComponent = ({
+  isRotated,
+  ...props
+}) => React__default.createElement(StyledIcon, Object.assign({
+  $position: "end",
+  $isRotated: isRotated
+}, props));
 EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 

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

@@ -12,16 +12,13 @@ import '../../styled/StyledExternalIcon.js';
 import { StyledIcon } from '../../styled/StyledIcon.js';
 import '../../styled/StyledIconButton.js';
 
-const StartIconComponent = _ref => {
-  let {
-    isRotated,
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledIcon, Object.assign({
-    $position: "start",
-    $isRotated: isRotated
-  }, props));
-};
+const StartIconComponent = ({
+  isRotated,
+  ...props
+}) => React__default.createElement(StyledIcon, Object.assign({
+  $position: "start",
+  $isRotated: isRotated
+}, props));
 StartIconComponent.displayName = 'Button.StartIcon';
 const StartIcon = StartIconComponent;
 

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

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",

package/dist/esm/styled/StyledAnchor.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton.js';
 
-const COMPONENT_ID = 'buttons.anchor';
+const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   $isLink: true,

package/dist/esm/styled/StyledButton.js

@@ -10,7 +10,7 @@ import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles, getFocu
 import { StyledSplitButton } from './StyledSplitButton.js';
 import { StyledIcon } from './StyledIcon.js';
 
-const COMPONENT_ID = 'buttons.button';
+const COMPONENT_ID$3 = 'buttons.button';
 const getBorderRadius = props => {
   if (props.$isPill) {
     return '100px';
@@ -25,16 +25,15 @@ const getHeight = props => {
   }
   return `${props.theme.space.base * 10}px`;
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isLink,
-    $isBasic,
-    $isDanger,
-    $isNeutral,
-    $isPrimary,
-    $focusInset
-  } = _ref;
+const colorStyles = ({
+  theme,
+  $isLink,
+  $isBasic,
+  $isDanger,
+  $isNeutral,
+  $isPrimary,
+  $focusInset
+}) => {
   let retVal;
   const disabledBackgroundColor = getColor({
     theme,
@@ -239,14 +238,13 @@ const colorStyles = _ref => {
   }
   return retVal;
 };
-const groupStyles = _ref2 => {
-  let {
-    theme,
-    $isPrimary,
-    $isBasic,
-    $isPill,
-    $focusInset
-  } = _ref2;
+const groupStyles = ({
+  theme,
+  $isPrimary,
+  $isBasic,
+  $isPill,
+  $focusInset
+}) => {
   const {
     rtl,
     borderWidths,
@@ -278,7 +276,7 @@ const groupStyles = _ref2 => {
   });
   return css(["position:relative;transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,margin-", " 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;border:", " ", ";", "{border-color:", ";box-shadow:", ";}&:hover,&:active,", "{z-index:1;}&:disabled{z-index:-1;background-color:", ";}&:not(:first-of-type){margin-", ":", ";}&:not(:first-of-type):disabled{margin-", ":", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], startPosition, borders.sm, borderColor, SELECTOR_FOCUS_VISIBLE, focusColor, focusBoxShadow, SELECTOR_FOCUS_VISIBLE, disabledBackgroundColor, startPosition, marginDisplacement, startPosition, marginOffset, endPosition, endPosition, startPosition, startPosition, StyledIcon, endPosition, iconMarginDisplacement, StyledIcon, startPosition, iconMarginDisplacement);
 };
-const iconStyles = props => {
+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');
 };
@@ -307,12 +305,12 @@ const sizeStyles = props => {
   return retVal;
 };
 const StyledButton = styled.button.attrs(props => ({
-  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$3,
+  'data-garden-version': '9.12.4',
   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,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";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;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-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 ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.$isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.$isLink && 'nowrap', props => props.$isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.$isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.$isLink ? 'underline' : 'none', props => props.$isLink ? 'underline' : 'none', props => colorStyles(props), props => props.$isLink && 'none', StyledIcon, props => iconStyles(props), StyledSplitButton, props => groupStyles(props), componentStyles);
+})(["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,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";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;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-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 ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.$isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.$isLink && 'nowrap', props => props.$isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.$isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.$isLink ? 'underline' : 'none', props => props.$isLink ? 'underline' : 'none', props => colorStyles(props), props => props.$isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), componentStyles);
 
-export { COMPONENT_ID, StyledButton, getHeight };
+export { COMPONENT_ID$3 as COMPONENT_ID, StyledButton, getHeight };

package/dist/esm/styled/StyledExternalIcon.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import SvgNewWindowStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/new-window-stroke.svg.js';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'buttons.external_icon';
+const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"

package/dist/esm/styled/StyledIcon.js

@@ -7,8 +7,8 @@
 import styled, { css } from 'styled-components';
 import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'buttons.icon';
-const sizeStyles = props => {
+const COMPONENT_ID$4 = 'buttons.icon';
+const sizeStyles$1 = props => {
   let marginProperty;
   if (props.$position === 'start') {
     marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
@@ -18,11 +18,11 @@ const sizeStyles = props => {
   return marginProperty && css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles(props), componentStyles);
+})(["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), componentStyles);
 
 export { StyledIcon };

package/dist/esm/styled/StyledIconButton.js

@@ -10,10 +10,9 @@ import { StyledButton, COMPONENT_ID as COMPONENT_ID$1, getHeight } from './Style
 import { StyledIcon } from './StyledIcon.js';
 
 const COMPONENT_ID = 'buttons.icon_button';
-const iconColorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const iconColorStyles = ({
+  theme
+}) => {
   const options = {
     theme,
     variable: 'foreground.subtle'
@@ -51,7 +50,7 @@ const StyledIconButton = styled(StyledButton).attrs(props => {
   const externalId = props['data-garden-id'];
   return {
     'data-garden-id': externalId && externalId !== COMPONENT_ID$1 ? externalId : COMPONENT_ID,
-    'data-garden-version': '9.12.3'
+    'data-garden-version': '9.12.4'
   };
 }).withConfig({
   displayName: "StyledIconButton",

package/dist/esm/styled/StyledSplitButton.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'buttons.button_group_view';
+const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledSplitButton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
@@ -59,7 +59,7 @@ const sizeStyles$1 = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -80,16 +80,15 @@ const getHeight = props => {
   }
   return `${props.theme.space.base * 10}px`;
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isLink,
-    $isBasic,
-    $isDanger,
-    $isNeutral,
-    $isPrimary,
-    $focusInset
-  } = _ref;
+const colorStyles = ({
+  theme,
+  $isLink,
+  $isBasic,
+  $isDanger,
+  $isNeutral,
+  $isPrimary,
+  $focusInset
+}) => {
   let retVal;
   const disabledBackgroundColor = reactTheming.getColor({
     theme,
@@ -294,14 +293,13 @@ const colorStyles = _ref => {
   }
   return retVal;
 };
-const groupStyles = _ref2 => {
-  let {
-    theme,
-    $isPrimary,
-    $isBasic,
-    $isPill,
-    $focusInset
-  } = _ref2;
+const groupStyles = ({
+  theme,
+  $isPrimary,
+  $isBasic,
+  $isPill,
+  $focusInset
+}) => {
   const {
     rtl,
     borderWidths,
@@ -363,7 +361,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$3,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -373,7 +371,7 @@ const StyledButton = styled__default.default.button.attrs(props => ({
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   $isLink: true,
@@ -404,17 +402,16 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).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;", ";"], props => props.theme.rtl && 'scaleX(-1)', reactTheming.componentStyles);
 
 const COMPONENT_ID = 'buttons.icon_button';
-const iconColorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const iconColorStyles = ({
+  theme
+}) => {
   const options = {
     theme,
     variable: 'foreground.subtle'
@@ -452,7 +449,7 @@ const StyledIconButton = styled__default.default(StyledButton).attrs(props => {
   const externalId = props['data-garden-id'];
   return {
     'data-garden-id': externalId && externalId !== COMPONENT_ID$3 ? externalId : COMPONENT_ID,
-    'data-garden-version': '9.12.3'
+    'data-garden-version': '9.12.4'
   };
 }).withConfig({
   displayName: "StyledIconButton",
@@ -464,45 +461,38 @@ const useSplitButtonContext = () => {
   return React.useContext(SplitButtonContext);
 };
 
-const StartIconComponent = _ref => {
-  let {
-    isRotated,
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledIcon, Object.assign({
-    $position: "start",
-    $isRotated: isRotated
-  }, props));
-};
+const StartIconComponent = ({
+  isRotated,
+  ...props
+}) => React__namespace.default.createElement(StyledIcon, Object.assign({
+  $position: "start",
+  $isRotated: isRotated
+}, props));
 StartIconComponent.displayName = 'Button.StartIcon';
 const StartIcon = StartIconComponent;
 
-const EndIconComponent = _ref => {
-  let {
-    isRotated,
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledIcon, Object.assign({
-    $position: "end",
-    $isRotated: isRotated
-  }, props));
-};
+const EndIconComponent = ({
+  isRotated,
+  ...props
+}) => React__namespace.default.createElement(StyledIcon, Object.assign({
+  $position: "end",
+  $isRotated: isRotated
+}, props));
 EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 
-const ButtonComponent = React.forwardRef((_ref, ref) => {
-  let {
-    focusInset,
-    isBasic,
-    isDanger,
-    isLink,
-    isNeutral,
-    isPill,
-    isPrimary,
-    isStretched,
-    size = 'medium',
-    ...other
-  } = _ref;
+const ButtonComponent = React.forwardRef(({
+  focusInset,
+  isBasic,
+  isDanger,
+  isLink,
+  isNeutral,
+  isPill,
+  isPrimary,
+  isStretched,
+  size = 'medium',
+  ...other
+}, ref) => {
   const splitButtonFocusInset = useSplitButtonContext();
   return React__namespace.default.createElement(StyledButton, Object.assign({}, other, {
     $focusInset: focusInset || splitButtonFocusInset,
@@ -534,15 +524,14 @@ const Button = ButtonComponent;
 Button.EndIcon = EndIcon;
 Button.StartIcon = StartIcon;
 
-const Anchor = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    externalIconLabel,
-    isDanger,
-    isExternal,
-    isUnderlined = true,
-    ...other
-  } = _ref;
+const Anchor = React.forwardRef(({
+  children,
+  externalIconLabel,
+  isDanger,
+  isExternal,
+  isUnderlined = true,
+  ...other
+}, ref) => {
   let anchorProps = other;
   if (isExternal) {
     anchorProps = {
@@ -576,19 +565,18 @@ Anchor.propTypes = {
   externalIconLabel: PropTypes__default.default.string
 };
 
-const IconButton = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    focusInset,
-    isBasic = true,
-    isDanger,
-    isNeutral,
-    isPill = true,
-    isPrimary,
-    isRotated,
-    size = 'medium',
-    ...other
-  } = _ref;
+const IconButton = React.forwardRef(({
+  children,
+  focusInset,
+  isBasic = true,
+  isDanger,
+  isNeutral,
+  isPill = true,
+  isPrimary,
+  isRotated,
+  size = 'medium',
+  ...other
+}, ref) => {
   const splitButtonFocusInset = useSplitButtonContext();
   return React__namespace.default.createElement(StyledIconButton, Object.assign({}, other, {
     $isBasic: isBasic,
@@ -631,70 +619,58 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const ChevronButton = React.forwardRef((_ref, ref) => {
-  let {
-    isBasic = false,
-    isPill = false,
-    size = 'medium',
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(IconButton, Object.assign({
-    ref: ref,
-    isBasic: isBasic,
-    isPill: isPill,
-    size: size
-  }, props), React__namespace.default.createElement(SvgChevronDownStroke, null));
-});
+const ChevronButton = React.forwardRef(({
+  isBasic = false,
+  isPill = false,
+  size = 'medium',
+  ...props
+}, ref) => React__namespace.default.createElement(IconButton, Object.assign({
+  ref: ref,
+  isBasic: isBasic,
+  isPill: isPill,
+  size: size
+}, props), React__namespace.default.createElement(SvgChevronDownStroke, null)));
 ChevronButton.displayName = 'ChevronButton';
 ChevronButton.propTypes = IconButton.propTypes;
 
-const SplitButton = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...other
-  } = _ref;
-  return React__namespace.default.createElement(SplitButtonContext.Provider, {
-    value: true
-  }, React__namespace.default.createElement(StyledSplitButton, Object.assign({
-    ref: ref
-  }, other), children));
-});
+const SplitButton = React.forwardRef(({
+  children,
+  ...other
+}, ref) => React__namespace.default.createElement(SplitButtonContext.Provider, {
+  value: true
+}, React__namespace.default.createElement(StyledSplitButton, Object.assign({
+  ref: ref
+}, other), children)));
 SplitButton.displayName = 'SplitButton';
 
-const ToggleButton = React.forwardRef((_ref, ref) => {
-  let {
-    isPressed,
-    size = 'medium',
-    ...otherProps
-  } = _ref;
-  return React__namespace.default.createElement(Button, Object.assign({
-    "aria-pressed": isPressed,
-    size: size,
-    ref: ref
-  }, otherProps));
-});
+const ToggleButton = React.forwardRef(({
+  isPressed,
+  size = 'medium',
+  ...otherProps
+}, ref) => React__namespace.default.createElement(Button, Object.assign({
+  "aria-pressed": isPressed,
+  size: size,
+  ref: ref
+}, otherProps)));
 ToggleButton.displayName = 'ToggleButton';
 ToggleButton.propTypes = {
   ...Button.propTypes,
   isPressed: PropTypes__default.default.oneOf([true, false, 'mixed'])
 };
 
-const ToggleIconButton = React.forwardRef((_ref, ref) => {
-  let {
-    isPressed,
-    isPill = true,
-    isBasic = true,
-    size = 'medium',
-    ...otherProps
-  } = _ref;
-  return React__namespace.default.createElement(IconButton, Object.assign({
-    "aria-pressed": isPressed,
-    isPill: isPill,
-    isBasic: isBasic,
-    size: size,
-    ref: ref
-  }, otherProps));
-});
+const ToggleIconButton = React.forwardRef(({
+  isPressed,
+  isPill = true,
+  isBasic = true,
+  size = 'medium',
+  ...otherProps
+}, ref) => React__namespace.default.createElement(IconButton, Object.assign({
+  "aria-pressed": isPressed,
+  isPill: isPill,
+  isBasic: isBasic,
+  size: size,
+  ref: ref
+}, otherProps)));
 ToggleIconButton.displayName = 'ToggleIconButton';
 ToggleIconButton.propTypes = {
   ...IconButton.propTypes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.12.3",
+  "version": "9.12.4",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,8 +33,8 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.12.3",
-    "@zendeskgarden/svg-icons": "7.5.0"
+    "@zendeskgarden/react-theming": "^9.12.4",
+    "@zendeskgarden/svg-icons": "7.6.0"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "2780bf3aea7009ed84ef10d85e290947d7d8f97e"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }