@zendeskgarden/react-buttons 9.0.0-next.9 → 9.1.0

package/dist/esm/elements/Anchor.js

@@ -17,11 +17,13 @@ import { useText } from '@zendeskgarden/react-theming';
 const Anchor = forwardRef((_ref, ref) => {
   let {
     children,
-    isExternal,
     externalIconLabel,
-    ...otherProps
+    isDanger,
+    isExternal,
+    isUnderlined = true,
+    ...other
   } = _ref;
-  let anchorProps = otherProps;
+  let anchorProps = other;
   if (isExternal) {
     anchorProps = {
       target: '_blank',
@@ -36,8 +38,10 @@ 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
-  }, anchorProps), children, isExternal &&
+    ref: ref,
+    $isDanger: isDanger,
+    $isUnderlined: isUnderlined
+  }, anchorProps), children, !!isExternal &&
   React__default.createElement(StyledExternalIcon, {
     role: "img",
     "aria-label": iconAriaLabel,
@@ -48,6 +52,7 @@ Anchor.displayName = 'Anchor';
 Anchor.propTypes = {
   isExternal: PropTypes.bool,
   isDanger: PropTypes.bool,
+  isUnderlined: PropTypes.bool,
   externalIconLabel: PropTypes.string
 };
 

package/dist/esm/elements/Button.js

@@ -17,25 +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
-  };
-  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/node_modules/@zendeskgarden/svg-icons/src/12/new-window-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 SvgNewWindowStroke = function SvgNewWindowStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/StyledAnchor.js

@@ -5,23 +5,20 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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-next.9',
+  'data-garden-version': '9.1.0',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
-  isLink: true,
+  $isLink: true,
   type: undefined
 })).withConfig({
   displayName: "StyledAnchor",
   componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledAnchor.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(props['data-garden-id'], props));
 
 export { StyledAnchor };

package/dist/esm/styled/StyledButton.js

@@ -5,88 +5,248 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { rgba, math, em } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
+import { math, em } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
 import { StyledSplitButton } from './StyledSplitButton.js';
 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 getDisabledBackgroundColor = props => {
-  return getColorV8('neutralHue', 200, props.theme);
-};
 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`;
 };
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isLink,
+    $isBasic,
+    $isDanger,
+    $isNeutral,
+    $isPrimary,
+    $focusInset
+  } = _ref;
   let retVal;
-  let hue;
-  if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
-    hue = 'neutralHue';
-  } else if (props.isDanger) {
-    hue = 'dangerHue';
-  } else {
-    hue = 'primaryHue';
-  }
-  const shade = 600;
-  const baseColor = getColorV8(hue, shade, props.theme);
-  const hoverColor = getColorV8(hue, shade + 100, props.theme);
-  const activeColor = getColorV8(hue, shade + 200, props.theme);
-  const focusColor = getColorV8('primaryHue', shade, props.theme);
-  const disabledBackgroundColor = getDisabledBackgroundColor(props);
-  const disabledForegroundColor = getColorV8(hue, shade - 200, props.theme);
-  if (props.isLink) {
-    retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, focusStyles({
-      theme: props.theme,
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  if ($isLink) {
+    const options = {
+      theme,
+      variable: $isDanger ? 'foreground.danger' : 'foreground.primary'
+    };
+    const foregroundColor = getColor(options);
+    const hoverForegroundColor = getColor({
+      ...options,
+      ...offset100
+    });
+    const activeForegroundColor = getColor({
+      ...options,
+      ...offset200
+    });
+    const focusOutlineColor = getColor({
+      theme,
+      variable: 'border.primaryEmphasis'
+    });
+    retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], foregroundColor, focusStyles({
+      theme,
       condition: false,
       styles: {
-        color: baseColor,
-        outlineColor: focusColor
+        color: foregroundColor ,
+        outlineColor: focusOutlineColor
       }
-    }), hoverColor, activeColor, disabledForegroundColor);
-  } else if (props.isPrimary) {
-    retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, focusStyles({
-      theme: props.theme,
-      inset: props.focusInset,
-      shadowWidth: props.focusInset ? 'sm' : 'md',
-      spacerWidth: props.focusInset ? 'sm' : 'xs',
-      styles: props.isDanger && props.focusInset ? {
-        borderColor: focusColor
+    }), hoverForegroundColor, activeForegroundColor, disabledForegroundColor);
+  } else if ($isPrimary) {
+    let backgroundVariable;
+    if ($isDanger) {
+      backgroundVariable = 'background.dangerEmphasis';
+    } else if ($isNeutral) {
+      backgroundVariable = 'background.emphasis';
+    } else {
+      backgroundVariable = 'background.primaryEmphasis';
+    }
+    const options = {
+      theme,
+      variable: backgroundVariable
+    };
+    const backgroundColor = getColor(options);
+    const hoverBackgroundColor = getColor({
+      ...options,
+      ...offset100
+    });
+    const activeBackgroundColor = getColor({
+      ...options,
+      ...offset200
+    });
+    const foregroundColor = getColor({
+      theme,
+      variable: 'foreground.onEmphasis'
+    });
+    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 ? {
+        borderColor: getColor({
+          theme,
+          variable: 'border.primaryEmphasis'
+        })
       } : undefined
-    }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
+    }), activeBackgroundColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
-    const borderColor = props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor;
-    const foregroundColor = props.isNeutral ? getColorV8('foreground', 600 , props.theme) : baseColor;
-    const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
-    const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
-    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:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, focusStyles({
-      theme: props.theme,
-      inset: props.focusInset,
-      styles: props.isNeutral ? {
-        borderColor: baseColor
-      } : undefined
-    }), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    let borderColor;
+    let hoverBorderColor;
+    let activeBorderColor;
+    let focusBorderColor;
+    let backgroundVariable;
+    let foregroundVariable;
+    if ($isDanger) {
+      if (!$isBasic) {
+        const borderOptions = {
+          theme,
+          variable: 'border.dangerEmphasis'
+        };
+        borderColor = getColor(borderOptions);
+        hoverBorderColor = getColor({
+          ...borderOptions,
+          ...offset100
+        });
+        activeBorderColor = getColor({
+          ...borderOptions,
+          ...offset200
+        });
+        if ($isNeutral) {
+          focusBorderColor = getColor(borderOptions);
+        }
+      }
+      backgroundVariable = 'background.dangerEmphasis';
+      foregroundVariable = $isNeutral ? 'foreground.default' : 'foreground.danger';
+    } else {
+      if (!$isBasic) {
+        const borderOptions = {
+          theme,
+          variable: 'border.primaryEmphasis'
+        };
+        if ($isNeutral) {
+          borderColor = getColor({
+            theme,
+            variable: 'border.default',
+            ...offset100
+          });
+          hoverBorderColor = getColor(borderOptions);
+          focusBorderColor = hoverBorderColor;
+          activeBorderColor = getColor({
+            ...borderOptions,
+            ...offset100
+          });
+        } else {
+          borderColor = getColor(borderOptions);
+          hoverBorderColor = getColor({
+            ...borderOptions,
+            ...offset100
+          });
+          activeBorderColor = getColor({
+            ...borderOptions,
+            ...offset200
+          });
+        }
+      }
+      backgroundVariable = 'background.primaryEmphasis';
+      foregroundVariable = $isNeutral ? 'foreground.default' : 'foreground.primary';
+    }
+    const hoverBackgroundColor = getColor({
+      theme,
+      variable: backgroundVariable,
+      transparency: theme.opacity[100]
+    });
+    const activeBackgroundColor = getColor({
+      theme,
+      variable: backgroundVariable,
+      transparency: theme.opacity[200]
+    });
+    const foregroundOptions = {
+      theme,
+      variable: foregroundVariable
+    };
+    const foregroundColor = getColor(foregroundOptions);
+    let hoverForegroundColor;
+    let activeForegroundColor;
+    let iconForegroundColor;
+    let hoverIconForegroundColor;
+    let activeIconForegroundColor;
+    if ($isNeutral) {
+      const iconOptions = {
+        theme,
+        variable: 'foreground.subtle'
+      };
+      iconForegroundColor = getColor(iconOptions);
+      hoverIconForegroundColor = getColor({
+        ...iconOptions,
+        ...offset100
+      });
+      activeIconForegroundColor = getColor({
+        ...iconOptions,
+        ...offset200
+      });
+    } else {
+      hoverForegroundColor = getColor({
+        ...foregroundOptions,
+        ...offset100
+      });
+      activeForegroundColor = getColor({
+        ...foregroundOptions,
+        ...offset200
+      });
+    }
+    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,
+      styles: {
+        borderColor: focusBorderColor
+      }
+    }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, iconForegroundColor, StyledIcon, StyledIcon, hoverIconForegroundColor, StyledIcon, activeIconForegroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
-const groupStyles = props => {
-  const {
+const groupStyles = _ref2 => {
+  let {
     theme,
-    isPrimary,
-    isBasic,
-    isPill,
-    focusInset
-  } = props;
+    $isPrimary,
+    $isBasic,
+    $isPill,
+    $focusInset
+  } = _ref2;
   const {
     rtl,
     borderWidths,
@@ -95,14 +255,20 @@ const groupStyles = props => {
   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 && getDisabledBackgroundColor(props);
-  const borderColor = isBasic ? 'transparent' : 'revert';
-  const focusColor = getColorV8('primaryHue', 600, theme);
-  const focusBoxShadow = isBasic && !isPrimary && getFocusBoxShadow({
+  const marginDisplacement = `${$isPrimary || $isBasic ? '' : '-'}${marginOffset}`;
+  const iconMarginDisplacement = $isPill && '-2px';
+  const disabledBackgroundColor = !$isPrimary && getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const borderColor = $isBasic ? 'transparent' : 'revert';
+  const focusColor = getColor({
     theme,
-    inset: focusInset,
+    variable: 'border.primaryEmphasis'
+  });
+  const focusBoxShadow = $isBasic && !$isPrimary && getFocusBoxShadow({
+    theme,
+    inset: $focusInset,
     spacerColor: {
       hue: focusColor
     },
@@ -113,24 +279,24 @@ const groupStyles = props => {
   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`;
@@ -141,15 +307,12 @@ const sizeStyles = props => {
   return retVal;
 };
 const StyledButton = styled.button.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
+  'data-garden-version': '9.1.0',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,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:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{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.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));
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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 { StyledButton, getHeight };
+export { COMPONENT_ID, StyledButton, getHeight };

package/dist/esm/styled/StyledExternalIcon.js

@@ -6,18 +6,15 @@
 */
 import styled from 'styled-components';
 import SvgNewWindowStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/new-window-stroke.svg.js';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+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-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
 })(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledExternalIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledExternalIcon };

package/dist/esm/styled/StyledIcon.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.icon';
 const sizeStyles = props => {
@@ -19,13 +19,10 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).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), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledIcon };