@spothero/ui 22.0.0-beta.1 → 22.0.0

package/dist/components/Menu/Menu.js

@@ -0,0 +1,16 @@
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+const Menu = (0, _react2.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_react2.Menu, (0, _extends2.default)({}, props, {
+    ref: ref
+  }));
+});
+var _default = exports.default = Menu;

package/dist/components/Menu/Menu.stories.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Complex = exports.Basic = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _index = require("./index");
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _react2 = require("@chakra-ui/react");
+var _default = exports.default = {
+  title: 'v2/Menu',
+  component: {
+    Menu: _Menu.default
+  },
+  parameters: {
+    importedBy: 'Menu',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://v1.chakra-ui.com/docs/components/overlay/menu'
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['basic', 'full']
+      }
+    }
+  }
+};
+const BasicMenuTemplate = props => {
+  return /*#__PURE__*/_react.default.createElement(_Menu.default, props, /*#__PURE__*/_react.default.createElement(_index.MenuButton, null, "MenuItem"), /*#__PURE__*/_react.default.createElement(_index.MenuList, null, /*#__PURE__*/_react.default.createElement(_index.MenuOptionGroup, {
+    title: "Order",
+    type: "radio"
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "asc"
+  }, "Ascending"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "desc"
+  }, "Descending")), /*#__PURE__*/_react.default.createElement(_index.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_index.MenuOptionGroup, {
+    title: "Country",
+    type: "checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "email"
+  }, "Email"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "phone"
+  }, "Phone"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "country"
+  }, "Country")), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Profile"
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "My Account"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Payments "))));
+};
+const ComplexMenuTemplate = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    variant: "body2",
+    marginBottom: 8
+  }, "NOTE: This is a fairly contrived example. Chakra's", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Menu />'), " (and child components) allow for the building of a complex menu using other components like", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Flex />'), ",", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Box />'), ",", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Text />'), ", etc. The example below is leveraging the ", /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, 'full'), " variant to allow for a more complex layout."), /*#__PURE__*/_react.default.createElement(_Menu.default, (0, _extends2.default)({}, props, {
+    placement: "bottom"
+  }), /*#__PURE__*/_react.default.createElement(_index.MenuButton, null, "Menu Button"), /*#__PURE__*/_react.default.createElement(_index.MenuList, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Flex, {
+    gap: 4
+  }, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm",
+    fontWeight: "semibold"
+  }, "102 S Ada St. Chicago, IL"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "102 S Ada St. - Self Park Garage")), /*#__PURE__*/_react.default.createElement(_react2.Divider, {
+    marginY: 4
+  })), /*#__PURE__*/_react.default.createElement(_react2.Flex, {
+    alignItems: "flex-start",
+    gap: 2.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Facility Management",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Location Information"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage the details provided to drivers about a facility")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Changelog"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Track changes made to your facilities")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Email Recipients"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "View recipients of recurring operational emails"))), /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    height: 80
+  }, /*#__PURE__*/_react.default.createElement(_react2.Divider, {
+    orientation: "vertical"
+  })), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Events",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Event Schedule"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Event Pricing Defaults"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Set rate and inventory rules for various types of events"))), /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    height: 80
+  }, /*#__PURE__*/_react.default.createElement(_react2.Divider, {
+    orientation: "vertical"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Monthly",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Monthly Rates"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Monthly Inventory"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage total monthly inventory and track utilization"))), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Airport",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Airport Rates"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage airport rates")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Airport Inventory"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage total airport inventory and exceptions"))))))));
+};
+const Basic = exports.Basic = BasicMenuTemplate.bind({});
+Basic.args = {
+  variant: 'basic'
+};
+const Complex = exports.Complex = ComplexMenuTemplate.bind({});
+Complex.argTypes = {
+  ...(0, _disableArgs.default)(['variant'])
+};
+Complex.args = {
+  variant: 'full'
+};

