orcs-design-system 3.2.4 → 3.2.6

package/es/components/Button/ButtonLink.stories.js

@@ -3,186 +3,199 @@ import Icon from "../Icon";
 import Spacer from "../Spacer";
 import Flex from "../Flex";
 import { VARIANT_COLORS, ButtonLink } from ".";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Buttons/ButtonLink",
   component: ButtonLink
 };
-var link = "http://www.google.com";
-export var defaultButton = function defaultButton() {
-  return /*#__PURE__*/React.createElement(ButtonLink, {
-    href: link
-  }, "Default button");
-};
+const link = "http://www.google.com";
+export const defaultButton = () => /*#__PURE__*/_jsx(ButtonLink, {
+  href: link,
+  children: "Default button"
+});
 defaultButton.storyName = "Default button";
-export var variants = function variants() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, Object.keys(VARIANT_COLORS).map(function (variant) {
-    return /*#__PURE__*/React.createElement(ButtonLink, {
-      large: true,
-      key: variant,
-      variant: variant,
-      href: link
-    }, variant);
-  }));
-};
-export var alternateSize = function alternateSize() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+export const variants = () => /*#__PURE__*/_jsx(Spacer, {
+  my: "3",
+  children: Object.keys(VARIANT_COLORS).map(variant => /*#__PURE__*/_jsx(ButtonLink, {
+    large: true,
+    variant: variant,
+    href: link,
+    children: variant
+  }, variant))
+});
+export const alternateSize = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(ButtonLink, {
     small: true,
-    href: link
-  }, "Small button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: "Small button"
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     large: true,
-    href: link
-  }, "Large button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: "Large button"
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     height: "xxxl",
-    href: link
-  }, "Specified height button"), /*#__PURE__*/React.createElement(ButtonLink, {
     href: link,
-    width: "100px"
-  }, "A multiple-line button with specified width"));
-};
+    children: "Specified height button"
+  }), /*#__PURE__*/_jsx(ButtonLink, {
+    href: link,
+    width: "100px",
+    children: "A multiple-line button with specified width"
+  })]
+});
 alternateSize.storyName = "Alternate sizes";
-export var alternateColours = function alternateColours() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+export const alternateColours = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(ButtonLink, {
     variant: "success",
-    href: link
-  }, "Success/green button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: "Success/green button"
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     variant: "danger",
-    href: link
-  }, "Danger/red button"));
-};
+    href: link,
+    children: "Danger/red button"
+  })]
+});
 alternateColours.storyName = "Alternate colours";
-export var ghost = function ghost() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+export const ghost = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(ButtonLink, {
     small: true,
     variant: "ghost",
-    href: link
-  }, "Small ghost button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: "Small ghost button"
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     variant: "ghost",
-    href: link
-  }, "Regular ghost button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: "Regular ghost button"
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     large: true,
     variant: "ghost",
-    href: link
-  }, "Large ghost button"));
-};
+    href: link,
+    children: "Large ghost button"
+  })]
+});
 ghost.storyName = "Ghost style";
-export var fullWidth = function fullWidth() {
-  return /*#__PURE__*/React.createElement(ButtonLink, {
-    fullWidth: true,
-    href: link
-  }, "Full width button");
-};
+export const fullWidth = () => /*#__PURE__*/_jsx(ButtonLink, {
+  fullWidth: true,
+  href: link,
+  children: "Full width button"
+});
 fullWidth.storyName = "Full width";
-export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "r",
+  children: [/*#__PURE__*/_jsx(ButtonLink, {
     disabled: true,
-    href: link
-  }, "Disabled button"), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: "Disabled button"
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     variant: "disabled",
-    href: link
-  }, "Alternate way of making button disabled"));
-};
+    href: link,
+    children: "Alternate way of making button disabled"
+  })]
+});
 disabled.storyName = "Disabled state";
