@spothero/ui 22.5.3 → 23.0.0

package/dist/components/Card/Card.js

@@ -0,0 +1,28 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/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 Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_react2.Box, (0, _extends2["default"])({
+    position: "relative",
+    padding: 4,
+    bgColor: "background.white",
+    borderRadius: "lg",
+    boxShadow: "md"
+  }, props, {
+    ref: ref
+  }));
+});
+var _default = exports["default"] = Card;

package/dist/components/Card/Card.stories.js

@@ -0,0 +1,33 @@
+"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.Card = 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 _Card = _interopRequireDefault(require("./Card"));
+var _default = exports["default"] = {
+  title: 'v2/Card',
+  component: _Card["default"],
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+/*
+    Storybook's background is white so the Card is hard to see.
+    The Card is typically displayed against a light gray background.
+*/
+var Template = function Template(props) {
+  return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    backgroundColor: "gray.light",
+    padding: 8
+  }, /*#__PURE__*/_react["default"].createElement(_Card["default"], props));
+};
+var Card = exports.Card = (0, _bind["default"])(Template).call(Template, {});
+Card.args = {
+  children: 'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.'
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,44 @@
+"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 = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
+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 Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var defaultChecked = _ref.defaultChecked,
+    isChecked = _ref.isChecked,
+    isDisabled = _ref.isDisabled,
+    value = _ref.value,
+    helperText = _ref.helperText,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
+  return /*#__PURE__*/_react["default"].createElement(_react2.Checkbox, (0, _extends2["default"])({
+    ref: ref,
+    defaultChecked: defaultChecked,
+    isChecked: isChecked,
+    isDisabled: isDisabled,
+    isFocusable: !isDisabled,
+    value: value,
+    alignItems: "start",
+    size: size
+  }, props), children, helperText && /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    color: "gray.600",
+    fontSize: helperTextSize
+  }, helperText));
+});
+var _default = exports["default"] = Checkbox;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,69 @@
+"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.Checkbox = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _default = exports["default"] = {
+  title: 'v2/Checkbox',
+  component: _Checkbox["default"],
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+var CheckboxTemplate = function CheckboxTemplate(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], props);
+};
+var Checkbox = exports.Checkbox = (0, _bind["default"])(CheckboxTemplate).call(CheckboxTemplate, {});
+Checkbox.argTypes = {
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: {
+      type: 'select'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  isDisabled: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  isChecked: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  children: {
+    table: {
+      disable: true
+    }
+  },
+  defaultChecked: {
+    table: {
+      disable: true
+    }
+  },
+  value: {
+    table: {
+      disable: true
+    }
+  }
+};
+Checkbox.args = {
+  defaultChecked: true,
+  isChecked: true,
+  isDisabled: false,
+  isIndeterminate: false,
+  size: 'md',
+  children: 'R U Cool',
+  helperText: 'Helper text'
+};

package/dist/components/Checkbox/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 _Checkbox["default"];
+  }
+});
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));

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

@@ -0,0 +1,90 @@
+"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 = {
+  container: {
+    _disabled: {
+      cursor: 'not-allowed'
+    }
+  },
+  control: {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderImage: 'initial',
+    borderRadius: 'sm',
+    borderColor: 'gray.600',
+    transition: 'all 150ms ease',
+    marginTop: 1.5,
+    _readOnly: {
+      boxShadow: 'none !important',
+      userSelect: 'all'
+    },
+    _disabled: {
+      cursor: 'not-allowed',
+      userSelect: 'none',
+      borderColor: 'gray.200'
+    },
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    },
+    _checked: {
+      borderColor: 'primary.default',
+      backgroundColor: 'primary.default',
+      _hover: {
+        borderColor: 'primary.600',
+        backgroundColor: 'primary.600'
+      },
+      _disabled: {
+        borderColor: 'gray.200',
+        backgroundColor: 'gray.200'
+      }
+    },
+    '& svg': {
+      filter: "drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25))"
+    }
+  },
+  label: {
+    _disabled: {
+      color: 'gray.200',
+      cursor: 'not-allowed'
+    }
+  },
+  icon: {
+    color: 'white'
+  }
+};
+var sizes = {
+  sm: {
+    control: {
+      marginTop: '0.3125rem'
+    }
+  },
+  md: {
+    control: {
+      marginTop: 1
+    },
+    label: {
+      fontSize: 'base'
+    }
+  },
+  lg: {
+    control: {
+      marginTop: 1
+    },
+    label: {
+      fontSize: 'md'
+    }
+  }
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Checkbox, {
+  baseStyle: baseStyle,
+  sizes: sizes
+});

package/dist/components/Container/Container.js

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

package/dist/components/Container/Container.stories.js