package/dist/components/Menu/Menu.styles.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+const baseStyle = {
+  button: {
+    px: 8,
+    py: 3,
+    fontSize: 'base',
+    fontFamily: 'body',
+    lineHeight: 0.875,
+    fontWeight: 'semibold',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: 'base',
+    textTransform: 'capitalize',
+    transition: 'all normal ease',
+    _hover: {
+      bg: 'gray.50',
+      borderColor: 'gray.200'
+    },
+    _disabled: {
+      cursor: 'not-allowed',
+      opacity: 1,
+      bg: 'gray.200',
+      borderColor: 'gray.200',
+      color: 'gray.600'
+    },
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    }
+  },
+  list: {
+    bg: 'white',
+    boxShadow: 'base',
+    padding: 6,
+    zIndex: 'layer1',
+    width: 64
+  },
+  item: {
+    paddingX: 2,
+    paddingY: 1.5,
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    }
+  },
+  groupTitle: {
+    fontWeight: 'semibold',
+    color: 'gray.600',
+    padding: 2
+  },
+  command: {
+    // this will style the text defined by the command
+    // prop in the MenuItem and MenuItemOption components
+    opacity: '0.8',
+    fontFamily: 'mono',
+    fontSize: 'sm',
+    letterSpacing: 'tighter',
+    paddingL: 4
+  },
+  divider: {
+    marginY: 2,
+    borderColor: 'gray.200'
+  }
+};
+const variants = {
+  basic: {
+    button: {
+      bg: 'primary.default',
+      borderColor: 'primary.default',
+      color: 'white',
+      _hover: {
+        bg: 'primary.600',
+        borderColor: 'primary.600',
+        color: 'white',
+        _disabled: {
+          bg: 'gray.200',
+          borderColor: 'gray.200',
+          color: 'gray.600'
+        }
+      }
+    },
+    list: {
+      bg: 'white',
+      boxShadow: 'base',
+      zIndex: 'layer1',
+      borderColor: 'gray.100',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: 'base',
+      padding: 4,
+      width: 64
+    },
+    groupTitle: {
+      fontWeight: 'semibold',
+      fontSize: 'md',
+      color: 'gray.600',
+      padding: 2
+    },
+    item: {
+      fontWeight: 'semibold',
+      _hover: {
+        color: 'gray.600'
+      }
+    }
+  },
+  full: {
+    button: {
+      height: 8,
+      fontSize: 'sm',
+      fontWeight: 'semibold',
+      color: 'black',
+      borderColor: 'white',
+      backgroundColor: 'white',
+      borderRadius: 'base',
+      paddingX: 3,
+      paddingY: 'auto',
+      _hover: {
+        color: 'black',
+        backgroundColor: 'gray.50',
+        borderColor: 'gray.50'
+      },
+      _active: {
+        color: 'primary.default',
+        backgroundColor: 'gray.50',
+        borderColor: 'gray.50',
+        _hover: {
+          color: 'primary.600',
+          backgroundColor: 'gray.50',
+          borderColor: 'gray.50'
+        }
+      }
+    },
+    list: {
+      height: '30rem',
+      width: '100vw',
+      padding: 8,
+      backgroundColor: 'white'
+    },
+    groupTitle: {
+      fontSize: 'sm',
+      weight: 'normal',
+      color: 'gray.600'
+    },
+    item: {
+      display: 'block',
+      paddingX: 3.5,
+      paddingY: 2.5,
+      marginBottom: 2,
+      _last: {
+        marginBottom: 0
+      },
+      _hover: {
+        backgroundColor: 'gray.50'
+      },
+      _focus: {
+        boxShadow: 'none',
+        backgroundColor: 'gray.50'
+      }
+    }
+  }
+};
+var _default = exports.default = (0, _merge.default)(_theme.default.components.Menu, {
+  baseStyle,
+  variants
+});

package/dist/components/Menu/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MenuButton", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuButton;
+  }
+});
+Object.defineProperty(exports, "MenuDivider", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuDivider;
+  }
+});
+Object.defineProperty(exports, "MenuGroup", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuGroup;
+  }
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuItem;
+  }
+});
+Object.defineProperty(exports, "MenuItemOption", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuItemOption;
+  }
+});
+Object.defineProperty(exports, "MenuList", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuList;
+  }
+});
+Object.defineProperty(exports, "MenuOptionGroup", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuOptionGroup;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Menu.default;
+  }
+});
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _react = require("@chakra-ui/react");

