@spothero/ui 17.0.0-beta.1 → 17.0.0-beta.3

package/dist/components/Icon/Icon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _react.Icon;
+  }
+});
+
+var _react = require("@chakra-ui/react");

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

@@ -0,0 +1,47 @@
+"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,
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+exports.default = _default;
+
+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

@@ -0,0 +1,106 @@
+"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"));
+
+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
+  });
+};
+
+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: cloudinaryImageId,
+      cloudinaryTemplate: cloudinaryTemplate,
+      cloudinaryCloudName: cloudinaryCloudName,
+      htmlWidth: htmlWidth,
+      htmlHeight: htmlHeight,
+      quality: quality
+    });
+  }
+
+  var imageProps = _objectSpread(_objectSpread({}, otherProps), {}, {
+    src: cloudinarySrc || otherProps.src,
+    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,
+  cloudinaryCloudName: 'spothero'
+};
+var _default = Image;
+exports.default = _default;

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

@@ -0,0 +1,83 @@
+"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"));
+
+var defaultSrc = 'http://placehold.it/350x200';
+
+var render = function render(props) {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Image.default, props));
+};
+
+describe('Image', function () {
+  describe('basic behavior', function () {
+    it('displays an image', function () {
+      render({
+        src: defaultSrc,
+        alt: 'An image'
+      });
+      (0, _react2.waitFor)(function () {
+        expect(_react2.screen.getByRole('img')).toHaveAttribute('src', defaultSrc);
+      });
+    });
+    it('displays an image (SSR)', function () {
+      render({
+        src: defaultSrc,
+        alt: 'An image',
+        isSSR: true
+      });
+      expect(_react2.screen.getByRole('img')).toHaveAttribute('src', defaultSrc);
+    });
+  });
+  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,
+        htmlHeight: 500,
+        quality: 75,
+        alt: 'An image'
+      });
+      (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', function () {
+      render({
+        cloudinaryImageId: 'html-emails/partner-hertz',
+        htmlWidth: 250,
+        htmlHeight: 500,
+        alt: 'An image',
+        isSSR: true
+      });
+      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', function () {
+      render({
+        cloudinaryImageId: 'html-emails/partner-hertz',
+        alt: 'An image',
+        isSSR: true
+      });
+      (0, _react2.waitFor)(function () {
+        expect(_react2.screen.getByRole('img')).not.toHaveAttribute('src');
+      });
+    });
+  });
+  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)(function () {
+        expect(_react2.screen.getByRole('img')).toHaveAttribute('loading', 'lazy');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,92 @@
+"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,
+  parameters: {
+    removeBaseHtmlClass: true,
+    importBy: 'Image'
+  }
+};
+exports.default = _default;
+
+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',
+  width: 350,
+  height: 200,
+  alt: 'Placeholder image'
+};
+var StyledImage = Template.bind({});
+exports.StyledImage = StyledImage;
+StyledImage.args = {
+  src: 'http://placehold.it/350x200',
+  alt: 'Placeholder image',
+  padding: 4,
+  borderColor: 'green.default',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  height: {
+    base: 'auto',
+    tablet: 52
+  },
+  width: {
+    base: 'auto',
+    tablet: 52
+  }
+};
+var SSRImg = Template.bind({});
+exports.SSRImg = SSRImg;
+SSRImg.args = {
+  src: 'http://placehold.it/350x200',
+  width: 350,
+  height: 200,
+  alt: 'SSR image'
+};
+var CloudinaryImageId = Template.bind({});
+exports.CloudinaryImageId = CloudinaryImageId;
+CloudinaryImageId.args = {
+  cloudinaryImageId: 'html-emails/partner-hertz',
+  htmlWidth: 186,
+  htmlHeight: 76,
+  quality: 50,
+  alt: 'Cloudinary image ID'
+};
+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',
+  htmlWidth: 132,
+  htmlHeight: 111,
+  quality: 80,
+  alt: 'Cloudinary image template'
+};
+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',
+  width: 350,
+  height: 200,
+  alt: 'Placeholder image',
+  lazyLoad: true
+};

package/dist/components/Input/Input.js

