@spark-web/button 1.1.2 → 1.2.0

package/README.md

@@ -196,25 +196,17 @@ with the exception of `href` vs `onClick` props.
 </Text>
 ```
 
-## Props
-
-| Prop              | Type                                                                                     | Default   | Description                                                                                                                               |
-| ----------------- | ---------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| aria-controls?    | string                                                                                   |           | Identifies the element (or elements) whose contents or presence are controlled by the current element. Only applicable for `Button`.      |
-| aria-describedby? | string                                                                                   |           | Identifies the element (or elements) that describes the object. Only applicable for `Button`.                                             |
-| aria-expanded?    | string                                                                                   |           | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. Only applicable for `Button`. |
-| children          | string \| React.ReactElement\<IconProps>                                                 |           | Children element to be rendered inside the button.                                                                                        |
-| data?             | [DataAttributeMap][data-attribute-map]                                                   |           | Allows setting of data attributes on the button.                                                                                          |
-| disabled?         | boolean                                                                                  |           | When true, prevents `onClick` from firing. Only applicable for `Button`.                                                                  |
-| href              | string                                                                                   |           | Specifies the url the button should redirect to upon being clicked. Only applicable for `ButtonLink`.                                     |
-| id?               | string                                                                                   |           | Unique identifier for the button.                                                                                                         |
-| label?            | string                                                                                   |           | Implicit label for buttons only required for icon-only buttons for accessibility reasons.                                                 |
-| loading?          | boolean                                                                                  |           | When true, the button will display a loading spinner.                                                                                     |
-| onClick?          | Function                                                                                 |           | Function to be fired following a click event of the button. Only applicable for `Button`.                                                 |
-| prominence?       | 'high' \| 'low'                                                                          | 'high'    | Sets the visual prominence of the button.                                                                                                 |
-| size?             | 'medium' \| 'large'                                                                      | 'medium'  | Sets the size of the button.                                                                                                              |
-| tone?             | 'primary' \| 'secondary' \| 'neutral' \| 'positive' \| 'caution' \| 'critical' \| 'info' | 'primary' | Sets the tone of the button.                                                                                                              |
-| type?             | 'button' \| 'submit' \| 'reset'                                                          | 'button'  | Sets the button type. Only applicable for `Button`.                                                                                       |
-
-[data-attribute-map]:
-  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
+## BaseButton
+
+Unstyled button primitive that:
+
+- Forwards the button ref
+- Provides a default type of `button` (so it doesn't accidently submit forms if
+  left off)
+- Prevents `onClick` from firing when disabled without disabling the button
+- Forces focus of the underlying button when clicked (to address a bug in
+  Safari)
+
+## Button Props
+
+<PropsTable displayName="Button" />

package/dist/declarations/src/BaseButton.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps } from '@spark-web/box';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import type { NativeButtonProps } from './types';
+export declare type BaseButtonProps = NativeButtonProps & Partial<BoxProps>;
+export declare const BaseButton: import("react").ForwardRefExoticComponent<NativeButtonProps & Partial<BoxProps> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * handle "disabled" behaviour w/o disabling buttons
+ * @see https://axesslab.com/disabled-buttons-suck/
+ */
+export declare function getPreventableClickHandler(onClick: BaseButtonProps['onClick'], disabled: boolean): (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/dist/declarations/src/Button.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent as ReactMouseEvent } from 'react';
+/// <reference types="react" />
 import type { CommonButtonProps, NativeButtonProps } from './types';
 export declare type ButtonProps = CommonButtonProps & {
     /**
@@ -26,9 +26,3 @@ export declare type ButtonProps = CommonButtonProps & {
  * action will occur when the user interacts with it.
  */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-/**
- * Prevent click events when the component is "disabled".
- * Note: we don't want to actually disable a button element for several reasons.
- * One being because that would prohibit the use of tooltips.
- */
-export declare function getPreventableClickHandler(onClick: NativeButtonProps['onClick'], disabled: boolean): (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/dist/declarations/src/index.d.ts

@@ -1,4 +1,6 @@
+export { BaseButton } from './BaseButton';
 export { Button } from './Button';
 export { ButtonLink } from './ButtonLink';
+export type { BaseButtonProps } from './BaseButton';
 export type { ButtonProps } from './Button';
 export type { ButtonLinkProps } from './ButtonLink';

package/dist/spark-web-button.cjs.dev.js

@@ -4,18 +4,68 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var a11y = require('@spark-web/a11y');
 var box = require('@spark-web/box');
-var spinner = require('@spark-web/spinner');
-var internal = require('@spark-web/utils/internal');
+var utils = require('@spark-web/utils');
 var react = require('react');
-var text = require('@spark-web/text');
 var jsxRuntime = require('react/jsx-runtime');
+var a11y = require('@spark-web/a11y');
+var spinner = require('@spark-web/spinner');
+var text = require('@spark-web/text');
 var css = require('@emotion/css');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
+var internal = require('@spark-web/utils/internal');
 var ts = require('@spark-web/utils/ts');
 
+var _excluded$2 = ["onClick", "disabled", "type"];
+var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
+  var onClickProp = _ref.onClick,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded$2);
+
+  var internalRef = react.useRef(null);
+  var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
+  /**
+   * In Safari buttons are not focused automatically by the browser once
+   * pressed, the default behaviour is to focus the nearest focusable ancestor.
+   * To fix this we need to manually focus the button element after the user
+   * presses the element.
+   */
+
+  var onClick = react.useCallback(function (event) {
+    var _internalRef$current;
+
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
+    preventableClickHandler(event);
+  }, [disabled, onClickProp]);
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    as: "button"
+  }, rest), {}, {
+    onClick: onClick,
+    ref: composedRef,
+    type: type
+  }));
+});
+BaseButton.displayName = 'BaseButton';
+/**
+ * handle "disabled" behaviour w/o disabling buttons
+ * @see https://axesslab.com/disabled-buttons-suck/
+ */
+
+function getPreventableClickHandler(onClick, disabled) {
+  return function handleClick(event) {
+    if (disabled) {
+      event.preventDefault();
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  };
+}
+
 var variants = {
   high: {
     primary: {
@@ -276,13 +326,12 @@ var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data",
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
   var ariaControls = _ref['aria-controls'],
       ariaDescribedBy = _ref['aria-describedby'],
       ariaExpanded = _ref['aria-expanded'],
       data = _ref.data,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      disabled = _ref.disabled,
       id = _ref.id,
       _ref$loading = _ref.loading,
       loading = _ref$loading === void 0 ? false : _ref$loading,
@@ -293,8 +342,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$tone = _ref.tone,
       tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
+      type = _ref.type,
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   var iconOnly = Boolean(props.label);
@@ -307,24 +355,18 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var isDisabled = disabled || loading;
   var isLoading = loading && !disabled;
   var variant = variants[prominence][tone];
-  /**
-   * handle "disabled" behaviour w/o disabling buttons
-   * @see https://axesslab.com/disabled-buttons-suck/
-   */
-
-  var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
     "aria-expanded": ariaExpanded,
     "aria-label": props.label,
-    as: "button",
+    data: data,
+    disabled: isDisabled,
     id: id,
-    onClick: handleClick,
-    ref: ref,
-    type: type
-  }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    onClick: onClick,
+    ref: forwardedRef,
+    type: type,
     children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
       isLoading: isLoading,
       prominence: prominence,
@@ -336,21 +378,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   }));
 });
 Button.displayName = 'Button';
-/**
- * Prevent click events when the component is "disabled".
- * Note: we don't want to actually disable a button element for several reasons.
- * One being because that would prohibit the use of tooltips.
- */
-
-function getPreventableClickHandler(onClick, disabled) {
-  return function handleClick(event) {
-    if (disabled) {
-      event.preventDefault();
-    } else {
-      onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-  };
-}
 
 function Loading(_ref2) {
   var tone = _ref2.tone;
@@ -413,5 +440,6 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
   }));
 });
 
+exports.BaseButton = BaseButton;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;

package/dist/spark-web-button.cjs.prod.js

@@ -4,18 +4,68 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var a11y = require('@spark-web/a11y');
 var box = require('@spark-web/box');
-var spinner = require('@spark-web/spinner');
-var internal = require('@spark-web/utils/internal');
+var utils = require('@spark-web/utils');
 var react = require('react');
-var text = require('@spark-web/text');
 var jsxRuntime = require('react/jsx-runtime');
+var a11y = require('@spark-web/a11y');
+var spinner = require('@spark-web/spinner');
+var text = require('@spark-web/text');
 var css = require('@emotion/css');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
+var internal = require('@spark-web/utils/internal');
 var ts = require('@spark-web/utils/ts');
 
+var _excluded$2 = ["onClick", "disabled", "type"];
+var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
+  var onClickProp = _ref.onClick,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded$2);
+
+  var internalRef = react.useRef(null);
+  var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
+  /**
+   * In Safari buttons are not focused automatically by the browser once
+   * pressed, the default behaviour is to focus the nearest focusable ancestor.
+   * To fix this we need to manually focus the button element after the user
+   * presses the element.
+   */
+
+  var onClick = react.useCallback(function (event) {
+    var _internalRef$current;
+
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
+    preventableClickHandler(event);
+  }, [disabled, onClickProp]);
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    as: "button"
+  }, rest), {}, {
+    onClick: onClick,
+    ref: composedRef,
+    type: type
+  }));
+});
+BaseButton.displayName = 'BaseButton';
+/**
+ * handle "disabled" behaviour w/o disabling buttons
+ * @see https://axesslab.com/disabled-buttons-suck/
+ */
+
+function getPreventableClickHandler(onClick, disabled) {
+  return function handleClick(event) {
+    if (disabled) {
+      event.preventDefault();
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  };
+}
+
 var variants = {
   high: {
     primary: {
@@ -276,13 +326,12 @@ var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data",
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
   var ariaControls = _ref['aria-controls'],
       ariaDescribedBy = _ref['aria-describedby'],
       ariaExpanded = _ref['aria-expanded'],
       data = _ref.data,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      disabled = _ref.disabled,
       id = _ref.id,
       _ref$loading = _ref.loading,
       loading = _ref$loading === void 0 ? false : _ref$loading,
@@ -293,8 +342,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$tone = _ref.tone,
       tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
+      type = _ref.type,
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   var iconOnly = Boolean(props.label);
@@ -307,24 +355,18 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var isDisabled = disabled || loading;
   var isLoading = loading && !disabled;
   var variant = variants[prominence][tone];
-  /**
-   * handle "disabled" behaviour w/o disabling buttons
-   * @see https://axesslab.com/disabled-buttons-suck/
-   */
-
-  var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
     "aria-expanded": ariaExpanded,
     "aria-label": props.label,
-    as: "button",
+    data: data,
+    disabled: isDisabled,
     id: id,
-    onClick: handleClick,
-    ref: ref,
-    type: type
-  }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    onClick: onClick,
+    ref: forwardedRef,
+    type: type,
     children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
       isLoading: isLoading,
       prominence: prominence,
@@ -336,21 +378,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   }));
 });
 Button.displayName = 'Button';
-/**
- * Prevent click events when the component is "disabled".
- * Note: we don't want to actually disable a button element for several reasons.
- * One being because that would prohibit the use of tooltips.
- */
-
-function getPreventableClickHandler(onClick, disabled) {
-  return function handleClick(event) {
-    if (disabled) {
-      event.preventDefault();
-    } else {
-      onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-  };
-}
 
 function Loading(_ref2) {
   var tone = _ref2.tone;
@@ -413,5 +440,6 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
   }));
 });
 
+exports.BaseButton = BaseButton;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;

package/dist/spark-web-button.esm.js

@@ -1,17 +1,67 @@
 import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Box } from '@spark-web/box';
+import { useComposedRefs } from '@spark-web/utils';
+import { forwardRef, useRef, useCallback, Children, isValidElement, cloneElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Spinner } from '@spark-web/spinner';
-import { buildDataAttributes } from '@spark-web/utils/internal';
-import { Children, isValidElement, cloneElement, forwardRef } from 'react';
 import { Text } from '@spark-web/text';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
 import { useTheme } from '@spark-web/theme';
 import { useLinkComponent } from '@spark-web/link';
+import { buildDataAttributes } from '@spark-web/utils/internal';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
 
+var _excluded$2 = ["onClick", "disabled", "type"];
+var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var onClickProp = _ref.onClick,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded$2);
+
+  var internalRef = useRef(null);
+  var composedRef = useComposedRefs(internalRef, forwardedRef);
+  /**
+   * In Safari buttons are not focused automatically by the browser once
+   * pressed, the default behaviour is to focus the nearest focusable ancestor.
+   * To fix this we need to manually focus the button element after the user
+   * presses the element.
+   */
+
+  var onClick = useCallback(function (event) {
+    var _internalRef$current;
+
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
+    preventableClickHandler(event);
+  }, [disabled, onClickProp]);
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
+    as: "button"
+  }, rest), {}, {
+    onClick: onClick,
+    ref: composedRef,
+    type: type
+  }));
+});
+BaseButton.displayName = 'BaseButton';
+/**
+ * handle "disabled" behaviour w/o disabling buttons
+ * @see https://axesslab.com/disabled-buttons-suck/
+ */
+
+function getPreventableClickHandler(onClick, disabled) {
+  return function handleClick(event) {
+    if (disabled) {
+      event.preventDefault();
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  };
+}
+
 var variants = {
   high: {
     primary: {
@@ -272,13 +322,12 @@ var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data",
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var ariaControls = _ref['aria-controls'],
       ariaDescribedBy = _ref['aria-describedby'],
       ariaExpanded = _ref['aria-expanded'],
       data = _ref.data,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      disabled = _ref.disabled,
       id = _ref.id,
       _ref$loading = _ref.loading,
       loading = _ref$loading === void 0 ? false : _ref$loading,
@@ -289,8 +338,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$tone = _ref.tone,
       tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
+      type = _ref.type,
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   var iconOnly = Boolean(props.label);
@@ -303,24 +351,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isDisabled = disabled || loading;
   var isLoading = loading && !disabled;
   var variant = variants[prominence][tone];
-  /**
-   * handle "disabled" behaviour w/o disabling buttons
-   * @see https://axesslab.com/disabled-buttons-suck/
-   */
-
-  var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
     "aria-expanded": ariaExpanded,
     "aria-label": props.label,
-    as: "button",
+    data: data,
+    disabled: isDisabled,
     id: id,
-    onClick: handleClick,
-    ref: ref,
-    type: type
-  }, buttonStyleProps), data ? buildDataAttributes(data) : undefined), {}, {
+    onClick: onClick,
+    ref: forwardedRef,
+    type: type,
     children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
       isLoading: isLoading,
       prominence: prominence,
@@ -332,21 +374,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 Button.displayName = 'Button';
-/**
- * Prevent click events when the component is "disabled".
- * Note: we don't want to actually disable a button element for several reasons.
- * One being because that would prohibit the use of tooltips.
- */
-
-function getPreventableClickHandler(onClick, disabled) {
-  return function handleClick(event) {
-    if (disabled) {
-      event.preventDefault();
-    } else {
-      onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-  };
-}
 
 function Loading(_ref2) {
   var tone = _ref2.tone;
@@ -409,4 +436,4 @@ var ButtonLink = forwardRefWithAs(function (_ref, ref) {
   }));
 });
 
-export { Button, ButtonLink };
+export { BaseButton, Button, ButtonLink };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "license": "MIT",
   "main": "dist/spark-web-button.cjs.js",
   "module": "dist/spark-web-button.esm.js",
@@ -8,16 +8,16 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
+    "@babel/runtime": "^7.18.3",
     "@emotion/css": "^11.9.0",
-    "@spark-web/a11y": "^1.0.5",
-    "@spark-web/box": "^1.0.5",
-    "@spark-web/icon": "^1.1.3",
-    "@spark-web/link": "^1.0.5",
-    "@spark-web/spinner": "^1.0.3",
-    "@spark-web/text": "^1.0.5",
-    "@spark-web/theme": "^3.0.1",
-    "@spark-web/utils": "^1.1.3"
+    "@spark-web/a11y": "^1.1.0",
+    "@spark-web/box": "^1.0.6",
+    "@spark-web/icon": "^1.1.4",
+    "@spark-web/link": "^1.0.6",
+    "@spark-web/spinner": "^1.0.4",
+    "@spark-web/text": "^1.0.6",
+    "@spark-web/theme": "^3.0.2",
+    "@spark-web/utils": "^1.1.5"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",