@atlaskit/button 16.5.3 → 16.5.5

package/dist/cjs/loading-button.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _button = _interopRequireDefault(require("./button"));
-
 var _loadingSpinner = _interopRequireDefault(require("./shared/loading-spinner"));
-
 var _excluded = ["isLoading"];
-
 /**
  * __Loading button__
  *
@@ -28,16 +20,16 @@ var _excluded = ["isLoading"];
  */
 var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButton(_ref, ref) {
   var _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, rest, {
     ref: ref,
     overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, rest) : null
   }));
-}); // Tools including enzyme rely on components having a display name
-
+});
 
+// Tools including enzyme rely on components having a display name
 LoadingButton.displayName = 'LoadingButton';
 var _default = LoadingButton;
 exports.default = _default;

package/dist/cjs/shared/block-events.js

@@ -4,23 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = blockEvents;
-
 function abort(event) {
   event.preventDefault();
   event.stopPropagation();
 }
-
 var tabKeyCode = 9;
-
 function onKey(event) {
   // Allowing tab so that a user can move focus away
   if (event.keyCode === tabKeyCode) {
     return;
   }
-
   abort(event);
 }
-
 var block = {
   onMouseDownCapture: abort,
   onMouseUpCapture: abort,
@@ -37,7 +32,6 @@ var block = {
   onClick: abort
 };
 var doNotBlock = {};
-
 function blockEvents(_ref) {
   var isInteractive = _ref.isInteractive;
   return isInteractive ? doNotBlock : block;

package/dist/cjs/shared/button-base.js

@@ -1,42 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
-
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _blockEvents = _interopRequireDefault(require("./block-events"));
-
 var _css = require("./css");
-
 var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "interactionName", "analyticsContext"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Disabled buttons will still publish events for nested elements in webkit.
 // We are disabling pointer events on child elements so that
 // the button will always be the target of events
@@ -46,58 +29,56 @@ var noPointerEventsOnChildrenCss = {
     pointerEvents: 'none'
   }
 };
-
 var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
   var _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-      buttonCss = props.buttonCss,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
-      _props$autoFocus = props.autoFocus,
-      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
-      _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      _props$shouldFitConta = props.shouldFitContainer,
-      shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
-      _props$isSelected = props.isSelected,
-      isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
-      iconBefore = props.iconBefore,
-      iconAfter = props.iconAfter,
-      children = props.children,
-      className = props.className,
-      href = props.href,
-      overlay = props.overlay,
-      _props$tabIndex = props.tabIndex,
-      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
-      _props$type = props.type,
-      type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
-      _props$onMouseDown = props.onMouseDown,
-      providedOnMouseDown = _props$onMouseDown === void 0 ? _noop.default : _props$onMouseDown,
-      _props$onClick = props.onClick,
-      providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
-      _props$component = props.component,
-      Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
-      testId = props.testId,
-      interactionName = props.interactionName,
-      analyticsContext = props.analyticsContext,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    buttonCss = props.buttonCss,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$shouldFitConta = props.shouldFitContainer,
+    shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
+    _props$isSelected = props.isSelected,
+    isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
+    iconBefore = props.iconBefore,
+    iconAfter = props.iconAfter,
+    children = props.children,
+    className = props.className,
+    href = props.href,
+    overlay = props.overlay,
+    _props$tabIndex = props.tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    _props$type = props.type,
+    type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
+    _props$onMouseDown = props.onMouseDown,
+    providedOnMouseDown = _props$onMouseDown === void 0 ? _noop.default : _props$onMouseDown,
+    _props$onClick = props.onClick,
+    providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
+    _props$component = props.component,
+    Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
+    testId = props.testId,
+    interactionName = props.interactionName,
+    analyticsContext = props.analyticsContext,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var ourRef = (0, _react.useRef)();
   var setRef = (0, _react.useCallback)(function (node) {
     ourRef.current = node;
-
     if (ref == null) {
       return;
     }
-
     if (typeof ref === 'function') {
       ref(node);
       return;
-    } // @ts-ignore
-
+    }
 
+    // @ts-ignore
     ref.current = node;
-  }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
+  }, [ourRef, ref]);
 
+  // Cross browser auto focusing is pretty broken, so we are doing it ourselves
   (0, _useAutoFocus.default)(ourRef, autoFocus);
   var interactionContext = (0, _react.useContext)(_interactionContext.default);
   var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
@@ -109,36 +90,37 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.5.3",
+    packageVersion: "16.5.5",
     analyticsData: analyticsContext
-  }); // Button currently calls preventDefault, which is not standard button behaviour
+  });
 
+  // Button currently calls preventDefault, which is not standard button behaviour
   var onMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     providedOnMouseDown(event);