@@ -0,0 +1,61 @@
+"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 _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"));
+
+var _excluded = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional"];
+
+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 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,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)({
+    'FormElement-contains-error': isInvalid
+  });
+  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isOptional: isOptional,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label,
+    inputId: props.id
+  }, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+    ref: ref,
+    className: classes
+  }, props)));
+});
+var _default = Input;
+exports.default = _default;

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Input = void 0;
+
+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 = {
+  title: 'v2/Input',
+  component: _Input.default,
+  parameters: {
+    importBy: 'Input',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/components/input'
+  }
+};
+exports.default = _default;
+
+var InputTemplate = function InputTemplate(props) {
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+    variant: "outline",
+    maxWidth: "200px"
+  }, props));
+};
+
+var Input = InputTemplate.bind({});
+exports.Input = Input;
+Input.argTypes = {
+  placeholder: {
+    control: {
+      type: 'text'
+    }
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    }
+  }
+};
+Input.args = {
+  id: 'input_id',
+  placeholder: 'Placeholder text',
+  label: 'Label',
+  helperText: 'Helper text',
+  errorMessage: 'Error message',
+  isInvalid: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isOptional: false
+};

package/dist/components/Input/index.js

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

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+
+var baseStyle = {
+  field: {
+    _placeholder: {
+      color: 'text.secondary.light',
+      fontWeight: 'normal',
+      _disabled: {
+        color: 'text.secondary.light',
+        opacity: 1
+      }
+    }
+  }
+};
+var variants = {
+  outline: {
+    field: {
+      border: '1px solid',
+      borderColor: 'gray.200',
+      fontSize: 'base',
+      paddingLeft: 3,
+      paddingRight: 3,
+      bg: 'inherit',
+      fontWeight: 'normal',
+      boxShadow: 'none !important',
+      _placeholder: {
+        color: 'text.secondary.light',
+        fontWeight: 'normal'
+      },
+      _focus: {
+        borderColor: 'brandBlue'
+      },
+      _hover: {
+        borderColor: 'gray.300'
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all'
+      },
+      _disabled: {
+        backgroundColor: 'gray.50',
+        opacity: 1,
+        cursor: 'not-allowed'
+      },
+      _invalid: {
+        borderColor: 'error',
+        _focus: {
+          borderColor: 'error'
+        }
+      }
+    }
+  }
+};
+
+var _default = (0, _merge.default)(_theme.default.components.Input, {
+  baseStyle: baseStyle,
+  variants: variants
+});
+
+exports.default = _default;

package/dist/components/Link/Link.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _react.Link;
+  }
+});
+
+var _react = require("@chakra-ui/react");

package/dist/components/Link/Link.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Overview = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _share = _interopRequireDefault(require("@spothero/icons/share"));
+
+var _Text = _interopRequireDefault(require("../Text/Text"));
+
+var _Link = _interopRequireDefault(require("./Link"));
+
+var _default = {
+  title: 'v2/Link',
+  component: _Link.default,
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+exports.default = _default;
+
+var OverviewTemplate = function OverviewTemplate(props, _ref) {
+  var hasDarkBackground = _ref.hasDarkBackground;
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+  }, "A link with", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+    variant: hasDarkBackground ? 'onDark' : 'standard'
+  }, "no href"), ' ', "is only styled."), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+  }, "Links can be linked to", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+    href: "#",
+    isExternal: true,
+    variant: hasDarkBackground ? 'onDark' : 'standard'
+  }, "External Pages"), ' ', "and will have ", /*#__PURE__*/_react.default.createElement("code", null, "target=\"_blank\""), " and", ' ', /*#__PURE__*/_react.default.createElement("code", null, "rel=\"noopener noreferrer\""), " appended to them."), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+  }, "Links can have", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+    href: "#",
+    variant: hasDarkBackground ? 'onDark' : 'standard'
+  }, "icons inline ", /*#__PURE__*/_react.default.createElement(_share.default, {
+    width: "1rem"
+  }))), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+  }, "Using the ", /*#__PURE__*/_react.default.createElement("code", null, "as"), " prop, you can utilize a routing library, like", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+    href: "https://chakra-ui.com/docs/navigation/link#usage-with-routing-library",
+    isExternal: true,
+    variant: hasDarkBackground ? 'onDark' : 'standard'
+  }, "React Router"), ' ', "and it will replace the ", /*#__PURE__*/_react.default.createElement("code", null, "a"), " tag with it's", ' ', /*#__PURE__*/_react.default.createElement("code", null, "Link"), "."));
+};
+
+var Overview = OverviewTemplate.bind({});
+exports.Overview = Overview;
+Overview.parameters = {
+  importBy: 'Link'
+};