@atlaskit/button 16.1.2 → 16.1.6

package/dist/es2019/shared/colors.js

@@ -1,5 +1,4 @@
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 // Hard coding the active rgba color value rather than using a helper to convert it
 // With helper it would be: hex2rgba(colors.B75, 0.6)
 const fadedB75 = 'rgba(179, 212, 255, 0.6)';
@@ -8,106 +7,106 @@ const values = {
   background: {
     default: {
       default: {
-        light: token('color.background.subtleNeutral.resting', colors.N20A),
-        dark: token('color.background.subtleNeutral.resting', colors.DN70)
+        light: `var(--ds-background-neutral, ${colors.N20A})`,
+        dark: `var(--ds-background-neutral, ${colors.DN70})`
       },
       hover: {
-        light: token('color.background.subtleNeutral.hover', colors.N30A),
-        dark: token('color.background.subtleNeutral.hover', colors.DN60)
+        light: `var(--ds-background-neutral-hovered, ${colors.N30A})`,
+        dark: `var(--ds-background-neutral-hovered, ${colors.DN60})`
       },
       active: {
-        light: token('color.background.subtleNeutral.pressed', fadedB75),
-        dark: token('color.background.subtleNeutral.pressed', colors.B75)
+        light: `var(--ds-background-neutral-pressed, ${fadedB75})`,
+        dark: `var(--ds-background-neutral-pressed, ${colors.B75})`
       },
       disabled: {
-        light: token('color.background.disabled', colors.N20A),
-        dark: token('color.background.disabled', colors.DN70)
+        light: `var(--ds-background-disabled, ${colors.N20A})`,
+        dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.DN0)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       },
       focusSelected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.DN0)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       }
     },
     primary: {
       default: {
-        light: token('color.background.boldBrand.resting', colors.B400),
-        dark: token('color.background.boldBrand.resting', colors.B100)
+        light: `var(--ds-background-brand-bold, ${colors.B400})`,
+        dark: `var(--ds-background-brand-bold, ${colors.B100})`
       },
       hover: {
-        light: token('color.background.boldBrand.hover', colors.B300),
-        dark: token('color.background.boldBrand.hover', colors.B75)
+        light: `var(--ds-background-brand-bold-hovered, ${colors.B300})`,
+        dark: `var(--ds-background-brand-bold-hovered, ${colors.B75})`
       },
       active: {
-        light: token('color.background.boldBrand.pressed', colors.B500),
-        dark: token('color.background.boldBrand.pressed', colors.B200)
+        light: `var(--ds-background-brand-bold-pressed, ${colors.B500})`,
+        dark: `var(--ds-background-brand-bold-pressed, ${colors.B200})`
       },
       disabled: {
-        light: token('color.background.disabled', colors.N20A),
-        dark: token('color.background.disabled', colors.DN70)
+        light: `var(--ds-background-disabled, ${colors.N20A})`,
+        dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.DN0)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       },
       focusSelected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.DN0)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       }
     },
     warning: {
       default: {
-        light: token('color.background.boldWarning.resting', colors.Y300),
-        dark: token('color.background.boldWarning.resting', colors.Y300)
+        light: `var(--ds-background-warning-bold, ${colors.Y300})`,
+        dark: `var(--ds-background-warning-bold, ${colors.Y300})`
       },
       hover: {
-        light: token('color.background.boldWarning.hover', colors.Y200),
-        dark: token('color.background.boldWarning.hover', colors.Y200)
+        light: `var(--ds-background-warning-bold-hovered, ${colors.Y200})`,
+        dark: `var(--ds-background-warning-bold-hovered, ${colors.Y200})`
       },
       active: {
-        light: token('color.background.boldWarning.pressed', colors.Y400),
-        dark: token('color.background.boldWarning.pressed', colors.Y400)
+        light: `var(--ds-background-warning-bold-pressed, ${colors.Y400})`,
+        dark: `var(--ds-background-warning-bold-pressed, ${colors.Y400})`
       },
       disabled: {
-        light: token('color.background.disabled', colors.N20A),
-        dark: token('color.background.disabled', colors.DN70)
+        light: `var(--ds-background-disabled, ${colors.N20A})`,
+        dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: token('color.background.selected.resting', colors.Y400),
-        dark: token('color.background.selected.resting', colors.Y400)
+        light: `var(--ds-background-brand, ${colors.Y400})`,
+        dark: `var(--ds-background-brand, ${colors.Y400})`
       },
       focusSelected: {
-        light: token('color.background.selected.resting', colors.Y400),
-        dark: token('color.background.selected.resting', colors.Y400)
+        light: `var(--ds-background-brand, ${colors.Y400})`,
+        dark: `var(--ds-background-brand, ${colors.Y400})`
       }
     },
     danger: {
       default: {
-        light: token('color.background.boldDanger.resting', colors.R400),
-        dark: token('color.background.boldDanger.resting', colors.R400)
+        light: `var(--ds-background-danger-bold, ${colors.R400})`,
+        dark: `var(--ds-background-danger-bold, ${colors.R400})`
       },
       hover: {
-        light: token('color.background.boldDanger.hover', colors.R300),
-        dark: token('color.background.boldDanger.hover', colors.R300)
+        light: `var(--ds-background-danger-bold-hovered, ${colors.R300})`,
+        dark: `var(--ds-background-danger-bold-hovered, ${colors.R300})`
       },
       active: {
-        light: token('color.background.boldDanger.pressed', colors.R500),
-        dark: token('color.background.boldDanger.pressed', colors.R500)
+        light: `var(--ds-background-danger-bold-pressed, ${colors.R500})`,
+        dark: `var(--ds-background-danger-bold-pressed, ${colors.R500})`
       },
       disabled: {
-        light: token('color.background.disabled', colors.N20A),
-        dark: token('color.background.disabled', colors.DN70)
+        light: `var(--ds-background-disabled, ${colors.N20A})`,
+        dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: token('color.background.selected.resting', colors.R500),
-        dark: token('color.background.selected.resting', colors.R500)
+        light: `var(--ds-background-brand, ${colors.R500})`,
+        dark: `var(--ds-background-brand, ${colors.R500})`
       },
       focusSelected: {
-        light: token('color.background.selected.resting', colors.R500),
-        dark: token('color.background.selected.resting', colors.R500)
+        light: `var(--ds-background-brand, ${colors.R500})`,
+        dark: `var(--ds-background-brand, ${colors.R500})`
       }
     },
     link: {
@@ -116,12 +115,12 @@ const values = {
         dark: 'none'
       },
       selected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.N20)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       },
       focusSelected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.N20)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       }
     },
     subtle: {
@@ -130,24 +129,24 @@ const values = {
         dark: 'none'
       },
       hover: {
-        light: token('color.background.transparentNeutral.hover', colors.N30A),
-        dark: token('color.background.transparentNeutral.hover', colors.DN60)
+        light: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`,
+        dark: `var(--ds-background-neutral-subtle-hovered, ${colors.DN60})`
       },
       active: {
-        light: token('color.background.transparentNeutral.pressed', fadedB75),
-        dark: token('color.background.transparentNeutral.pressed', colors.B75)
+        light: `var(--ds-background-neutral-subtle-pressed, ${fadedB75})`,
+        dark: `var(--ds-background-neutral-subtle-pressed, ${colors.B75})`
       },
       disabled: {
         light: 'none',
         dark: 'none'
       },
       selected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.DN0)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       },
       focusSelected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.DN0)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       }
     },
     'subtle-link': {
@@ -156,236 +155,236 @@ const values = {
         dark: 'none'
       },
       selected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.N20)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       },
       focusSelected: {
-        light: token('color.background.selected.resting', colors.N700),
-        dark: token('color.background.selected.resting', colors.N20)
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       }
     }
   },
   boxShadowColor: {
     default: {
       focus: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     primary: {
       focus: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     warning: {
       focus: {
-        light: token('color.border.focus', colors.Y500),
-        dark: token('color.border.focus', colors.Y500)
+        light: `var(--ds-border-focused, ${colors.Y500})`,
+        dark: `var(--ds-border-focused, ${colors.Y500})`
       },
       focusSelected: {
-        light: token('color.border.focus', colors.Y500),
-        dark: token('color.border.focus', colors.Y500)
+        light: `var(--ds-border-focused, ${colors.Y500})`,
+        dark: `var(--ds-border-focused, ${colors.Y500})`
       }
     },
     danger: {
       focus: {
-        light: token('color.border.focus', colors.R100),
-        dark: token('color.border.focus', colors.R100)
+        light: `var(--ds-border-focused, ${colors.R100})`,
+        dark: `var(--ds-border-focused, ${colors.R100})`
       },
       focusSelected: {
-        light: token('color.border.focus', colors.R100),
-        dark: token('color.border.focus', colors.R100)
+        light: `var(--ds-border-focused, ${colors.R100})`,
+        dark: `var(--ds-border-focused, ${colors.R100})`
       }
     },
     link: {
       focus: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     subtle: {
       focus: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     'subtle-link': {
       focus: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: token('color.border.focus', colors.B100),
-        dark: token('color.border.focus', colors.B75)
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     }
   },
   color: {
     default: {
       default: {
-        light: token('color.text.highEmphasis', colors.N500),
-        dark: token('color.text.highEmphasis', colors.DN400)
+        light: `var(--ds-text, ${colors.N500})`,
+        dark: `var(--ds-text, ${colors.DN400})`
       },
       active: {
-        light: token('color.text.highEmphasis', colors.B400),
-        dark: token('color.text.highEmphasis', colors.B400)
+        light: `var(--ds-text, ${colors.B400})`,
+        dark: `var(--ds-text, ${colors.B400})`
       },
       disabled: {
-        light: token('color.text.disabled', colors.N70),
-        dark: token('color.text.disabled', colors.DN30)
+        light: `var(--ds-text-disabled, ${colors.N70})`,
+        dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     },
     primary: {
       default: {
-        light: token('color.text.onBold', colors.N0),
-        dark: token('color.text.onBold', colors.DN30)
+        light: `var(--ds-text-inverse, ${colors.N0})`,
+        dark: `var(--ds-text-inverse, ${colors.DN30})`
       },
       disabled: {
-        light: token('color.text.disabled', colors.N70),
-        dark: token('color.text.disabled', colors.DN30)
+        light: `var(--ds-text-disabled, ${colors.N70})`,
+        dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     },
     warning: {
       default: {
-        light: token('color.text.onBoldWarning', colors.N800),
-        dark: token('color.text.onBoldWarning', colors.N800)
+        light: `var(--ds-text-warning-inverse, ${colors.N800})`,
+        dark: `var(--ds-text-warning-inverse, ${colors.N800})`
       },
       disabled: {
-        light: token('color.text.disabled', colors.N70),
-        dark: token('color.text.disabled', colors.DN30)
+        light: `var(--ds-text-disabled, ${colors.N70})`,
+        dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: token('color.text.selected', colors.N800),
-        dark: token('color.text.selected', colors.N800)
+        light: `var(--ds-text-brand, ${colors.N800})`,
+        dark: `var(--ds-text-brand, ${colors.N800})`
       },
       focusSelected: {
-        light: token('color.text.selected', colors.N800),
-        dark: token('color.text.selected', colors.N800)
+        light: `var(--ds-text-brand, ${colors.N800})`,
+        dark: `var(--ds-text-brand, ${colors.N800})`
       }
     },
     danger: {
       default: {
-        light: token('color.text.onBold', colors.N0),
-        dark: token('color.text.onBold', colors.N0)
+        light: `var(--ds-text-inverse, ${colors.N0})`,
+        dark: `var(--ds-text-inverse, ${colors.N0})`
       },
       disabled: {
-        light: token('color.text.disabled', colors.N70),
-        dark: token('color.text.disabled', colors.DN30)
+        light: `var(--ds-text-disabled, ${colors.N70})`,
+        dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: token('color.text.selected', colors.N0),
-        dark: token('color.text.selected', colors.N0)
+        light: `var(--ds-text-brand, ${colors.N0})`,
+        dark: `var(--ds-text-brand, ${colors.N0})`
       },
       focusSelected: {
-        light: token('color.text.selected', colors.N0),
-        dark: token('color.text.selected', colors.N0)
+        light: `var(--ds-text-brand, ${colors.N0})`,
+        dark: `var(--ds-text-brand, ${colors.N0})`
       }
     },
     link: {
       default: {
-        light: token('color.text.link.resting', colors.B400),
-        dark: token('color.text.link.resting', colors.B100)
+        light: `var(--ds-link, ${colors.B400})`,
+        dark: `var(--ds-link, ${colors.B100})`
       },
       hover: {
-        light: token('color.text.link.resting', colors.B300),
-        dark: token('color.text.link.resting', colors.B75)
+        light: `var(--ds-link, ${colors.B300})`,
+        dark: `var(--ds-link, ${colors.B75})`
       },
       active: {
-        light: token('color.text.link.pressed', colors.B500),
-        dark: token('color.text.link.pressed', colors.B200)
+        light: `var(--ds-link-pressed, ${colors.B500})`,
+        dark: `var(--ds-link-pressed, ${colors.B200})`
       },
       disabled: {
-        light: token('color.text.disabled', colors.N70),
-        dark: token('color.text.disabled', colors.DN100)
+        light: `var(--ds-text-disabled, ${colors.N70})`,
+        dark: `var(--ds-text-disabled, ${colors.DN100})`
       },
       selected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.N700)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.N700})`
       },
       focusSelected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.N700)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.N700})`
       }
     },
     subtle: {
       default: {
-        light: token('color.text.highEmphasis', colors.N500),
-        dark: token('color.text.highEmphasis', colors.DN400)
+        light: `var(--ds-text, ${colors.N500})`,
+        dark: `var(--ds-text, ${colors.DN400})`
       },
       active: {
-        light: token('color.text.highEmphasis', colors.B400),
-        dark: token('color.text.highEmphasis', colors.B400)
+        light: `var(--ds-text, ${colors.B400})`,
+        dark: `var(--ds-text, ${colors.B400})`
       },
       disabled: {
-        light: token('color.text.disabled', colors.N70),
-        dark: token('color.text.disabled', colors.DN100)
+        light: `var(--ds-text-disabled, ${colors.N70})`,
+        dark: `var(--ds-text-disabled, ${colors.DN100})`
       },
       selected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     },
     'subtle-link': {
       default: {
-        light: token('color.text.mediumEmphasis', colors.N200),
-        dark: token('color.text.mediumEmphasis', colors.DN400)
+        light: `var(--ds-text-subtle, ${colors.N200})`,
+        dark: `var(--ds-text-subtle, ${colors.DN400})`
       },
       hover: {
-        light: token('color.text.mediumEmphasis', colors.N90),
-        dark: token('color.text.mediumEmphasis', colors.B50)
+        light: `var(--ds-text-subtle, ${colors.N90})`,
+        dark: `var(--ds-text-subtle, ${colors.B50})`
       },
       active: {
-        light: token('color.text.highEmphasis', colors.N400),
-        dark: token('color.text.highEmphasis', colors.DN300)
+        light: `var(--ds-text, ${colors.N400})`,
+        dark: `var(--ds-text, ${colors.DN300})`
       },
       disabled: {
-        light: token('color.text.disabled', colors.N70),
-        dark: token('color.text.disabled', colors.DN100)
+        light: `var(--ds-text-disabled, ${colors.N70})`,
+        dark: `var(--ds-text-disabled, ${colors.DN100})`
       },
       selected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: token('color.text.selected', colors.N20),
-        dark: token('color.text.selected', colors.DN400)
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     }
   }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.1.2",
+	"version": "16.1.6",
 	"sideEffects": false
 }

package/dist/esm/button.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onMouseDown", "onMouseUp"];
 import React, { useCallback, useMemo, useState } from 'react';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import ButtonBase from './shared/button-base';
 import { getCss } from './shared/css';
 import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
@@ -10,13 +11,15 @@ import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
 function noop() {}
 
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-var ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode(_ref, ref) {
-  var mode = _ref.mode,
-      _ref$onMouseDown = _ref.onMouseDown,
+var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+  var _ref$onMouseDown = _ref.onMouseDown,
       providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
       _ref$onMouseUp = _ref.onMouseUp,
       providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
-      rest = _objectWithoutProperties(_ref, ["mode", "onMouseDown", "onMouseUp"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
 
   var appearance = rest.appearance || 'default';
   var spacing = rest.spacing || 'default';
@@ -64,15 +67,6 @@ var ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode(_ref,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp
   }));
-});
-var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(props, ref) {
-  return /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return /*#__PURE__*/React.createElement(ButtonWithMode, _extends({}, props, {
-      ref: ref,
-      mode: mode
-    }));
-  });
 })); // Tools including enzyme rely on components having a display name
 
 Button.displayName = 'Button';