@spothero/ui 22.5.3 → 23.0.0

package/dist/components/Accordion/Accordion.stories.js

@@ -0,0 +1,101 @@
+"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.Accordion = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _faker = require("@faker-js/faker");
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _Heading = _interopRequireDefault(require("../Heading/Heading"));
+var _createControl = require("storybook/utils/create-control");
+var _index = require("./index");
+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/Accordion',
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+var AccordionTemplate = function AccordionTemplate(_ref) {
+  var index = _ref.index,
+    variant = _ref.variant,
+    allowToggle = _ref.allowToggle,
+    accordionText = _ref.accordionText,
+    allowMultiple = _ref.allowMultiple;
+  var multipleOptions = allowMultiple ? {
+    allowMultiple: allowMultiple,
+    defaultIndex: index
+  } : '';
+  var toggleOptions = allowToggle ? {
+    allowToggle: allowToggle
+  } : '';
+  var handleOnClick = function handleOnClick() {
+    // eslint-disable-next-line no-alert
+    alert('Hello World');
+  };
+  return /*#__PURE__*/_react["default"].createElement(_index.Accordion, (0, _extends2["default"])({}, toggleOptions, multipleOptions, {
+    variant: variant
+  }), /*#__PURE__*/_react["default"].createElement(_index.AccordionItem, null, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    as: "h3"
+  }, /*#__PURE__*/_react["default"].createElement(_index.AccordionButton, null, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    flex: "1",
+    textAlign: "left"
+  }, "Default Accordion"), /*#__PURE__*/_react["default"].createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react["default"].createElement(_index.AccordionPanel, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, accordionText))), /*#__PURE__*/_react["default"].createElement(_index.AccordionItem, null, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    as: "h3"
+  }, /*#__PURE__*/_react["default"].createElement(_index.AccordionButton, null, /*#__PURE__*/_react["default"].createElement(_index.AccordionIcon, null), /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    flex: "1",
+    textAlign: "left"
+  }, "Right Aligned Accordion Icon"))), /*#__PURE__*/_react["default"].createElement(_index.AccordionPanel, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, accordionText))), /*#__PURE__*/_react["default"].createElement(_index.AccordionItem, null, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    as: "h3"
+  }, /*#__PURE__*/_react["default"].createElement(_index.AccordionButton, null, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    flex: "1",
+    textAlign: "left"
+  }, "Accordion with Additional Action Button"), /*#__PURE__*/_react["default"].createElement(_index.AccordionActionButton, {
+    onClick: handleOnClick
+  }, "Action"), /*#__PURE__*/_react["default"].createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react["default"].createElement(_index.AccordionPanel, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, accordionText))));
+};
+var Accordion = exports.Accordion = (0, _bind["default"])(AccordionTemplate).call(AccordionTemplate, {});
+Accordion.argTypes = _objectSpread({
+  accordionText: {
+    control: {
+      type: 'text'
+    }
+  },
+  allowMultiple: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  allowToggle: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  index: {
+    control: {
+      type: 'number'
+    }
+  }
+}, (0, _createControl.createSelectControl)('variant', ['lined', 'contained']));
+Accordion.args = {
+  accordionText: _faker.faker.random.words(100),
+  allowMultiple: true,
+  allowToggle: true,
+  index: [0],
+  variant: 'lined'
+};

package/dist/components/Accordion/AccordionActionButton.js

@@ -0,0 +1,32 @@
+"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");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("@chakra-ui/react");
+var _react2 = _interopRequireWildcard(require("react"));
+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 AccordionActionButton = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    onClick = _ref.onClick;
+  var handleOnClick = function handleOnClick(e) {
+    if (onClick) {
+      e.preventDefault();
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  };
+  return /*#__PURE__*/_react2["default"].createElement(_react.Box, {
+    ref: ref,
+    fontSize: "sm",
+    role: "button",
+    onClick: handleOnClick,
+    color: "primary.default"
+  }, children);
+});
+var _default = exports["default"] = AccordionActionButton;

package/dist/components/Accordion/index.js

