@spothero/ui 22.5.3 → 23.0.1

package/dist/components/CreatableSelect/CreatableSelect.stories.js

@@ -0,0 +1,69 @@
+"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", {
+  value: true
+});
+exports["default"] = exports.CreatableSelect = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _createControl = require("storybook/utils/create-control");
+var _CreatableSelect = require("./CreatableSelect");
+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 _default = exports["default"] = {
+  title: 'v2/CreatableSelect',
+  component: _CreatableSelect.CreatableSelectNode,
+  parameters: {
+    removeBaseHtmlClass: true
+  },
+  argTypes: _objectSpread({}, (0, _createControl.createSelectControl)('createOptionPosition', ['first', 'last'])),
+  args: {
+    label: 'Say Something',
+    isClearable: true,
+    placeholder: 'Please Say Anything or Select Something to Say...',
+    createOptionPosition: 'first',
+    isLoading: false,
+    isInvalid: false,
+    isRequired: false,
+    helperText: '',
+    errorMessage: 'Oh no'
+  }
+};
+var CreatableSelectTemplate = function CreatableSelectTemplate(props) {
+  return /*#__PURE__*/_react["default"].createElement(_CreatableSelect.CreatableSelectNode, (0, _extends2["default"])({
+    id: "say-something-select",
+    allowCreateWhileLoading: true,
+    createOptionPosition: "first",
+    options: [{
+      value: "",
+      label: "Say Nothing"
+    }, {
+      value: "hello",
+      label: "Hello"
+    }, {
+      value: "goodbye",
+      label: "Goodbye"
+    }, {
+      value: "cool",
+      label: "Cool"
+    }, {
+      value: "raisins",
+      label: "What is your opinion on raisins?"
+    }],
+    formatCreateLabel: function formatCreateLabel(other) {
+      return "Say \"".concat(other, "\"");
+    }
+  }, props));
+};
+var CreatableSelect = exports.CreatableSelect = (0, _bind["default"])(CreatableSelectTemplate).call(CreatableSelectTemplate, {});

package/dist/components/CreatableSelect/index.js

@@ -0,0 +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", {
+  value: true
+});
+_Object$defineProperty(exports, "CreatableSelect", {
+  enumerable: true,
+  get: function get() {
+    return _CreatableSelect["default"];
+  }
+});
+var _CreatableSelect = _interopRequireDefault(require("./CreatableSelect"));

package/dist/components/Divider/Divider.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$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", {
+  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(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 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 = exports["default"] = Divider;

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

@@ -0,0 +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", {
+  value: true
+});
+exports["default"] = exports.Divider = void 0;
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _Divider = require("./Divider.styles");
+var _Divider2 = _interopRequireDefault(require("./Divider"));
+var _react2 = require("@chakra-ui/react");
+var _default = exports["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']
+      }
+    }
+  }
+};
+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 = exports.Divider = (0, _bind["default"])(Template).call(Template, {});
+Divider.args = {
+  variant: 'solid',
+  colorScheme: 'medium'
+};

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

@@ -0,0 +1,21 @@
+"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", {
+  value: true
+});
+exports["default"] = exports.colorScheme = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var colorScheme = exports.colorScheme = {
+  low: {
+    borderColor: 'gray.100'
+  },
+  medium: {
+    borderColor: 'gray.200'
+  }
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Divider, {
+  colorScheme: colorScheme
+});

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,29 @@
+"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", {
+  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 _excluded = ["header", "children"];
+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 Drawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var header = _ref.header,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_react2.Drawer, (0, _extends2["default"])({
+    placement: "right"
+  }, props, {
+    ref: ref
+  }), /*#__PURE__*/_react["default"].createElement(_react2.DrawerOverlay, null), /*#__PURE__*/_react["default"].createElement(_react2.DrawerContent, null, /*#__PURE__*/_react["default"].createElement(_react2.DrawerHeader, null, header, /*#__PURE__*/_react["default"].createElement(_react2.DrawerCloseButton, null)), children));
+});
+var _default = exports["default"] = Drawer;