-  }, [providedOnMouseDown]); // Lose focus when becoming disabled (standard button behaviour)
+  }, [providedOnMouseDown]);
 
+  // Lose focus when becoming disabled (standard button behaviour)
   (0, _react.useEffect)(function () {
     var el = ourRef.current;
-
     if (isDisabled && el && el === document.activeElement) {
       el.blur();
     }
-  }, [isDisabled]); // we are 'disabling' input with a button when there is an overlay
+  }, [isDisabled]);
 
+  // we are 'disabling' input with a button when there is an overlay
   var hasOverlay = Boolean(overlay);
   var fadeCss = (0, _react2.css)((0, _css.getFadingCss)({
     hasOverlay: hasOverlay
   }));
   var isInteractive = !isDisabled && !hasOverlay;
+
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.
    * For now, while we support both, these styles reach into Spinner when a theme is set, applies the right color.
    * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067
    */
-
   var spinnerHackCss = {};
-
   if (isSelected || isDisabled || appearance === 'warning') {
     spinnerHackCss = {
       '[data-theme] & svg': {
@@ -146,7 +128,6 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
       }
     };
   }
-
   return (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -154,11 +135,13 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     onClick: onClick,
     onMouseDown: onMouseDown,
     disabled: isDisabled,
-    href: isInteractive ? href : undefined // using undefined so that the property doesn't exist when false
+    href: isInteractive ? href : undefined
+    // using undefined so that the property doesn't exist when false
     ,
     "data-has-overlay": hasOverlay ? true : undefined,
     "data-testid": testId,
-    type: type // Adding a tab index so element is always focusable, even when not a <button> or <a>
+    type: type
+    // Adding a tab index so element is always focusable, even when not a <button> or <a>
     // Disabling focus via keyboard navigation when disabled
     // as this is standard button behaviour
     ,
@@ -181,5 +164,4 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     css: [_css.overlayCss, spinnerHackCss]
   }, overlay) : null);
 });
-
 exports.default = _default;

package/dist/cjs/shared/colors.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // 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)
 var fadedB75 = 'rgba(179, 212, 255, 0.6)';

package/dist/cjs/shared/css.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,22 +9,17 @@ exports.getCss = getCss;
 exports.getFadingCss = getFadingCss;
 exports.getIconStyle = getIconStyle;
 exports.overlayCss = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("@emotion/react");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _colors = _interopRequireDefault(require("./colors"));
