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

package/dist/components/Divider/Divider.js

@@ -0,0 +1,47 @@
+"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 _react2 = require("@chakra-ui/react");
+
+var _Divider = require("./Divider.styles");
+
+var _excluded = ["variant", "colorScheme"];
+
+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 Divider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var variant = _ref.variant,
+      borderColor = _ref.colorScheme,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react2.Divider, (0, _extends2.default)({}, _Divider.colorScheme[borderColor], {
+    variant: variant
+  }, props, {
+    ref: ref
+  }));
+});
+Divider.defaultProps = {
+  variant: 'solid',
+  colorScheme: 'medium'
+};
+var _default = Divider;
+exports.default = _default;

package/dist/components/Divider/Divider.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Divider = void 0;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Divider = require("./Divider.styles");
+
+var _Divider2 = _interopRequireDefault(require("./Divider"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _default = {
+  title: 'v2/Divider',
+  component: _Divider2.default,
+  argTypes: {
+    colorScheme: {
+      control: {
+        type: 'select',
+        options: (0, _keys.default)(_Divider.colorScheme)
+      }
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['solid', 'dashed']
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Over HowdyHowdyHowdy"), /*#__PURE__*/_react.default.createElement(_Divider2.default, props), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Under HowdyHowdyHowdy"));
+};
+
+var Divider = Template.bind({});
+exports.Divider = Divider;
+Divider.args = {
+  variant: 'solid',
+  colorScheme: 'medium'
+};

package/dist/components/Divider/Divider.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.colorScheme = void 0;
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+
+var colorScheme = {
+  low: {
+    borderColor: 'gray.100'
+  },
+  medium: {
+    borderColor: 'gray.200'
+  }
+};
+exports.colorScheme = colorScheme;
+
+var _default = (0, _merge.default)(_theme.default.components.Divider, {
+  colorScheme: colorScheme
+});
+
+exports.default = _default;

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,79 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _excluded = ["children", "label", "inputId", "helperText", "errorMessage", "isFieldset"];
+
+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 FormControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+      label = _ref.label,
+      inputId = _ref.inputId,
+      helperText = _ref.helperText,
+      errorMessage = _ref.errorMessage,
+      isFieldset = _ref.isFieldset,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({}, props, {
+    ref: ref,
+    as: isFieldset ? 'fieldset' : 'div',
+    borderWidth: "0"
+  }), label && /*#__PURE__*/_react.default.createElement(_react2.FormLabel, {
+    color: "gray.600",
+    fontWeight: "semibold",
+    marginBottom: helperText ? 0 : 1,
+    fontSize: "sm",
+    htmlFor: inputId,
+    as: isFieldset ? 'legend' : 'label',
+    requiredIndicator: "",
+    optionalIndicator: props !== null && props !== void 0 && props.isOptional && !(props !== null && props !== void 0 && props.isRequired) ? /*#__PURE__*/_react.default.createElement(_react2.Text, {
+      marginLeft: 1,
+      as: "span",
+      variant: "caption",
+      color: "text.secondary.light"
+    }, "Optional") : null
+  }, label), helperText && /*#__PURE__*/_react.default.createElement(_react2.FormHelperText, {
+    color: "gray.600",
+    marginBottom: 1,
+    fontSize: "xs"
+  }, helperText), children, /*#__PURE__*/_react.default.createElement(_react2.FormErrorMessage, {
+    color: "error",
+    mt: 1,
+    fontSize: "xs"
+  }, errorMessage));
+});
+FormControl.propTypes = {
+  inputId: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string,
+  helperText: _propTypes.default.string,
+  errorMessage: _propTypes.default.string,
+  children: _propTypes.default.element,
+  isFieldset: _propTypes.default.bool,
+  isOptional: _propTypes.default.bool,
+  isRequired: _propTypes.default.bool
+};
+var _default = FormControl;
+exports.default = _default;

package/dist/components/Grid/Grid.js

@@ -0,0 +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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _Grid = require("./Grid.styles");
+
+var _excluded = ["isCompact"];
+
+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 Grid = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var isCompact = _ref.isCompact,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react2.Grid, (0, _extends2.default)({}, _Grid.baseStyles, isCompact && _Grid.compactStyles, props, {
+    ref: ref
+  }));
+});
+Grid.propTypes = {
+  /** This will reduce the grid gap by half */
+  isCompact: _propTypes.default.bool
+};
+Grid.defaultProps = {
+  isCompact: false
+};
+var _default = Grid;
+exports.default = _default;