package/dist/components/Drawer/Drawer.stories.js

@@ -0,0 +1,50 @@
+"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", {
+  value: true
+});
+exports["default"] = exports.Drawer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _Button = require("../Button");
+var _index = require("./index");
+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 _default = exports["default"] = {
+  title: 'v2/Drawer',
+  component: _index.Drawer,
+  subcomponents: {
+    DrawerHeader: _index.DrawerHeader,
+    DrawerBody: _index.DrawerBody,
+    DrawerFooter: _index.DrawerFooter
+  },
+  parameters: {
+    importBy: 'Drawer',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/components/drawer'
+  }
+};
+var Drawer = exports.Drawer = function Drawer(props) {
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var toggleDrawer = function toggleDrawer() {
+    return setIsOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: toggleDrawer
+  }, "Open"), /*#__PURE__*/_react["default"].createElement(_index.Drawer, {
+    isOpen: isOpen,
+    onClose: toggleDrawer,
+    header: " Sample Drawer Header"
+  }, /*#__PURE__*/_react["default"].createElement(_index.DrawerBody, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "Sample Drawer Body")), /*#__PURE__*/_react["default"].createElement(_index.DrawerFooter, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "Sample Drawer Footer"))));
+};

package/dist/components/Drawer/index.js

@@ -0,0 +1,57 @@
+"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", {
+  value: true
+});
+_Object$defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer["default"];
+  }
+});
+_Object$defineProperty(exports, "DrawerBody", {
+  enumerable: true,
+  get: function get() {
+    return _react.DrawerBody;
+  }
+});
+_Object$defineProperty(exports, "DrawerCloseButton", {
+  enumerable: true,
+  get: function get() {
+    return _react.DrawerCloseButton;
+  }
+});
+_Object$defineProperty(exports, "DrawerContainer", {
+  enumerable: true,
+  get: function get() {
+    return _react.Drawer;
+  }
+});
+_Object$defineProperty(exports, "DrawerContent", {
+  enumerable: true,
+  get: function get() {
+    return _react.DrawerContent;
+  }
+});
+_Object$defineProperty(exports, "DrawerFooter", {
+  enumerable: true,
+  get: function get() {
+    return _react.DrawerFooter;
+  }
+});
+_Object$defineProperty(exports, "DrawerHeader", {
+  enumerable: true,
+  get: function get() {
+    return _react.DrawerHeader;
+  }
+});
+_Object$defineProperty(exports, "DrawerOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _react.DrawerOverlay;
+  }
+});
+var _react = require("@chakra-ui/react");
+var _Drawer = _interopRequireDefault(require("./Drawer"));

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

