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

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

@@ -4,13 +4,13 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+/// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
-import React from 'react';
 interface IStyledIconProps {
-    isRotated: boolean;
-    position?: 'start' | 'end';
+    $isRotated: boolean;
+    $position?: 'start' | 'end';
 }
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, isRotated, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledIconProps, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/{StyledButtonGroup.d.ts → StyledSplitButton.d.ts}

@@ -7,7 +7,7 @@
 /**
  * Accepts all `<div>` props
  */
-export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledSplitButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

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

@@ -6,7 +6,7 @@
  */
 export * from './StyledAnchor';
 export * from './StyledButton';
-export * from './StyledButtonGroup';
+export * from './StyledSplitButton';
 export * from './StyledExternalIcon';
 export * from './StyledIcon';
 export * from './StyledIconButton';

package/dist/typings/types/index.d.ts

@@ -4,7 +4,7 @@
  * 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 { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, SVGAttributes } from 'react';
 export declare const SIZE: readonly ["small", "medium", "large"];
 export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Applies danger styling */
@@ -25,8 +25,6 @@ export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     isPill?: boolean;
     /** Applies inset `box-shadow` styling on focus */
     focusInset?: boolean;
-    /** @ignore prop used by `ButtonGroup` */
-    isSelected?: boolean;
 }
 export interface IToggleButtonProps extends IButtonProps {
     /**
@@ -56,13 +54,3 @@ export interface IAnchorProps extends Pick<IButtonProps, 'isDanger'>, AnchorHTML
      **/
     externalIconLabel?: string;
 }
-export interface IButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
-    /** Defines the currently selected button in the group */
-    selectedItem?: any;
-    /**
-     * Handles button selection
-     *
-     * @param {any} item The selected item
-     */
-    onSelect?: (item: any) => void;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.10",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -21,20 +21,19 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-selection": "^3.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.1",
+    "@zendeskgarden/react-theming": "^9.0.0-next.10",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -47,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
+  "gitHead": "818e6100aa6676af7e972198b82516d330307d60"
 }

package/dist/index.esm.js

