@spark-web/button 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @spark-web/button
 
+## 1.0.1
+
+### Patch Changes
+
+- [#36](https://github.com/brighte-labs/spark-web/pull/36)
+  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
+  config
+
+- Updated dependencies
+  [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
+  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
+  - @spark-web/theme@2.0.0
+  - @spark-web/a11y@1.0.1
+  - @spark-web/box@1.0.1
+  - @spark-web/icon@1.0.1
+  - @spark-web/link@1.0.1
+  - @spark-web/text@1.0.1
+  - @spark-web/utils@1.0.1
+
 ## 1.0.0
 
 ### Major Changes

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

@@ -5,5 +5,5 @@ export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
 /** The appearance of a `Button`, with the semantics of a link. */
 export declare const ButtonLink: <Comp extends import("react").ElementType<any> = "a">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/esm/extends');
-var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var box = require('@spark-web/box');
 var internal = require('@spark-web/utils/internal');
 var React = require('react');
 var text = require('@spark-web/text');
+var jsxRuntime = require('react/jsx-runtime');
 var css = require('@emotion/css');
 var a11y = require('@spark-web/a11y');
 var theme = require('@spark-web/theme');
@@ -177,7 +177,6 @@ var mapTokens = {
   }
 };
 
-var __jsx$2 = React__namespace["default"].createElement;
 var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var children = _ref.children,
       prominence = _ref.prominence,
@@ -186,14 +185,15 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var variant = variants[prominence][tone];
   return React.Children.map(children, function (child) {
     if (typeof child === 'string') {
-      return __jsx$2(text.Text, {
+      return /*#__PURE__*/jsxRuntime.jsx(text.Text, {
         as: "span",
         baseline: false,
         overflowStrategy: "nowrap",
         weight: "strong",
         size: mapTokens.fontSize[size],
-        tone: variant === null || variant === void 0 ? void 0 : variant.textTone
-      }, child);
+        tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
+        children: child
+      });
     }
 
     if ( /*#__PURE__*/React.isValidElement(child)) {
@@ -212,9 +212,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   });
 };
 
-function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function useButtonStyles(_ref) {
   var iconOnly = _ref.iconOnly,
       prominence = _ref.prominence,
@@ -246,12 +243,12 @@ function useButtonStyles(_ref) {
     position: 'relative',
     width: iconOnly ? mapTokens.size[size] : undefined,
     // interactions styles
-    className: css.css(_objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+    className: css.css(_objectSpread(_objectSpread({}, transitionColours), {}, {
       '&:hover': {
         borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme$1.border.color[variant.borderHover] : undefined,
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme$1.backgroundInteractions[variant.backgroundHover] : undefined,
         // Style button text when hovering
-        '> *': _objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined
         })
@@ -261,7 +258,7 @@ function useButtonStyles(_ref) {
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme$1.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
         transform: 'scale(0.98)',
         // Style button text when it's active
-        '> *': _objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined
         })
@@ -273,17 +270,6 @@ function useButtonStyles(_ref) {
 }
 
 var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "onClick", "prominence", "size", "tone", "type"];
-var __jsx$1 = React__namespace.createElement;
-
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-// discuss with design:
-// - sizes
-// - variants
-// implementation details:
-// - handle fragments?
-// - validate children?
 
 /**
  * Buttons are used to initialize an action, their label should express what
@@ -325,7 +311,7 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
    */
 
   var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return __jsx$1(box.Box, _extends({
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
@@ -336,11 +322,13 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
     onClick: handleClick,
     ref: ref,
     type: type
-  }, buttonStyleProps, data ? internal.buildDataAttributes(data) : undefined), resolveButtonChildren(_objectSpread$1(_objectSpread$1({}, props), {}, {
-    prominence: prominence,
-    size: size,
-    tone: tone
-  })));
+  }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }))
+  }));
 });
 Button.displayName = 'Buttton';
 /**
@@ -360,11 +348,6 @@ function getPreventableClickHandler(onClick, disabled) {
 }
 
 var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
-var __jsx = React__namespace["default"].createElement;
-
-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; }
 
 /** The appearance of a `Button`, with the semantics of a link. */
 var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
@@ -387,18 +370,20 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
     tone: tone,
     prominence: prominence
   });
