@spothero/ui 22.3.2 → 22.3.5

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

@@ -1,63 +1,69 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
+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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.variants = exports.default = void 0;
+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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var baseStyle = {
   lineHeight: 1.5,
   fontWeight: _typography.fontWeights.semibold
 };
-const variants = exports.variants = {
-  h1: {
-    ...baseStyle,
+var variants = exports.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
     }
-  }
+  })
 };
-const defaultProps = {
+var defaultProps = {
   variant: variants.h2
 };
-var _default = exports.default = {
-  variants,
-  baseStyle,
-  defaultProps
+var _default = exports["default"] = {
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
 };

package/dist/components/Icon/Icon.js

@@ -1,11 +1,12 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+_Object$defineProperty(exports, "default", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _react.Icon;
   }
 });

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

@@ -1,36 +1,40 @@
 "use strict";
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Icon = void 0;
+exports["default"] = exports.Icon = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("@spothero/icons");
 var _Icon = _interopRequireDefault(require("./Icon"));
-var _default = exports.default = {
+var _default = exports["default"] = {
   title: 'v2/Icon',
-  component: _Icon.default,
+  component: _Icon["default"],
   parameters: {
     removeBaseHtmlClass: true
   }
 };
-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.CheckmarkShieldFilled,
-  color: "green.default",
-  height: "24",
-  width: "24",
-  paddingLeft: "16"
-}));
-const Icon = exports.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.CheckmarkShieldFilled,
+    color: "green.default",
+    height: "24",
+    width: "24",
+    paddingLeft: "16"
+  }));
+};
+var Icon = exports.Icon = (0, _bind["default"])(Template).call(Template, {});

package/dist/components/Image/Image.js

@@ -1,25 +1,39 @@
 "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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+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 = ({
