@spothero/ui 17.1.0 → 17.2.0

package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js

@@ -1,72 +1,42 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
-
 var _async = _interopRequireDefault(require("react-select/async"));
-
 var _react2 = require("@chakra-ui/react");
-
 var _timesCircle = _interopRequireDefault(require("@spothero/icons/times-circle"));
-
-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; }
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      helperText = _ref.helperText,
-      errorMessage = _ref.errorMessage,
-      isInvalid = _ref.isInvalid,
-      isDisabled = _ref.isDisabled,
-      isRequired = _ref.isRequired,
-      getOptions = _ref.getOptions,
-      onChange = _ref.onChange,
-      iconSrc = _ref.iconSrc,
-      placeholder = _ref.placeholder;
-
-  var _useTheme = (0, _react2.useTheme)(),
-      colors = _useTheme.colors,
-      fontSizes = _useTheme.fontSizes,
-      sizes = _useTheme.sizes;
-
-  var handleChange = function handleChange(selectedOption) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    id,
+    label,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isDisabled,
+    isRequired,
+    getOptions,
+    onChange,
+    iconSrc,
+    placeholder
+  } = _ref;
+  const {
+    colors,
+    fontSizes,
+    sizes
+  } = (0, _react2.useTheme)();
+  const handleChange = selectedOption => {
     onChange(selectedOption);
   };
-
-  var icon = function icon() {
-    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
+  const icon = function () {
+    let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
     return {
       alignItems: 'center',
       display: 'flex',
@@ -77,85 +47,84 @@ var AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
         marginRight: sizes['3'],
         height: sizes['4'],
         width: sizes['5'],
-        mask: "url(".concat(iconSrc, ") no-repeat 50% 50%"),
+        mask: `url(${iconSrc}) no-repeat 50% 50%`,
         maskSize: 'contain'
       }
     };
   };
-
-  var baseText = {
+  const baseText = {
     fontSize: fontSizes.base,
     color: colors.black
   };
-  /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
 
-  var customStyles = {
-    menu: function menu(provided) {
-      return _objectSpread(_objectSpread({}, provided), baseText);
-    },
-    control: function control(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200'],
-        borderWidth: '1px',
-        boxShadow: 'none',
-        '&:hover': {
-          borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200']
-        }
-      });
-    },
-    input: function input(provided, state) {
-      return _objectSpread(_objectSpread(_objectSpread({}, provided), baseText), {}, {
-        padding: sizes['2'],
-        backgroundColor: state.isDisabled ? colors.gray['200'] : 'transparent'
-      }, iconSrc && icon(colors.gray['600']));
-    },
-    placeholder: function placeholder(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        padding: sizes['2'],
-        fontSize: fontSizes.base,
-        color: colors.gray['600']
-      }, iconSrc && icon());
-    },
-    singleValue: function singleValue(provided) {
-      return _objectSpread(_objectSpread(_objectSpread({}, provided), baseText), {}, {
-        padding: sizes['2']
-      }, iconSrc && icon());
-    },
-    option: function option(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: state.isSelected ? colors.gray['200'] : state.isFocused ? colors.gray['50'] : 'transparent',
-        color: colors.black
-      });
-    },
-    clearIndicator: function clearIndicator(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        color: colors.gray['600']
-      });
-    },
-    dropdownIndicator: function dropdownIndicator(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        color: colors.gray['600']
-      });
-    }
+  /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
+  const customStyles = {
+    menu: provided => ({
+      ...provided,
+      ...baseText
+    }),
+    control: (provided, state) => ({
+      ...provided,
+      borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200'],
+      borderWidth: '1px',
+      boxShadow: 'none',
+      '&:hover': {
+        borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200']
+      }
+    }),
+    input: (provided, state) => ({
+      ...provided,
+      ...baseText,
+      padding: sizes['2'],
+      backgroundColor: state.isDisabled ? colors.gray['200'] : 'transparent',
+      ...(iconSrc && icon(colors.gray['600']))
+    }),
+    placeholder: provided => ({
+      ...provided,
+      padding: sizes['2'],
+      fontSize: fontSizes.base,
+      color: colors.gray['600'],
+      ...(iconSrc && icon())
+    }),
+    singleValue: provided => ({
+      ...provided,
+      ...baseText,
+      padding: sizes['2'],
+      ...(iconSrc && icon())
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      backgroundColor: state.isSelected ? colors.gray['200'] : state.isFocused ? colors.gray['50'] : 'transparent',
+      color: colors.black
+    }),
+    clearIndicator: provided => ({
+      ...provided,
+      color: colors.gray['600']
+    }),
+    dropdownIndicator: provided => ({
+      ...provided,
+      color: colors.gray['600']
+    })
   };
