@spothero/ui 17.0.3 → 17.1.0-beta.3

package/dist/components/Grid/index.js

@@ -1,20 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "GridItem", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _GridItem.default;
   }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Grid.default;
   }
 });
+
 var _Grid = _interopRequireDefault(require("./Grid"));
+
 var _GridItem = _interopRequireDefault(require("./GridItem"));

package/dist/components/Heading/Heading.js

@@ -1,28 +1,49 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react2 = require("@chakra-ui/react");
+
 var _Heading = require("./Heading.styles");
-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 Heading = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(_react2.Heading, (0, _extends2.default)({}, props, {
-  ref: ref,
-  variant: props.variant || props.as || 'h2'
-})));
+
+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; }
+
+var Heading = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_react2.Heading, (0, _extends2.default)({}, props, {
+    ref: ref,
+    variant: props.variant || props.as || 'h2'
+  }));
+});
 Heading.propTypes = {
   /** The React node that will render inside the element */
   children: _propTypes.default.node,
+
   /** Controls the underlying level of the html heading tag */
-  as: _propTypes.default.oneOf(Object.keys(_Heading.variants)),
+  as: _propTypes.default.oneOf((0, _keys.default)(_Heading.variants)),
+
   /** The styling that will be applied to the component regardless of the underlying html */
-  variant: _propTypes.default.oneOf(Object.keys(_Heading.variants))
+  variant: _propTypes.default.oneOf((0, _keys.default)(_Heading.variants))
 };
 var _default = Heading;
 exports.default = _default;

package/dist/components/Heading/Heading.stories.js

@@ -1,13 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Heading = void 0;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _Heading = require("./Heading.styles");
+
 var _Heading2 = _interopRequireDefault(require("./Heading"));
+
 var _default = {
   title: 'v2/Heading',
   component: _Heading2.default,
@@ -18,13 +25,13 @@ var _default = {
     as: {
       control: {
         type: 'select',
-        options: Object.keys(_Heading.variants)
+        options: (0, _keys.default)(_Heading.variants)
       }
     },
     variant: {
       control: {
         type: 'select',
-        options: Object.keys(_Heading.variants)
+        options: (0, _keys.default)(_Heading.variants)
       }
     },
     children: {
@@ -35,8 +42,12 @@ var _default = {
   }
 };
 exports.default = _default;
-const Template = props => /*#__PURE__*/_react.default.createElement(_Heading2.default, props);
-const Heading = Template.bind({});
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react.default.createElement(_Heading2.default, props);
+};
+
+var Heading = Template.bind({});
 exports.Heading = Heading;
 Heading.args = {
   children: 'Heading'

package/dist/components/Heading/Heading.styles.js

@@ -1,65 +1,79 @@
 "use strict";
 
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.variants = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _typography = require("../../theme/base/typography");
-const baseStyle = {
+
+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 baseStyle = {
   lineHeight: 1.5,
   fontWeight: _typography.fontWeights.semibold
 };
-const variants = {
-  h1: {
-    ...baseStyle,
+var variants = {
+  h1: _objectSpread(_objectSpread({}, baseStyle), {}, {
     fontSize: {
       base: _typography.fontSizes['2xl'],
       desktop: _typography.fontSizes['3xl']
     }
-  },
-  h2: {
-    ...baseStyle,
+  }),
+  h2: _objectSpread(_objectSpread({}, baseStyle), {}, {
     fontSize: {
       base: _typography.fontSizes.xl,
       desktop: _typography.fontSizes['2xl']
     }
-  },
-  h3: {
-    ...baseStyle,
+  }),
+  h3: _objectSpread(_objectSpread({}, baseStyle), {}, {
     fontSize: {
       base: _typography.fontSizes.lg,
       desktop: _typography.fontSizes.xl
     }
-  },
-  h4: {
-    ...baseStyle,
+  }),
+  h4: _objectSpread(_objectSpread({}, baseStyle), {}, {
     fontSize: {
       base: _typography.fontSizes.base,
       desktop: _typography.fontSizes.lg
     }
-  },
-  h5: {
-    ...baseStyle,
+  }),
+  h5: _objectSpread(_objectSpread({}, baseStyle), {}, {
     fontSize: {
       base: _typography.fontSizes.base,
       desktop: _typography.fontSizes.base
     }
-  },
-  h6: {
-    ...baseStyle,
+  }),
+  h6: _objectSpread(_objectSpread({}, baseStyle), {}, {
     fontSize: {
       base: _typography.fontSizes.sm,
       desktop: _typography.fontSizes.sm
     }
-  }
+  })
 };
 exports.variants = variants;
-const defaultProps = {
+var defaultProps = {
   variant: variants.h2
 };
 var _default = {
-  variants,
-  baseStyle,
-  defaultProps
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
 };
 exports.default = _default;

package/dist/components/Icon/Icon.js

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

package/dist/components/Icon/Icon.stories.js

@@ -1,13 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Icon = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _icons = require("@spothero/icons");
+
 var _Icon = _interopRequireDefault(require("./Icon"));
+
 var _default = {
   title: 'v2/Icon',
   component: _Icon.default,
@@ -16,23 +21,27 @@ var _default = {
   }
 };
 exports.default = _default;
-const Template = props => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-  as: _icons.HeroCar,
-  color: "primary.default",
-  height: "24",
-  width: "24"
-}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-  as: _icons.S4BLogo,
-  color: "gray.dark",
-  height: "24",
-  width: "24",
-  paddingLeft: "16"
-}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-  as: _icons.Shield,
-  color: "green.default",
-  height: "24",
-  width: "24",
-  paddingLeft: "16"
-}));
-const Icon = Template.bind({});
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    as: _icons.HeroCar,
+    color: "primary.default",
+    height: "24",
+    width: "24"
+  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    as: _icons.S4BLogo,
+    color: "gray.dark",
+    height: "24",
+    width: "24",
+    paddingLeft: "16"
+  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    as: _icons.Shield,
+    color: "green.default",
+    height: "24",
+    width: "24",
+    paddingLeft: "16"
+  }));
+};
+
+var Icon = Template.bind({});
 exports.Icon = Icon;