package/dist/components/Popover/Popover.stories.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Variant = exports.Placement = exports.NoHeader = exports.NoCloseButton = void 0;
+exports.default = exports.Variant = exports.Placement = exports.NoHeader = exports.NoCloseButton = exports.NoArrow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
@@ -67,4 +67,14 @@ const NoCloseButtonTemplate = props => /*#__PURE__*/_react.default.createElement
 const NoCloseButton = exports.NoCloseButton = NoCloseButtonTemplate.bind({});
 NoCloseButton.argTypes = {
   ...(0, _disableArgs.default)(['variant', 'placement'])
+};
+const NoArrowTemplate = props => /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({
+  defaultIsOpen: true
+}, props), /*#__PURE__*/_react.default.createElement(_index.PopoverTrigger, null, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Trigger")), /*#__PURE__*/_react.default.createElement(_index.PopoverContent, {
+  hideArrow: true,
+  header: "Confirmation!"
+}, "Are you sure you want to have that milkshake?"));
+const NoArrow = exports.NoArrow = NoArrowTemplate.bind({});
+NoArrow.argTypes = {
+  ...(0, _disableArgs.default)(['variant', 'placement'])
 };

package/dist/components/Popover/PopoverContent.js

@@ -18,18 +18,21 @@ const PopoverContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     variant,
     children,
     hideCloseButton,
+    hideArrow,
+    popoverBodyProps,
     ...rest
   } = props;
   return /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({}, rest, {
     ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_PopoverArrow.default, {
+  }), hideArrow ? null : /*#__PURE__*/_react.default.createElement(_PopoverArrow.default, {
     variant: variant
   }), hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_PopoverCloseButton.default, {
     variant: variant
-  }), header ? /*#__PURE__*/_react.default.createElement(_react2.PopoverHeader, null, header) : null, /*#__PURE__*/_react.default.createElement(_react2.PopoverBody, null, children));
+  }), header ? /*#__PURE__*/_react.default.createElement(_react2.PopoverHeader, null, header) : null, /*#__PURE__*/_react.default.createElement(_react2.PopoverBody, popoverBodyProps, children));
 });
 PopoverContent.defaultProps = {
   variant: 'light',
-  hideCloseButton: false
+  hideCloseButton: false,
+  hideArrow: false
 };
 var _default = exports.default = PopoverContent;

package/dist/components/Popover/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "PopoverAnchor", {
     return _react.PopoverAnchor;
   }
 });
+Object.defineProperty(exports, "PopoverArrow", {
+  enumerable: true,
+  get: function () {
+    return _PopoverArrow.default;
+  }
+});
 Object.defineProperty(exports, "PopoverContent", {
   enumerable: true,
   get: function () {
@@ -30,4 +36,5 @@ Object.defineProperty(exports, "PopoverTrigger", {
 });
 var _react = require("@chakra-ui/react");
 var _Popover = _interopRequireDefault(require("./Popover"));
-var _PopoverContent = _interopRequireDefault(require("./PopoverContent"));
+var _PopoverContent = _interopRequireDefault(require("./PopoverContent"));
+var _PopoverArrow = _interopRequireDefault(require("./PopoverArrow"));

package/dist/components/Tabs/Tabs.stories.js

@@ -22,6 +22,12 @@ var _default = exports.default = {
         type: 'select',
         options: [_Tabs.SIZE_SMALL, _Tabs.SIZE_BODY, _Tabs.SIZE_HEADING]
       }
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['line', 'enclosed']
+      }
     }
   }
 };

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

@@ -35,6 +35,34 @@ const variants = {
         color: 'black'
       }
     }