-  return __jsx(box.Box, _extends({
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-label": props.label,
     as: LinkComponent,
     asElement: "a",
     id: id,
     href: href,
     ref: ref
-  }, buttonStyleProps, data ? internal.buildDataAttributes(data) : undefined), resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
-    prominence: prominence,
-    size: size,
-    tone: tone
-  })));
+  }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }))
+  }));
 });
 
 exports.Button = Button;

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/esm/extends');
-var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var box = require('@spark-web/box');
 var internal = require('@spark-web/utils/internal');
 var React = require('react');
 var text = require('@spark-web/text');
+var jsxRuntime = require('react/jsx-runtime');
 var css = require('@emotion/css');
 var a11y = require('@spark-web/a11y');
 var theme = require('@spark-web/theme');
@@ -177,7 +177,6 @@ var mapTokens = {
   }
 };
 
-var __jsx$2 = React__namespace["default"].createElement;
 var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var children = _ref.children,
       prominence = _ref.prominence,
@@ -186,14 +185,15 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var variant = variants[prominence][tone];
   return React.Children.map(children, function (child) {
     if (typeof child === 'string') {
-      return __jsx$2(text.Text, {
+      return /*#__PURE__*/jsxRuntime.jsx(text.Text, {
         as: "span",
         baseline: false,
         overflowStrategy: "nowrap",
         weight: "strong",
         size: mapTokens.fontSize[size],
-        tone: variant === null || variant === void 0 ? void 0 : variant.textTone
-      }, child);
+        tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
+        children: child
+      });
     }
 
     if ( /*#__PURE__*/React.isValidElement(child)) {
@@ -212,9 +212,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   });
 };
 
-function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function useButtonStyles(_ref) {
   var iconOnly = _ref.iconOnly,
       prominence = _ref.prominence,
@@ -246,12 +243,12 @@ function useButtonStyles(_ref) {
     position: 'relative',
     width: iconOnly ? mapTokens.size[size] : undefined,
     // interactions styles
-    className: css.css(_objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+    className: css.css(_objectSpread(_objectSpread({}, transitionColours), {}, {
       '&:hover': {
         borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme$1.border.color[variant.borderHover] : undefined,
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme$1.backgroundInteractions[variant.backgroundHover] : undefined,
         // Style button text when hovering
-        '> *': _objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined
         })
@@ -261,7 +258,7 @@ function useButtonStyles(_ref) {
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme$1.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
         transform: 'scale(0.98)',
         // Style button text when it's active
-        '> *': _objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined
         })
@@ -273,17 +270,6 @@ function useButtonStyles(_ref) {
 }
 
 var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "onClick", "prominence", "size", "tone", "type"];
-var __jsx$1 = React__namespace.createElement;
-
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-// discuss with design:
-// - sizes
-// - variants
-// implementation details:
-// - handle fragments?
-// - validate children?
 
 /**
  * Buttons are used to initialize an action, their label should express what
@@ -325,7 +311,7 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
    */
 
   var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return __jsx$1(box.Box, _extends({
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
@@ -336,11 +322,13 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
     onClick: handleClick,
     ref: ref,
     type: type
-  }, buttonStyleProps, data ? internal.buildDataAttributes(data) : undefined), resolveButtonChildren(_objectSpread$1(_objectSpread$1({}, props), {}, {
-    prominence: prominence,
-    size: size,
-    tone: tone
-  })));
+  }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }))
+  }));
 });
 Button.displayName = 'Buttton';
 /**
@@ -360,11 +348,6 @@ function getPreventableClickHandler(onClick, disabled) {
 }
 
 var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
-var __jsx = React__namespace["default"].createElement;
-
-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; }
 
 /** The appearance of a `Button`, with the semantics of a link. */
 var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
@@ -387,18 +370,20 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
     tone: tone,
     prominence: prominence
   });
-  return __jsx(box.Box, _extends({
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-label": props.label,
     as: LinkComponent,
     asElement: "a",
     id: id,
     href: href,
     ref: ref
-  }, buttonStyleProps, data ? internal.buildDataAttributes(data) : undefined), resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
-    prominence: prominence,
-    size: size,
-    tone: tone
-  })));
+  }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }))
+  }));
 });
 
 exports.Button = Button;

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

@@ -1,11 +1,11 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { Box } from '@spark-web/box';
 import { buildDataAttributes } from '@spark-web/utils/internal';
 import * as React from 'react';
-import React__default, { Children, isValidElement, cloneElement } from 'react';
+import { Children, isValidElement, cloneElement } from 'react';
 import { Text } from '@spark-web/text';
+import { jsx } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
 import { useFocusRing } from '@spark-web/a11y';
 import { useTheme } from '@spark-web/theme';
@@ -154,7 +154,6 @@ var mapTokens = {
   }
 };
 
