@cloudflare/component-button 5.0.0 → 5.2.0

package/dist/UnstyledButton.d.ts

@@ -1,29 +1,58 @@
 /// <reference types="react" />
 declare const UnstyledButton: import("react").ComponentType<{
+    is?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     children?: import("react").ReactNode;
-    type?: "button" | "reset" | "submit" | undefined;
-    id?: string | undefined;
-    key?: import("react").Key | null | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    value?: string | number | readonly string[] | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    accessKey?: string | undefined;
     className?: string | undefined;
-    color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
-    name?: string | undefined;
-    role?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    radioGroup?: string | undefined;
+    role?: string | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -39,7 +68,7 @@ declare const UnstyledButton: import("react").ComponentType<{
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "menu" | "dialog" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: boolean | "true" | "false" | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -69,9 +98,16 @@ declare const UnstyledButton: import("react").ComponentType<{
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string;
-    } | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
+    autoFocus?: boolean | undefined;
+    formAction?: string | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    key?: import("react").Key | null | undefined;
+    hidden?: boolean | undefined;
+    translate?: "yes" | "no" | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -156,12 +192,15 @@ declare const UnstyledButton: import("react").ComponentType<{
     onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
     onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onDoubleClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onDoubleClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDragCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDragEndCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDragEnter?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDragEnterCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
@@ -171,11 +210,14 @@ declare const UnstyledButton: import("react").ComponentType<{
     onDragLeaveCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDragOver?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDragOverCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDragStartCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDrop?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onDropCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
     onMouseDown?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onMouseDownCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onMouseMove?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onMouseMoveCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
     onMouseOut?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
@@ -226,48 +268,7 @@ declare const UnstyledButton: import("react").ComponentType<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-    dir?: string | undefined;
-    is?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | number | readonly string[] | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-    contextMenu?: string | undefined;
-    placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    radioGroup?: string | undefined;
-    about?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    resource?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    autoFocus?: boolean | undefined;
-    formAction?: string | undefined;
-    formEncType?: string | undefined;
-    formMethod?: string | undefined;
-    formNoValidate?: boolean | undefined;
-    formTarget?: string | undefined;
-    hidden?: boolean | undefined;
-    translate?: "no" | "yes" | undefined;
+    borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
     height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
     width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
@@ -276,7 +277,6 @@ declare const UnstyledButton: import("react").ComponentType<{
     fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
     fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
     textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
-    borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
     marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
     marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
@@ -335,12 +335,14 @@ declare const UnstyledButton: import("react").ComponentType<{
     flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
     flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
     flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
+    gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
+    focus?: boolean | undefined;
     innerRef?: import("react").Ref<HTMLButtonElement> | undefined;
     gridColumnSpan?: number | number[] | "end" | "all" | undefined;
     gridColumnPad?: number | number[] | undefined;
     gridRowSpan?: number | number[] | undefined;
     gridRowPad?: number | number[] | undefined;
-    gridAlign?: ("end" | "start" | "center" | "stretch") | undefined;
-    gridJustify?: ("end" | "start" | "center" | "stretch") | undefined;
+    gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
+    gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
 }>;
 export default UnstyledButton;

package/es/Button.js

@@ -11,19 +11,24 @@ import PropTypes from 'prop-types';
 import { isDarkMode } from '@cloudflare/style-const';
 import { ariaAttributes, createStyledComponent } from '@cloudflare/style-container';
 import { Icon } from '@cloudflare/component-icon';
+var borderRadius = '4px';
+
+var standardColors = (theme, state) => {
+  var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6;
 
-var standardColors = theme => {
   var color = theme.colors.gray[9];
   return {
     default: isDarkMode() ? color : theme.colors.gray[1],
-    primary: color,
     success: color,
     warning: color,
-    danger: color,
     inverted: {
-      danger: theme.colors.red[3],
-      primary: theme.colors.blue[3]
-    }
+      danger: (_theme$colors$button$ = theme.colors.button.danger[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$[state === 'active' ? 'text' : 'background'],
+      primary: (_theme$colors$button$2 = theme.colors.button.primary[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2[state === 'active' ? 'text' : 'background']
+    },
+    primary: ((_theme$colors$button$3 = theme.colors.button.primary[state]) === null || _theme$colors$button$3 === void 0 ? void 0 : _theme$colors$button$3.text) || color,
+    danger: ((_theme$colors$button$4 = theme.colors.button.danger[state]) === null || _theme$colors$button$4 === void 0 ? void 0 : _theme$colors$button$4.text) || color,
+    plain: ((_theme$colors$button$5 = theme.colors.button.plain[state]) === null || _theme$colors$button$5 === void 0 ? void 0 : _theme$colors$button$5.text) || color,
+    plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color
   };
 };
 
@@ -35,95 +40,73 @@ var buttonColors = theme => {
     normal: {
       backgroundColor: {
         default: isDarkMode() ? theme.colors.gray[standardIndex] : theme.colors.gray[8],
-        primary: theme.colors.blue[standardIndex],
+        primary: theme.colors.button.primary.normal.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.normal.background,
         inverted: {
           danger: 'transparent',
           primary: 'transparent'
-        }
+        },
+        plain: theme.colors.button.plain.normal.background,
+        plainMono: theme.colors.button.plainMono.normal.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'normal')
     },
     // Hover
     hover: {
       backgroundColor: {
         default: theme.colors.gray[isDarkMode() ? 2 : 7],
-        primary: theme.colors.blue[hoverIndex],
+        primary: theme.colors.button.primary.hover.background,
         success: theme.colors.green[hoverIndex],
         warning: theme.colors.orange[hoverIndex],
-        danger: theme.colors.red[hoverIndex],
-        inverted: {
-          danger: theme.colors.red[hoverIndex],
-          primary: theme.colors.blue[hoverIndex]
-        }
-      },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
+        danger: theme.colors.button.danger.hover.background,
         inverted: {
           danger: theme.colors.white,
           primary: theme.colors.white
-        }
-      })
+        },
+        plain: theme.colors.button.plain.hover.background,
+        plainMono: theme.colors.button.plainMono.hover.background
+      },
+      color: standardColors(theme, 'hover')
     },
     // Active
     active: {
       backgroundColor: {
-        default: theme.colors.gray[isDarkMode() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        default: theme.colors.gray[isDarkMode() ? 3 : 6],
+        primary: theme.colors.button.primary.active.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.active.background,
         inverted: {
-          danger: theme.colors.red[standardIndex],
-          primary: theme.colors.blue[standardIndex]
-        }
+          danger: theme.colors.red[hoverIndex],
+          primary: theme.colors.blue[hoverIndex]
+        },
+        plain: theme.colors.button.plain.active.background,
+        plainMono: theme.colors.button.plainMono.active.background
       },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
-        inverted: {
-          danger: theme.colors.gray[9],
-          primary: theme.colors.gray[9]
-        }
-      })
+      color: standardColors(theme, 'active')
     },
     // Focus
     focus: {
       backgroundColor: {
         default: theme.colors.gray[isDarkMode() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        primary: theme.colors.button.primary.focus.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.focus.background,
         inverted: {
           danger: 'transparent',
           primary: 'transparent'
-        }
+        },
+        plain: theme.colors.button.plain.focus.background,
+        plainMono: theme.colors.button.plainMono.focus.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'focus')
     }
   };
 };
 
-var getFocusOutlineColor = (theme, type, inverted) => {
-  var _invertedOutlines$typ;
-
-  var standardIndex = isDarkMode() ? 3 : 4;
-  var FOCUS_OFFSET_INDEX = 2;
-  var focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
-  var outlines = {
-    default: isDarkMode() ? theme.colors.gray[focusIndex] : theme.colors.gray[8 - FOCUS_OFFSET_INDEX],
-    primary: theme.colors.blue[focusIndex],
-    success: theme.colors.green[focusIndex],
-    warning: theme.colors.orange[focusIndex],
-    danger: theme.colors.red[focusIndex]
-  };
-  var invertedOutlines = {
-    danger: theme.colors.red[focusIndex],
-    primary: theme.colors.blue[focusIndex]
-  };
-  return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
-};
-
 var colorAccessor = (property, _ref) => {
   var {
     inverted = false,
@@ -140,13 +123,18 @@ var interactionStyleAccessor = (interactionState, props) => {
   } = props;
   var isInteractive = !(loading || disabled);
   var stateStyles = buttonColors(theme)[interactionState];
+  var color = colorAccessor(stateStyles.color, props);
+  var backgroundColor = colorAccessor(stateStyles.backgroundColor, props);
   return isInteractive ? {
-    backgroundColor: colorAccessor(stateStyles.backgroundColor, props),
-    color: colorAccessor(stateStyles.color, props)
+    backgroundColor,
+    color,
+    boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(interactionState === 'active' ? backgroundColor : color) : undefined
   } : undefined;
 };
 
 export var buttonStyles = props => {
+  var _styles$buttonState, _styles$buttonState2;
+
   var {
     theme,
     loading = false,
@@ -158,28 +146,33 @@ export var buttonStyles = props => {
     space = 2,
     type = 'default',
     stretch,
-    noWrapText
+    noWrapText,
+    buttonState
   } = props;
-  var normalStyles = buttonColors(theme).normal;
-  var hoverStyles = interactionStyleAccessor('hover', props);
-  var activeStyles = interactionStyleAccessor('active', props);
-  var focusStyles = interactionStyleAccessor('focus', props);
-  return {
-    '&:hover': hoverStyles,
-    '&:active': activeStyles,
-    '&:focus': focusStyles,
+  var styles = {
+    normal: buttonColors(theme).normal,
+    hover: interactionStyleAccessor('hover', props),
+    active: interactionStyleAccessor('active', props),
+    focus: interactionStyleAccessor('focus', props)
+  };
+  var color = buttonState && styles[buttonState] ? (_styles$buttonState = styles[buttonState]) === null || _styles$buttonState === void 0 ? void 0 : _styles$buttonState.color : colorAccessor(styles.normal.color, props);
+  var backgroundColor = buttonState && styles[buttonState] ? (_styles$buttonState2 = styles[buttonState]) === null || _styles$buttonState2 === void 0 ? void 0 : _styles$buttonState2.backgroundColor : colorAccessor(styles.normal.backgroundColor, props);
+  return _objectSpread(_objectSpread(_objectSpread({}, buttonState ? {} : {
+    '&:focus': styles.focus,
+    '&:hover': styles.hover,
+    '&:active': styles.active,
+    '&:focus:active': styles.active
+  }), {}, {
     '&:focus-visible': {
       outlineOffset: 3,
       outlineStyle: 'auto',
-      outlineColor: getFocusOutlineColor(theme, type, inverted)
+      outlineColor: type === 'danger' ? theme.colors.red[isDarkMode() ? 3 : 4] : theme.colors.focus
     },
-    '&:focus-within:hover': focusStyles,
-    '&:active:hover': activeStyles,
     '&[title]': {
       pointerEvents: disabled ? 'auto' : 'none'
     },
-    backgroundColor: colorAccessor(normalStyles.backgroundColor, props),
-    color: loading ? 'transparent' : colorAccessor(normalStyles.color, props),
+    backgroundColor,
+    color: loading ? 'transparent' : color,
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
     flexGrow: stretch ? 1 : undefined,
@@ -189,22 +182,17 @@ export var buttonStyles = props => {
     fontSize: 2,
     fontWeight: 400,
     lineHeight: 1.2,
-    borderBottomWidth: inverted ? '1px' : 0,
-    borderLeftWidth: inverted ? '1px' : 0,
-    borderRightWidth: inverted ? '1px' : 0,
-    borderTopWidth: inverted ? '1px' : 0,
-    borderBottomStyle: 'solid',
-    borderTopStyle: 'solid',
-    borderLeftStyle: 'solid',
-    borderRightStyle: 'solid',
-    borderColor: inverted ? colorAccessor(normalStyles.color, props) : 'currentColor',
-    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
+    border: 'none'
+  }, inverted ? {
+    boxShadow: "inset 0px 0px 0px 1px ".concat(buttonState === 'active' ? backgroundColor : color)
+  } : {}), {}, {
+    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
     '&::before': loading ? {
       content: '"•••"',
-      color: colorAccessor(normalStyles.color, props),
+      color,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -232,7 +220,7 @@ export var buttonStyles = props => {
     pointerEvents: disabled ? 'none' : 'auto',
     position: 'relative',
     textAlign: 'center',
-    transitionProperty: loading ? 'background-color,border-color' : 'background-color,border-color,color',
+    transitionProperty: 'all',
     transitionDuration: '200ms',
     transitionTimingFunction: 'ease',
     userSelect: 'none',
@@ -240,10 +228,11 @@ export var buttonStyles = props => {
     float: 'none',
     whiteSpace: noWrapText ? 'nowrap' : 'normal',
     width: direction === 'column' ? '100%' : 'auto'
-  };
+  });
 };
 var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   var {
+    id,
     submit = false,
     className,
     disabled,
@@ -263,6 +252,7 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     [propName]: props[propName]
   }), {});
   return /*#__PURE__*/React.createElement("button", _extends({}, ariaAndDataProps, {
+    id: id,
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -285,6 +275,7 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 Button.propTypes = {
+  id: PropTypes.string,
   onClick: PropTypes.func,
   submit: PropTypes.bool,
   spaced: PropTypes.bool,
@@ -292,7 +283,7 @@ Button.propTypes = {
   direction: PropTypes.oneOf(['column', 'row']),
   className: PropTypes.string,
   group: PropTypes.oneOf(['first', 'inbetween', 'last']),
-  type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger']),
+  type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono']),
   testId: PropTypes.string,
   disabled: PropTypes.bool,
   loading: PropTypes.bool,
@@ -304,7 +295,8 @@ Button.propTypes = {
   tabIndex: PropTypes.number,
   ariaLabel: PropTypes.string,
   stretch: PropTypes.bool,
-  noWrapText: PropTypes.bool
+  noWrapText: PropTypes.bool,
+  buttonState: PropTypes.oneOf(['hover', 'active', 'focus'])
 };
 Button.displayName = 'Button';
 export default createStyledComponent(buttonStyles, Button);

package/es/UnstyledButton.js

@@ -1,11 +1,25 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import { createStyledComponent } from '@cloudflare/style-container';
-var UnstyledButton = createStyledComponent(() => ({
-  background: 'none',
-  color: 'inherit',
-  border: 'none',
-  padding: 0,
-  font: 'inherit',
-  cursor: 'pointer',
-  outline: 'inherit'
-}), 'button');
+var UnstyledButton = createStyledComponent(_ref => {
+  var {
+    theme,
+    focus,
+    disabled
+  } = _ref;
+  return _objectSpread({
+    background: 'none',
+    color: 'inherit',
+    border: 'none',
+    padding: 0,
+    opacity: disabled ? 0.5 : undefined,
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'inherit'
+  }, focus ? theme.mixins.focus() : {});
+}, 'button');
 export default UnstyledButton;