@zendeskgarden/react-buttons 9.0.0-next.0 → 9.0.0-next.10

package/dist/esm/styled/StyledIcon.js

@@ -0,0 +1,31 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'buttons.icon';
+const sizeStyles = props => {
+  let marginProperty;
+  if (props.$position === 'start') {
+    marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
+  } else if (props.$position === 'end') {
+    marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
+  }
+  return marginProperty && css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
+};
+const StyledIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).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 };

package/dist/esm/styled/StyledIconButton.js

@@ -0,0 +1,39 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledButton, getHeight } from './StyledButton.js';
+import { StyledIcon } from './StyledIcon.js';
+
+const COMPONENT_ID = 'buttons.icon_button';
+const iconColorStyles = props => {
+  const shade = 600;
+  const baseColor = getColorV8('neutralHue', shade, props.theme);
+  const hoverColor = getColorV8('neutralHue', shade + 100, props.theme);
+  const activeColor = getColorV8('neutralHue', shade + 200, props.theme);
+  return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
+};
+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');
+};
+const iconStyles = props => {
+  const size = props.theme.iconSizes.md;
+  return css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
+};
+const StyledIconButton = styled(StyledButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledIconButton",
+  componentId: "sc-1t0ughp-0"
+})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIconButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIconButton };

package/dist/esm/styled/StyledSplitButton.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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-next.10'
+}).withConfig({
+  displayName: "StyledSplitButton",
+  componentId: "sc-1u4v04v-0"
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSplitButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSplitButton };

package/dist/esm/types/index.js

@@ -0,0 +1,9 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const SIZE = ['small', 'medium', 'large'];
+
+export { SIZE };

package/dist/esm/utils/useSplitButtonContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const SplitButtonContext = createContext(undefined);
+const useSplitButtonContext = () => {
+  return useContext(SplitButtonContext);
+};
+
+export { SplitButtonContext, useSplitButtonContext };

package/dist/index.cjs.js

@@ -1,20 +1,16 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var reactMergeRefs = require('react-merge-refs');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
-var containerSelection = require('@zendeskgarden/container-selection');
-var containerUtilities = require('@zendeskgarden/container-utilities');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -40,60 +36,37 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function _extends$2() {
-  _extends$2 = 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$2.apply(this, arguments);
-}
-
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$5 = 'buttons.button_group_view';
-const StyledButtonGroup = styled__default.default.div.attrs({
+const StyledSplitButton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
-  displayName: "StyledButtonGroup",
-  componentId: "sc-1fbpzef-0"
+  displayName: "StyledSplitButton",
+  componentId: "sc-1u4v04v-0"
 })(["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 = {
+StyledSplitButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$4 = 'buttons.icon';
 const sizeStyles$1 = props => {
   let marginProperty;
-  if (props.position === 'start') {
+  if (props.$position === 'start') {
     marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
-  } else if (props.position === 'end') {
+  } else if (props.$position === 'end') {
     marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
   }
   return marginProperty && styled.css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
 };
-const StyledIcon = styled__default.default(_ref => {
-  let {
-    children,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -106,7 +79,7 @@ const getBorderRadius = props => {
   return props.theme.borderRadii.md;
 };
 const getDisabledBackgroundColor = props => {
-  return reactTheming.getColor('neutralHue', 200, props.theme);
+  return reactTheming.getColorV8('neutralHue', 200, props.theme);
 };
 const getHeight = props => {
   if (props.size === 'small') {
@@ -119,7 +92,7 @@ const getHeight = props => {
 const colorStyles = props => {
   let retVal;
   let hue;
-  if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) {
+  if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
     hue = 'neutralHue';
   } else if (props.isDanger) {
     hue = 'dangerHue';
@@ -127,12 +100,12 @@ const colorStyles = props => {
     hue = 'primaryHue';
   }
   const shade = 600;
-  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 baseColor = reactTheming.getColorV8(hue, shade, props.theme);
+  const hoverColor = reactTheming.getColorV8(hue, shade + 100, props.theme);
+  const activeColor = reactTheming.getColorV8(hue, shade + 200, props.theme);
+  const focusColor = reactTheming.getColorV8('primaryHue', shade, props.theme);
   const disabledBackgroundColor = getDisabledBackgroundColor(props);
-  const disabledForegroundColor = reactTheming.getColor(hue, shade - 200, props.theme);
+  const disabledForegroundColor = reactTheming.getColorV8(hue, shade - 200, props.theme);
   if (props.isLink) {
     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,
@@ -142,8 +115,8 @@ const colorStyles = props => {
         outlineColor: focusColor
       }
     }), hoverColor, activeColor, disabledForegroundColor);
-  } else if (props.isPrimary || props.isSelected) {
-    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({
+  } else if (props.isPrimary) {
+    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:", ";}"], baseColor, props.theme.palette.white, hoverColor, reactTheming.focusStyles({
       theme: props.theme,
       inset: props.focusInset,
       shadowWidth: props.focusInset ? 'sm' : 'md',
@@ -153,17 +126,17 @@ const colorStyles = props => {
       } : 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 borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColorV8('neutralHue', 300, props.theme) : baseColor;
+    const foregroundColor = props.isNeutral ? reactTheming.getColorV8('foreground', 600 , props.theme) : baseColor;
     const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
     const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
-    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({
+    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:", ";}"], !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);
+    }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
@@ -172,7 +145,6 @@ const groupStyles = props => {
     theme,
     isPrimary,
     isBasic,
-    isSelected,
     isPill,
     focusInset
   } = props;
@@ -188,12 +160,16 @@ const groupStyles = props => {
   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({
+  const focusColor = reactTheming.getColorV8('primaryHue', 600, theme);
+  const focusBoxShadow = isBasic && !isPrimary && reactTheming.getFocusBoxShadow({
     theme,
     inset: focusInset,
-    spacerHue: focusColor,
-    hue: 'transparent'
+    spacerColor: {
+      hue: focusColor
+    },
+    color: {
+      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);
 };
@@ -227,12 +203,12 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.0',
+  'data-garden-version': '9.0.0-next.10',
   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), 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));
+})(["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), StyledSplitButton, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -240,7 +216,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': '9.0.0-next.0',
+  'data-garden-version': '9.0.0-next.10',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -274,7 +250,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-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -286,9 +262,9 @@ StyledExternalIcon.defaultProps = {
 const COMPONENT_ID = 'buttons.icon_button';
 const iconColorStyles = props => {
   const shade = 600;
-  const baseColor = reactTheming.getColor('neutralHue', shade, props.theme);
-  const hoverColor = reactTheming.getColor('neutralHue', shade + 100, props.theme);
-  const activeColor = reactTheming.getColor('neutralHue', shade + 200, props.theme);
+  const baseColor = reactTheming.getColorV8('neutralHue', shade, props.theme);
+  const hoverColor = reactTheming.getColorV8('neutralHue', shade + 100, props.theme);
+  const activeColor = reactTheming.getColorV8('neutralHue', shade + 200, props.theme);
   return styled.css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
 };
 const iconButtonStyles = props => {
@@ -301,7 +277,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -310,49 +286,45 @@ StyledIconButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const ButtonGroupContext = React.createContext(undefined);
-const useButtonGroupContext = () => {
-  return React.useContext(ButtonGroupContext);
-};
-
 const SplitButtonContext = React.createContext(undefined);
 const useSplitButtonContext = () => {
   return React.useContext(SplitButtonContext);
 };
 
-const StartIconComponent = props => React__namespace.default.createElement(StyledIcon, _extends$2({
-  position: "start"
-}, props));
+const StartIconComponent = _ref => {
+  let {
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledIcon, Object.assign({
+    $position: "start",
+    $isRotated: isRotated
+  }, props));
+};
 StartIconComponent.displayName = 'Button.StartIcon';
 const StartIcon = StartIconComponent;
 
-const EndIconComponent = props => React__namespace.default.createElement(StyledIcon, _extends$2({
-  position: "end"
-}, props));
+const EndIconComponent = _ref => {
+  let {
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledIcon, Object.assign({
+    $position: "end",
+    $isRotated: isRotated
+  }, props));
+};
 EndIconComponent.displayName = 'Button.EndIcon';
 const EndIcon = EndIconComponent;
 
 const ButtonComponent = React.forwardRef((props, ref) => {
-  const buttonGroupContext = useButtonGroupContext();
   const splitButtonContext = useSplitButtonContext();
-  let computedRef = ref;
-  let computedProps = {
+  const computedProps = {
     ...props,
-    focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
+    focusInset: props.focusInset || splitButtonContext
   };
-  if (buttonGroupContext && !props.disabled) {
-    if (!props.value) {
-      throw new Error('"value" prop must be provided to Button when used within a ButtonGroup');
-    }
-    computedProps = buttonGroupContext.getButtonProps({
-      isSelected: props.value === buttonGroupContext.selectedItem,
-      ...computedProps
-    });
-    computedRef = reactMergeRefs.mergeRefs([
-    computedProps.ref, ref]);
-  }
-  return React__namespace.default.createElement(StyledButton, _extends$2({}, computedProps, {
-    ref: computedRef
+  return React__namespace.default.createElement(StyledButton, Object.assign({}, computedProps, {
+    ref: ref
   }));
 });
 ButtonComponent.displayName = 'Button';
@@ -365,7 +337,6 @@ ButtonComponent.propTypes = {
   focusInset: PropTypes__default.default.bool,
   isLink: PropTypes__default.default.bool,
   isStretched: PropTypes__default.default.bool,
-  isSelected: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(SIZE)
 };
 ButtonComponent.defaultProps = {
@@ -396,7 +367,7 @@ const Anchor = React.forwardRef((_ref, ref) => {
     noIconLabel: 'true'
   };
   const iconAriaLabel = reactTheming.useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
-  return React__namespace.default.createElement(StyledAnchor, _extends$2({
+  return React__namespace.default.createElement(StyledAnchor, Object.assign({
     ref: ref
   }, anchorProps), children, isExternal &&
   React__namespace.default.createElement(StyledExternalIcon, {
@@ -412,58 +383,6 @@ Anchor.propTypes = {
   externalIconLabel: PropTypes__default.default.string
 };
 
-const ButtonGroup = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    onSelect,
-    selectedItem: controlledSelectedValue,
-    ...otherProps
-  } = _ref;
-  const {
-    rtl
-  } = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
-  const [internalSelectedValue, setInternalSelectedValue] = React.useState();
-  const selectedValue = containerUtilities.getControlledValue(controlledSelectedValue, internalSelectedValue);
-  const values = React.useMemo(() => React.Children.toArray(children).reduce((buttons, child) => {
-    if ( React.isValidElement(child) && child.type !== 'string' && !child.props.disabled) {
-      buttons.push(child.props.value);
-    }
-    return buttons;
-  }, []), [children]);
-  const {
-    selectedValue: selectedItem,
-    getElementProps,
-    getGroupProps
-  } = containerSelection.useSelection({
-    rtl,
-    values,
-    defaultSelectedValue: values[0],
-    selectedValue,
-    onSelect: React.useCallback(value => {
-      onSelect && onSelect(value);
-      setInternalSelectedValue(value);
-    }, [onSelect])
-  });
-  const contextValue = React.useMemo(() => ({
-    selectedItem,
-    getButtonProps: props => getElementProps({
-      role: 'button',
-      selectedAriaKey: 'aria-pressed',
-      ...props
-    })
-  }), [selectedItem, getElementProps]);
-  return React__namespace.default.createElement(ButtonGroupContext.Provider, {
-    value: contextValue
-  }, React__namespace.default.createElement(StyledButtonGroup, _extends$2({
-    ref: ref
-  }, getGroupProps(otherProps)), children));
-});
-ButtonGroup.displayName = 'ButtonGroup';
-ButtonGroup.propTypes = {
-  selectedItem: PropTypes__default.default.any,
-  onSelect: PropTypes__default.default.func
-};
-
 const IconButton = React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -471,12 +390,12 @@ const IconButton = React.forwardRef((_ref, ref) => {
     ...otherProps
   } = _ref;
   const focusInset = useSplitButtonContext();
-  return React__namespace.default.createElement(StyledIconButton, _extends$2({
+  return React__namespace.default.createElement(StyledIconButton, Object.assign({
     ref: ref
   }, otherProps, {
     focusInset: otherProps.focusInset || focusInset
   }), React__namespace.default.createElement(StyledIcon, {
-    isRotated: isRotated
+    $isRotated: isRotated
   }, children));
 });
 IconButton.displayName = 'IconButton';
@@ -516,7 +435,7 @@ const ChevronButton = React.forwardRef((_ref, ref) => {
   let {
     ...buttonProps
   } = _ref;
-  return React__namespace.default.createElement(IconButton, _extends$2({
+  return React__namespace.default.createElement(IconButton, Object.assign({
     ref: ref
   }, buttonProps), React__namespace.default.createElement(SvgChevronDownStroke, null));
 });
@@ -535,7 +454,7 @@ const SplitButton = React.forwardRef((_ref, ref) => {
   } = _ref;
   return React__namespace.default.createElement(SplitButtonContext.Provider, {
     value: true
-  }, React__namespace.default.createElement(StyledButtonGroup, _extends$2({
+  }, React__namespace.default.createElement(StyledSplitButton, Object.assign({
     ref: ref
   }, other), children));
 });
@@ -546,7 +465,7 @@ const ToggleButton = React.forwardRef((_ref, ref) => {
     isPressed,
     ...otherProps
   } = _ref;
-  return React__namespace.default.createElement(Button, _extends$2({
+  return React__namespace.default.createElement(Button, Object.assign({
     "aria-pressed": isPressed,
     ref: ref
   }, otherProps));
@@ -565,7 +484,7 @@ const ToggleIconButton = React.forwardRef((_ref, ref) => {
     isPressed,
     ...otherProps
   } = _ref;
-  return React__namespace.default.createElement(IconButton, _extends$2({
+  return React__namespace.default.createElement(IconButton, Object.assign({
     "aria-pressed": isPressed,
     ref: ref
   }, otherProps));
@@ -583,7 +502,6 @@ ToggleIconButton.defaultProps = {
 
 exports.Anchor = Anchor;
 exports.Button = Button;
-exports.ButtonGroup = ButtonGroup;
 exports.ChevronButton = ChevronButton;
 exports.IconButton = IconButton;
 exports.SplitButton = SplitButton;

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

@@ -4,16 +4,10 @@
  * 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, { SVGAttributes } from 'react';
+import React from 'react';
 import { IButtonProps } from '../types';
 import { StartIcon } from './components/StartIcon';
 import { EndIcon } from './components/EndIcon';
-/**
- * @deprecated use IButtonStartIconProps or IButtonEndIconProps instead
- */
-export interface IIconProps extends SVGAttributes<SVGSVGElement> {
-    isRotated?: boolean;
-}
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */

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

@@ -10,6 +10,6 @@ import { IButtonIconProps } from '../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const EndIcon: {
-    (props: IButtonIconProps): React.JSX.Element;
+    ({ isRotated, ...props }: IButtonIconProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -10,6 +10,6 @@ import { IButtonIconProps } from '../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const StartIcon: {
-    (props: IButtonIconProps): React.JSX.Element;
+    ({ isRotated, ...props }: IButtonIconProps): React.JSX.Element;
     displayName: string;
 };

package/dist/typings/index.d.ts

@@ -4,12 +4,11 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { Button, type IIconProps } from './elements/Button';
+export { Button } from './elements/Button';
 export { Anchor } from './elements/Anchor';
-export { ButtonGroup } from './elements/ButtonGroup';
 export { ChevronButton } from './elements/ChevronButton';
 export { IconButton } from './elements/IconButton';
 export { SplitButton } from './elements/SplitButton';
 export { ToggleButton } from './elements/ToggleButton';
 export { ToggleIconButton } from './elements/ToggleIconButton';
-export type { IButtonProps, IButtonIconProps as IButtonEndIconProps, IButtonIconProps as IButtonStartIconProps, IAnchorProps, IIconButtonProps, IIconButtonProps as IChevronButtonProps, IToggleButtonProps, IToggleIconButtonProps, IButtonGroupProps } from './types';
+export type { IButtonProps, IButtonIconProps as IButtonEndIconProps, IButtonIconProps as IButtonStartIconProps, IAnchorProps, IIconButtonProps, IIconButtonProps as IChevronButtonProps, IToggleButtonProps, IToggleIconButtonProps } from './types';

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

@@ -14,4 +14,4 @@ export declare const StyledAnchor: import("styled-components").StyledComponent<"
     dir: "rtl" | undefined;
     isLink: boolean;
     type: undefined;
-}, "type" | "dir" | "data-garden-id" | "data-garden-version" | "as" | "isLink">;
+}, "type" | "dir" | "as" | "data-garden-id" | "data-garden-version" | "isLink">;