package/dist/components/Grid/Grid.stories.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GridItemStartEnd = exports.GridItemSpan = exports.GridColumnLayout = exports.Grid = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _Grid = _interopRequireDefault(require("./Grid"));
+
+var _ = require("./..");
+
+var _excluded = ["isCompact"];
+
+var rangeControl = function rangeControl(max) {
+  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return {
+    control: {
+      max: max,
+      min: min,
+      step: 1,
+      type: 'range'
+    }
+  };
+};
+
+var spanMap = {
+  1: 12,
+  2: 6,
+  3: 4,
+  4: 3
+};
+var _default = {
+  title: 'v2/Grid',
+  component: _Grid.default,
+  subcomponents: {
+    GridItemComponent: _.GridItem
+  },
+  parameters: {
+    removeBaseHtmlClass: true
+  },
+  argTypes: {
+    isCompact: {
+      control: 'boolean'
+    }
+  }
+};
+exports.default = _default;
+
+var GridTemplate = function GridTemplate(args, _ref) {
+  var _context, _context2;
+
+  var hasDarkBackground = _ref.hasDarkBackground;
+  return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, args, {
+    bg: hasDarkBackground ? 'secondary.700' : 'secondary.default'
+  }), (0, _map.default)(_context = (0, _fill.default)(_context2 = Array(12)).call(_context2, null)).call(_context, function (Item, index) {
+    return /*#__PURE__*/_react.default.createElement(_.GridItem, {
+      key: "GridItem-".concat(index),
+      colSpan: 1
+    }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+      h: "20rem",
+      bg: hasDarkBackground ? 'primary.400' : 'primary.default'
+    }));
+  })));
+};
+
+var Grid = GridTemplate.bind({});
+exports.Grid = Grid;
+
+var GridItemTemplate = function GridItemTemplate(_ref2) {
+  var isCompact = _ref2.isCompact,
+      args = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    bg: "secondary.default",
+    isCompact: isCompact
+  }, /*#__PURE__*/_react.default.createElement(_.GridItem, args, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    h: "20rem",
+    bg: "primary.default"
+  }))));
+};
+
+var GridItemSpan = GridItemTemplate.bind({});
+exports.GridItemSpan = GridItemSpan;
+GridItemSpan.storyName = 'GridItem - span prop';
+GridItemSpan.argTypes = {
+  colSpan: rangeControl(12)
+};
+GridItemSpan.args = {
+  colSpan: 12
+};
+var GridItemStartEnd = GridItemTemplate.bind({});
+exports.GridItemStartEnd = GridItemStartEnd;
+GridItemStartEnd.storyName = 'GridItem - start/end prop';
+GridItemStartEnd.argTypes = {
+  colStart: rangeControl(12),
+  colEnd: rangeControl(13, 2)
+};
+GridItemStartEnd.args = {
+  colStart: 1,
+  colEnd: 2
+};
+
+var ColumnLayoutTemplate = function ColumnLayoutTemplate(_ref3) {
+  var _context3, _context4;
+
+  var numberOfColumns = _ref3.numberOfColumns;
+  return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    bg: "secondary.default"
+  }, (0, _map.default)(_context3 = (0, _fill.default)(_context4 = Array(numberOfColumns)).call(_context4, null)).call(_context3, function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_.GridItem, {
+      key: "GridItem-".concat(index),
+      colSpan: spanMap[numberOfColumns]
+    }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+      h: "20rem",
+      bg: "primary.default"
+    }));
+  })));
+};
+
+var GridColumnLayout = ColumnLayoutTemplate.bind({});
+exports.GridColumnLayout = GridColumnLayout;
+GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
+GridColumnLayout.argTypes = {
+  numberOfColumns: rangeControl(4)
+};
+GridColumnLayout.args = {
+  numberOfColumns: 2
+};

package/dist/components/Grid/Grid.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compactStyles = exports.baseStyles = void 0;
+// NOTE: considering adding a specifc prop for grid row padding
+var baseStyles = {
+  gap: {
+    base: 4,
+    tablet: 8
+  },
+  templateColumns: 'repeat(12, 1fr)'
+};
+exports.baseStyles = baseStyles;
+var compactStyles = {
+  gap: 4
+};
+exports.compactStyles = compactStyles;

package/dist/components/Grid/GridItem.js

@@ -0,0 +1,34 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _GridItem = _interopRequireDefault(require("./GridItem.styles"));
+
+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 GridItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_react2.GridItem, (0, _extends2.default)({}, _GridItem.default, props, {
+    ref: ref
+  }));
+});
+var _default = GridItem;
+exports.default = _default;

package/dist/components/Grid/GridItem.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// NOTE: styles NOT in the Chakra's base styles do not need to explicitly export baseStyles
+// TODO: move this comment to the readme
+var styles = {
+  colSpan: 12
+};
+var _default = styles;
+exports.default = _default;

package/dist/components/Grid/index.js

@@ -0,0 +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() {
+    return _GridItem.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Grid.default;
+  }
+});
+
+var _Grid = _interopRequireDefault(require("./Grid"));
+
+var _GridItem = _interopRequireDefault(require("./GridItem"));

package/dist/components/Heading/Heading.js

@@ -0,0 +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 _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((0, _keys.default)(_Heading.variants)),
+
+  /** The styling that will be applied to the component regardless of the underlying html */
+  variant: _propTypes.default.oneOf((0, _keys.default)(_Heading.variants))
+};
+var _default = Heading;
+exports.default = _default;

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

@@ -0,0 +1,54 @@
+"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,
+  parameters: {
+    removeBaseHtmlClass: true
+  },
+  argTypes: {
+    as: {
+      control: {
+        type: 'select',
+        options: (0, _keys.default)(_Heading.variants)
+      }
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: (0, _keys.default)(_Heading.variants)
+      }
+    },
+    children: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+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

@@ -0,0 +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");
+
+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
+};
+var variants = {
+  h1: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes['2xl'],
+      desktop: _typography.fontSizes['3xl']
+    }
+  }),
+  h2: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.xl,
+      desktop: _typography.fontSizes['2xl']
+    }
+  }),
+  h3: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.lg,
+      desktop: _typography.fontSizes.xl
+    }
+  }),
+  h4: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.base,
+      desktop: _typography.fontSizes.lg
+    }
+  }),
+  h5: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.base,
+      desktop: _typography.fontSizes.base
+    }
+  }),
+  h6: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.sm,
+      desktop: _typography.fontSizes.sm
+    }
+  })
+};
+exports.variants = variants;
+var defaultProps = {
+  variant: variants.h2
+};
+var _default = {
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
+};
+exports.default = _default;