@@ -0,0 +1,45 @@
+"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, "Accordion", {
+  enumerable: true,
+  get: function get() {
+    return _react.Accordion;
+  }
+});
+_Object$defineProperty(exports, "AccordionActionButton", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionActionButton["default"];
+  }
+});
+_Object$defineProperty(exports, "AccordionButton", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionButton;
+  }
+});
+_Object$defineProperty(exports, "AccordionIcon", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionIcon;
+  }
+});
+_Object$defineProperty(exports, "AccordionItem", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionItem;
+  }
+});
+_Object$defineProperty(exports, "AccordionPanel", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionPanel;
+  }
+});
+var _AccordionActionButton = _interopRequireDefault(require("./AccordionActionButton"));
+var _react = require("@chakra-ui/react");

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

@@ -0,0 +1,77 @@
+"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 _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var baseStyle = {
+  icon: {
+    color: 'primary.default'
+  },
+  button: {
+    display: 'flex',
+    gridGap: 3.5,
+    alignItems: 'center',
+    fontSize: 'sm',
+    fontWeight: 'semibold',
+    _hover: {
+      backgroundColor: 'gray.50'
+    }
+  },
+  container: {
+    borderColor: 'gray.medium'
+  }
+};
+var variants = {
+  lined: {
+    button: {
+      px: 2,
+      py: 3
+    },
+    container: {
+      borderTopWidth: 1,
+      _last: {
+        borderBottomWidth: 1
+      }
+    },
+    panel: {
+      px: 2,
+      py: 3
+    }
+  },
+  contained: {
+    button: {
+      px: 4,
+      py: 3
+    },
+    container: {
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+      _first: {
+        borderTopLeftRadius: 4,
+        borderTopRightRadius: 4
+      },
+      _last: {
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4
+      }
+    },
+    panel: {
+      p: 4,
+      borderColor: 'gray.medium',
+      borderTopWidth: 1
+    }
+  }
+};
+var defaultProps = {
+  variant: 'lined'
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Accordion, {
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
+});

package/dist/components/Alert/Alert.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _react2 = require("@chakra-ui/react");
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var _x = _interopRequireDefault(require("@spothero/icons/x"));
+var _infoCircleFilled = _interopRequireDefault(require("@spothero/icons/info-circle-filled"));
+var _exclamationCircleFilled = _interopRequireDefault(require("@spothero/icons/exclamation-circle-filled"));
+var _checkmarkCircleFilled = _interopRequireDefault(require("@spothero/icons/checkmark-circle-filled"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _notifications = require("../../theme/base/notifications");
+var _excluded = ["status", "title", "buttonProps", "buttonText", "buttonOnBottom", "showDismiss", "onDismissClick", "showIcon", "description", "icon"];
+var _statusIconMapping;
+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; }
+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 statusIconMapping = (_statusIconMapping = {}, (0, _defineProperty2["default"])(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.WARNING, _exclamationCircleFilled["default"]), (0, _defineProperty2["default"])(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.SUCCESS, _checkmarkCircleFilled["default"]), (0, _defineProperty2["default"])(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.ERROR, _exclamationCircleFilled["default"]), (0, _defineProperty2["default"])(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.NEUTRAL, _infoCircleFilled["default"]), _statusIconMapping);
+var Alert = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var status = _ref.status,
+    title = _ref.title,
+    buttonProps = _ref.buttonProps,
+    buttonText = _ref.buttonText,
+    buttonOnBottom = _ref.buttonOnBottom,
+    showDismiss = _ref.showDismiss,
+    onDismissClick = _ref.onDismissClick,
+    showIcon = _ref.showIcon,
+    description = _ref.description,
+    icon = _ref.icon,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var IconVariant = icon || statusIconMapping[status];
+  // the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
+  var style = (0, _merge["default"])(_objectSpread({}, _theme["default"].components.Alert.baseStyle), _notifications.notificationBaseStyle, (0, _notifications.notificationStatusStyles)(status), (0, _notifications.notificationSizeStyles)(props.size));
+  return /*#__PURE__*/_react["default"].createElement(_react2.Alert, (0, _extends2["default"])({}, style.container, {
+    "data-status": status
+  }, props, {
+    ref: ref
+  }), showIcon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({}, style.icon, {
+    as: IconVariant
+  })) : null, /*#__PURE__*/_react["default"].createElement(_react2.VStack, {
+    spacing: 0,
+    alignItems: "flex-start"
+  }, title ? /*#__PURE__*/_react["default"].createElement(_react2.AlertTitle, style.title, title) : null, description ? /*#__PURE__*/_react["default"].createElement(_react2.AlertDescription, style.description, description) : null, buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, style.actionButton, {
+    variant: "tertiary"
+  }, buttonProps), buttonText) : null), /*#__PURE__*/_react["default"].createElement(_react2.Flex, {
+    alignItems: "center",
+    marginLeft: "auto"
+  }, !buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, style.actionButton, {
+    variant: "tertiary"
+  }, buttonProps), buttonText) : null, showDismiss ? /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, style.dismissButton, {
+    onClick: onDismissClick
+  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    width: 6,
+    height: "auto",
+    as: _x["default"]
+  })) : null));
+});
+Alert.defaultProps = {
+  status: 'neutral',
+  title: null,
+  buttonProps: null,
+  buttonText: null,
+  buttonOnBottom: false,
+  showDismiss: false,
+  onDismissClick: null,
+  showIcon: true,
+  description: null,
+  size: 'md',
+  icon: null
+};
+var _default = exports["default"] = Alert;

