@zendeskgarden/react-buttons 9.0.0 → 9.1.1

package/LICENSE.md

@@ -0,0 +1,176 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

package/dist/esm/elements/Anchor.js

@@ -17,12 +17,13 @@ import { useText } from '@zendeskgarden/react-theming';
 const Anchor = forwardRef((_ref, ref) => {
   let {
     children,
-    isExternal,
     externalIconLabel,
+    isDanger,
+    isExternal,
     isUnderlined = true,
-    ...otherProps
+    ...other
   } = _ref;
-  let anchorProps = otherProps;
+  let anchorProps = other;
   if (isExternal) {
     anchorProps = {
       target: '_blank',
@@ -38,6 +39,7 @@ const Anchor = forwardRef((_ref, ref) => {
   const iconAriaLabel = useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
   return React__default.createElement(StyledAnchor, Object.assign({
     ref: ref,
+    $isDanger: isDanger,
     $isUnderlined: isUnderlined
   }, anchorProps), children, !!isExternal &&
   React__default.createElement(StyledExternalIcon, {

package/dist/esm/elements/Button.js

@@ -17,26 +17,43 @@ import { useSplitButtonContext } from '../utils/useSplitButtonContext.js';
 import { StartIcon } from './components/StartIcon.js';
 import { EndIcon } from './components/EndIcon.js';
 
-const ButtonComponent = forwardRef((props, ref) => {
-  const splitButtonContext = useSplitButtonContext();
-  const computedProps = {
-    ...props,
-    focusInset: props.focusInset || splitButtonContext,
-    $isUnderlined: props.isLink
-  };
-  return React__default.createElement(StyledButton, Object.assign({}, computedProps, {
+const ButtonComponent = forwardRef((_ref, ref) => {
+  let {
+    focusInset,
+    isBasic,
+    isDanger,
+    isLink,
+    isNeutral,
+    isPill,
+    isPrimary,
+    isStretched,
+    size,
+    ...other
+  } = _ref;
+  const splitButtonFocusInset = useSplitButtonContext();
+  return React__default.createElement(StyledButton, Object.assign({}, other, {
+    $focusInset: focusInset || splitButtonFocusInset,
+    $isBasic: isBasic,
+    $isDanger: isDanger,
+    $isLink: isLink,
+    $isNeutral: isNeutral,
+    $isPill: isPill,
+    $isPrimary: isPrimary,
+    $isStretched: isStretched,
+    $isUnderlined: isLink,
+    $size: size,
     ref: ref
   }));
 });
 ButtonComponent.displayName = 'Button';
 ButtonComponent.propTypes = {
-  isNeutral: PropTypes.bool,
-  isPrimary: PropTypes.bool,
-  isDanger: PropTypes.bool,
-  isPill: PropTypes.bool,
-  isBasic: PropTypes.bool,
   focusInset: PropTypes.bool,
+  isBasic: PropTypes.bool,
+  isDanger: PropTypes.bool,
   isLink: PropTypes.bool,
+  isNeutral: PropTypes.bool,
+  isPill: PropTypes.bool,
+  isPrimary: PropTypes.bool,
   isStretched: PropTypes.bool,
   size: PropTypes.oneOf(SIZE)
 };

package/dist/esm/elements/ChevronButton.js

@@ -8,14 +8,9 @@ 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 {
-    ...buttonProps
-  } = _ref;
-  return React__default.createElement(IconButton, Object.assign({
-    ref: ref
-  }, buttonProps), React__default.createElement(SvgChevronDownStroke, null));
-});
+const ChevronButton = forwardRef((props, ref) => React__default.createElement(IconButton, Object.assign({
+  ref: ref
+}, props), React__default.createElement(SvgChevronDownStroke, null)));
 ChevronButton.displayName = 'ChevronButton';
 ChevronButton.propTypes = IconButton.propTypes;
 ChevronButton.defaultProps = {

package/dist/esm/elements/IconButton.js

@@ -18,28 +18,40 @@ import { useSplitButtonContext } from '../utils/useSplitButtonContext.js';
 const IconButton = forwardRef((_ref, ref) => {
   let {
     children,
+    focusInset,
+    isBasic,
+    isDanger,
+    isNeutral,
+    isPill,
+    isPrimary,
     isRotated,
-    ...otherProps
+    size,
+    ...other
   } = _ref;
-  const focusInset = useSplitButtonContext();
-  return React__default.createElement(StyledIconButton, Object.assign({
+  const splitButtonFocusInset = useSplitButtonContext();
+  return React__default.createElement(StyledIconButton, Object.assign({}, other, {
+    $isBasic: isBasic,
+    $isDanger: isDanger,
+    $isNeutral: isNeutral,
+    $isPill: isPill,
+    $isPrimary: isPrimary,
+    $size: size,
+    $focusInset: focusInset || splitButtonFocusInset,
     ref: ref
-  }, otherProps, {
-    focusInset: otherProps.focusInset || focusInset
   }), React__default.createElement(StyledIcon, {
     $isRotated: isRotated
   }, children));
 });
 IconButton.displayName = 'IconButton';
 IconButton.propTypes = {
+  focusInset: PropTypes.bool,
+  isBasic: PropTypes.bool,
   isDanger: PropTypes.bool,
-  size: PropTypes.oneOf(SIZE),
   isNeutral: PropTypes.bool,
-  isPrimary: PropTypes.bool,
-  isBasic: PropTypes.bool,
   isPill: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  isRotated: PropTypes.bool
+  isPrimary: PropTypes.bool,
+  isRotated: PropTypes.bool,
+  size: PropTypes.oneOf(SIZE)
 };
 IconButton.defaultProps = {
   isPill: true,

package/dist/esm/styled/StyledAnchor.js

@@ -11,10 +11,10 @@ import { StyledButton } from './StyledButton.js';
 const COMPONENT_ID = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
-  isLink: true,
+  $isLink: true,
   type: undefined
 })).withConfig({
   displayName: "StyledAnchor",

package/dist/esm/styled/StyledButton.js

@@ -12,15 +12,15 @@ import { StyledIcon } from './StyledIcon.js';
 
 const COMPONENT_ID = 'buttons.button';
 const getBorderRadius = props => {
-  if (props.isPill) {
+  if (props.$isPill) {
     return '100px';
   }
   return props.theme.borderRadii.md;
 };
 const getHeight = props => {
-  if (props.size === 'small') {
+  if (props.$size === 'small') {
     return `${props.theme.space.base * 8}px`;
-  } else if (props.size === 'large') {
+  } else if (props.$size === 'large') {
     return `${props.theme.space.base * 12}px`;
   }
   return `${props.theme.space.base * 10}px`;
@@ -28,12 +28,12 @@ const getHeight = props => {
 const colorStyles = _ref => {
   let {
     theme,
-    isLink,
-    isBasic,
-    isDanger,
-    isNeutral,
-    isPrimary,
-    focusInset
+    $isLink,
+    $isBasic,
+    $isDanger,
+    $isNeutral,
+    $isPrimary,
+    $focusInset
   } = _ref;
   let retVal;
   const disabledBackgroundColor = getColor({
@@ -60,10 +60,10 @@ const colorStyles = _ref => {
       offset: 200
     }
   };
-  if (isLink) {
+  if ($isLink) {
     const options = {
       theme,
-      variable: isDanger ? 'foreground.danger' : 'foreground.primary'
+      variable: $isDanger ? 'foreground.danger' : 'foreground.primary'
     };
     const foregroundColor = getColor(options);
     const hoverForegroundColor = getColor({
@@ -86,11 +86,11 @@ const colorStyles = _ref => {
         outlineColor: focusOutlineColor
       }
     }), hoverForegroundColor, activeForegroundColor, disabledForegroundColor);
-  } else if (isPrimary) {
+  } else if ($isPrimary) {
     let backgroundVariable;
-    if (isDanger) {
+    if ($isDanger) {
       backgroundVariable = 'background.dangerEmphasis';
-    } else if (isNeutral) {
+    } else if ($isNeutral) {
       backgroundVariable = 'background.emphasis';
     } else {
       backgroundVariable = 'background.primaryEmphasis';
@@ -114,10 +114,10 @@ const colorStyles = _ref => {
     });
     retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], backgroundColor, foregroundColor, hoverBackgroundColor, focusStyles({
       theme,
-      inset: focusInset,
-      shadowWidth: focusInset ? 'sm' : 'md',
-      spacerWidth: focusInset ? 'sm' : 'xs',
-      styles: (isDanger || isNeutral) && focusInset ? {
+      inset: $focusInset,
+      shadowWidth: $focusInset ? 'sm' : 'md',
+      spacerWidth: $focusInset ? 'sm' : 'xs',
+      styles: ($isDanger || $isNeutral) && $focusInset ? {
         borderColor: getColor({
           theme,
           variable: 'border.primaryEmphasis'
@@ -131,8 +131,8 @@ const colorStyles = _ref => {
     let focusBorderColor;
     let backgroundVariable;
     let foregroundVariable;
-    if (isDanger) {
-      if (!isBasic) {
+    if ($isDanger) {
+      if (!$isBasic) {
         const borderOptions = {
           theme,
           variable: 'border.dangerEmphasis'
@@ -146,19 +146,19 @@ const colorStyles = _ref => {
           ...borderOptions,
           ...offset200
         });
-        if (isNeutral) {
+        if ($isNeutral) {
           focusBorderColor = getColor(borderOptions);
         }
       }
       backgroundVariable = 'background.dangerEmphasis';
-      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.danger';
+      foregroundVariable = $isNeutral ? 'foreground.default' : 'foreground.danger';
     } else {
-      if (!isBasic) {
+      if (!$isBasic) {
         const borderOptions = {
           theme,
           variable: 'border.primaryEmphasis'
         };
-        if (isNeutral) {
+        if ($isNeutral) {
           borderColor = getColor({
             theme,
             variable: 'border.default',
@@ -183,7 +183,7 @@ const colorStyles = _ref => {
         }
       }
       backgroundVariable = 'background.primaryEmphasis';
-      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.primary';
+      foregroundVariable = $isNeutral ? 'foreground.default' : 'foreground.primary';
     }
     const hoverBackgroundColor = getColor({
       theme,
@@ -205,7 +205,7 @@ const colorStyles = _ref => {
     let iconForegroundColor;
     let hoverIconForegroundColor;
     let activeIconForegroundColor;
-    if (isNeutral) {
+    if ($isNeutral) {
       const iconOptions = {
         theme,
         variable: 'foreground.subtle'
@@ -231,7 +231,7 @@ const colorStyles = _ref => {
     }
     retVal = css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], borderColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
       theme,
-      inset: focusInset,
+      inset: $focusInset,
       styles: {
         borderColor: focusBorderColor
       }
@@ -242,10 +242,10 @@ const colorStyles = _ref => {
 const groupStyles = _ref2 => {
   let {
     theme,
-    isPrimary,
-    isBasic,
-    isPill,
-    focusInset
+    $isPrimary,
+    $isBasic,
+    $isPill,
+    $focusInset
   } = _ref2;
   const {
     rtl,
@@ -255,20 +255,20 @@ const groupStyles = _ref2 => {
   const startPosition = rtl ? 'right' : 'left';
   const endPosition = rtl ? 'left' : 'right';
   const marginOffset = borderWidths.sm;
-  const marginDisplacement = `${isPrimary || isBasic ? '' : '-'}${marginOffset}`;
-  const iconMarginDisplacement = isPill && '-2px';
-  const disabledBackgroundColor = !isPrimary && getColor({
+  const marginDisplacement = `${$isPrimary || $isBasic ? '' : '-'}${marginOffset}`;
+  const iconMarginDisplacement = $isPill && '-2px';
+  const disabledBackgroundColor = !$isPrimary && getColor({
     theme,
     variable: 'background.disabled'
   });
-  const borderColor = isBasic ? 'transparent' : 'revert';
+  const borderColor = $isBasic ? 'transparent' : 'revert';
   const focusColor = getColor({
     theme,
     variable: 'border.primaryEmphasis'
   });
-  const focusBoxShadow = isBasic && !isPrimary && getFocusBoxShadow({
+  const focusBoxShadow = $isBasic && !$isPrimary && getFocusBoxShadow({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     spacerColor: {
       hue: focusColor
     },
@@ -279,24 +279,24 @@ 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 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');
+  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');
 };
 const sizeStyles = props => {
   let retVal;
-  if (props.isLink) {
+  if (props.$isLink) {
     retVal = css(["padding:0;font-size:inherit;"]);
   } else {
     const height = getHeight(props);
     const lineHeight = math(`${height} - (${props.theme.borderWidths.sm} * 2)`);
     let padding;
     let fontSize;
-    if (props.size === 'small') {
+    if (props.$size === 'small') {
       fontSize = props.theme.fontSizes.sm;
       padding = `${props.theme.space.base * 3}px`;
     } else {
       fontSize = props.theme.fontSizes.md;
-      if (props.size === 'large') {
+      if (props.$size === 'large') {
         padding = `${props.theme.space.base * 5}px`;
       } else {
         padding = `${props.theme.space.base * 4}px`;
@@ -308,11 +308,11 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   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), props => retrieveComponentStyles(COMPONENT_ID, 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,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), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { COMPONENT_ID, StyledButton, getHeight };

package/dist/esm/styled/StyledExternalIcon.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"

package/dist/esm/styled/StyledIcon.js

@@ -19,7 +19,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"

package/dist/esm/styled/StyledIconButton.js

@@ -41,7 +41,7 @@ const iconColorStyles = _ref => {
 };
 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');
+  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');
 };
 const iconStyles = props => {
   const size = props.theme.iconSizes.md;
@@ -51,11 +51,11 @@ 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.0.0'
+    'data-garden-version': '9.1.1'
   };
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(props['data-garden-id'], props));
+})(["", ";& ", "{", "}", ";"], iconButtonStyles, StyledIcon, iconStyles, props => retrieveComponentStyles(props['data-garden-id'], props));
 
 export { COMPONENT_ID, StyledIconButton };

package/dist/esm/styled/StyledSplitButton.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).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.0.0'
+  'data-garden-version': '9.1.1'
 }).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.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -67,15 +67,15 @@ const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
 
 const COMPONENT_ID$3 = 'buttons.button';
 const getBorderRadius = props => {
-  if (props.isPill) {
+  if (props.$isPill) {
     return '100px';
   }
   return props.theme.borderRadii.md;
 };
 const getHeight = props => {
-  if (props.size === 'small') {
+  if (props.$size === 'small') {
     return `${props.theme.space.base * 8}px`;
-  } else if (props.size === 'large') {
+  } else if (props.$size === 'large') {
     return `${props.theme.space.base * 12}px`;
   }
   return `${props.theme.space.base * 10}px`;
@@ -83,12 +83,12 @@ const getHeight = props => {
 const colorStyles = _ref => {
   let {
     theme,
-    isLink,
-    isBasic,
-    isDanger,
-    isNeutral,
-    isPrimary,
-    focusInset
+    $isLink,
+    $isBasic,
+    $isDanger,
+    $isNeutral,
+    $isPrimary,
+    $focusInset
   } = _ref;
   let retVal;
   const disabledBackgroundColor = reactTheming.getColor({
@@ -115,10 +115,10 @@ const colorStyles = _ref => {
       offset: 200
     }
   };
-  if (isLink) {
+  if ($isLink) {
     const options = {
       theme,
-      variable: isDanger ? 'foreground.danger' : 'foreground.primary'
+      variable: $isDanger ? 'foreground.danger' : 'foreground.primary'
     };
     const foregroundColor = reactTheming.getColor(options);
     const hoverForegroundColor = reactTheming.getColor({
@@ -141,11 +141,11 @@ const colorStyles = _ref => {
         outlineColor: focusOutlineColor
       }
     }), hoverForegroundColor, activeForegroundColor, disabledForegroundColor);
-  } else if (isPrimary) {
+  } else if ($isPrimary) {
     let backgroundVariable;
-    if (isDanger) {
+    if ($isDanger) {
       backgroundVariable = 'background.dangerEmphasis';
-    } else if (isNeutral) {
+    } else if ($isNeutral) {
       backgroundVariable = 'background.emphasis';
     } else {
       backgroundVariable = 'background.primaryEmphasis';
@@ -169,10 +169,10 @@ const colorStyles = _ref => {
     });
     retVal = styled.css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], backgroundColor, foregroundColor, hoverBackgroundColor, reactTheming.focusStyles({
       theme,
-      inset: focusInset,
-      shadowWidth: focusInset ? 'sm' : 'md',
-      spacerWidth: focusInset ? 'sm' : 'xs',
-      styles: (isDanger || isNeutral) && focusInset ? {
+      inset: $focusInset,
+      shadowWidth: $focusInset ? 'sm' : 'md',
+      spacerWidth: $focusInset ? 'sm' : 'xs',
+      styles: ($isDanger || $isNeutral) && $focusInset ? {
         borderColor: reactTheming.getColor({
           theme,
           variable: 'border.primaryEmphasis'
@@ -186,8 +186,8 @@ const colorStyles = _ref => {
     let focusBorderColor;
     let backgroundVariable;
     let foregroundVariable;
-    if (isDanger) {
-      if (!isBasic) {
+    if ($isDanger) {
+      if (!$isBasic) {
         const borderOptions = {
           theme,
           variable: 'border.dangerEmphasis'
@@ -201,19 +201,19 @@ const colorStyles = _ref => {
           ...borderOptions,
           ...offset200
         });
-        if (isNeutral) {
+        if ($isNeutral) {
           focusBorderColor = reactTheming.getColor(borderOptions);
         }
       }
       backgroundVariable = 'background.dangerEmphasis';
-      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.danger';
+      foregroundVariable = $isNeutral ? 'foreground.default' : 'foreground.danger';
     } else {
-      if (!isBasic) {
+      if (!$isBasic) {
         const borderOptions = {
           theme,
           variable: 'border.primaryEmphasis'
         };
-        if (isNeutral) {
+        if ($isNeutral) {
           borderColor = reactTheming.getColor({
             theme,
             variable: 'border.default',
@@ -238,7 +238,7 @@ const colorStyles = _ref => {
         }
       }
       backgroundVariable = 'background.primaryEmphasis';
-      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.primary';
+      foregroundVariable = $isNeutral ? 'foreground.default' : 'foreground.primary';
     }
     const hoverBackgroundColor = reactTheming.getColor({
       theme,
@@ -260,7 +260,7 @@ const colorStyles = _ref => {
     let iconForegroundColor;
     let hoverIconForegroundColor;
     let activeIconForegroundColor;
-    if (isNeutral) {
+    if ($isNeutral) {
       const iconOptions = {
         theme,
         variable: 'foreground.subtle'
@@ -286,7 +286,7 @@ const colorStyles = _ref => {
     }
     retVal = styled.css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], borderColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
       theme,
-      inset: focusInset,
+      inset: $focusInset,
       styles: {
         borderColor: focusBorderColor
       }
@@ -297,10 +297,10 @@ const colorStyles = _ref => {
 const groupStyles = _ref2 => {
   let {
     theme,
-    isPrimary,
-    isBasic,
-    isPill,
-    focusInset
+    $isPrimary,
+    $isBasic,
+    $isPill,
+    $focusInset
   } = _ref2;
   const {
     rtl,
@@ -310,20 +310,20 @@ const groupStyles = _ref2 => {
   const startPosition = rtl ? 'right' : 'left';
   const endPosition = rtl ? 'left' : 'right';
   const marginOffset = borderWidths.sm;
-  const marginDisplacement = `${isPrimary || isBasic ? '' : '-'}${marginOffset}`;
-  const iconMarginDisplacement = isPill && '-2px';
-  const disabledBackgroundColor = !isPrimary && reactTheming.getColor({
+  const marginDisplacement = `${$isPrimary || $isBasic ? '' : '-'}${marginOffset}`;
+  const iconMarginDisplacement = $isPill && '-2px';
+  const disabledBackgroundColor = !$isPrimary && reactTheming.getColor({
     theme,
     variable: 'background.disabled'
   });
-  const borderColor = isBasic ? 'transparent' : 'revert';
+  const borderColor = $isBasic ? 'transparent' : 'revert';
   const focusColor = reactTheming.getColor({
     theme,
     variable: 'border.primaryEmphasis'
   });
-  const focusBoxShadow = isBasic && !isPrimary && reactTheming.getFocusBoxShadow({
+  const focusBoxShadow = $isBasic && !$isPrimary && reactTheming.getFocusBoxShadow({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     spacerColor: {
       hue: focusColor
     },
@@ -334,24 +334,24 @@ const groupStyles = _ref2 => {
   return styled.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, reactTheming.SELECTOR_FOCUS_VISIBLE, focusColor, focusBoxShadow, reactTheming.SELECTOR_FOCUS_VISIBLE, disabledBackgroundColor, startPosition, marginDisplacement, startPosition, marginOffset, endPosition, endPosition, startPosition, startPosition, StyledIcon, endPosition, iconMarginDisplacement, StyledIcon, startPosition, iconMarginDisplacement);
 };
 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');
+  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');
 };
 const sizeStyles = props => {
   let retVal;
-  if (props.isLink) {
+  if (props.$isLink) {
     retVal = styled.css(["padding:0;font-size:inherit;"]);
   } else {
     const height = getHeight(props);
     const lineHeight = polished.math(`${height} - (${props.theme.borderWidths.sm} * 2)`);
     let padding;
     let fontSize;
-    if (props.size === 'small') {
+    if (props.$size === 'small') {
       fontSize = props.theme.fontSizes.sm;
       padding = `${props.theme.space.base * 3}px`;
     } else {
       fontSize = props.theme.fontSizes.md;
-      if (props.size === 'large') {
+      if (props.$size === 'large') {
         padding = `${props.theme.space.base * 5}px`;
       } else {
         padding = `${props.theme.space.base * 4}px`;
@@ -363,20 +363,20 @@ 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.0.0',
+  'data-garden-version': '9.1.1',
   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), reactTheming.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), props => 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,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), reactTheming.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), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, 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.0.0',
+  'data-garden-version': '9.1.1',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
-  isLink: true,
+  $isLink: true,
   type: undefined
 })).withConfig({
   displayName: "StyledAnchor",
@@ -404,7 +404,7 @@ 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.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -442,7 +442,7 @@ const iconColorStyles = _ref => {
 };
 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');
+  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');
 };
 const iconStyles = props => {
   const size = props.theme.iconSizes.md;
@@ -452,12 +452,12 @@ 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.0.0'
+    'data-garden-version': '9.1.1'
   };
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
+})(["", ";& ", "{", "}", ";"], iconButtonStyles, StyledIcon, iconStyles, props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
 
 const SplitButtonContext = React.createContext(undefined);
 const useSplitButtonContext = () => {
@@ -490,26 +490,43 @@ const EndIconComponent = _ref => {
 EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 
-const ButtonComponent = React.forwardRef((props, ref) => {
-  const splitButtonContext = useSplitButtonContext();
-  const computedProps = {
-    ...props,
-    focusInset: props.focusInset || splitButtonContext,
-    $isUnderlined: props.isLink
-  };
-  return React__namespace.default.createElement(StyledButton, Object.assign({}, computedProps, {
+const ButtonComponent = React.forwardRef((_ref, ref) => {
+  let {
+    focusInset,
+    isBasic,
+    isDanger,
+    isLink,
+    isNeutral,
+    isPill,
+    isPrimary,
+    isStretched,
+    size,
+    ...other
+  } = _ref;
+  const splitButtonFocusInset = useSplitButtonContext();
+  return React__namespace.default.createElement(StyledButton, Object.assign({}, other, {
+    $focusInset: focusInset || splitButtonFocusInset,
+    $isBasic: isBasic,
+    $isDanger: isDanger,
+    $isLink: isLink,
+    $isNeutral: isNeutral,
+    $isPill: isPill,
+    $isPrimary: isPrimary,
+    $isStretched: isStretched,
+    $isUnderlined: isLink,
+    $size: size,
     ref: ref
   }));
 });
 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,
+  isBasic: PropTypes__default.default.bool,
+  isDanger: PropTypes__default.default.bool,
   isLink: PropTypes__default.default.bool,
+  isNeutral: PropTypes__default.default.bool,
+  isPill: PropTypes__default.default.bool,
+  isPrimary: PropTypes__default.default.bool,
   isStretched: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(SIZE)
 };
@@ -523,12 +540,13 @@ Button.StartIcon = StartIcon;
 const Anchor = React.forwardRef((_ref, ref) => {
   let {
     children,
-    isExternal,
     externalIconLabel,
+    isDanger,
+    isExternal,
     isUnderlined = true,
-    ...otherProps
+    ...other
   } = _ref;
-  let anchorProps = otherProps;
+  let anchorProps = other;
   if (isExternal) {
     anchorProps = {
       target: '_blank',
@@ -544,6 +562,7 @@ const Anchor = React.forwardRef((_ref, ref) => {
   const iconAriaLabel = reactTheming.useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
   return React__namespace.default.createElement(StyledAnchor, Object.assign({
     ref: ref,
+    $isDanger: isDanger,
     $isUnderlined: isUnderlined
   }, anchorProps), children, !!isExternal &&
   React__namespace.default.createElement(StyledExternalIcon, {
@@ -563,28 +582,40 @@ Anchor.propTypes = {
 const IconButton = React.forwardRef((_ref, ref) => {
   let {
     children,
+    focusInset,
+    isBasic,
+    isDanger,
+    isNeutral,
+    isPill,
+    isPrimary,
     isRotated,
-    ...otherProps
+    size,
+    ...other
   } = _ref;
-  const focusInset = useSplitButtonContext();
-  return React__namespace.default.createElement(StyledIconButton, Object.assign({
+  const splitButtonFocusInset = useSplitButtonContext();
+  return React__namespace.default.createElement(StyledIconButton, Object.assign({}, other, {
+    $isBasic: isBasic,
+    $isDanger: isDanger,
+    $isNeutral: isNeutral,
+    $isPill: isPill,
+    $isPrimary: isPrimary,
+    $size: size,
+    $focusInset: focusInset || splitButtonFocusInset,
     ref: ref
-  }, otherProps, {
-    focusInset: otherProps.focusInset || focusInset
   }), React__namespace.default.createElement(StyledIcon, {
     $isRotated: isRotated
   }, children));
 });
 IconButton.displayName = 'IconButton';
 IconButton.propTypes = {
+  focusInset: PropTypes__default.default.bool,
+  isBasic: PropTypes__default.default.bool,
   isDanger: PropTypes__default.default.bool,
-  size: PropTypes__default.default.oneOf(SIZE),
   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
+  isPrimary: PropTypes__default.default.bool,
+  isRotated: PropTypes__default.default.bool,
+  size: PropTypes__default.default.oneOf(SIZE)
 };
 IconButton.defaultProps = {
   isPill: true,
@@ -608,14 +639,9 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const ChevronButton = React.forwardRef((_ref, ref) => {
-  let {
-    ...buttonProps
-  } = _ref;
-  return React__namespace.default.createElement(IconButton, Object.assign({
-    ref: ref
-  }, buttonProps), React__namespace.default.createElement(SvgChevronDownStroke, null));
-});
+const ChevronButton = React.forwardRef((props, ref) => React__namespace.default.createElement(IconButton, Object.assign({
+  ref: ref
+}, props), React__namespace.default.createElement(SvgChevronDownStroke, null)));
 ChevronButton.displayName = 'ChevronButton';
 ChevronButton.propTypes = IconButton.propTypes;
 ChevronButton.defaultProps = {

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

@@ -4,11 +4,21 @@
  * 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 { ButtonHTMLAttributes } from 'react';
 import { DefaultTheme, ThemeProps } from 'styled-components';
 import { IButtonProps } from '../types';
 export declare const COMPONENT_ID = "buttons.button";
-export interface IStyledButtonProps extends IButtonProps {
+export interface IStyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     $isUnderlined?: boolean;
+    $isDanger?: boolean;
+    $size?: IButtonProps['size'];
+    $isStretched?: boolean;
+    $isNeutral?: boolean;
+    $isPrimary?: boolean;
+    $isBasic?: boolean;
+    $isLink?: boolean;
+    $isPill?: boolean;
+    $focusInset?: boolean;
 }
 export declare const getHeight: (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => string;
 export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, IStyledButtonProps, never>;

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

@@ -9,7 +9,7 @@ interface IStyledIconProps {
     $isRotated: boolean;
     $position?: 'start' | 'end';
 }
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledIconProps, "data-garden-id" | "data-garden-version">;

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

@@ -5,5 +5,9 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
+import { IStyledButtonProps } from './StyledButton';
 export declare const COMPONENT_ID = "buttons.icon_button";
-export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, import("./StyledButton").IStyledButtonProps, never>;
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, IStyledButtonProps & {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0",
+  "version": "9.1.1",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -27,14 +27,14 @@
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": ">=9.0.0-next",
+    "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0",
-    "@zendeskgarden/svg-icons": "7.2.0"
+    "@zendeskgarden/react-theming": "^9.1.1",
+    "@zendeskgarden/svg-icons": "7.3.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "zendeskgarden:src": "src/index.ts"
+  "zendeskgarden:src": "src/index.ts",
+  "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
 }