@@ -1,559 +0,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.
- */
-
-import * as React from 'react';
-import React__default, { Children, createContext, useContext, forwardRef, useState, useMemo, isValidElement, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { mergeRefs } from 'react-merge-refs';
-import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColor, focusStyles, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
-import { rgba, math, em } from 'polished';
-import { useSelection } from '@zendeskgarden/container-selection';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
-
-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.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.1'
-}).withConfig({
-  displayName: "StyledButtonGroup",
-  componentId: "sc-1fbpzef-0"
-})(["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
-};
-
-const COMPONENT_ID$4 = 'buttons.icon';
-const sizeStyles$1 = 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(_ref => {
-  let {
-    children,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.1'
-}).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 => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'buttons.button';
-const getBorderRadius = props => {
-  if (props.isPill) {
-    return '100px';
-  }
-  return props.theme.borderRadii.md;
-};
-const getDisabledBackgroundColor = props => {
-  return getColor('neutralHue', 200, props.theme);
-};
-const getHeight = props => {
-  if (props.size === 'small') {
-    return `${props.theme.space.base * 8}px`;
-  } else if (props.size === 'large') {
-    return `${props.theme.space.base * 12}px`;
-  }
-  return `${props.theme.space.base * 10}px`;
-};
-const colorStyles = props => {
-  let retVal;
-  let hue;
-  if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) {
-    hue = 'neutralHue';
-  } else if (props.isDanger) {
-    hue = 'dangerHue';
-  } else {
-    hue = 'primaryHue';
-  }
-  const shade = 600;
-  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);
-  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,
-      condition: false,
-      styles: {
-        color: baseColor,
-        outlineColor: focusColor
-      }
-    }), hoverColor, activeColor, disabledForegroundColor);
-  } else if (props.isPrimary || props.isSelected) {
-    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(["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 {
-    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;
-  return css(["width:", ";min-width:", ";height:", ";vertical-align:", ";"], size, size, size, props.isLink && 'middle');
-};
-const sizeStyles = props => {
-  let retVal;
-  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') {
-      fontSize = props.theme.fontSizes.sm;
-      padding = `${props.theme.space.base * 3}px`;
-    } else {
-      fontSize = props.theme.fontSizes.md;
-      if (props.size === 'large') {
-        padding = `${props.theme.space.base * 5}px`;
-      } else {
-        padding = `${props.theme.space.base * 4}px`;
-      }
-    }
-    retVal = css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], em(math(`${padding} - ${props.theme.borderWidths.sm}`), fontSize), height, lineHeight, fontSize);
-  }
-  return retVal;
-};
-const StyledButton = styled.button.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.1',
-  type: props.type || 'button'
-})).withConfig({
-  displayName: "StyledButton",
-  componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration: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
-};
-
-const COMPONENT_ID$2 = 'buttons.anchor';
-const StyledAnchor = styled(StyledButton).attrs(props => ({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1',
-  as: 'a',
-  dir: props.theme.rtl ? 'rtl' : undefined,
-  isLink: true,
-  type: undefined
-})).withConfig({
-  displayName: "StyledAnchor",
-  componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledAnchor.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _path$1;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M10.5 8.5V10c0 .3-.2.5-.5.5H2c-.3 0-.5-.2-.5-.5V2c0-.3.2-.5.5-.5h1.5M6 6l4-4m-3.5-.5H10c.3 0 .5.2.5.5v3.5"
-  })));
-};
-
-const COMPONENT_ID$1 = 'buttons.external_icon';
-const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
-}).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$1, props));
-StyledExternalIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'buttons.icon_button';
-const iconColorStyles = props => {
-  const shade = 600;
-  const baseColor = getColor('neutralHue', shade, props.theme);
-  const hoverColor = getColor('neutralHue', shade + 100, props.theme);
-  const activeColor = getColor('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.1'
-}).withConfig({
-  displayName: "StyledIconButton",
-  componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledIconButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const ButtonGroupContext = createContext(undefined);
-const useButtonGroupContext = () => {
-  return useContext(ButtonGroupContext);
-};
-
-const SplitButtonContext = createContext(undefined);
-const useSplitButtonContext = () => {
-  return useContext(SplitButtonContext);
-};
-
-const StartIconComponent = props => React__default.createElement(StyledIcon, _extends$2({
-  position: "start"
-}, props));
-StartIconComponent.displayName = 'Button.StartIcon';
-const StartIcon = StartIconComponent;
-
-const EndIconComponent = props => React__default.createElement(StyledIcon, _extends$2({
-  position: "end"
-}, props));
-EndIconComponent.displayName = 'Button.EndIcon';
-const EndIcon = EndIconComponent;
-
-const ButtonComponent = forwardRef((props, ref) => {
-  const buttonGroupContext = useButtonGroupContext();
-  const splitButtonContext = useSplitButtonContext();
-  let computedRef = ref;
-  let computedProps = {
-    ...props,
-    focusInset: props.focusInset || buttonGroupContext !== undefined || 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 = mergeRefs([
-    computedProps.ref, ref]);
-  }
-  return React__default.createElement(StyledButton, _extends$2({}, computedProps, {
-    ref: computedRef
-  }));
-});
-ButtonComponent.displayName = 'Button';
-ButtonComponent.propTypes = {
-  isNeutral: PropTypes.bool,
-  isPrimary: PropTypes.bool,
-  isDanger: PropTypes.bool,
-  isPill: PropTypes.bool,
-  isBasic: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  isLink: PropTypes.bool,
-  isStretched: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  size: PropTypes.oneOf(SIZE)
-};
-ButtonComponent.defaultProps = {
-  size: 'medium'
-};
-const Button = ButtonComponent;
-Button.EndIcon = EndIcon;
-Button.StartIcon = StartIcon;
-
-const Anchor = forwardRef((_ref, ref) => {
-  let {
-    children,
-    isExternal,
-    externalIconLabel,
-    ...otherProps
-  } = _ref;
-  let anchorProps = otherProps;
-  if (isExternal) {
-    anchorProps = {
-      target: '_blank',
-      rel: 'noopener noreferrer',
-      ...anchorProps
-    };
-  }
-  const checkProps = isExternal ? {
-    externalIconLabel
-  } : {
-    noIconLabel: 'true'
-  };
-  const iconAriaLabel = useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
-  return React__default.createElement(StyledAnchor, _extends$2({
-    ref: ref
-  }, anchorProps), children, isExternal &&
-  React__default.createElement(StyledExternalIcon, {
-    role: "img",
-    "aria-label": iconAriaLabel,
-    "aria-hidden": undefined
-  }));
-});
-Anchor.displayName = 'Anchor';
-Anchor.propTypes = {
-  isExternal: PropTypes.bool,
-  isDanger: PropTypes.bool,
-  externalIconLabel: PropTypes.string
-};
-
-const ButtonGroup = forwardRef((_ref, ref) => {
-  let {
-    children,
-    onSelect,
-    selectedItem: controlledSelectedValue,
-    ...otherProps
-  } = _ref;
-  const {
-    rtl
-  } = useContext(ThemeContext) || DEFAULT_THEME;
-  const [internalSelectedValue, setInternalSelectedValue] = useState();
-  const selectedValue = getControlledValue(controlledSelectedValue, internalSelectedValue);
-  const values = useMemo(() => Children.toArray(children).reduce((buttons, child) => {
-    if ( isValidElement(child) && child.type !== 'string' && !child.props.disabled) {
-      buttons.push(child.props.value);
-    }
-    return buttons;
-  }, []), [children]);
-  const {
-    selectedValue: selectedItem,
-    getElementProps,
-    getGroupProps
-  } = useSelection({
-    rtl,
-    values,
-    defaultSelectedValue: values[0],
-    selectedValue,
-    onSelect: useCallback(value => {
-      onSelect && onSelect(value);
-      setInternalSelectedValue(value);
-    }, [onSelect])
-  });
-  const contextValue = useMemo(() => ({
-    selectedItem,
-    getButtonProps: props => getElementProps({
-      role: 'button',
-      selectedAriaKey: 'aria-pressed',
-      ...props
-    })
-  }), [selectedItem, getElementProps]);
-  return React__default.createElement(ButtonGroupContext.Provider, {
-    value: contextValue
-  }, React__default.createElement(StyledButtonGroup, _extends$2({
-    ref: ref
-  }, getGroupProps(otherProps)), children));
-});
-ButtonGroup.displayName = 'ButtonGroup';
-ButtonGroup.propTypes = {
-  selectedItem: PropTypes.any,
-  onSelect: PropTypes.func
-};
-
-const IconButton = forwardRef((_ref, ref) => {
-  let {
-    children,
-    isRotated,
-    ...otherProps
-  } = _ref;
-  const focusInset = useSplitButtonContext();
-  return React__default.createElement(StyledIconButton, _extends$2({
-    ref: ref
-  }, otherProps, {
-    focusInset: otherProps.focusInset || focusInset
-  }), React__default.createElement(StyledIcon, {
-    isRotated: isRotated
-  }, children));
-});
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = {
-  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
-};
-IconButton.defaultProps = {
-  isPill: true,
-  isBasic: true,
-  size: 'medium'
-};
-
-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); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-  })));
-};
-
-const ChevronButton = forwardRef((_ref, ref) => {
-  let {
-    ...buttonProps
-  } = _ref;
-  return React__default.createElement(IconButton, _extends$2({
-    ref: ref
-  }, buttonProps), React__default.createElement(SvgChevronDownStroke, null));
-});
-ChevronButton.displayName = 'ChevronButton';
-ChevronButton.propTypes = IconButton.propTypes;
-ChevronButton.defaultProps = {
-  isBasic: false,
-  isPill: false,
-  size: 'medium'
-};
-
-const SplitButton = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...other
-  } = _ref;
-  return React__default.createElement(SplitButtonContext.Provider, {
-    value: true
-  }, React__default.createElement(StyledButtonGroup, _extends$2({
-    ref: ref
-  }, other), children));
-});
-SplitButton.displayName = 'SplitButton';
-
-const ToggleButton = forwardRef((_ref, ref) => {
-  let {
-    isPressed,
-    ...otherProps
-  } = _ref;
-  return React__default.createElement(Button, _extends$2({
-    "aria-pressed": isPressed,
-    ref: ref
-  }, otherProps));
-});
-ToggleButton.displayName = 'ToggleButton';
-ToggleButton.propTypes = {
-  ...Button.propTypes,
-  isPressed: PropTypes.oneOf([true, false, 'mixed'])
-};
-ToggleButton.defaultProps = {
-  size: 'medium'
-};
-
-const ToggleIconButton = forwardRef((_ref, ref) => {
-  let {
-    isPressed,
-    ...otherProps
-  } = _ref;
-  return React__default.createElement(IconButton, _extends$2({
-    "aria-pressed": isPressed,
-    ref: ref
-  }, otherProps));
-});
-ToggleIconButton.displayName = 'ToggleIconButton';
-ToggleIconButton.propTypes = {
-  ...IconButton.propTypes,
-  isPressed: PropTypes.oneOf([true, false, 'mixed'])
-};
-ToggleIconButton.defaultProps = {
-  isPill: true,
-  isBasic: true,
-  size: 'medium'
-};
-
-export { Anchor, Button, ButtonGroup, ChevronButton, IconButton, SplitButton, ToggleButton, ToggleIconButton };