-  var clearIndicatorStyles = {
+  const clearIndicatorStyles = {
     width: sizes['5'],
     display: 'flex',
     marginRight: sizes['3'],
     color: colors.gray['600'],
     cursor: 'pointer'
   };
-  /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
 
-  var ClearIndicator = function ClearIndicator(_ref2) {
-    var innerRef = _ref2.innerRef,
-        innerProps = _ref2.innerProps;
+  /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
+  const ClearIndicator = _ref2 => {
+    let {
+      innerRef,
+      innerProps
+    } = _ref2;
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/_react.default.createElement(_timesCircle.default, null));
   };
-
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
     errorMessage: errorMessage,
     isRequired: isRequired,
@@ -167,13 +136,9 @@ var AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     isClearable: true,
     cacheOptions: true,
     components: {
-      DropdownIndicator: function DropdownIndicator() {
-        return null;
-      },
-      IndicatorSeparator: function IndicatorSeparator() {
-        return null;
-      },
-      ClearIndicator: ClearIndicator
+      DropdownIndicator: () => null,
+      IndicatorSeparator: () => null,
+      ClearIndicator
     },
     openMenuOnClick: false,
     loadOptions: getOptions,

package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.AutoSuggestSelect = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@chakra-ui/react");
-
 var _default = {
   title: 'v2/AutoSuggestSelect',
   parameters: {
@@ -18,12 +14,8 @@ var _default = {
   }
 };
 exports.default = _default;
-
-var AutoSuggestSelectTemplate = function AutoSuggestSelectTemplate(props) {
-  return /*#__PURE__*/_react.default.createElement(_react2.VStack, {
-    alignItems: "flex-start"
-  }, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "AutoSuggestSelect story currently broken due to issues between current version of storybook, forwardref, and hooks. Updating storybook will likely help."));
-};
-
-var AutoSuggestSelect = AutoSuggestSelectTemplate.bind({});
+const AutoSuggestSelectTemplate = props => /*#__PURE__*/_react.default.createElement(_react2.VStack, {
+  alignItems: "flex-start"
+}, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "AutoSuggestSelect story currently broken due to issues between current version of storybook, forwardref, and hooks. Updating storybook will likely help."));
+const AutoSuggestSelect = AutoSuggestSelectTemplate.bind({});
 exports.AutoSuggestSelect = AutoSuggestSelect;

package/dist/components/AutoSuggestSelect/index.js

@@ -1,15 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "AutoSuggestSelect", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _AutoSuggestSelect.default;
   }
 });
-
 var _AutoSuggestSelect = _interopRequireDefault(require("./AutoSuggestSelect"));

package/dist/components/Badge/Badge.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _react.Badge;
   }
 });
-
 var _react = require("@chakra-ui/react");

package/dist/components/Badge/Badge.stories.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Badge = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Badge = _interopRequireDefault(require("./Badge"));
-
 var _default = {
   title: 'v2/Badge',
   component: _Badge.default,
@@ -19,20 +15,16 @@ var _default = {
   }
 };
 exports.default = _default;
-
-var Template = function Template(props) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    variant: "primary"
-  }, "Primary"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    variant: "warningLight"
-  }, "Warning Light"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    variant: "solid",
-    colorScheme: "green"
-  }, "Success"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    variant: "subtle",
-    colorScheme: "red"
-  }, "Removed"));
-};
-
-var Badge = Template.bind({});
+const Template = props => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Badge.default, {
+  variant: "primary"
+}, "Primary"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Badge.default, {
+  variant: "warningLight"
+}, "Warning Light"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Badge.default, {
+  variant: "solid",
+  colorScheme: "green"
+}, "Success"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Badge.default, {
+  variant: "subtle",
+  colorScheme: "red"
+}, "Removed"));
+const Badge = Template.bind({});
 exports.Badge = Badge;

package/dist/components/Badge/styles/index.js

@@ -1,24 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.variants = exports.default = void 0;
-
 var _merge = _interopRequireDefault(require("lodash/merge"));
-
 var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
-
-var baseStyle = {
+const baseStyle = {
   px: 1,
   textTransform: 'reset',
   fontSize: 'xs',
   borderRadius: 'sm',
   fontWeight: 'bold'
 };
-var variants = {
+const variants = {
   primary: {
     bg: 'primary.default',
     color: 'white'
@@ -29,12 +25,10 @@ var variants = {
   }
 };
 exports.variants = variants;
-var defaultProps = {};
-
+const defaultProps = {};
 var _default = (0, _merge.default)(_theme.default.components.Badge, {
-  variants: variants,
-  baseStyle: baseStyle,
-  defaultProps: defaultProps
+  variants,
+  baseStyle,
+  defaultProps
 });
-
 exports.default = _default;

package/dist/components/Button/Button.js

@@ -1,63 +1,33 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@chakra-ui/react");
-
 var _buttonProps = _interopRequireDefault(require("./button-props"));
-
-var _excluded = ["asAnchor", "isExternal"];
-
-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; }
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 anchorProps = function anchorProps() {
-  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return _objectSpread({
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const anchorProps = function () {
+  let isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return {
     as: 'a',
-    type: null
-  }, isExternal && {
-    target: '_blank',
-    rel: 'noopener noreferrer'
-  });
+    type: null,
+    ...(isExternal && {
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    })
+  };
 };
-
-var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var asAnchor = _ref.asAnchor,
-      isExternal = _ref.isExternal,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    asAnchor,
+    isExternal,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
     iconSpacing: 2
   }, props, (asAnchor || props.as === 'a') && anchorProps(isExternal), {

package/dist/components/Button/Button.spec.js

@@ -1,30 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
 var _Button = _interopRequireDefault(require("./Button"));
-
-describe('Button', function () {
-  it('renders the anchor version of the button', function () {
+describe('Button', () => {
+  it('renders the anchor version of the button', () => {
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
       asAnchor: true,
       href: "#"
     }, "Button"));
     expect(_react2.screen.getByRole('link')).toBeInTheDocument();
   });
-  it('renders with target and rel attributes on external anchor button', function () {
+  it('renders with target and rel attributes on external anchor button', () => {
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
       asAnchor: true,
       isExternal: true,
       href: "#"
     }, "Button"));
-
-    var link = _react2.screen.getByRole('link');
-
+    const link = _react2.screen.getByRole('link');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', 'noopener noreferrer');
   });