package/dist/components/Alert/Alert.stories.js

@@ -0,0 +1,64 @@
+"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.Alert = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _createControl = require("storybook/utils/create-control");
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _Alert = _interopRequireDefault(require("./Alert"));
+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/Alert',
+  component: _Alert["default"],
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+var AlertTemplate = function AlertTemplate(props) {
+  return /*#__PURE__*/_react["default"].createElement(_react2.VStack, {
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "Status: Success"), /*#__PURE__*/_react["default"].createElement(_Alert["default"], (0, _extends2["default"])({
+    status: "success"
+  }, props)), /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "Status: Error"), /*#__PURE__*/_react["default"].createElement(_Alert["default"], (0, _extends2["default"])({
+    status: "error"
+  }, props)), /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "Status: Warning"), /*#__PURE__*/_react["default"].createElement(_Alert["default"], (0, _extends2["default"])({
+    status: "warning"
+  }, props)), /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "Status: Neutral"), /*#__PURE__*/_react["default"].createElement(_Alert["default"], (0, _extends2["default"])({
+    status: "neutral"
+  }, props)));
+};
+var Alert = exports.Alert = (0, _bind["default"])(AlertTemplate).call(AlertTemplate, {});
+Alert.argTypes = _objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg'])), (0, _disableArgs["default"])(['buttonProps', 'onDismissClick', 'status']));
+Alert.args = {
+  title: 'Hello',
+  buttonOnBottom: false,
+  buttonText: 'Action',
+  description: 'This is an alert.',
+  buttonProps: {
+    onClick: function onClick() {
+      return console.log('Action clicked');
+    }
+  },
+  showDismiss: true,
+  onDismissClick: function onDismissClick() {
+    return console.log('dismissed');
+  },
+  showIcon: true,
+  size: 'md'
+};

package/dist/components/Alert/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, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Alert["default"];
+  }
+});
+var _Alert = _interopRequireDefault(require("./Alert"));