-var __jsx$2 = React__default.createElement;
 var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var children = _ref.children,
       prominence = _ref.prominence,
@@ -163,14 +162,15 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var variant = variants[prominence][tone];
   return Children.map(children, function (child) {
     if (typeof child === 'string') {
-      return __jsx$2(Text, {
+      return /*#__PURE__*/jsx(Text, {
         as: "span",
         baseline: false,
         overflowStrategy: "nowrap",
         weight: "strong",
         size: mapTokens.fontSize[size],
-        tone: variant === null || variant === void 0 ? void 0 : variant.textTone
-      }, child);
+        tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
+        children: child
+      });
     }
 
     if ( /*#__PURE__*/isValidElement(child)) {
@@ -189,9 +189,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   });
 };
 
-function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function useButtonStyles(_ref) {
   var iconOnly = _ref.iconOnly,
       prominence = _ref.prominence,
@@ -223,12 +220,12 @@ function useButtonStyles(_ref) {
     position: 'relative',
     width: iconOnly ? mapTokens.size[size] : undefined,
     // interactions styles
-    className: css(_objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+    className: css(_objectSpread(_objectSpread({}, transitionColours), {}, {
       '&:hover': {
         borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme.border.color[variant.borderHover] : undefined,
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme.backgroundInteractions[variant.backgroundHover] : undefined,
         // Style button text when hovering
-        '> *': _objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined
         })
@@ -238,7 +235,7 @@ function useButtonStyles(_ref) {
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
         transform: 'scale(0.98)',
         // Style button text when it's active
-        '> *': _objectSpread$2(_objectSpread$2({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined
         })
@@ -250,17 +247,6 @@ function useButtonStyles(_ref) {
 }
 
 var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "onClick", "prominence", "size", "tone", "type"];
-var __jsx$1 = React.createElement;
-
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-// discuss with design:
-// - sizes
-// - variants
-// implementation details:
-// - handle fragments?
-// - validate children?
 
 /**
  * Buttons are used to initialize an action, their label should express what
@@ -302,7 +288,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    */
 
   var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return __jsx$1(Box, _extends({
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
@@ -313,11 +299,13 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: handleClick,
     ref: ref,
     type: type
-  }, buttonStyleProps, data ? buildDataAttributes(data) : undefined), resolveButtonChildren(_objectSpread$1(_objectSpread$1({}, props), {}, {
-    prominence: prominence,
-    size: size,
-    tone: tone
-  })));
+  }, buttonStyleProps), data ? buildDataAttributes(data) : undefined), {}, {
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }))
+  }));
 });
 Button.displayName = 'Buttton';
 /**
@@ -337,11 +325,6 @@ function getPreventableClickHandler(onClick, disabled) {
 }
 
 var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
-var __jsx = React__default.createElement;
-
-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; }
 
 /** The appearance of a `Button`, with the semantics of a link. */
 var ButtonLink = forwardRefWithAs(function (_ref, ref) {
@@ -364,18 +347,20 @@ var ButtonLink = forwardRefWithAs(function (_ref, ref) {
     tone: tone,
     prominence: prominence
   });
-  return __jsx(Box, _extends({
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-label": props.label,
     as: LinkComponent,
     asElement: "a",
     id: id,
     href: href,
     ref: ref
-  }, buttonStyleProps, data ? buildDataAttributes(data) : undefined), resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
-    prominence: prominence,
-    size: size,
-    tone: tone
-  })));
+  }, buttonStyleProps), data ? buildDataAttributes(data) : undefined), {}, {
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }))
+  }));
 });
 
 export { Button, ButtonLink };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spark-web/button",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/spark-web-button.cjs.js",
   "module": "dist/spark-web-button.esm.js",
   "devDependencies": {
@@ -10,13 +10,13 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/a11y": "^1.0.0",
-    "@spark-web/box": "^1.0.0",
-    "@spark-web/icon": "^1.0.0",
-    "@spark-web/link": "^1.0.0",
-    "@spark-web/text": "^1.0.0",
-    "@spark-web/theme": "^1.0.0",
-    "@spark-web/utils": "^1.0.0",
+    "@spark-web/a11y": "^1.0.1",
+    "@spark-web/box": "^1.0.1",
+    "@spark-web/icon": "^1.0.1",
+    "@spark-web/link": "^1.0.1",
+    "@spark-web/text": "^1.0.1",
+    "@spark-web/theme": "^2.0.0",
+    "@spark-web/utils": "^1.0.1",
     "react": "^17.0.2"
   },
   "engines": {