@zendeskgarden/react-buttons 8.67.0 → 8.68.0

package/dist/index.cjs.js

@@ -58,11 +58,11 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
-})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledButtonGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -87,7 +87,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -98,9 +98,7 @@ StyledIcon.defaultProps = {
 
 const COMPONENT_ID$3 = 'buttons.button';
 const getBorderRadius = props => {
-  if (props.isLink) {
-    return 0;
-  } else if (props.isPill) {
+  if (props.isPill) {
     return '100px';
   }
   return props.theme.borderRadii.md;
@@ -130,31 +128,72 @@ const colorStyles = props => {
   const baseColor = reactTheming.getColor(hue, shade, props.theme);
   const hoverColor = reactTheming.getColor(hue, shade + 100, props.theme);
   const activeColor = reactTheming.getColor(hue, shade + 200, props.theme);
+  const focusColor = reactTheming.getColor('primaryHue', shade, props.theme);
   const disabledBackgroundColor = getDisabledBackgroundColor(props);
   const disabledForegroundColor = reactTheming.getColor(hue, shade - 200, props.theme);
-  const boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
-  const boxShadow = `
-    ${props.focusInset ? 'inset' : ''}
-    ${props.theme.shadows.md(polished.rgba(boxShadowColor, 0.35))}`;
   if (props.isLink) {
-    retVal = styled.css(["background-color:transparent;color:", ";&:focus{color:", ";}&:hover,&[data-garden-focus-visible]{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, baseColor, hoverColor, activeColor, disabledForegroundColor);
+    retVal = styled.css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, reactTheming.focusStyles({
+      theme: props.theme,
+      condition: false,
+      styles: {
+        color: baseColor,
+        outlineColor: focusColor
+      }
+    }), hoverColor, activeColor, disabledForegroundColor);
   } else if (props.isPrimary || props.isSelected) {
-    retVal = styled.css(["background-color:", ";color:", ";&:hover{background-color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], props.isPrimary && props.isSelected ? activeColor : baseColor, props.theme.palette.white, hoverColor, boxShadow, activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
+    retVal = styled.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:", ";}"], props.isPrimary && props.isSelected ? activeColor : baseColor, props.theme.palette.white, hoverColor, reactTheming.focusStyles({
+      theme: props.theme,
+      inset: props.focusInset,
+      shadowWidth: props.focusInset ? 'sm' : 'md',
+      spacerWidth: props.focusInset ? 'sm' : 'xs',
+      styles: props.isDanger && props.focusInset ? {
+        borderColor: focusColor
+      } : undefined
+    }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
     const borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColor('neutralHue', 300, props.theme) : baseColor;
     const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
     const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
     const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
-    retVal = styled.css(["border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{border-color:", ";box-shadow:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, props.isNeutral && baseColor, boxShadow, !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    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 ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, reactTheming.focusStyles({
+      theme: props.theme,
+      inset: props.focusInset,
+      styles: props.isNeutral ? {
+        borderColor: baseColor
+      } : undefined
+    }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
 const groupStyles = props => {
-  const isPrimary = props.isPrimary;
-  const rtl = props.theme.rtl;
-  const lightBorderColor = props.theme.colors.background;
-  const disabledBackgroundColor = getDisabledBackgroundColor(props);
-  return styled.css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', polished.math(`${props.theme.borderWidths.sm} * -1`), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
+  const {
+    theme,
+    isPrimary,
+    isBasic,
+    isSelected,
+    isPill,
+    focusInset
+  } = props;
+  const {
+    rtl,
+    borderWidths,
+    borders
+  } = theme;
+  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 = reactTheming.getColor('primaryHue', 600, theme);
+  const focusBoxShadow = isBasic && !isSelected && !isPrimary && reactTheming.getFocusBoxShadow({
+    theme,
+    inset: focusInset,
+    spacerHue: focusColor,
+    hue: 'transparent'
+  });
+  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;
@@ -186,12 +225,12 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => props.isLink ? 'none' : `${props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), props => props.isLink && 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["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), 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), StyledButtonGroup, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -199,7 +238,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -233,7 +272,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': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -260,7 +299,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { Children, createContext, useContext, forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColor, focusStyles, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
 import { rgba, math, em } from 'polished';
 import { useButtonGroup } from '@zendeskgarden/container-buttongroup';
 
@@ -33,11 +33,11 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
-})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledButtonGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -62,7 +62,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -73,9 +73,7 @@ StyledIcon.defaultProps = {
 
 const COMPONENT_ID$3 = 'buttons.button';
 const getBorderRadius = props => {
-  if (props.isLink) {
-    return 0;
-  } else if (props.isPill) {
+  if (props.isPill) {
     return '100px';
   }
   return props.theme.borderRadii.md;
@@ -105,31 +103,72 @@ const colorStyles = props => {
   const baseColor = getColor(hue, shade, props.theme);
   const hoverColor = getColor(hue, shade + 100, props.theme);
   const activeColor = getColor(hue, shade + 200, props.theme);
+  const focusColor = getColor('primaryHue', shade, props.theme);
   const disabledBackgroundColor = getDisabledBackgroundColor(props);
   const disabledForegroundColor = getColor(hue, shade - 200, props.theme);
-  const boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
-  const boxShadow = `
-    ${props.focusInset ? 'inset' : ''}
-    ${props.theme.shadows.md(rgba(boxShadowColor, 0.35))}`;
   if (props.isLink) {
-    retVal = css(["background-color:transparent;color:", ";&:focus{color:", ";}&:hover,&[data-garden-focus-visible]{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, baseColor, hoverColor, activeColor, disabledForegroundColor);
+    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,
+      condition: false,
+      styles: {
+        color: baseColor,
+        outlineColor: focusColor
+      }
+    }), hoverColor, activeColor, disabledForegroundColor);
   } else if (props.isPrimary || props.isSelected) {
-    retVal = css(["background-color:", ";color:", ";&:hover{background-color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], props.isPrimary && props.isSelected ? activeColor : baseColor, props.theme.palette.white, hoverColor, boxShadow, activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
+    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:", ";}"], props.isPrimary && props.isSelected ? activeColor : 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
+      } : undefined
+    }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
     const borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor;
     const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
     const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
     const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
-    retVal = css(["border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{border-color:", ";box-shadow:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, props.isNeutral && baseColor, boxShadow, !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    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 ", ",&[data-garden-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 && getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
 const groupStyles = props => {
-  const isPrimary = props.isPrimary;
-  const rtl = props.theme.rtl;
-  const lightBorderColor = props.theme.colors.background;
-  const disabledBackgroundColor = getDisabledBackgroundColor(props);
-  return css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', math(`${props.theme.borderWidths.sm} * -1`), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
+  const {
+    theme,
+    isPrimary,
+    isBasic,
+    isSelected,
+    isPill,
+    focusInset
+  } = props;
+  const {
+    rtl,
+    borderWidths,
+    borders
+  } = theme;
+  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 = getColor('primaryHue', 600, theme);
+  const focusBoxShadow = isBasic && !isSelected && !isPrimary && getFocusBoxShadow({
+    theme,
+    inset: focusInset,
+    spacerHue: focusColor,
+    hue: 'transparent'
+  });
+  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$1 = props => {
   const size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
@@ -161,12 +200,12 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => props.isLink ? 'none' : `${props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), props => props.isLink && 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["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$1(props), StyledButtonGroup, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -174,7 +213,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -208,7 +247,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -235,7 +274,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"

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

@@ -4,11 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+import React from 'react';
 import { IButtonIconProps } from '../../types';
 /**
  * @extends SVGAttributes<SVGElement>
  */
 export declare const EndIcon: {
-    (props: IButtonIconProps): JSX.Element;
+    (props: IButtonIconProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -4,11 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+import React from 'react';
 import { IButtonIconProps } from '../../types';
 /**
  * @extends SVGAttributes<SVGElement>
  */
 export declare const StartIcon: {
-    (props: IButtonIconProps): JSX.Element;
+    (props: IButtonIconProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -10,5 +10,6 @@ export declare const getHeight: (props: IButtonProps & ThemeProps<DefaultTheme>)
 /**
  * 1. FF <input type="submit"> fix
  * 2. <a> element reset
+ * 3. Shifting :focus-visible from LVHFA order to preserve `text-decoration` on hover
  */
 export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "8.67.0",
+  "version": "8.68.0",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -27,13 +27,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^8.68.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
+  "gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
 }