+  },
+  enclosed: {
+    tablist: {
+      backgroundColor: 'white',
+      borderRadius: '8px',
+      borederColor: 'gray.200',
+      borderWidth: '1px',
+      paddingY: 1
+    },
+    tab: {
+      borderRadius: '6px',
+      marginX: 1,
+      _selected: {
+        fontWeight: 'semibold',
+        color: 'white',
+        backgroundColor: 'primary.default',
+        _hover: {
+          backgroundColor: 'primary.600'
+        }
+      },
+      _active: {
+        backgroundColor: 'gray.200'
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed'
+      }
+    }
   }
 };
 var _default = exports.default = (0, _merge.default)(_theme.default.components.Tabs, {

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,44 @@
+"use strict";
+
+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 _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@chakra-ui/react");
+var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const Textarea = /*#__PURE__*/(0, _react.forwardRef)(({
+  label,
+  helperText,
+  errorMessage,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  isOptional,
+  customRequiredText,
+  ...props
+}, ref) => {
+  const classes = (0, _classnames.default)({
+    'FormElement-contains-error': isInvalid
+  });
+  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isOptional: isOptional,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label,
+    inputId: props.id,
+    customRequiredText: customRequiredText
+  }, /*#__PURE__*/_react.default.createElement(_react2.Textarea, (0, _extends2.default)({
+    ref: ref,
+    className: classes
+  }, props)));
+});
+var _default = exports.default = Textarea;

package/dist/components/Textarea/Textarea.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Textarea = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Textarea = _interopRequireDefault(require("./Textarea.stories"));
+var _react2 = require("@chakra-ui/react");
+var _default = exports.default = {
+  title: 'v2/Textarea',
+  component: _Textarea.default,
+  parameters: {
+    importBy: 'Textarea',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/components/textarea'
+  }
+};
+const TextareaTemplate = props => /*#__PURE__*/_react.default.createElement(_Textarea.default, (0, _extends2.default)({
+  variant: "outline",
+  maxWidth: "200px"
+}, props));
+const Textarea = exports.Textarea = TextareaTemplate.bind({});
+Textarea.argTypes = {
+  placeholder: {
+    control: {
+      type: 'text'
+    }
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    }
+  }
+};
+Textarea.args = {
+  id: 'textarea_id',
+  placeholder: 'Placeholder text',
+  label: 'Label',
+  helperText: 'Helper text',
+  errorMessage: 'Error message',
+  isInvalid: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isOptional: false
+};

package/dist/components/Textarea/index.js

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

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

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

package/dist/components/index.js

@@ -32,8 +32,10 @@ var _exportNames = {
   Input: true,
   SelectionCard: true,
   Divider: true,
+  Textarea: true,
   Popover: true,
   PopoverAnchor: true,
+  PopoverArrow: true,
   PopoverTrigger: true,
   PopoverContent: true,
   Radio: true,
@@ -42,6 +44,14 @@ var _exportNames = {
   Badge: true,
   ToggleButtonGroup: true,
   CreatableSelect: true,
+  Menu: true,
+  MenuButton: true,
+  MenuList: true,
+  MenuItem: true,
+  MenuItemOption: true,
+  MenuGroup: true,
+  MenuOptionGroup: true,
+  MenuDivider: true,
   Box: true,
   Kbd: true,
   Code: true,
@@ -70,6 +80,8 @@ var _exportNames = {
   useClipboard: true,
   useDisclosure: true,
   useMediaQuery: true,
+  CheckboxGroup: true,
+  useStyleConfig: true,
   BreadcrumbItem: true,
   BreadcrumbLink: true,
   InputLeftAddon: true,
@@ -83,7 +95,7 @@ var _exportNames = {
   usePrefersReducedMotion: true,
   keyframes: true,
   BoxProps: true,
-  Textarea: true
+  BasicTextarea: true
 };
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
@@ -115,6 +127,12 @@ Object.defineProperty(exports, "BasicInput", {
     return _react.Input;
   }
 });
+Object.defineProperty(exports, "BasicTextarea", {
+  enumerable: true,
+  get: function () {
+    return _react.Textarea;
+  }
+});
 Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function () {
@@ -163,6 +181,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox.default;
   }
 });
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _react.CheckboxGroup;
+  }
+});
 Object.defineProperty(exports, "Circle", {
   enumerable: true,
   get: function () {
@@ -325,6 +349,54 @@ Object.defineProperty(exports, "Loader", {
     return _Loader.default;
   }
 });
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function () {
+    return _Menu.default;
+  }
+});
+Object.defineProperty(exports, "MenuButton", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuButton;
+  }
+});
+Object.defineProperty(exports, "MenuDivider", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuDivider;
+  }
+});
+Object.defineProperty(exports, "MenuGroup", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuGroup;
+  }
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuItem;
+  }
+});
+Object.defineProperty(exports, "MenuItemOption", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuItemOption;
+  }
+});
+Object.defineProperty(exports, "MenuList", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuList;
+  }
+});
+Object.defineProperty(exports, "MenuOptionGroup", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuOptionGroup;
+  }
+});
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function () {
@@ -337,6 +409,12 @@ Object.defineProperty(exports, "PopoverAnchor", {
     return _Popover.PopoverAnchor;
   }
 });