@@ -0,0 +1,53 @@
+"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.Container = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _Container = _interopRequireDefault(require("./Container"));
+var _react2 = require("@chakra-ui/react");
+var _createControl = require("storybook/utils/create-control");
+var _getAllColors = require("storybook/utils/get-all-colors");
+var _getAllSizes = require("storybook/utils/get-all-sizes");
+var _Container2 = _interopRequireDefault(require("./Container.styles"));
+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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _default = exports["default"] = {
+  title: 'v2/Container',
+  component: _Container["default"],
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+var ContainerTemplate = function ContainerTemplate(props) {
+  var _context;
+  var _useTheme = (0, _react2.useTheme)(),
+    remToPixels = _useTheme.remToPixels;
+  var breakpoint = (0, _react2.useBreakpointValue)(_Container2["default"].maxW);
+  var size = (0, _react2.useToken)('sizes', breakpoint);
+  var isMobile = breakpoint === null || breakpoint === void 0 ? void 0 : (0, _includes["default"])(breakpoint).call(breakpoint, 'base');
+  var headingText = size ? (0, _concat["default"])(_context = "Container: ".concat(size)).call(_context, isMobile ? '' : " - ".concat(remToPixels(size), "px")) : '';
+  return /*#__PURE__*/_react["default"].createElement(_Container["default"], props, headingText);
+};
+var Container = exports.Container = (0, _bind["default"])(ContainerTemplate).call(ContainerTemplate, {});
+Container.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('color', _getAllColors.getAllColors)), (0, _createControl.createSelectControl)('bg', _getAllColors.getAllColors)), (0, _createControl.createSelectControl)('h', _getAllSizes.getAllSizes));
+Container.args = {
+  color: 'white',
+  bg: 'secondary.default',
+  h: '20',
+  centerContent: true
+};

package/dist/components/Container/Container.styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var styles = {
+  px: 4,
+  mx: 'auto',
+  maxW: {
+    base: 'container.base',
+    tablet: 'container.tablet',
+    desktop: 'container.desktop'
+  }
+};
+var _default = exports["default"] = styles;

package/dist/components/CreatableSelect/CreatableSelect.js

@@ -0,0 +1,148 @@
+"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"] = exports.CreatableSelectNode = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
+var _reactSelect = require("react-select");
+var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
+var _react2 = require("@chakra-ui/react");
+var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _excluded = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText", "innerRef"],
+  _excluded2 = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText"];
+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 DropdownIndicator = function DropdownIndicator(props) {
+  var _useTheme = (0, _react2.useTheme)(),
+    sizes = _useTheme.sizes;
+  return /*#__PURE__*/_react["default"].createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    className: "CreatableSelect-dropdown-icon",
+    as: _chevronDown["default"],
+    boxSize: sizes['2.5']
+  }));
+};
+
+// Exporting without forwardRef for storybook to work
+var CreatableSelectNode = exports.CreatableSelectNode = function CreatableSelectNode(_ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    _ref$isInvalid = _ref.isInvalid,
+    isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    isRequired = _ref.isRequired,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    errorMessage = _ref.errorMessage,
+    helperText = _ref.helperText,
+    innerRef = _ref.innerRef,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useTheme2 = (0, _react2.useTheme)(),
+    colors = _useTheme2.colors,
+    fontSizes = _useTheme2.fontSizes;
+  if (innerRef) {
+    props.ref = innerRef;
+  }
+  var customStyles = {
+    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']
+        }
+      });
+    },
+    placeholder: function placeholder(provided) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        fontSize: fontSizes.sm,
+        color: colors.gray['200']
+      });
+    },
+    dropdownIndicator: function dropdownIndicator(provided) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        color: colors.brandBlue,
+        '&:hover': {
+          color: colors.brandBlue
+        }
+      });
+    },
+    indicatorSeparator: function indicatorSeparator(provided) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        display: 'none'
+      });
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+    errorMessage: errorMessage,
+    isRequired: isRequired,
+    isInvalid: isInvalid,
+    helperText: helperText,
+    label: label,
+    inputId: id
+  }, /*#__PURE__*/_react["default"].createElement(_creatable["default"], (0, _extends2["default"])({
+    id: id,
+    components: {
+      DropdownIndicator: DropdownIndicator
+    },
+    styles: customStyles,
+    options: options,
+    placeholder: placeholder,
+    isLoading: isLoading
+  }, props)));
+};
+var CreatableSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var id = props.id,
+    label = props.label,
+    _props$isInvalid = props.isInvalid,
+    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+    _props$isLoading = props.isLoading,
+    isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+    isRequired = props.isRequired,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
+    errorMessage = props.errorMessage,
+    helperText = props.helperText,
+    additionalProps = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  return /*#__PURE__*/_react["default"].createElement(CreatableSelectNode, (0, _extends2["default"])({
+    id: id,
+    innerRef: ref,
+    label: label,
+    options: options,
+    placeholder: placeholder,
+    helperText: helperText,
+    errorMessage: errorMessage,
+    isLoading: isLoading,
+    isInvalid: isInvalid,
+    isRequired: isRequired
+  }, additionalProps));
+});
+var _default = exports["default"] = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(CreatableSelectNode, (0, _extends2["default"])({
+    ref: ref
+  }, props));
+});

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;