package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
+var _async = _interopRequireDefault(require("react-select/async"));
+var _react2 = require("@chakra-ui/react");
+var _xCircle = _interopRequireDefault(require("@spothero/icons/x-circle"));
+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; }
+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 AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    helperText = _ref.helperText,
+    errorMessage = _ref.errorMessage,
+    isInvalid = _ref.isInvalid,
+    isDisabled = _ref.isDisabled,
+    isRequired = _ref.isRequired,
+    getOptions = _ref.getOptions,
+    onChange = _ref.onChange,
+    iconSrc = _ref.iconSrc,
+    placeholder = _ref.placeholder,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue;
+  var _useTheme = (0, _react2.useTheme)(),
+    colors = _useTheme.colors,
+    fontSizes = _useTheme.fontSizes,
+    sizes = _useTheme.sizes;
+  var handleChange = function handleChange(selectedOption) {
+    onChange(selectedOption);
+  };
+  var icon = function icon() {
+    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
+    return {
+      alignItems: 'center',
+      display: 'flex',
+      ':before': {
+        backgroundColor: color,
+        content: '" "',
+        display: 'block',
+        marginRight: sizes['3'],
+        height: sizes['4'],
+        width: sizes['5'],
+        mask: "url(".concat(iconSrc, ") no-repeat 50% 50%"),
+        maskSize: 'contain'
+      }
+    };
+  };
+  var baseText = {
+    fontSize: fontSizes.base,
+    color: colors.black
+  };
+
+  /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
+  var customStyles = {
+    menu: function menu(provided) {
+      return _objectSpread(_objectSpread({}, provided), baseText);
+    },
+    control: function control(provided, state) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['200'],
+        borderWidth: '1px',
+        boxShadow: 'none',
+        '&:hover': {
+          borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['200']
+        }
+      });
+    },
+    input: function input(provided, state) {
+      return _objectSpread(_objectSpread(_objectSpread({}, provided), baseText), {}, {
+        padding: sizes['2'],
+        backgroundColor: state.isDisabled ? colors.gray['200'] : 'transparent'
+      }, iconSrc && icon(colors.gray['600']));
+    },
+    placeholder: function placeholder(provided) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        padding: sizes['2'],
+        fontSize: fontSizes.base,
+        color: colors.gray['600']
+      }, iconSrc && icon());
+    },
+    singleValue: function singleValue(provided) {
+      return _objectSpread(_objectSpread(_objectSpread({}, provided), baseText), {}, {
+        padding: sizes['2']
+      }, iconSrc && icon());
+    },
+    option: function option(provided, state) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        backgroundColor: state.isSelected ? colors.gray['200'] : state.isFocused ? colors.gray['50'] : 'transparent',
+        color: colors.black
+      });
+    },
+    clearIndicator: function clearIndicator(provided) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        color: colors.gray['600']
+      });
+    },
+    dropdownIndicator: function dropdownIndicator(provided) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        color: colors.gray['600']
+      });
+    }
+  };
+  var clearIndicatorStyles = {
+    width: sizes['5'],
+    display: 'flex',
+    marginRight: sizes['3'],
+    color: colors.gray['600'],
+    cursor: 'pointer'
+  };
+
+  /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
+  var ClearIndicator = function ClearIndicator(_ref2) {
+    var innerRef = _ref2.innerRef,
+      innerProps = _ref2.innerProps;
+    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+      style: clearIndicatorStyles,
+      ref: innerRef
+    }, innerProps), /*#__PURE__*/_react["default"].createElement(_xCircle["default"], null));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+    errorMessage: errorMessage,
+    isRequired: isRequired,
+    helperText: helperText,
+    label: label,
+    inputId: id
+  }, /*#__PURE__*/_react["default"].createElement(_async["default"], {
+    closeMenuOnSelect: true,
+    isClearable: true,
+    cacheOptions: true,
+    components: {
+      DropdownIndicator: function DropdownIndicator() {
+        return null;
+      },
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      ClearIndicator: ClearIndicator
+    },
+    openMenuOnClick: false,
+    loadOptions: getOptions,
+    onChange: handleChange,
+    isDisabled: isDisabled,
+    id: id,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    styles: customStyles,
+    ref: ref
+  }));
+});
+var _default = exports["default"] = AutoSuggestSelect;

package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js

@@ -0,0 +1,23 @@
+"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.AutoSuggestSelect = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _default = exports["default"] = {
+  title: 'v2/AutoSuggestSelect',
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+var AutoSuggestSelectTemplate = function AutoSuggestSelectTemplate(props) {
+  return /*#__PURE__*/_react["default"].createElement(_react2.VStack, {
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "AutoSuggestSelect story currently broken due to issues between current version of storybook, forwardref, and hooks. Updating storybook will likely help."));
+};
+var AutoSuggestSelect = exports.AutoSuggestSelect = (0, _bind["default"])(AutoSuggestSelectTemplate).call(AutoSuggestSelectTemplate, {});

package/dist/components/AutoSuggestSelect/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, "AutoSuggestSelect", {
+  enumerable: true,
+  get: function get() {
+    return _AutoSuggestSelect["default"];
+  }
+});
+var _AutoSuggestSelect = _interopRequireDefault(require("./AutoSuggestSelect"));