-export var withIcon = function withIcon() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+export const withIcon = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsxs(ButtonLink, {
     iconLeft: true,
     href: link,
-    isLoading: true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "user-plus"]
-  }), "Left aligned icon"), /*#__PURE__*/React.createElement(ButtonLink, {
+    isLoading: true,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "user-plus"]
+    }), "Left aligned icon"]
+  }), /*#__PURE__*/_jsxs(ButtonLink, {
     iconRight: true,
-    href: link
-  }, "Right aligned icon", /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "download"]
-  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: ["Right aligned icon", /*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "download"]
+    })]
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     leftIcon: ["fas", "star"],
-    href: link
-  }, "Left icon magic!"));
-};
+    href: link,
+    children: "Left icon magic!"
+  })]
+});
 withIcon.storyName = "With icon";
-export var iconOnly = function iconOnly() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+export const iconOnly = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(ButtonLink, {
     small: true,
     iconOnly: true,
     p: "s",
-    ariaLabel: /*#__PURE__*/React.createElement(Icon, {
+    ariaLabel: /*#__PURE__*/_jsx(Icon, {
       icon: ["fas", "download"]
     }),
-    href: link
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", "calendar-alt"]
-  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: ["far", "calendar-alt"]
+    })
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     iconOnly: true,
     p: "s",
     ariaLabel: "Show calendar",
-    href: link
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", "calendar-alt"]
-  })), /*#__PURE__*/React.createElement(ButtonLink, {
+    href: link,
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: ["far", "calendar-alt"]
+    })
+  }), /*#__PURE__*/_jsx(ButtonLink, {
     large: true,
     iconOnly: true,
     p: "s",
     ariaLabel: "Show calendar",
-    href: link
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", "calendar-alt"]
-  })), /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    mt: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    mr: "r"
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
-    iconOnly: true,
-    variant: "success",
-    href: link,
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Confirm"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "check"]
-  })), /*#__PURE__*/React.createElement(ButtonLink, {
-    iconOnly: true,
-    variant: "successAlternate",
-    href: link,
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Confirm"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "check"]
-  })), /*#__PURE__*/React.createElement(ButtonLink, {
-    iconOnly: true,
-    variant: "danger",
     href: link,
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Cancel"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"]
-  })), /*#__PURE__*/React.createElement(ButtonLink, {
-    iconOnly: true,
-    variant: "dangerAlternate",
-    href: link,
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Cancel"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"]
-  })))));
-};
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: ["far", "calendar-alt"]
+    })
+  }), /*#__PURE__*/_jsx(Flex, {
+    alignItems: "center",
+    mt: "r",
+    children: /*#__PURE__*/_jsxs(Spacer, {
+      mr: "r",
+      children: [/*#__PURE__*/_jsx(ButtonLink, {
+        iconOnly: true,
+        variant: "success",
+        href: link,
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Confirm",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "check"]
+        })
+      }), /*#__PURE__*/_jsx(ButtonLink, {
+        iconOnly: true,
+        variant: "successAlternate",
+        href: link,
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Confirm",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "check"]
+        })
+      }), /*#__PURE__*/_jsx(ButtonLink, {
+        iconOnly: true,
+        variant: "danger",
+        href: link,
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Cancel",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "times"]
+        })
+      }), /*#__PURE__*/_jsx(ButtonLink, {
+        iconOnly: true,
+        variant: "dangerAlternate",
+        href: link,
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Cancel",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "times"]
+        })
+      })]
+    })
+  })]
+});
 iconOnly.storyName = "Icon only";
 defaultButton.__docgenInfo = {
   "description": "",

package/es/components/Button/index.js

@@ -1,10 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["ariaLabel"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from "react";
 import styled, { ThemeProvider, css } from "styled-components";
 import PropTypes from "prop-types";
@@ -15,8 +8,9 @@ import Loading from "../Loading";
 import { themeGet } from "@styled-system/theme-get";
 import { Link } from "react-router-dom";
 import { omit } from "lodash";
-export var VARIANT_COLORS = {
-  "default": {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const VARIANT_COLORS = {
+  default: {
     background: "colors.primary",
     color: "colors.white",
     borderColor: "colors.primary",
@@ -102,80 +96,52 @@ export var VARIANT_COLORS = {
     }
   }
 };
-var getOutlineStyle = function getOutlineStyle(color) {
-  return css(["outline:0;box-shadow:", ";"], function (props) {
-    return [themeGet("shadows.thinOutline")(props), themeGet(color)(props)].join(" ");
-  });
-};
-var addVariantColors = function addVariantColors(key) {
-  var variantStyle = VARIANT_COLORS[key];
+const getOutlineStyle = color => css(["outline:0;box-shadow:", ";"], props => [themeGet("shadows.thinOutline")(props), themeGet(color)(props)].join(" "));
+const addVariantColors = key => {
+  const variantStyle = VARIANT_COLORS[key];
   return css(["background:", ";color:", ";border-color:", ";&:hover{background:", ";color:", ";border-color:", ";}", ""], themeGet(variantStyle.background), themeGet(variantStyle.color), themeGet(variantStyle.borderColor), themeGet(variantStyle.hovered.background), themeGet(variantStyle.hovered.color), themeGet(variantStyle.hovered.borderColor), variantStyle.focused && css(["&:focus{", "}"], getOutlineStyle(variantStyle.focused.outline)));
 };
-var getVariantStyle = function getVariantStyle(props) {
-  var styles = Object.keys(VARIANT_COLORS).reduce(function (obj, key) {
+const getVariantStyle = props => {
+  const styles = Object.keys(VARIANT_COLORS).reduce((obj, key) => {
     obj[key] = css(["", ""], addVariantColors(key));
     return obj;
   }, {});
   if (props.disabled) return styles.disabled;
-  return styles[props.variant] || styles["default"];
+  return styles[props.variant] || styles.default;
 };
-var getSpace = function getSpace(getter) {
-  return function (props) {
-    return themeGet("space.".concat(getter(props)))(props);
-  };
-};
-var buttonStyles = css(["background:", ";color:", ";border-color:", ";display:flex;align-items:center;justify-content:center;appearance:none;box-shadow:none;margin:0;text-decoration:none;text-align:center;font-family:", ";font-weight:", ";border-radius:", ";transition:", ";border-width:", ";cursor:", ";width:", ";height:auto;font-size:", ";padding:", " ", ";svg{margin-right:", ";margin-left:", ";}&:hover{background:", ";border-color:", ";border-width:", ";border-style:solid;}&:focus{outline:0;box-shadow:", " ", ";}", " ", ""], themeGet(VARIANT_COLORS["default"].background), themeGet(VARIANT_COLORS["default"].color), themeGet("colors.primary"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("borderWidths.1"), function (props) {
-  return props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer";
-}, function (props) {
-  return props.fullWidth ? "100%" : "auto";
-}, function (props) {
-  var fontSize = 2;
+const getSpace = getter => props => themeGet("space.".concat(getter(props)))(props);
+const buttonStyles = css(["background:", ";color:", ";border-color:", ";display:flex;align-items:center;justify-content:center;appearance:none;box-shadow:none;margin:0;text-decoration:none;text-align:center;font-family:", ";font-weight:", ";border-radius:", ";transition:", ";border-width:", ";cursor:", ";width:", ";height:auto;font-size:", ";padding:", " ", ";svg{margin-right:", ";margin-left:", ";}&:hover{background:", ";border-color:", ";border-width:", ";border-style:solid;}&:focus{outline:0;box-shadow:", " ", ";}", " ", ""], themeGet(VARIANT_COLORS.default.background), themeGet(VARIANT_COLORS.default.color), themeGet("colors.primary"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("borderWidths.1"), props => props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer", props => props.fullWidth ? "100%" : "auto", props => {
+  let fontSize = 2;
   if (props.large && props.iconOnly) fontSize = 5;
   if (props.large) fontSize = 3;
   if (props.small) fontSize = 1;
   return themeGet("fontSizes.".concat(fontSize))(props);
-}, getSpace(function (props) {
-  return props.large ? "s" : props.small ? "xxs" : "xs";
-}), getSpace(function (props) {
-  return props.large ? "r" : props.small ? "s" : "between";
-}), getSpace(function (props) {
-  return !props.iconLeft ? "" : props.small ? "xs" : "s";
-}), getSpace(function (props) {
-  return !props.iconRight ? "" : props.small ? "xs" : "s";
-}), themeGet(VARIANT_COLORS["default"].hovered.background), themeGet("colors.primaryDark"), themeGet("borderWidths.1"), themeGet("shadows.thinOutline"), themeGet("colors.primaryDarker"), getVariantStyle, compose(space, layout, color, border));
-var attrs = function attrs(props) {
-  return {
-    "data-testid": props.dataTestId || props["data-testid"],
-    disabled: props.disabled || props.variant == "disabled",
-    className: "".concat(props.className || "", " variant-").concat(props.variant || "default")
-  };
-};
-var StyledButton = styled("button").withConfig({
-  shouldForwardProp: shouldForwardProp
+}, getSpace(props => props.large ? "s" : props.small ? "xxs" : "xs"), getSpace(props => props.large ? "r" : props.small ? "s" : "between"), getSpace(props => !props.iconLeft ? "" : props.small ? "xs" : "s"), getSpace(props => !props.iconRight ? "" : props.small ? "xs" : "s"), themeGet(VARIANT_COLORS.default.hovered.background), themeGet("colors.primaryDark"), themeGet("borderWidths.1"), themeGet("shadows.thinOutline"), themeGet("colors.primaryDarker"), getVariantStyle, compose(space, layout, color, border));
+const attrs = props => ({
+  "data-testid": props.dataTestId || props["data-testid"],
+  disabled: props.disabled || props.variant == "disabled",
+  className: "".concat(props.className || "", " variant-").concat(props.variant || "default")
+});
+const StyledButton = styled("button").withConfig({
+  shouldForwardProp
 }).attrs(attrs).withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-10uojnk-0"
 })(["", ""], buttonStyles);
-var linkStyles = css(["width:", ";display:", ";align-items:", ";"], function (props) {
-  return props.width || "fit-content";
-}, function (props) {
-  return props.height || props.width ? "flex" : props.display || "inline-block";
-}, function (props) {
-  return props.alignItems || "center";
-});
-var StyledButtonLink = styled.a.withConfig({
-  shouldForwardProp: shouldForwardProp
+const linkStyles = css(["width:", ";display:", ";align-items:", ";"], props => props.width || "fit-content", props => props.height || props.width ? "flex" : props.display || "inline-block", props => props.alignItems || "center");
+const StyledButtonLink = styled.a.withConfig({
+  shouldForwardProp
 }).attrs(attrs).withConfig({
   displayName: "Button__StyledButtonLink",
   componentId: "sc-10uojnk-1"
 })(["", " ", ""], buttonStyles, linkStyles);
-var StyledReactButtonLink = styled(Link).withConfig({
-  shouldForwardProp: shouldForwardProp
+const StyledReactButtonLink = styled(Link).withConfig({
+  shouldForwardProp
 }).attrs(attrs).withConfig({
   displayName: "Button__StyledReactButtonLink",
   componentId: "sc-10uojnk-2"
 })(["", " ", ""], buttonStyles, linkStyles);
-var buttonPropTypes = {
+const buttonPropTypes = {
   /** Large button */
   large: PropTypes.bool,
   /** Small button */
@@ -205,62 +171,75 @@ var buttonPropTypes = {
   /** Specifies the `data-testid` attribute for testing. */
   dataTestId: PropTypes.string,
   /** Specifies aria-label for iconOnly buttons. This is only required if the iconOnly button is used, as it doesn't have supporting text for accessibility.*/
-  ariaLabel: function ariaLabel(props, propName) {
+  ariaLabel: (props, propName) => {
     if (props.iconOnly && (props[propName] == null || props[propName] === "")) {
       return new Error("Missing prop `".concat(propName, "` not specified for Button component. When `iconOnly` is true, `").concat(propName, "` is required."));
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType for `".concat(propName, "` supplied to Button component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+      return new Error("Invalid propType for `".concat(propName, "` supplied to Button component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },
   /** Specifies the color theme object. */
   theme: PropTypes.object
 };
-var renderButton = function renderButton(ButtonComponent, _ref) {
-  var ariaLabel = _ref.ariaLabel,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(ButtonComponent, _extends({
-    borderStyle: "solid"
-  }, props.ButtonStyles, props, {
+const renderButton = (ButtonComponent, _ref) => {
+  let {
+    ariaLabel,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsxs(ButtonComponent, {
+    borderStyle: "solid",
+    ...props.ButtonStyles,
+    ...props,
     "aria-label": ariaLabel,
-    ref: props.ref
-  }), props.leftIcon && /*#__PURE__*/React.createElement(Icon, {
-    icon: props.leftIcon,
-    mr: props.small ? "xxs" : "xs"
-  }), props.children, props.rightIcon && /*#__PURE__*/React.createElement(Icon, {
-    icon: props.rightIcon,
-    ml: props.small ? "xxs" : "xs"
-  }), props.isLoading && /*#__PURE__*/React.createElement(Loading, {
-    inverted: true,
-    ml: "s"
-  }));
+    ref: props.ref,
+    children: [props.leftIcon && /*#__PURE__*/_jsx(Icon, {
+      icon: props.leftIcon,
+      mr: props.small ? "xxs" : "xs"
+    }), props.children, props.rightIcon && /*#__PURE__*/_jsx(Icon, {
+      icon: props.rightIcon,
+      ml: props.small ? "xxs" : "xs"
+    }), props.isLoading && /*#__PURE__*/_jsx(Loading, {
+      inverted: true,
+      ml: "s"
+    })]
+  });
 };
-export var ButtonLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var theme = props.theme;
-  var component = renderButton(props.to ? StyledReactButtonLink : StyledButtonLink, _objectSpread(_objectSpread({}, omit(props, "isLoading")), {}, {
-    ref: ref
-  }));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+export const ButtonLink = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    theme
+  } = props;
+  const component = renderButton(props.to ? StyledReactButtonLink : StyledButtonLink, {
+    ...omit(props, "isLoading"),
+    ref
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 });
-ButtonLink.propTypes = _objectSpread(_objectSpread({}, buttonPropTypes), {}, {
+ButtonLink.propTypes = {
+  ...buttonPropTypes,
   target: PropTypes.string,
   /** Link to navigate user to */
   href: PropTypes.string
-});
+};
 ButtonLink.defaultProps = {
   variant: "default"
 };
-export var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var theme = props.theme;
-  var component = renderButton(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref
-  }));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+export const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    theme
+  } = props;
+  const component = renderButton(StyledButton, {
+    ...props,
+    ref
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 });
 Button.__docgenInfo = {
   "description": "",
@@ -416,10 +395,11 @@ Button.__docgenInfo = {
   }
 };
 export default Button;
-Button.propTypes = _objectSpread(_objectSpread({}, buttonPropTypes), {}, {
+Button.propTypes = {
+  ...buttonPropTypes,
   /** Function to run when the `Button` is clicked */
   onClick: PropTypes.func
-});
+};
 Button.defaultProps = {
   variant: "default"
 };