package/dist/components/Image/Image.js

@@ -1,72 +1,102 @@
 "use strict";
 
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _react2 = require("@chakra-ui/react");
+
 var _template = _interopRequireDefault(require("lodash/template"));
+
 var _environment = _interopRequireDefault(require("@spothero/utils/environment"));
-const buildCloudinarySrc = _ref => {
-  let {
-    cloudinaryImageId,
-    cloudinaryTemplate,
-    cloudinaryCloudName,
-    htmlWidth,
-    htmlHeight,
-    quality
-  } = _ref;
-  const defaultTemplate = `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_${_environment.default.isHighDensityDisplay() ? 2 : 1},h_$h,q_$q,w_$w/${cloudinaryImageId}`;
-  const tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
+
+var _excluded = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
+
+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 buildCloudinarySrc = function buildCloudinarySrc(_ref) {
+  var _context, _context2;
+
+  var cloudinaryImageId = _ref.cloudinaryImageId,
+      cloudinaryTemplate = _ref.cloudinaryTemplate,
+      cloudinaryCloudName = _ref.cloudinaryCloudName,
+      htmlWidth = _ref.htmlWidth,
+      htmlHeight = _ref.htmlHeight,
+      quality = _ref.quality;
+  var defaultTemplate = (0, _concat.default)(_context = (0, _concat.default)(_context2 = "https://res.cloudinary.com/".concat(cloudinaryCloudName, "/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_")).call(_context2, _environment.default.isHighDensityDisplay() ? 2 : 1, ",h_$h,q_$q,w_$w/")).call(_context, cloudinaryImageId);
+  var tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
   return (0, _template.default)(tmpl, {
     interpolate: /{{([\s\S]+?)}}/g // matches template vars in the format '{{ var }}' or '{{var}}'
+
   })({
     WIDTH: htmlWidth,
     HEIGHT: htmlHeight,
     QUALITY: quality
   });
 };
-const Image = _ref2 => {
-  let {
-    isSSR,
-    cloudinaryImageId,
-    cloudinaryTemplate,
-    cloudinaryCloudName,
-    htmlWidth,
-    htmlHeight,
-    quality,
-    lazyLoad,
-    ...otherProps
-  } = _ref2;
-  const hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
-  let cloudinarySrc;
+
+var Image = function Image(_ref2) {
+  var isSSR = _ref2.isSSR,
+      cloudinaryImageId = _ref2.cloudinaryImageId,
+      cloudinaryTemplate = _ref2.cloudinaryTemplate,
+      cloudinaryCloudName = _ref2.cloudinaryCloudName,
+      htmlWidth = _ref2.htmlWidth,
+      htmlHeight = _ref2.htmlHeight,
+      quality = _ref2.quality,
+      lazyLoad = _ref2.lazyLoad,
+      otherProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
+  var cloudinarySrc;
+
   if (hasValidCloudinarySrc) {
     cloudinarySrc = buildCloudinarySrc({
-      cloudinaryImageId,
-      cloudinaryTemplate,
-      cloudinaryCloudName,
-      htmlWidth,
-      htmlHeight,
-      quality
+      cloudinaryImageId: cloudinaryImageId,
+      cloudinaryTemplate: cloudinaryTemplate,
+      cloudinaryCloudName: cloudinaryCloudName,
+      htmlWidth: htmlWidth,
+      htmlHeight: htmlHeight,
+      quality: quality
     });
   }
-  const imageProps = {
-    ...otherProps,
+
+  var imageProps = _objectSpread(_objectSpread({}, otherProps), {}, {
     src: cloudinarySrc || otherProps.src,
-    htmlWidth,
-    htmlHeight,
-    ...(lazyLoad && {
-      loading: 'lazy'
-    })
-  };
+    htmlWidth: htmlWidth,
+    htmlHeight: htmlHeight
+  }, lazyLoad && {
+    loading: 'lazy'
+  });
+
   if (isSSR) {
     return /*#__PURE__*/_react.default.createElement(_react2.Img, imageProps);
   } else {
     return /*#__PURE__*/_react.default.createElement(_react2.Image, imageProps);
   }
 };
+
 Image.defaultProps = {
   isSSR: false,
   quality: 50,

package/dist/components/Image/Image.spec.js

@@ -1,25 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 var _react = _interopRequireDefault(require("react"));
+
 var _react2 = require("@testing-library/react");
+
 var _Image = _interopRequireDefault(require("./Image"));
-const defaultSrc = 'http://placehold.it/350x200';
-const render = props => {
+
+var defaultSrc = 'http://placehold.it/350x200';
+
+var render = function render(props) {
   (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Image.default, props));
 };
-describe('Image', () => {
-  describe('basic behavior', () => {
-    it('displays an image', () => {
+
+describe('Image', function () {
+  describe('basic behavior', function () {
+    it('displays an image', function () {
       render({
         src: defaultSrc,
         alt: 'An image'
       });
-      (0, _react2.waitFor)(() => {
+      (0, _react2.waitFor)(function () {
         expect(_react2.screen.getByRole('img')).toHaveAttribute('src', defaultSrc);
       });
     });
-    it('displays an image (SSR)', () => {
+    it('displays an image (SSR)', function () {
       render({
         src: defaultSrc,
         alt: 'An image',
@@ -28,8 +34,8 @@ describe('Image', () => {
       expect(_react2.screen.getByRole('img')).toHaveAttribute('src', defaultSrc);
     });
   });
-  describe('Cloudinary properties', () => {
-    it('correctly sets image src when a Cloudinary image template is passed in', () => {
+  describe('Cloudinary properties', function () {
+    it('correctly sets image src when a Cloudinary image template is passed in', function () {
       render({
         cloudinaryTemplate: 'https://res.cloudinary.com/spothero/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google',
         htmlWidth: 250,
@@ -37,11 +43,11 @@ describe('Image', () => {
         quality: 75,
         alt: 'An image'
       });
-      (0, _react2.waitFor)(() => {
+      (0, _react2.waitFor)(function () {
         expect(_react2.screen.getByRole('img')).toHaveAttribute('src', 'https://res.cloudinary.com/spothero/image/upload/$w_250,$h_500,$q_75/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google');
       });
     });
-    it('correctly sets image src when a Cloudinary image id is passed in', () => {
+    it('correctly sets image src when a Cloudinary image id is passed in', function () {
       render({
         cloudinaryImageId: 'html-emails/partner-hertz',
         htmlWidth: 250,
@@ -51,25 +57,25 @@ describe('Image', () => {
       });
       expect(_react2.screen.getByRole('img')).toHaveAttribute('src', 'https://res.cloudinary.com/spothero/image/upload/$w_250,$h_500,$q_50/c_fill,f_auto,fl_progressive,dpr_1,h_$h,q_$q,w_$w/html-emails/partner-hertz');
     });
-    it('does not set in image src when invalid set of Cloudinary props is passed in', () => {
+    it('does not set in image src when invalid set of Cloudinary props is passed in', function () {
       render({
         cloudinaryImageId: 'html-emails/partner-hertz',
         alt: 'An image',
         isSSR: true
       });
-      (0, _react2.waitFor)(() => {
+      (0, _react2.waitFor)(function () {
         expect(_react2.screen.getByRole('img')).not.toHaveAttribute('src');
       });
     });
   });
-  describe('Lazy loading', () => {
-    it('correctly sets image loading attribute to lazy when lazyLoad prop is true', () => {
+  describe('Lazy loading', function () {
+    it('correctly sets image loading attribute to lazy when lazyLoad prop is true', function () {
       render({
         src: defaultSrc,
         alt: 'An image',
         lazyLoad: true
       });
-      (0, _react2.waitFor)(() => {
+      (0, _react2.waitFor)(function () {
         expect(_react2.screen.getByRole('img')).toHaveAttribute('loading', 'lazy');
       });
     });

package/dist/components/Image/Image.stories.js

@@ -1,12 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StyledImage = exports.SSRImg = exports.LazyLoadImage = exports.DefaultImage = exports.CloudinaryImageTemplate = exports.CloudinaryImageId = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _Image = _interopRequireDefault(require("./Image"));
+
 var _default = {
   title: 'v2/Image',
   component: _Image.default,
@@ -16,9 +20,16 @@ var _default = {
   }
 };
 exports.default = _default;
-const Template = props => /*#__PURE__*/_react.default.createElement(_Image.default, props);
-const LazyLoadTemplate = props => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll down to see lazy loaded image in action..."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Image.default, props));
-const DefaultImage = Template.bind({});
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react.default.createElement(_Image.default, props);
+};
+
+var LazyLoadTemplate = function LazyLoadTemplate(props) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll down to see lazy loaded image in action..."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Image.default, props));
+};
+
+var DefaultImage = Template.bind({});
 exports.DefaultImage = DefaultImage;
 DefaultImage.args = {
   src: 'http://placehold.it/350x200',
@@ -26,7 +37,7 @@ DefaultImage.args = {
   height: 200,
   alt: 'Placeholder image'
 };
-const StyledImage = Template.bind({});
+var StyledImage = Template.bind({});
 exports.StyledImage = StyledImage;
 StyledImage.args = {
   src: 'http://placehold.it/350x200',
@@ -44,7 +55,7 @@ StyledImage.args = {
     tablet: 52
   }
 };
-const SSRImg = Template.bind({});
+var SSRImg = Template.bind({});
 exports.SSRImg = SSRImg;
 SSRImg.args = {
   src: 'http://placehold.it/350x200',
@@ -52,7 +63,7 @@ SSRImg.args = {
   height: 200,
   alt: 'SSR image'
 };
-const CloudinaryImageId = Template.bind({});
+var CloudinaryImageId = Template.bind({});
 exports.CloudinaryImageId = CloudinaryImageId;
 CloudinaryImageId.args = {
   cloudinaryImageId: 'html-emails/partner-hertz',
@@ -61,7 +72,7 @@ CloudinaryImageId.args = {
   quality: 50,
   alt: 'Cloudinary image ID'
 };
-const CloudinaryImageTemplate = Template.bind({});
+var CloudinaryImageTemplate = Template.bind({});
 exports.CloudinaryImageTemplate = CloudinaryImageTemplate;
 CloudinaryImageTemplate.args = {
   cloudinaryTemplate: 'https://res.cloudinary.com/spothero/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google',
@@ -70,7 +81,7 @@ CloudinaryImageTemplate.args = {
   quality: 80,
   alt: 'Cloudinary image template'
 };
-const LazyLoadImage = LazyLoadTemplate.bind({});
+var LazyLoadImage = LazyLoadTemplate.bind({});
 exports.LazyLoadImage = LazyLoadImage;
 LazyLoadImage.args = {
   src: 'https://res.cloudinary.com/spothero/image/upload/$w_1024,$h_704,$q_50/c_fill,f_auto,h_$h,q_$q,w_$w,x_375,y_250/v1577978927/rzm2xqhtgqxfv3isxmyy.jpg',