@@ -0,0 +1,108 @@
+"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", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var _excluded = ["hasFooter"];
+var body = function body(_ref) {
+  var hasFooter = _ref.hasFooter,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return {
+    overflowY: 'auto',
+    padding: 6,
+    paddingBottom: hasFooter ? 24 : 6
+  };
+};
+var footer = function footer(props) {
+  return {
+    padding: 6,
+    backgroundColor: 'white',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%'
+  };
+};
+var header = function header(props) {
+  return {
+    paddingY: 3,
+    paddingX: 6,
+    borderBottom: '1px solid',
+    borderBottomColor: 'gray.100',
+    display: 'flex',
+    gridGap: 2,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    fontWeight: 'semibold'
+  };
+};
+var closeButton = function closeButton(props) {
+  return {
+    width: 8,
+    height: 8,
+    fontSize: 'xs',
+    background: 'transparent',
+    borderRadius: 'md',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    transitionProperty: 'common',
+    transitionDuration: 'normal',
+    outline: 'transparent solid 2px',
+    outlineOffset: '2px',
+    color: 'gray.600',
+    _hover: {
+      color: 'black',
+      background: 'gray.100'
+    },
+    _focus: {
+      outlineColor: 'primary.default'
+    }
+  };
+};
+var dialogContainer = function dialogContainer(props) {
+  return {
+    zIndex: 'layer2',
+    backgroundColor: 'transparent'
+  };
+};
+var dialog = function dialog(props) {
+  return {
+    backgroundColor: 'white',
+    boxShadow: 'drawer'
+  };
+};
+var baseStyle = function baseStyle(props) {
+  return {
+    body: body(props),
+    footer: footer(props),
+    header: header(props),
+    dialog: dialog(props),
+    closeButton: closeButton(props),
+    dialogContainer: dialogContainer(props)
+  };
+};
+var defaultProps = {
+  size: 'xs'
+};
+var sizes = {
+  xs: {
+    dialog: {
+      maxWidth: {
+        base: '100vw',
+        mobileXL: 80
+      }
+    }
+  }
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Drawer, {
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes
+});

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,74 @@
+"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", {
+  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", "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 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,
+    isOptional = _ref.isOptional,
+    customRequiredText = _ref.customRequiredText,
+    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: props !== null && props !== void 0 && props.isRequired && customRequiredText ? /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+      marginLeft: 1,
+      as: "span",
+      variant: "caption",
+      color: "text.secondary.light"
+    }, customRequiredText) : null,
+    optionalIndicator: 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,
+  customRequiredText: _propTypes["default"].string
+};
+var _default = exports["default"] = FormControl;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,35 @@
+"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", {
+  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(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 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 = exports["default"] = Grid;

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

@@ -0,0 +1,117 @@
+"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", {
+  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 _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _Grid = _interopRequireDefault(require("./Grid"));
+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 = exports["default"] = {
+  title: 'v2/Grid',
+  component: _Grid["default"],
+  subcomponents: {
+    GridItemComponent: _react2.GridItem
+  },
+  parameters: {
+    removeBaseHtmlClass: true
+  },
+  argTypes: {
+    isCompact: {
+      control: 'boolean'
+    }
+  }
+};
+var GridTemplate = function GridTemplate(args, _ref) {
+  var _context, _context2;
+  var hasDarkBackground = _ref.hasDarkBackground;
+  return /*#__PURE__*/_react["default"].createElement(_react2.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(_react2.GridItem, {
+      key: "GridItem-".concat(index),
+      colSpan: 1
+    }, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+      h: "20rem",
+      bg: hasDarkBackground ? 'primary.400' : 'primary.default'
+    }));
+  })));
+};
+var Grid = exports.Grid = (0, _bind["default"])(GridTemplate).call(GridTemplate, {});
+var GridItemTemplate = function GridItemTemplate(_ref2) {
+  var isCompact = _ref2.isCompact,
+    args = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_react2.Container, null, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    bg: "secondary.default",
+    isCompact: isCompact
+  }, /*#__PURE__*/_react["default"].createElement(_react2.GridItem, args, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    h: "20rem",
+    bg: "primary.default"
+  }))));
+};
+var GridItemSpan = exports.GridItemSpan = (0, _bind["default"])(GridItemTemplate).call(GridItemTemplate, {});
+GridItemSpan.storyName = 'GridItem - span prop';
+GridItemSpan.argTypes = {
+  colSpan: rangeControl(12)
+};
+GridItemSpan.args = {
+  colSpan: 12
+};
+var GridItemStartEnd = exports.GridItemStartEnd = (0, _bind["default"])(GridItemTemplate).call(GridItemTemplate, {});
+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(_react2.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(_react2.GridItem, {
+      key: "GridItem-".concat(index),
+      colSpan: spanMap[numberOfColumns]
+    }, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+      h: "20rem",
+      bg: "primary.default"
+    }));
+  })));
+};
+var GridColumnLayout = exports.GridColumnLayout = (0, _bind["default"])(ColumnLayoutTemplate).call(ColumnLayoutTemplate, {});
+GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
+GridColumnLayout.argTypes = {
+  numberOfColumns: rangeControl(4)
+};
+GridColumnLayout.args = {
+  numberOfColumns: 2
+};