+Object.defineProperty(exports, "PopoverArrow", {
+  enumerable: true,
+  get: function () {
+    return _Popover.PopoverArrow;
+  }
+});
 Object.defineProperty(exports, "PopoverContent", {
   enumerable: true,
   get: function () {
@@ -466,7 +544,7 @@ Object.defineProperty(exports, "Text", {
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function () {
-    return _react.Textarea;
+    return _Textarea.default;
   }
 });
 Object.defineProperty(exports, "ThemeProvider", {
@@ -541,6 +619,12 @@ Object.defineProperty(exports, "usePrefersReducedMotion", {
     return _react.usePrefersReducedMotion;
   }
 });
+Object.defineProperty(exports, "useStyleConfig", {
+  enumerable: true,
+  get: function () {
+    return _react.useStyleConfig;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -652,12 +736,14 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _SelectionCard = require("./SelectionCard");
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
+var _Textarea = _interopRequireDefault(require("./Textarea"));
 var _Popover = require("./Popover");
 var _Radio = require("./Radio");
 var _AutoSuggestSelect = require("./AutoSuggestSelect");
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));
 var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup/ToggleButtonGroup"));
 var _CreatableSelect = require("./CreatableSelect");
+var _Menu = _interopRequireWildcard(require("./Menu"));
 var _react = require("@chakra-ui/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }

package/dist/components/styles.js

@@ -70,6 +70,12 @@ Object.defineProperty(exports, "List", {
     return _styles.default;
   }
 });
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function () {
+    return _Menu.default;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -157,4 +163,5 @@ var _styles10 = _interopRequireDefault(require("./Radio/styles"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
 var _styles11 = _interopRequireDefault(require("./Badge/styles"));
 var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
-var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
+var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
+var _Menu = _interopRequireDefault(require("./Menu/Menu.styles"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "22.0.0-beta.1",
+  "version": "22.0.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -94,13 +94,13 @@
     "webpack-merge": "5.1.4",
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
+    "@spothero/babel-preset-spothero": "5.1.0",
     "@spothero/browserslist-config": "4.0.0",
-    "@spothero/core": "7.0.0",
     "@spothero/eslint-config": "6.1.0",
-    "@spothero/npm-publisher": "7.0.0",
-    "@spothero/icons": "9.0.0-beta.1",
-    "@spothero/babel-preset-spothero": "5.1.0",
+    "@spothero/icons": "9.0.0",
     "@spothero/prettier-config": "4.0.0",
+    "@spothero/core": "7.0.0",
+    "@spothero/npm-publisher": "7.0.0",
     "@spothero/stylelint-config": "6.0.0"
   },
   "dependencies": {
@@ -117,7 +117,7 @@
     "regenerator-runtime": "0.13.7",
     "ssr-window": "1.0.1",
     "transitionEnd": "1.0.2",
-    "@spothero/utils": "15.0.0-beta.1"
+    "@spothero/utils": "15.0.0"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",