-
 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) { (0, _defineProperty2.default)(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; }
-
 var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();
-var fontSize = (0, _constants.fontSize)(); // ## Button layout
+var fontSize = (0, _constants.fontSize)();
+
+// ## Button layout
 //
 // /------------------------------------------------------------------------------------------------------------------\
 // |       →  |  ←      |          |      →  |  ←      |           |      →  |  ←      |         |      →  |  ←       |
@@ -37,7 +31,6 @@ var fontSize = (0, _constants.fontSize)(); // ## Button layout
 //                                           ↑                               ↑
 //                                        Margins don't collapse with inline-flex
 //
-
 var heights = {
   default: "".concat(gridSize * 4 / fontSize, "em"),
   // 32px
@@ -70,19 +63,17 @@ var innerMargin = {
   content: "0 ".concat(gridSize / 4, "px"),
   icon: "0 ".concat(gridSize / 4, "px")
 };
-
 function getColor(_ref) {
   var group = _ref.group,
-      key = _ref.key,
-      mode = _ref.mode;
+    key = _ref.key,
+    mode = _ref.mode;
   var rule = group[key] || group.default;
   return rule[mode];
 }
-
 function getColors(_ref2) {
   var appearance = _ref2.appearance,
-      key = _ref2.key,
-      mode = _ref2.mode;
+    key = _ref2.key,
+    mode = _ref2.mode;
   return {
     background: getColor({
       group: _colors.default.background[appearance],
@@ -97,14 +88,13 @@ function getColors(_ref2) {
     }), " !important")
   };
 }
-
 function getCss(_ref3) {
   var appearance = _ref3.appearance,
-      spacing = _ref3.spacing,
-      mode = _ref3.mode,
-      isSelected = _ref3.isSelected,
-      shouldFitContainer = _ref3.shouldFitContainer,
-      isOnlySingleIcon = _ref3.isOnlySingleIcon;
+    spacing = _ref3.spacing,
+    mode = _ref3.mode,
+    isSelected = _ref3.isSelected,
+    shouldFitContainer = _ref3.shouldFitContainer,
+    isOnlySingleIcon = _ref3.isOnlySingleIcon;
   var baseColors = getColors({
     appearance: appearance,
     key: isSelected ? 'selected' : 'default',
@@ -141,6 +131,7 @@ function getCss(_ref3) {
     justifyContent: 'center',
     // Note: we cannot disable pointer events when there is an overlay.
     // That would be easy for styling, but it would start letting events through on disabled buttons
+
     // Disabling visited styles (just using the base colors)
     '&:visited': _objectSpread({}, baseColors),
     '&:hover': _objectSpread(_objectSpread({}, getColors({
@@ -209,9 +200,9 @@ function getCss(_ref3) {
       padding: 0
     }
   });
-} // inline-flex child
-
+}
 
+// inline-flex child
 function getIconStyle(_ref4) {
   var spacing = _ref4.spacing;
   return (0, _react.css)({
@@ -225,9 +216,9 @@ function getIconStyle(_ref4) {
     lineHeight: 0,
     userSelect: 'none'
   });
-} // inline-flex child
-
+}
 
+// inline-flex child
 function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
   return (0, _react.css)({
@@ -241,7 +232,6 @@ function getContentStyle(_ref5) {
     whiteSpace: 'nowrap'
   });
 }
-
 function getFadingCss(_ref6) {
   var hasOverlay = _ref6.hasOverlay;
   return (0, _react.css)({
@@ -249,7 +239,6 @@ function getFadingCss(_ref6) {
     transition: 'opacity 0.3s'
   });
 }
-
 var overlayCss = {
   // stretching to full width / height of button
   // this is important as we need it to still block

package/dist/cjs/shared/get-is-only-single-icon.js

@@ -4,23 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getIsOnlySingleIcon;
-
 function getIsOnlySingleIcon(_ref) {
   var children = _ref.children,
-      iconBefore = _ref.iconBefore,
-      iconAfter = _ref.iconAfter;
-
+    iconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter;
   if (children) {
     return false;
   }
-
   if (iconBefore && !iconAfter) {
     return true;
   }
-
   if (!iconBefore && iconAfter) {
     return true;
   }
-
   return false;
 }

package/dist/cjs/shared/loading-spinner.js

@@ -1,44 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LoadingSpinner;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
 var _excluded = ["spacing"];
-
 function getSpinnerAppearance(_ref) {
   var appearance = _ref.appearance,
-      isDisabled = _ref.isDisabled,
-      isSelected = _ref.isSelected;
-
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected;
   if (isDisabled) {
     return 'inherit';
   }
-
   if (isSelected) {
     return 'invert';
   }
-
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }
-
   return 'inherit';
 }
-
 function LoadingSpinner(_ref2) {
   var _ref2$spacing = _ref2.spacing,
-      spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/_react.default.createElement(_spinner.default, {
     size: size,

package/dist/cjs/version.json

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

package/dist/es2019/button-group.js

@@ -3,8 +3,7 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 const buttonGroupStyles = css({
   display: 'inline-flex',
-  // TODO Delete this comment after verifying spacing token -> previous value `4`
-  gap: "var(--ds-scale-050, 4px)",
+  gap: "var(--ds-space-050, 4px)",
   '> *': {
     flex: '1 0 auto'
   }
@@ -19,7 +18,6 @@ export default function ButtonGroup({
     if (!child) {
       return null;
     }
-
     return jsx(Fragment, {
       key: idx
     }, appearance ?

package/dist/es2019/button.js

@@ -6,7 +6,6 @@ import ButtonBase from './shared/button-base';
 import { getCss } from './shared/css';
 import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
 const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
 /**
  * __Button__
  *
@@ -29,19 +28,18 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   const shouldFitContainer = Boolean(rest.shouldFitContainer);
   const isSelected = Boolean(rest.isSelected);
   const isOnlySingleIcon = getIsOnlySingleIcon(rest);
-  const [isActive, setIsActive] = useState(false); // Wrap onMouseDown / onMouseUp to manually trigger active state
-  //  in Firefox
+  const [isActive, setIsActive] = useState(false);
 
+  // Wrap onMouseDown / onMouseUp to manually trigger active state
+  //  in Firefox
   const onMouseDown = useCallback(event => {
     providedOnMouseDown(event);
-
     if (isFirefox) {
       setIsActive(true);
     }
   }, [providedOnMouseDown, setIsActive]);
   const onMouseUp = useCallback(event => {
     providedOnMouseUp(event);
-
     if (isFirefox) {
       setIsActive(false);
     }
@@ -56,14 +54,16 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   }), [appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon]);
   return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
     ref: ref,
-    buttonCss: buttonCss // Due to how click events are set, we need to set active styles
+    buttonCss: buttonCss
+    // Due to how click events are set, we need to set active styles
     //  manually in Firefox and wrap onMouseDown/onMouseUp
     ,
     "data-firefox-is-active": isActive ? true : undefined,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp
   }));
-})); // Tools including enzyme rely on components having a display name
+}));
 
+// Tools including enzyme rely on components having a display name
 Button.displayName = 'Button';
 export default Button;