-  cloudinaryImageId,
-  cloudinaryTemplate,
-  cloudinaryCloudName,
-  htmlWidth,
-  htmlHeight,
-  quality
-}) => {
-  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;
-  return (0, _template.default)(tmpl, {
+var _excluded = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, 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 _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+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,
@@ -27,42 +41,39 @@ const buildCloudinarySrc = ({
     QUALITY: quality
   });
 };
-const Image = ({
-  isSSR,
-  cloudinaryImageId,
-  cloudinaryTemplate,
-  cloudinaryCloudName,
-  htmlWidth,
-  htmlHeight,
-  quality,
-  lazyLoad,
-  ...otherProps
-}) => {
-  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);
+    return /*#__PURE__*/_react["default"].createElement(_react2.Img, imageProps);
   } else {
-    return /*#__PURE__*/_react.default.createElement(_react2.Image, imageProps);
+    return /*#__PURE__*/_react["default"].createElement(_react2.Image, imageProps);
   }
 };
 Image.defaultProps = {
@@ -70,4 +81,4 @@ Image.defaultProps = {
   quality: 50,
   cloudinaryCloudName: 'spothero'
 };
-var _default = exports.default = Image;
+var _default = exports["default"] = Image;

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

@@ -4,22 +4,22 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 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 => {
-  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Image.default, 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 +28,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 +37,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 +51,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,30 +1,36 @@
 "use strict";
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledImage = exports.SSRImg = exports.LazyLoadImage = exports.DefaultImage = exports.CloudinaryImageTemplate = exports.CloudinaryImageId = void 0;
+exports["default"] = exports.StyledImage = exports.SSRImg = exports.LazyLoadImage = exports.DefaultImage = exports.CloudinaryImageTemplate = exports.CloudinaryImageId = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
 var _react = _interopRequireDefault(require("react"));
 var _Image = _interopRequireDefault(require("./Image"));
-var _default = exports.default = {
+var _default = exports["default"] = {
   title: 'v2/Image',
-  component: _Image.default,
+  component: _Image["default"],
   parameters: {
     removeBaseHtmlClass: true,
     importBy: 'Image'
   }
 };
-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 = exports.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 = exports.DefaultImage = (0, _bind["default"])(Template).call(Template, {});
 DefaultImage.args = {
   src: 'http://placehold.it/350x200',
   width: 350,
   height: 200,
   alt: 'Placeholder image'
 };
-const StyledImage = exports.StyledImage = Template.bind({});
+var StyledImage = exports.StyledImage = (0, _bind["default"])(Template).call(Template, {});
 StyledImage.args = {
   src: 'http://placehold.it/350x200',
   alt: 'Placeholder image',
@@ -41,14 +47,14 @@ StyledImage.args = {
     tablet: 52
   }
 };
-const SSRImg = exports.SSRImg = Template.bind({});
+var SSRImg = exports.SSRImg = (0, _bind["default"])(Template).call(Template, {});
 SSRImg.args = {
   src: 'http://placehold.it/350x200',
   width: 350,
   height: 200,
   alt: 'SSR image'
 };
-const CloudinaryImageId = exports.CloudinaryImageId = Template.bind({});
+var CloudinaryImageId = exports.CloudinaryImageId = (0, _bind["default"])(Template).call(Template, {});
 CloudinaryImageId.args = {
   cloudinaryImageId: 'html-emails/partner-hertz',
   htmlWidth: 186,
@@ -56,7 +62,7 @@ CloudinaryImageId.args = {
   quality: 50,
   alt: 'Cloudinary image ID'
 };
-const CloudinaryImageTemplate = exports.CloudinaryImageTemplate = Template.bind({});
+var CloudinaryImageTemplate = exports.CloudinaryImageTemplate = (0, _bind["default"])(Template).call(Template, {});
 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',
   htmlWidth: 132,
@@ -64,7 +70,7 @@ CloudinaryImageTemplate.args = {
   quality: 80,
   alt: 'Cloudinary image template'
 };
-const LazyLoadImage = exports.LazyLoadImage = LazyLoadTemplate.bind({});
+var LazyLoadImage = exports.LazyLoadImage = (0, _bind["default"])(LazyLoadTemplate).call(LazyLoadTemplate, {});
 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',
   width: 350,

package/dist/components/Input/Input.js

@@ -1,32 +1,37 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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", {
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@chakra-ui/react");
 var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Input = /*#__PURE__*/(0, _react.forwardRef)(({
-  label,
-  helperText,
-  errorMessage,
-  isInvalid,
-  isDisabled,
-  isRequired,
-  isOptional,
-  customRequiredText,
-  ...props
-}, ref) => {
-  const classes = (0, _classnames.default)({
+var _excluded = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    errorMessage = _ref.errorMessage,
+    isInvalid = _ref.isInvalid,
+    isDisabled = _ref.isDisabled,
+    isRequired = _ref.isRequired,
+    isOptional = _ref.isOptional,
+    customRequiredText = _ref.customRequiredText,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = (0, _classnames["default"])({
     'FormElement-contains-error': isInvalid
   });
-  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+  return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
     isInvalid: isInvalid,
     isDisabled: isDisabled,
     isRequired: isRequired,
@@ -36,9 +41,9 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     label: label,
     inputId: props.id,
     customRequiredText: customRequiredText
-  }, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+  }, /*#__PURE__*/_react["default"].createElement(_react2.Input, (0, _extends2["default"])({
     ref: ref,
     className: classes
   }, props)));
 });
-var _default = exports.default = Input;
+var _default = exports["default"] = Input;

package/dist/components/Input/Input.stories.js

@@ -1,28 +1,32 @@
 "use strict";
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Input = void 0;
+exports["default"] = exports.Input = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _react2 = require("@chakra-ui/react");
-var _default = exports.default = {
+var _default = exports["default"] = {
   title: 'v2/Input',
-  component: _Input.default,
+  component: _Input["default"],
   parameters: {
     importBy: 'Input',
     removeBaseHtmlClass: true,
     chakraLink: 'https://chakra-ui.com/docs/components/input'
   }
 };
-const InputTemplate = props => /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
-  variant: "outline",
-  maxWidth: "200px"
-}, props));
-const Input = exports.Input = InputTemplate.bind({});
+var InputTemplate = function InputTemplate(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({
+    variant: "outline",
+    maxWidth: "200px"
+  }, props));
+};
+var Input = exports.Input = (0, _bind["default"])(InputTemplate).call(InputTemplate, {});
 Input.argTypes = {
   placeholder: {
     control: {

package/dist/components/Input/index.js

@@ -1,13 +1,14 @@
 "use strict";
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+_Object$defineProperty(exports, "default", {
   enumerable: true,
-  get: function () {
-    return _Input.default;
+  get: function get() {
+    return _Input["default"];
   }
 });
 var _Input = _interopRequireDefault(require("./Input"));