@zendeskgarden/react-buttons 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/elements/Anchor.js

@@ -0,0 +1,54 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { StyledAnchor } from '../styled/StyledAnchor.js';
+import '../styled/StyledButton.js';
+import '../styled/StyledSplitButton.js';
+import { StyledExternalIcon } from '../styled/StyledExternalIcon.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledIconButton.js';
+import { useText } from '@zendeskgarden/react-theming';
+
+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, Object.assign({
+    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
+};
+
+export { Anchor };

package/dist/esm/elements/Button.js

@@ -0,0 +1,49 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { SIZE } from '../types/index.js';
+import '../styled/StyledAnchor.js';
+import { StyledButton } from '../styled/StyledButton.js';
+import '../styled/StyledSplitButton.js';
+import '../styled/StyledExternalIcon.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledIconButton.js';
+import { useSplitButtonContext } from '../utils/useSplitButtonContext.js';
+import { StartIcon } from './components/StartIcon.js';
+import { EndIcon } from './components/EndIcon.js';
+
+const ButtonComponent = forwardRef((props, ref) => {
+  const splitButtonContext = useSplitButtonContext();
+  const computedProps = {
+    ...props,
+    focusInset: props.focusInset || splitButtonContext
+  };
+  return React__default.createElement(StyledButton, Object.assign({}, computedProps, {
+    ref: ref
+  }));
+});
+ButtonComponent.displayName = 'Button';
+ButtonComponent.propTypes = {
+  isNeutral: PropTypes.bool,
+  isPrimary: PropTypes.bool,
+  isDanger: PropTypes.bool,
+  isPill: PropTypes.bool,
+  isBasic: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  isLink: PropTypes.bool,
+  isStretched: PropTypes.bool,
+  size: PropTypes.oneOf(SIZE)
+};
+ButtonComponent.defaultProps = {
+  size: 'medium'
+};
+const Button = ButtonComponent;
+Button.EndIcon = EndIcon;
+Button.StartIcon = StartIcon;
+
+export { Button };

package/dist/esm/elements/ChevronButton.js

@@ -0,0 +1,27 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import { IconButton } from './IconButton.js';
+import SvgChevronDownStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+
+const ChevronButton = forwardRef((_ref, ref) => {
+  let {
+    ...buttonProps
+  } = _ref;
+  return React__default.createElement(IconButton, Object.assign({
+    ref: ref
+  }, buttonProps), React__default.createElement(SvgChevronDownStroke, null));
+});
+ChevronButton.displayName = 'ChevronButton';
+ChevronButton.propTypes = IconButton.propTypes;
+ChevronButton.defaultProps = {
+  isBasic: false,
+  isPill: false,
+  size: 'medium'
+};
+
+export { ChevronButton };

package/dist/esm/elements/IconButton.js

@@ -0,0 +1,50 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { SIZE } from '../types/index.js';
+import '../styled/StyledAnchor.js';
+import '../styled/StyledButton.js';
+import '../styled/StyledSplitButton.js';
+import '../styled/StyledExternalIcon.js';
+import { StyledIcon } from '../styled/StyledIcon.js';
+import { StyledIconButton } from '../styled/StyledIconButton.js';
+import { useSplitButtonContext } from '../utils/useSplitButtonContext.js';
+
+const IconButton = forwardRef((_ref, ref) => {
+  let {
+    children,
+    isRotated,
+    ...otherProps
+  } = _ref;
+  const focusInset = useSplitButtonContext();
+  return React__default.createElement(StyledIconButton, Object.assign({
+    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'
+};
+
+export { IconButton };

package/dist/esm/elements/SplitButton.js

@@ -0,0 +1,29 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import '../styled/StyledAnchor.js';
+import '../styled/StyledButton.js';
+import { StyledSplitButton } from '../styled/StyledSplitButton.js';
+import '../styled/StyledExternalIcon.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledIconButton.js';
+import { SplitButtonContext } from '../utils/useSplitButtonContext.js';
+
+const SplitButton = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...other
+  } = _ref;
+  return React__default.createElement(SplitButtonContext.Provider, {
+    value: true
+  }, React__default.createElement(StyledSplitButton, Object.assign({
+    ref: ref
+  }, other), children));
+});
+SplitButton.displayName = 'SplitButton';
+
+export { SplitButton };

package/dist/esm/elements/ToggleButton.js

@@ -0,0 +1,30 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from './Button.js';
+
+const ToggleButton = forwardRef((_ref, ref) => {
+  let {
+    isPressed,
+    ...otherProps
+  } = _ref;
+  return React__default.createElement(Button, Object.assign({
+    "aria-pressed": isPressed,
+    ref: ref
+  }, otherProps));
+});
+ToggleButton.displayName = 'ToggleButton';
+ToggleButton.propTypes = {
+  ...Button.propTypes,
+  isPressed: PropTypes.oneOf([true, false, 'mixed'])
+};
+ToggleButton.defaultProps = {
+  size: 'medium'
+};
+
+export { ToggleButton };

package/dist/esm/elements/ToggleIconButton.js

@@ -0,0 +1,32 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { IconButton } from './IconButton.js';
+
+const ToggleIconButton = forwardRef((_ref, ref) => {
+  let {
+    isPressed,
+    ...otherProps
+  } = _ref;
+  return React__default.createElement(IconButton, Object.assign({
+    "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 { ToggleIconButton };

package/dist/esm/elements/components/EndIcon.js

@@ -0,0 +1,21 @@
+/**
+* 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 React__default from 'react';
+import '../../styled/StyledAnchor.js';
+import '../../styled/StyledButton.js';
+import '../../styled/StyledSplitButton.js';
+import '../../styled/StyledExternalIcon.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledIconButton.js';
+
+const EndIconComponent = props => React__default.createElement(StyledIcon, Object.assign({
+  position: "end"
+}, props));
+EndIconComponent.displayName = 'Button.EndIcon';
+const EndIcon = EndIconComponent;
+
+export { EndIcon };

package/dist/esm/elements/components/StartIcon.js

@@ -0,0 +1,21 @@
+/**
+* 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 React__default from 'react';
+import '../../styled/StyledAnchor.js';
+import '../../styled/StyledButton.js';
+import '../../styled/StyledSplitButton.js';
+import '../../styled/StyledExternalIcon.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledIconButton.js';
+
+const StartIconComponent = props => React__default.createElement(StyledIcon, Object.assign({
+  position: "start"
+}, props));
+StartIconComponent.displayName = 'Button.StartIcon';
+const StartIcon = StartIconComponent;
+
+export { StartIcon };

package/dist/esm/index.js

@@ -0,0 +1,13 @@
+/**
+* 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.
+*/
+export { Button } from './elements/Button.js';
+export { Anchor } from './elements/Anchor.js';
+export { ChevronButton } from './elements/ChevronButton.js';
+export { IconButton } from './elements/IconButton.js';
+export { SplitButton } from './elements/SplitButton.js';
+export { ToggleButton } from './elements/ToggleButton.js';
+export { ToggleIconButton } from './elements/ToggleIconButton.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/new-window-stroke.svg.js

@@ -0,0 +1,27 @@
+/**
+* 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';
+
+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 SvgNewWindowStroke = function SvgNewWindowStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__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"
+  })));
+};
+
+export { SvgNewWindowStroke as default };

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

@@ -0,0 +1,25 @@
+/**
+* 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';
+
+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"
+  })));
+};
+
+export { SvgChevronDownStroke as default };

package/dist/esm/styled/StyledAnchor.js

@@ -0,0 +1,27 @@
+/**
+* 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';
+import { StyledButton } from './StyledButton.js';
+
+const COMPONENT_ID = 'buttons.anchor';
+const StyledAnchor = styled(StyledButton).attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  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, props));
+StyledAnchor.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledAnchor };

package/dist/esm/styled/StyledButton.js

@@ -0,0 +1,155 @@
+/**
+* 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 { rgba, math, em } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
+import { StyledSplitButton } from './StyledSplitButton.js';
+import { StyledIcon } from './StyledIcon.js';
+
+const COMPONENT_ID = 'buttons.button';
+const getBorderRadius = props => {
+  if (props.isPill) {
+    return '100px';
+  }
+  return props.theme.borderRadii.md;
+};
+const getDisabledBackgroundColor = props => {
+  return getColorV8('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.isDanger) {
+    hue = 'neutralHue';
+  } else if (props.isDanger) {
+    hue = 'dangerHue';
+  } else {
+    hue = 'primaryHue';
+  }
+  const shade = 600;
+  const baseColor = getColorV8(hue, shade, props.theme);
+  const hoverColor = getColorV8(hue, shade + 100, props.theme);
+  const activeColor = getColorV8(hue, shade + 200, props.theme);
+  const focusColor = getColorV8('primaryHue', shade, props.theme);
+  const disabledBackgroundColor = getDisabledBackgroundColor(props);
+  const disabledForegroundColor = getColorV8(hue, shade - 200, props.theme);
+  if (props.isLink) {
+    retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, focusStyles({
+      theme: props.theme,
+      condition: false,
+      styles: {
+        color: baseColor,
+        outlineColor: focusColor
+      }
+    }), hoverColor, activeColor, disabledForegroundColor);
+  } else if (props.isPrimary) {
+    retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, focusStyles({
+      theme: props.theme,
+      inset: props.focusInset,
+      shadowWidth: props.focusInset ? 'sm' : 'md',
+      spacerWidth: props.focusInset ? 'sm' : 'xs',
+      styles: props.isDanger && props.focusInset ? {
+        borderColor: focusColor
+      } : undefined
+    }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
+  } else {
+    const borderColor = props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor;
+    const foregroundColor = props.isNeutral ? getColorV8('foreground', 600 , props.theme) : baseColor;
+    const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
+    const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
+    retVal = css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, focusStyles({
+      theme: props.theme,
+      inset: props.focusInset,
+      styles: props.isNeutral ? {
+        borderColor: baseColor
+      } : undefined
+    }), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+  }
+  return retVal;
+};
+const groupStyles = props => {
+  const {
+    theme,
+    isPrimary,
+    isBasic,
+    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 = getColorV8('primaryHue', 600, theme);
+  const focusBoxShadow = isBasic && !isPrimary && getFocusBoxShadow({
+    theme,
+    inset: focusInset,
+    spacerColor: {
+      hue: focusColor
+    },
+    color: {
+      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 = 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,
+  'data-garden-version': '9.0.0-next.8',
+  type: props.type || 'button'
+})).withConfig({
+  displayName: "StyledButton",
+  componentId: "sc-qe3ace-0"
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles(props), StyledSplitButton, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledButton, getHeight };

package/dist/esm/styled/StyledExternalIcon.js

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

package/dist/esm/styled/StyledIcon.js

@@ -0,0 +1,40 @@
+/**
+* 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 React__default, { Children } from 'react';
+import { 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(_ref => {
+  let {
+    children,
+    isRotated,
+    theme,
+    ...props
+  } = _ref;
+  return React__default.cloneElement(Children.only(children), props);
+}).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 };