@popmenu/ordering-ui 0.67.0 → 0.69.0

package/build/index.es.js

@@ -1,23 +1,23 @@
-import * as React__default from 'react';
-import React__default__default, { forwardRef, createElement } from 'react';
-import { Avatar as Avatar$1, Box, makeStyles as makeStyles$1, Typography as Typography$1, Link as Link$1, Paper as Paper$1 } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import * as React from 'react';
+import React__default, { forwardRef, createElement, useState } from 'react';
 import '@material-ui/lab/Alert';
+import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, Avatar as Avatar$1, useTheme as useTheme$1, FormControl, Select, InputAdornment, MenuItem, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, Radio as Radio$1, Button as Button$2, Menu, TextField } from '@material-ui/core';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
+import { makeStyles as makeStyles$1, useTheme, lighten } from '@material-ui/core/styles';
 import '@material-ui/core/Badge';
 import MuiButton from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import '@material-ui/core/ButtonGroup';
-import '@material-ui/core/Card';
-import '@material-ui/core/CardActionArea';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
 import '@material-ui/core/CardActions';
-import '@material-ui/core/CardContent';
+import CardContent from '@material-ui/core/CardContent';
 import '@material-ui/core/CardHeader';
 import '@material-ui/core/CardMedia';
 import MuiCheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import '@material-ui/core/Chip';
+import MuiChip from '@material-ui/core/Chip';
 import '@material-ui/core/Collapse';
 import '@material-ui/core/Dialog';
 import '@material-ui/core/DialogActions';
@@ -41,59 +41,50 @@ import '@material-ui/core/MenuList';
 import MuiRadio from '@material-ui/core/Radio';
 import '@material-ui/core/TextField';
 import MuiSwitch from '@material-ui/core/Switch';
-import '@material-ui/core/Tab';
-import '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
 import MuiToggleButton from '@material-ui/lab/ToggleButton';
 import MuiToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import MuiTooltip from '@material-ui/core/Tooltip';
+import MuiRadioGroup from '@material-ui/core/RadioGroup';
 
-var useItemtagStyles = makeStyles(function (theme) { return ({
-    root: function (_a) {
-        var _b, _c;
-        var _d = _a.color, color = _d === void 0 ? '' : _d;
-        var _e = color.split('.'), colorGroup = _e[0], colorVariant = _e[1];
-        return {
-            color: ((_b = theme.palette[colorGroup]) === null || _b === void 0 ? void 0 : _b[colorVariant]) || color,
-            borderColor: ((_c = theme.palette[colorGroup]) === null || _c === void 0 ? void 0 : _c[colorVariant]) || color,
-            border: '2px solid',
-            background: 'none',
-        };
-    },
-}); });
-
-var presets = {
-    dairyFree: {
-        abbreviation: 'DF',
-        color: 'green.dark',
-    },
-    glutenFree: {
-        abbreviation: 'GF',
-        color: 'yellow.dark',
-    },
-    shellfishFree: {
-        abbreviation: 'SF',
-        color: 'blue.main',
-    },
-    vegan: {
-        abbreviation: 'V',
-        color: 'green.dark',
-    },
-    vegetarian: {
-        abbreviation: 'VG',
-        color: 'yellow.dark',
-    },
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
 };
-var ItemTag = forwardRef(function (props, ref) {
-    var _a, _b;
-    var _c = props.preset, preset = _c === void 0 ? '' : _c, _d = props.color, color = _d === void 0 ? 'gray.dark' : _d, children = props.children;
-    var classes = useItemtagStyles({ color: ((_a = presets[preset]) === null || _a === void 0 ? void 0 : _a.color) || color });
-    return (React__default__default.createElement(Avatar$1, { ref: ref, alt: preset, classes: { root: classes.root } }, ((_b = presets[preset]) === null || _b === void 0 ? void 0 : _b.abbreviation) || children));
-});
-
-var ItemTagGroup = function (props) {
-    var children = props.children;
-    return (React__default__default.createElement(Box, { display: "flex", gridGap: 6 }, children));
-};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -133,25 +124,139 @@ function __rest(s, e) {
     return t;
 }
 
+var _g$1j;
+
+function _extends$2j() { _extends$2j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2j.apply(this, arguments); }
+
+function SvgCheckCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2j({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1j || (_g$1j = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.667 2.667L8 9.34l-2-2"
+  }))));
+}
+
+var _g$1h$1, _defs$H$1;
+
+function _extends$2g$1() { _extends$2g$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2g$1.apply(this, arguments); }
+
+function SvgXCircle$1(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2g$1({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1h$1 || (_g$1h$1 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#x-circle_svg__clip0_8_6136)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
+  }))), _defs$H$1 || (_defs$H$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "x-circle_svg__clip0_8_6136"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _g$18, _defs$B;
+
+function _extends$24() { _extends$24 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$24.apply(this, arguments); }
+
+function SvgInfo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$24({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$18 || (_g$18 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#info_svg__clip0_8_5377)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
+  }))), _defs$B || (_defs$B = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "info_svg__clip0_8_5377"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
 var _path$I;
 
 function _extends$1D() { _extends$1D = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1D.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__default.createElement("svg", _extends$1D({
+  return /*#__PURE__*/React.createElement("svg", _extends$1D({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$I || (_path$I = /*#__PURE__*/React__default.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
 }
 
-var useIconStyles = makeStyles$1(function (_a) {
+var _g$U, _defs$s;
+
+function _extends$1z() { _extends$1z = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1z.apply(this, arguments); }
+
+function SvgError(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1z({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$U || (_g$U = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#error_svg__clip0_8_5411)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
+  }))), _defs$s || (_defs$s = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "error_svg__clip0_8_5411"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$F;
+
+function _extends$1y() { _extends$1y = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1y.apply(this, arguments); }
+
+function SvgWarning(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1y({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
+    stroke: "currentColor"
+  })));
+}
+
+var useIconStyles = makeStyles(function (_a) {
     var spacing = _a.spacing, palette = _a.palette;
     var getFontSize = function (_a) {
         var size = _a.size;
@@ -187,7 +292,7 @@ var useIconStyles = makeStyles$1(function (_a) {
     };
 });
 
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -243,9 +348,9 @@ var classnames = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames));
+}(classnames$1));
 
-var classNames = classnames.exports;
+var classNames$1 = classnames$1.exports;
 
 var iconStaticClassName = 'pop-icon';
 var Icon = function (props) {
@@ -256,7 +361,7 @@ var Icon = function (props) {
         isValid = false;
     }
     return isValid
-        ? createElement(icon, __assign({ className: classNames([classes.root, iconStaticClassName, className]) }, restProps))
+        ? createElement(icon, __assign({ className: classNames$1([classes.root, iconStaticClassName, className]) }, restProps))
         : null;
 };
 Icon.defaultProps = {
@@ -272,7 +377,7 @@ var LoadingStatus;
     LoadingStatus["PENDING"] = "PENDING";
 })(LoadingStatus || (LoadingStatus = {}));
 var useImgProps = function (avatarProps) {
-    var _a = React__default__default.useState(LoadingStatus.PENDING), loaded = _a[0], setLoaded = _a[1];
+    var _a = React__default.useState(LoadingStatus.PENDING), loaded = _a[0], setLoaded = _a[1];
     var imgProps = __assign(__assign({}, avatarProps.imgProps), { onLoad: function (event) {
             var _a, _b;
             setLoaded(LoadingStatus.LOADED);
@@ -302,7 +407,7 @@ var getAvatarFontSize = function (props) {
     };
     return fontSizes[props.size];
 };
-var useAvatarStyles = makeStyles(function (theme) { return ({
+var useAvatarStyles = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: getAvatarDimensions(theme, props),
         height: getAvatarDimensions(theme, props),
@@ -335,9 +440,9 @@ var Avatar = forwardRef(function (props, ref) {
         Fallback = fallback;
     }
     else {
-        Fallback = React__default__default.createElement(Icon, { icon: SvgUser, className: classes.fallback });
+        Fallback = React__default.createElement(Icon, { icon: SvgUser, className: classes.fallback });
     }
-    return (React__default__default.createElement(MuiAvatar, __assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
+    return (React__default.createElement(MuiAvatar, __assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
 });
 Avatar.defaultProps = {
     size: 'medium',
@@ -346,7 +451,7 @@ Avatar.defaultProps = {
 };
 Avatar.displayName = 'Avatar';
 
-makeStyles(function (theme) { return ({
+makeStyles$1(function (theme) { return ({
     circle: {
         backgroundColor: theme.palette.grey[300],
         borderRadius: '50%',
@@ -367,7 +472,7 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
-var useButtonStyles = makeStyles(function () { return ({
+var useButtonStyles$1 = makeStyles$1(function () { return ({
     root: {
         minWidth: 'unset',
     },
@@ -379,27 +484,27 @@ var useButtonStyles = makeStyles(function () { return ({
     },
 }); });
 
-var Button = forwardRef(function (props, ref) {
+var Button$1 = forwardRef(function (props, ref) {
     props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, muiProps = __rest(props, ["textTransform", "loading", "classes", "className"]);
     props.classes; var styleProps = __rest(props, ["classes"]);
-    var classes = useButtonStyles(styleProps);
+    var classes = useButtonStyles$1(styleProps);
     var typography = useTheme().typography;
     var loadingIndicator = {
-        startIcon: React__default__default.createElement(CircularProgress, { color: "inherit", size: typography.button.fontSize }),
+        startIcon: React__default.createElement(CircularProgress, { color: "inherit", size: typography.button.fontSize }),
         disabled: true,
     };
-    return (React__default__default.createElement(MuiButton, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+    return (React__default.createElement(MuiButton, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
 });
-Button.displayName = 'Button';
+Button$1.displayName = 'Button';
 
 var Checkbox = forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React__default__default.createElement(MuiCheckbox, __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+    var control = React__default.createElement(MuiCheckbox, __assign({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
 Checkbox.displayName = 'Checkbox';
 
-var getBackground = function (theme) { return function (props) {
+var getBackground$1 = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
     var background = theme.palette.grey[100];
     var backgrounds = {
@@ -418,7 +523,7 @@ var getBackground = function (theme) { return function (props) {
     }
     return background;
 }; };
-var getColor = function (theme) { return function (props) {
+var getColor$1 = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
     var textColor;
     if (variant === 'outlined' && severity) {
@@ -458,10 +563,10 @@ var getBorder = function (theme) { return function (props) {
     }
     return borderColor;
 }; };
-makeStyles(function (theme) { return ({
+var useChipStyles = makeStyles$1(function (theme) { return ({
     root: {
-        background: getBackground(theme),
-        color: getColor(theme),
+        background: getBackground$1(theme),
+        color: getColor$1(theme),
         borderColor: getBorder(theme),
         borderRadius: theme.spacing(0.5),
     },
@@ -475,6 +580,21 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
+var IconDictionary = {
+    error: SvgError,
+    info: SvgInfo,
+    success: SvgCheckCircle,
+    warning: SvgWarning,
+};
+var Chip = function (props) {
+    var severity = props.severity, restProps = __rest(props, ["severity"]);
+    var classes = useChipStyles(props);
+    var icon = severity ? React__default.createElement(IconDictionary[severity]) : undefined;
+    var deleteIcon = React__default.createElement(SvgXCircle$1);
+    return React__default.createElement(MuiChip, __assign({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
+};
+Chip.displayName = 'Chip';
+
 var defaultTypographyProps = {
     variant: 'body1',
 };
@@ -505,7 +625,7 @@ var getCustomColor = function (theme, color) {
             return undefined;
     }
 };
-var useTypographyStyles = makeStyles(function (theme) {
+var useTypographyStyles = makeStyles$1(function (theme) {
     var _a;
     return ({
         root: (_a = {},
@@ -550,7 +670,7 @@ var Typography = forwardRef(function (props, ref) {
     props.weight; props.color; var restProps = __rest(props, ["weight", "color"]);
     var classes = useTypographyStyles(__assign({}, props));
     var variantMapping = { subtitle1: 'p' };
-    return React__default__default.createElement(Typography$1, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
+    return React__default.createElement(Typography$1, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
 });
 Typography.displayName = 'Typography';
 Typography.defaultProps = defaultTypographyProps;
@@ -561,7 +681,7 @@ var getFadeStop = function (_a, typographyVariant) {
         ? typography[typographyVariant].lineHeight + "rem"
         : typography[typographyVariant].lineHeight;
 };
-makeStyles$1(function (theme) { return ({
+makeStyles(function (theme) { return ({
     overlay: {
         position: 'absolute',
         top: 0,
@@ -581,7 +701,7 @@ var SemanticColors;
     SemanticColors["SECONDARY_DARK"] = "secondary.dark";
     SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
 })(SemanticColors || (SemanticColors = {}));
-makeStyles$1(function (theme) { return ({
+makeStyles(function (theme) { return ({
     dividerRoot: {
         gap: theme.spacing(2),
     },
@@ -619,14 +739,14 @@ makeStyles$1(function (theme) { return ({
 }); });
 
 var IconButton = forwardRef(function (props, ref) {
-    return React__default__default.createElement(MuiIconButton, __assign({ ref: ref }, props));
+    return React__default.createElement(MuiIconButton, __assign({ ref: ref }, props));
 });
 IconButton.displayName = 'IconButton';
 IconButton.defaultProps = {
     color: 'secondary',
 };
 
-var useLinkStyles = makeStyles(function (theme) { return ({
+var useLinkStyles = makeStyles$1(function (theme) { return ({
     root: function (props) {
         var _a;
         return (__assign(__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
@@ -638,14 +758,14 @@ var useLinkStyles = makeStyles(function (theme) { return ({
 var Link = forwardRef(function (props, ref) {
     var children = props.children, muiProps = __rest(props, ["children"]);
     var classes = useLinkStyles(props);
-    return (React__default__default.createElement(Link$1, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
+    return (React__default.createElement(Link$1, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
 });
 Link.defaultProps = {
     variant: 'body1',
 };
 Link.displayName = 'Link';
 
-var useStyles = makeStyles$1(function (_a) {
+var useStyles = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -660,7 +780,7 @@ var useStyles = makeStyles$1(function (_a) {
 var Paper = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
     var classes = useStyles(props);
-    return React__default__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
+    return React__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
 Paper.defaultProps = {
@@ -669,12 +789,12 @@ Paper.defaultProps = {
 
 var Radio = forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React__default__default.createElement(MuiRadio, __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+    var control = React__default.createElement(MuiRadio, __assign({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
 Radio.displayName = 'Radio';
 
-makeStyles(function () { return ({
+makeStyles$1(function () { return ({
     textfield: {
         background: function (props) { return (props.backgroundTransparency ? '#FFFFFF44' : 'none'); },
         borderTopLeftRadius: 4,
@@ -699,7 +819,7 @@ makeStyles(function () { return ({
     focused: {},
 }); });
 
-var useSwitchStyles = makeStyles(function (theme) { return ({
+var useSwitchStyles = makeStyles$1(function (theme) { return ({
     checked: {
         '& $thumb': {
             background: theme.palette.success.main,
@@ -715,12 +835,12 @@ var useSwitchStyles = makeStyles(function (theme) { return ({
 var Switch = forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var classes = useSwitchStyles(props);
-    var control = React__default__default.createElement(MuiSwitch, __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+    var control = React__default.createElement(MuiSwitch, __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
 Switch.displayName = 'Switch';
 
-var useToggleButtonStyles = makeStyles(function (theme) { return ({
+var useToggleButtonStyles = makeStyles$1(function (theme) { return ({
     root: {
         color: theme.palette.text.primary,
     },
@@ -738,7 +858,7 @@ var useToggleButtonStyles = makeStyles(function (theme) { return ({
 var ToggleButton = forwardRef(function (props, ref) {
     var children = props.children, muiProps = __rest(props, ["children"]);
     var classes = useToggleButtonStyles(props);
-    return (React__default__default.createElement(MuiToggleButton, __assign({ ref: ref, classes: {
+    return (React__default.createElement(MuiToggleButton, __assign({ ref: ref, classes: {
             root: classes.root,
             selected: classes.selected,
         } }, muiProps), children));
@@ -748,7 +868,7 @@ ToggleButton.defaultProps = {
 };
 ToggleButton.displayName = 'ToggleButton';
 
-var useToggleButtonGroupStyles = makeStyles(function (theme) { return ({
+var useToggleButtonGroupStyles = makeStyles$1(function (theme) { return ({
     root: {
         '&&': {
             backgroundColor: theme.palette.grey[300],
@@ -759,17 +879,17 @@ var useToggleButtonGroupStyles = makeStyles(function (theme) { return ({
 var ToggleButtonGroup = forwardRef(function (props, ref) {
     var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = __rest(props, ["children", "color"]);
     var classes = useToggleButtonGroupStyles(props);
-    var childrenWithProps = React__default__default.Children.map(children, function (child) {
-        if (!React__default__default.isValidElement(child)) {
+    var childrenWithProps = React__default.Children.map(children, function (child) {
+        if (!React__default.isValidElement(child)) {
             return null;
         }
-        return React__default__default.cloneElement(child, { color: color });
+        return React__default.cloneElement(child, { color: color });
     });
-    return (React__default__default.createElement(MuiToggleButtonGroup, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
+    return (React__default.createElement(MuiToggleButtonGroup, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
 });
 ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
-var useTooltipStyles = makeStyles(function (_a) {
+var useTooltipStyles = makeStyles$1(function (_a) {
     var typography = _a.typography;
     return ({
         tooltip: {
@@ -780,16 +900,16 @@ var useTooltipStyles = makeStyles(function (_a) {
 
 var Tooltip = forwardRef(function (props, ref) {
     var classes = useTooltipStyles(props);
-    return React__default__default.createElement(MuiTooltip, __assign({ ref: ref, classes: classes }, props));
+    return React__default.createElement(MuiTooltip, __assign({ ref: ref, classes: classes }, props));
 });
 Tooltip.displayName = 'Tooltip';
 
-makeStyles$1(function () { return ({
+makeStyles(function () { return ({
     root: {
         height: 56,
     },
 }); });
-makeStyles$1(function (theme) { return ({
+makeStyles(function (theme) { return ({
     root: {
         height: '100%',
         width: 'min-content',
@@ -812,17 +932,1099 @@ makeStyles$1(function (theme) { return ({
     },
 }); });
 
-var ReactionCounter = function (props) {
-    var count = props.count, icon = props.icon;
-    return (React__default__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 6 },
-        React__default__default.createElement(Icon, { icon: icon, size: "large" }),
-        React__default__default.createElement(Typography, null, count)));
+var getColor = function (theme) { return function (props) {
+    var variant = props.variant;
+    if (variant === 'primary') {
+        return theme.palette.common.white;
+    }
+    else if (variant === 'text') {
+        return theme.palette.info.main;
+    }
+    return theme.palette.common.black;
+}; };
+var getBackground = function (theme) { return function (props) {
+    var variant = props.variant;
+    if (variant === 'primary') {
+        return '#0A202F';
+    }
+    else {
+        return theme.palette.common.white;
+    }
+}; };
+var getFontSize = function () { return function (props) {
+    var variant = props.variant;
+    if (variant === 'primary') {
+        return '1rem';
+    }
+    else {
+        return '0.875rem';
+    }
+}; };
+var buttonTypography = {
+    fontWeight: 400,
+    lineHeight: '1.25rem',
+};
+var useButtonStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        borderRadius: theme.spacing(6),
+        color: getColor(theme),
+        background: getBackground(theme),
+        fontSize: getFontSize(),
+        minWidth: 'unset',
+    },
+    disabled: {
+        '&$root': {
+            background: theme.palette.grey[300],
+        },
+    },
+    contained: {
+        padding: theme.spacing(2),
+        '&:hover': {
+            background: getBackground(theme),
+        },
+    },
+    outlined: {
+        padding: theme.spacing(2),
+    },
+    sizeSmall: {
+        padding: theme.spacing(1, 2),
+    },
+    text: {
+        padding: theme.spacing(1),
+        margin: 'auto',
+    },
+    label: __assign$1({}, buttonTypography),
+}); });
+
+var deriveButtonProps = function (buttonProps) {
+    var variant = buttonProps.variant;
+    var derived = {};
+    switch (variant) {
+        case 'primary':
+            derived.variant = 'contained';
+            break;
+        case 'secondary':
+            derived.variant = 'outlined';
+            break;
+        case 'text':
+            derived.variant = 'text';
+            break;
+        default:
+            derived.variant = variant;
+            break;
+    }
+    return derived;
 };
 
-var ReactionCounterGroup = function (props) {
-    var children = props.children;
-    return (React__default__default.createElement(Box, { display: "flex", gridGap: 16 }, children));
+var Button = forwardRef(function (props, ref) {
+    var children = props.children; props.variant; var classesOverride = props.classes, commonProps = __rest$1(props, ["children", "variant", "classes"]);
+    var classes = useButtonStyles(props);
+    var derivedProps = deriveButtonProps(props);
+    var mergedProps = __assign$1(__assign$1({}, derivedProps), commonProps);
+    return (React__default.createElement(Button$1, __assign$1({ ref: ref, classes: __assign$1(__assign$1({}, classes), classesOverride), disableElevation: true }, mergedProps), children));
+});
+Button.defaultProps = {
+    variant: 'primary',
+};
+Button.displayName = 'Button';
+
+var _path$1b;
+
+function _extends$2E() { _extends$2E = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2E.apply(this, arguments); }
+
+function SvgChevronDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2E({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
+    d: "M4 6l4 4 4-4",
+    stroke: "currentColor"
+  })));
+}
+
+var _path$1a;
+
+function _extends$2D() { _extends$2D = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2D.apply(this, arguments); }
+
+function SvgChevronUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2D({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
+    d: "M12 10L8 6l-4 4",
+    stroke: "currentColor"
+  })));
+}
+
+var _path$$;
+
+function _extends$2k() { _extends$2k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2k.apply(this, arguments); }
+
+function SvgCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2k({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
+    d: "M13.333 4L6 11.333 2.667 8",
+    stroke: "currentColor"
+  })));
+}
+
+var _g$1i, _defs$I;
+
+function _extends$2i() { _extends$2i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2i.apply(this, arguments); }
+
+function SvgClock(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2i({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1i || (_g$1i = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clock_svg__clip0_8_5092)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 4v4l2.667 1.333"
+  }))), _defs$I || (_defs$I = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clock_svg__clip0_8_5092"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _g$1h, _defs$H;
+
+function _extends$2g() { _extends$2g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2g.apply(this, arguments); }
+
+function SvgXCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2g({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1h || (_g$1h = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#x-circle_svg__clip0_8_6136)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
+  }))), _defs$H || (_defs$H = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "x-circle_svg__clip0_8_6136"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$X;
+
+function _extends$28() { _extends$28 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$28.apply(this, arguments); }
+
+function SvgHeart(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$28({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
+    d: "M13.893 3.074a3.667 3.667 0 00-5.186 0L8 3.78l-.707-.706A3.668 3.668 0 002.107 8.26l.706.707L8 14.154l5.187-5.187.706-.707a3.667 3.667 0 000-5.186v0z",
+    stroke: "currentColor"
+  })));
+}
+
+var _g$14, _defs$A;
+
+function _extends$1W() { _extends$1W = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1W.apply(this, arguments); }
+
+function SvgMinusCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1W({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$14 || (_g$14 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#minus-circle_svg__clip0_8_5970)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
+  }))), _defs$A || (_defs$A = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "minus-circle_svg__clip0_8_5970"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$N;
+
+function _extends$1S() { _extends$1S = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1S.apply(this, arguments); }
+
+function SvgPlus(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1S({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
+    d: "M8 3.333v9.334M3.333 8h9.334",
+    stroke: "currentColor"
+  })));
+}
+
+var _g$13, _defs$z;
+
+function _extends$1R() { _extends$1R = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1R.apply(this, arguments); }
+
+function SvgPlusCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1R({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$13 || (_g$13 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#plus-circle_svg__clip0_8_5870)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-9.334v5.334M5.333 8h5.334"
+  }))), _defs$z || (_defs$z = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "plus-circle_svg__clip0_8_5870"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$J;
+
+function _extends$1J() { _extends$1J = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1J.apply(this, arguments); }
+
+function SvgTag(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1J({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+    d: "M13.727 8.94l-4.78 4.78a1.334 1.334 0 01-1.887 0L1.333 8V1.333H8l5.727 5.727a1.333 1.333 0 010 1.88v0zm-9.06-4.273h.007",
+    stroke: "currentColor"
+  })));
+}
+
+var _path$u;
+
+function _extends$1e() { _extends$1e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
+
+function SvgTrash(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1e({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+    d: "M2 4h12M5.333 4V2.667a1.333 1.333 0 011.334-1.333h2.666a1.333 1.333 0 011.334 1.333V4m2 0v9.334a1.333 1.333 0 01-1.334 1.333H4.667a1.333 1.333 0 01-1.334-1.333V4h9.334zm-6 3.333v4m2.666-4v4",
+    stroke: "currentColor"
+  })));
+}
+
+var _path$8, _path2$1;
+
+function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+
+function SvgReviews(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+    d: "M14 7.667a5.587 5.587 0 01-.6 2.533 5.666 5.666 0 01-5.067 3.133 5.588 5.588 0 01-2.533-.6L2 14l1.267-3.8a5.586 5.586 0 01-.6-2.533A5.667 5.667 0 015.8 2.6 5.587 5.587 0 018.333 2h.334A5.654 5.654 0 0114 7.333v.334z",
+    stroke: "currentColor"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M8.375 5.363a.2.2 0 01.358 0l.578 1.17a.2.2 0 00.15.11l1.292.189a.2.2 0 01.11.34l-.934.911a.2.2 0 00-.057.177l.22 1.286a.2.2 0 01-.29.21L8.647 9.15a.2.2 0 00-.186 0l-1.155.608a.2.2 0 01-.29-.211l.22-1.286a.2.2 0 00-.058-.177l-.934-.91a.2.2 0 01.11-.341l1.293-.19a.2.2 0 00.15-.109l.578-1.17z",
+    fill: "currentColor"
+  })));
+}
+
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+var ReactionCounter = function (props) {
+    var count = props.count, icon = props.icon;
+    return (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 6 },
+        React__default.createElement(Icon, { icon: icon, size: "large" }),
+        React__default.createElement(Typography, { variant: "body2" }, count)));
+};
+
+var ReactionCounterGroup = function (props) {
+    var children = props.children;
+    return (React__default.createElement(Box, { display: "flex", gridGap: 16 }, children));
+};
+
+var useDishCardStyles = makeStyles$1(function (theme) { return ({
+    root: function (_a) {
+        var _b = _a.isMobile, isMobile = _b === void 0 ? false : _b;
+        return {
+            background: '#FFF',
+            borderRadius: isMobile ? '0px' : '30px',
+            border: isMobile ? '0px' : '1px solid var(--surfaces-card-stroke, #E0E0E0)',
+            display: 'flex',
+            height: '185px',
+            justifyContent: 'space-between',
+            padding: isMobile ? 0 : theme.spacing(2.5),
+            cursor: 'pointer',
+            color: theme.palette.grey[900],
+        };
+    },
+    description: {
+        color: '#616161',
+        marginTop: theme.spacing(0.25),
+        marginBottom: theme.spacing(1.5),
+        width: '100%',
+    },
+    image: {
+        borderRadius: '16px',
+        objectFit: 'cover',
+        marginLeft: theme.spacing(2),
+        width: '125px',
+        height: '100%',
+    },
+    plusIcon: {
+        height: '100%',
+        padding: theme.spacing(0.25),
+        background: '#0076CB',
+        color: theme.palette.common.white,
+        borderRadius: '30px',
+        marginRight: theme.spacing(1),
+    },
+    truncate: {
+        '-webkit-line-clamp': 2,
+        display: '-webkit-box',
+        '-webkit-box-orient': 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
+    price: {
+        fontSize: '18px',
+    },
+}); });
+
+var ItemTagGroup = function (props) {
+    var children = props.children;
+    return (React__default.createElement(Box, { display: "flex", gridGap: 6, ml: 1 }, children));
+};
+
+var useItemtagStyles = makeStyles$1(function (theme) { return ({
+    root: function (_a) {
+        var _b, _c;
+        var _d = _a.color, color = _d === void 0 ? '' : _d;
+        var _e = color.split('.'), colorGroup = _e[0], colorVariant = _e[1];
+        return {
+            color: ((_b = theme.palette[colorGroup]) === null || _b === void 0 ? void 0 : _b[colorVariant]) || color,
+            borderColor: ((_c = theme.palette[colorGroup]) === null || _c === void 0 ? void 0 : _c[colorVariant]) || color,
+            border: '1.5px solid',
+            background: 'none',
+            height: '20px',
+            width: '20px',
+        };
+    },
+}); });
+
+var ItemTag = forwardRef(function (props, ref) {
+    var _a = props.color, color = _a === void 0 ? 'gray.dark' : _a, alt = props.alt, children = props.children;
+    var classes = useItemtagStyles({ color: color });
+    return (React__default.createElement(Avatar$1, { ref: ref, alt: alt, classes: { root: classes.root } },
+        React__default.createElement(Typography, { variant: "caption" }, children)));
+});
+
+var DishCard = function (props) {
+    var title = props.title, description = props.description, image = props.image, likeCount = props.likeCount, reviewCount = props.reviewCount, itemTags = props.itemTags, price = props.price, onClick = props.onClick;
+    var classes = useDishCardStyles(props);
+    var theme = useTheme$1();
+    var validImage = (image === null || image === void 0 ? void 0 : image.src) && (image === null || image === void 0 ? void 0 : image.alt);
+    var getTruncatedSizePx = function (typography) {
+        var lineHeightRem = parseFloat(theme.typography[typography].lineHeight);
+        var collapsedSizeRem = 2 * lineHeightRem;
+        var documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        return collapsedSizeRem * documentFontSize;
+    };
+    return (React__default.createElement(Box, { className: classes.root, onClick: onClick },
+        React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "space-between", width: "100%", marginRight: 1 },
+            React__default.createElement(Box, null,
+                React__default.createElement(Box, { maxHeight: getTruncatedSizePx('h6') + 'px' },
+                    React__default.createElement(Typography, { variant: "h6", className: classes.truncate }, title)),
+                React__default.createElement(Box, { maxHeight: getTruncatedSizePx('body2') + 'px' },
+                    React__default.createElement(Typography, { variant: "body2", className: classNames([classes.description, classes.truncate]) }, description)),
+                React__default.createElement(ReactionCounterGroup, null,
+                    React__default.createElement(ReactionCounter, { icon: SvgHeart, count: likeCount }),
+                    React__default.createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount }))),
+            React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
+                React__default.createElement(Box, { display: "flex", alignItems: "center", mr: 2 },
+                    React__default.createElement(Box, { display: "flex", className: classes.plusIcon },
+                        React__default.createElement(Icon, { icon: SvgPlus, size: "medium" })),
+                    React__default.createElement(Typography, { className: classes.price }, price)),
+                React__default.createElement(ItemTagGroup, null, itemTags.map(function (itemTag, i) { return (React__default.createElement(ItemTag, { key: i, alt: itemTag.abbr, color: itemTag.color }, itemTag.abbr)); })))),
+        validImage && React__default.createElement("img", { src: image.src, alt: image.alt, className: classes.image })));
+};
+
+var useDishCheckoutCardStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        color: theme.palette.grey[900],
+        padding: theme.spacing(2, 0),
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: theme.spacing(44.5),
+        gridGap: theme.spacing(2),
+        border: '1px',
+    },
+    deleteIcon: {
+        height: theme.spacing(2.5),
+        color: theme.palette.info.main,
+    },
+    price: {
+        fontSize: '18px',
+    },
+    select: {
+        paddingLeft: 'unset',
+        borderRadius: '25px',
+        '& fieldset': {
+            borderColor: theme.palette.grey[900],
+        },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.grey[900],
+            borderWidth: '1px',
+        },
+        '& .MuiSelect-root': {
+            padding: theme.spacing(1, 1.5, 1, 4.5),
+            zIndex: 10,
+            textAlign: 'right',
+        },
+        '& .MuiInputAdornment-positionStart': {
+            position: 'absolute',
+            left: theme.spacing(1.5),
+        },
+        '& .MuiSelect-iconOutlined': {
+            display: 'none',
+        },
+    },
+    selectPaper: {
+        maxHeight: theme.spacing(37),
+    },
+}); });
+
+var DishCheckoutCard = function (props) {
+    var id = props.id, name = props.name, quantity = props.quantity, modifiers = props.modifiers, onDelete = props.onDelete, onEdit = props.onEdit, onChange = props.onChange, price = props.price;
+    var classes = useDishCheckoutCardStyles(props);
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
+            React__default.createElement(Box, null,
+                React__default.createElement(Typography, { variant: "h6" }, name),
+                modifiers &&
+                    modifiers.map(function (modifier, i) { return (React__default.createElement(Typography, { key: i, variant: "body2" },
+                        modifier[0],
+                        ": ",
+                        modifier[1])); })),
+            React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%" },
+                React__default.createElement(Button, { variant: "text", onClick: onEdit }, "Edit"),
+                React__default.createElement(IconButton, { onClick: onDelete },
+                    React__default.createElement(Icon, { icon: SvgTrash, className: classes.deleteIcon })))),
+        React__default.createElement(Box, { display: "flex", gridGap: 16, alignItems: "center" },
+            React__default.createElement(FormControl, { variant: "outlined", hiddenLabel: true },
+                React__default.createElement(Select, { open: open, value: quantity, labelId: "select-label-" + id, onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: function (event) { return onChange(id, event.target.value); }, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
+                        React__default.createElement(Icon, { icon: open ? SvgChevronUp : SvgChevronDown, size: "large" })), inputProps: { shrink: false }, MenuProps: {
+                        disablePortal: true,
+                        anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                        },
+                        transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'left',
+                        },
+                        getContentAnchorEl: null,
+                        classes: { paper: classes.selectPaper },
+                    }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React__default.createElement(MenuItem, { key: index + 1, value: index + 1 }, index + 1)); }))),
+            React__default.createElement(Typography, { className: classes.price }, price))));
+};
+
+var DishDetailsReview = forwardRef(function (props) {
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, timeSinceCreated = props.timeSinceCreated;
+    return (React__default.createElement(Box, { display: "flex" },
+        React__default.createElement(Box, { mr: 1 },
+            React__default.createElement(Avatar, { size: "small", src: userAvatarUrl })),
+        React__default.createElement(Box, { maxWidth: "324px" },
+            React__default.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 1 },
+                React__default.createElement(Typography, { color: "grey.600" }, userName),
+                React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1" }, timeSinceCreated)),
+            React__default.createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
+});
+DishDetailsReview.displayName = 'DishDetailsReview';
+
+var useDishModifierCardStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        borderRadius: '8px',
+        border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(2.5),
+        color: theme.palette.grey[900] + " !important",
+    },
+    error: {
+        color: theme.palette.error.main,
+    },
+    name: {
+        fontSize: '18px',
+    },
+}); });
+var useRadioModifierFormStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        '& .MuiFormControlLabel-label': {
+            margin: theme.spacing(0.5, 0),
+            '& div p:nth-child(2)': {
+                color: theme.palette.grey[700],
+            },
+        },
+    },
+    radio: {
+        fontSize: theme.spacing(2),
+        padding: 'unset',
+        margin: theme.spacing(0, 1),
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+}); });
+var useCheckboxModifierFormStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        '& .MuiFormControlLabel-label': {
+            margin: theme.spacing(0.5, 0),
+        },
+        '&:not(.Mui-disabled) div p:nth-child(2)': {
+            color: theme.palette.grey[700],
+        },
+    },
+    radio: {
+        color: '#616161',
+        fontSize: theme.spacing(2),
+        padding: 'unset',
+        margin: theme.spacing(0, 1),
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+}); });
+
+var useStatusTagStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        borderRadius: '5px',
+        display: 'flex',
+        height: '16px',
+        padding: theme.spacing(1),
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+    },
+    filled: {
+        backgroundColor: theme.palette.grey[100],
+        color: theme.palette.grey[900],
+    },
+    outlined: {
+        border: "1px solid var(--surfaces-card-stroke, " + theme.palette.grey[900] + ")",
+    },
+    default: {
+        color: theme.palette.grey[900],
+    },
+    warning: {
+        borderColor: theme.palette.warning.dark,
+        color: theme.palette.warning.dark,
+    },
+    error: {
+        borderColor: theme.palette.error.main,
+        color: theme.palette.error.main,
+    },
+}); });
+
+var StatusTag = function (props) {
+    var variant = props.variant, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a;
+    var classes = useStatusTagStyles(props);
+    return (React__default.createElement(Box, { className: classNames([classes.root, classes[color], classes[variant]]) },
+        React__default.createElement(Typography, { variant: "caption" }, label)));
+};
+StatusTag.defaultProps = {
+    color: 'default',
+    error: false,
+};
+StatusTag.displayName = 'StatusTag';
+
+var Label = function (props) {
+    var name = props.name, price = props.price;
+    return (React.createElement(Box, { display: "flex", flexDirection: "column" },
+        React.createElement(Typography$1, null, name),
+        price && React.createElement(Typography$1, null,
+            "+ ",
+            price)));
+};
+var CheckboxGroup = function (props) {
+    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
+    var classes = useCheckboxModifierFormStyles();
+    var handleChange = function (event) {
+        onChange([{ id: parseInt(event.target.value), quantity: 1 }], event.target.checked);
+    };
+    return (React.createElement(Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
+        var targetValue = value === null || value === void 0 ? void 0 : value.find(function (v) { return v.id == modifier.id; });
+        return (React.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React.createElement(Checkbox$1, { className: classes.radio, disabled: !targetValue && disableNewSelections }), label: React.createElement(Label, { name: modifier.name, price: modifier.price }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
+    })));
+};
+var RadioGroup = function (props) {
+    var value = props.value, modifiers = props.modifiers, onChange = props.onChange;
+    var classes = useRadioModifierFormStyles();
+    var handleChange = function (event) {
+        onChange([{ id: parseInt(event.target.value), quantity: 1 }]);
+    };
+    return (React.createElement(MuiRadioGroup, { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React.createElement(FormControlLabel$1, { key: index, value: modifier.id, control: React.createElement(Radio$1, { className: classes.radio }), label: React.createElement(Label, { name: modifier.name, price: modifier.price }), className: classes.root })); })));
+};
+
+var ModifierOptionsControl = function (props) {
+    var type = props.type, modifiers = props.modifiers, value = props.value, onChange = props.onChange, disableNewSelections = props.disableNewSelections;
+    switch (type) {
+        case 'singleSelect':
+            return React__default.createElement(RadioGroup, { modifiers: modifiers, value: value, onChange: onChange });
+        case 'multipleSelect':
+            return (React__default.createElement(CheckboxGroup, { modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections }));
+        default:
+            return null;
+    }
+};
+
+var DishModifierCard = function (props) {
+    var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
+    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText, helperText = messages.helperText;
+    var classes = useDishModifierCardStyles();
+    var color = 'default';
+    switch (true) {
+        case error:
+            color = 'error';
+        case isOutOfStock:
+            color = 'warning';
+    }
+    var label = optionalText;
+    switch (true) {
+        case isRequired:
+            label = requiredText;
+        case isOutOfStock:
+            label = outOfStockText;
+    }
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content" },
+            React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 16 },
+                React__default.createElement(Typography, { className: classes.name }, name),
+                React__default.createElement(StatusTag, { variant: isRequired || isOutOfStock ? 'outlined' : 'filled', label: label, color: color })),
+            React__default.createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText)),
+        React__default.createElement(Box, null,
+            React__default.createElement(FormControl, null,
+                React__default.createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections })))));
+};
+DishModifierCard.displayName = 'DishModifierCard';
+
+var useLocationCardStyles = makeStyles$1(function (theme) {
+    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, spacing = theme.spacing;
+    var selectedBackgroundColor = lighten(theme.palette.info.light, 0.9);
+    var backgroundColor = theme.palette.surface.light;
+    return {
+        root: {
+            background: '#FFF',
+            border: function (_a) {
+                var selected = _a.selected;
+                return selected ? "1px solid " + info.light : '1px solid var(--surfaces-card-stroke, #E0E0E0)';
+            },
+            display: 'flex',
+            cursor: 'pointer',
+            borderRadius: '10px',
+            color: grey[900],
+            backgroundColor: function (_a) {
+                var selected = _a.selected;
+                return (selected ? selectedBackgroundColor : backgroundColor);
+            },
+        },
+        address: {
+            color: grey[700],
+        },
+        availability: {
+            color: secondary.light,
+            display: 'flex',
+            gridGap: spacing(0.5),
+        },
+        checkIcon: {
+            color: info.main,
+        },
+        content: {
+            padding: spacing(3),
+            display: 'flex',
+            flexDirection: 'column',
+            gridGap: spacing(2),
+        },
+        distance: {
+            fontSize: '0.75rem',
+            fontWeight: 600,
+        },
+        locationInfo: {
+            display: 'flex',
+            flexDirection: 'column',
+            gridGap: spacing(0.75),
+        },
+        name: {
+            fontSize: '1.125rem',
+            fontWeight: 500,
+        },
+        focusHighlight: {
+            backgroundColor: 'inherit',
+        },
+    };
+});
+
+var LocationCard = function (props) {
+    var name = props.name, address = props.address, distance = props.distance, availability = props.availability, onClick = props.onClick, selected = props.selected, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "availability", "onClick", "selected", "value", "labelId", "CardActionAreaProps"]);
+    var classes = useLocationCardStyles(props);
+    var handleClick = function () {
+        onClick(value);
+    };
+    return (React__default.createElement(Card, __assign$1({ className: classes.root }, muiProps),
+        React__default.createElement(CardActionArea, __assign$1({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
+            React__default.createElement(CardContent, { className: classes.content },
+                React__default.createElement(Box, { className: classes.locationInfo },
+                    React__default.createElement(Box, { display: "flex", justifyContent: "space-between" },
+                        React__default.createElement(Typography, { className: classes.name }, name),
+                        selected && React__default.createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
+                    React__default.createElement(Typography, { className: classes.address, variant: "body2" }, address),
+                    React__default.createElement(Typography, { className: classes.distance }, distance)),
+                React__default.createElement(Box, { className: classes.availability },
+                    React__default.createElement(Icon, { icon: SvgClock, size: "large" }),
+                    React__default.createElement(Typography, { variant: "body2" }, availability))))));
+};
+
+var _g, _defs;
+
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+
+function SvgRestaurantMenuIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    width: 20,
+    height: 21,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#restaurant-menu-icon_svg__clip0_3133_12817)",
+    stroke: "#2E3042",
+    strokeWidth: 1.667,
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.167 1.623l-10 3.333h10V1.623z",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.167 4.957h11.667v14.167H4.167z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.667 10.79h6.667m-6.667 2.916h1.25m2.5 0h2.917",
+    strokeLinecap: "round"
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "restaurant-menu-icon_svg__clip0_3133_12817"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    transform: "translate(0 .79)",
+    d: "M0 0h20v20H0z"
+  })))));
+}
+
+var useMenuDropdownStyles = makeStyles$1(function (theme) { return ({
+    select: {
+        '& .MuiSelect-root': {
+            color: '#212121',
+            padding: theme.spacing(1, 0.5, 1, 0.5),
+            zIndex: 10,
+        },
+    },
+}); });
+
+var MenuDropdown = function (props) {
+    var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
+    var classes = useMenuDropdownStyles(props);
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (React__default.createElement(FormControl, { hiddenLabel: true },
+        React__default.createElement(Select, { open: open, value: selectedOptionId, labelId: "menu-dropdown-select", onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: function (event) { return onSelect(event.target.value); }, fullWidth: true, startAdornment: React__default.createElement(InputAdornment, { position: "start" },
+                React__default.createElement(Icon, { icon: SvgRestaurantMenuIcon, size: "large" })), IconComponent: function () { return (React__default.createElement(InputAdornment, { position: "end" },
+                React__default.createElement(Icon, { color: "#0076CB", icon: open ? SvgChevronUp : SvgChevronDown, size: "large" }))); }, MenuProps: {
+                disablePortal: true,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                },
+                getContentAnchorEl: null,
+            }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default.createElement(MenuItem, { key: index, value: option.id }, option.name)); }))));
+};
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgLeafIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 16,
+    height: 18,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M6.857 6.823c.065-.081-.18.115-.262.196A13.587 13.587 0 004.716 8.98c-.604.768-1.143 1.683-1.585 2.614-.44.931-.718 1.928-.898 2.86-.082.473-.13.914-.18 1.355-.016.36-.033.752-.033 1.079a.164.164 0 01-.163.163H.191c-.098 0-.164-.082-.164-.18.05-.424.147-.915.229-1.34.114-.473.245-.98.408-1.486.213-.621.474-1.258.768-1.863.033-.065.017-.13-.032-.18A5.05 5.05 0 01.109 7.477c.033-.163.082-.327.13-.49C1.4 2.804 5.632.207 9.913 1.137c2.254.475 4.1 1.863 5.244 3.677.164.261.31.523.441.8.147.294.278.605.393.932.048.13-.082.261-.213.196a4.846 4.846 0 00-.898-.31c-2.206-.49-4.412.93-4.886 3.169-.555 2.647-3.12 4.362-5.783 3.921-.13-.016-.213-.13-.213-.261-.016-.768.196-3.35 2.86-6.438z",
+    fill: "#00663E"
+  })));
+}
+
+var MenuFilter = function (props) {
+    var filterOptions = props.filterOptions, onFilter = props.onFilter, activeFilters = props.activeFilters;
+    var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var open = Boolean(anchorEl);
+    var hasActiveFilters = activeFilters.length > 0;
+    var allFiltersActive = filterOptions.length === 0;
+    var handleChange = function (event) {
+        onFilter({ target: { value: event.currentTarget.value } });
+        setAnchorEl(null);
+    };
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var handleChipDelete = function (filterId) {
+        onFilter({ target: { value: filterId } });
+        setAnchorEl(null);
+    };
+    return (React__default.createElement(Box, { display: "flex" },
+        React__default.createElement(Button$2, { id: "menu-filter-button", "aria-controls": open ? 'filter-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, size: "small" },
+            React__default.createElement(Box, { display: "flex", alignItems: "center", padding: 1 },
+                React__default.createElement(Icon, { icon: SvgLeafIcon }),
+                React__default.createElement(Box, { marginLeft: 1 },
+                    React__default.createElement(Typography, { color: "info.light" }, "Add Filter")))),
+        hasActiveFilters && (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 4, marginLeft: 1 }, activeFilters.map(function (filter, index) { return (React__default.createElement(Chip, { key: index, onClick: function () { return handleChipDelete(filter.id); }, label: React__default.createElement(Box, { display: "flex", alignItems: "center" },
+                React__default.createElement(Box, { marginLeft: -0.75, marginRight: 0.75 },
+                    React__default.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr)),
+                React__default.createElement(Typography, null, filter.name),
+                React__default.createElement(Box, { display: "flex", marginLeft: 0.75, marginRight: -0.75 },
+                    React__default.createElement(Icon, { icon: SvgXCircle, size: "large", color: "#9E9E9E" }))) })); }))),
+        React__default.createElement(Menu, { id: "menu-filter-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
+                'aria-labelledby': 'menu-filter-button',
+            } },
+            !allFiltersActive &&
+                filterOptions.map(function (option, index) {
+                    return (React__default.createElement(MenuItem, { key: index, value: option.id, onClick: handleChange },
+                        React__default.createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
+                        React__default.createElement(Box, { ml: 1 }, option.name)));
+                }),
+            allFiltersActive && (React__default.createElement(MenuItem, { onClick: handleClose },
+                React__default.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center" },
+                    React__default.createElement(Icon, { icon: SvgTag, color: "#9E9E9E", size: "large" }),
+                    React__default.createElement(Typography, { variant: "body1", color: "grey.500" }, "All filters have been added")))))));
+};
+
+var useQuantityPickerStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        height: theme.spacing(7),
+    },
+}); });
+var useQuantityInputStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(12.5),
+        background: theme.palette.grey[100],
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        fontWeight: 600,
+        minWidth: theme.spacing(2.75),
+        padding: 0,
+        textAlign: 'center',
+        position: 'relative',
+        left: 1,
+    },
+    adornedStart: {
+        padding: theme.spacing(0.25),
+    },
+    adornedEnd: {
+        padding: theme.spacing(0.5),
+    },
+}); });
+
+var QuantityPicker = function (props) {
+    var value = props.value, onChange = props.onChange, disabled = props.disabled;
+    var fieldClasses = useQuantityPickerStyles();
+    var inputClasses = useQuantityInputStyles();
+    var onIncrement = function () {
+        onChange({ target: { value: value + 1 } }, 'increment');
+    };
+    var onDecrement = function () {
+        onChange({ target: { value: value - 1 } }, 'decrement');
+    };
+    var handleChange = function (event) {
+        onChange({ target: { value: parseInt(event.target.value) } }, 'change');
+    };
+    return (React__default.createElement(TextField, { classes: __assign$1({}, fieldClasses), variant: "filled", type: "number", defaultValue: value, value: value, disabled: disabled, onChange: handleChange, InputProps: {
+            classes: __assign$1({}, inputClasses),
+            disableUnderline: true,
+            endAdornment: (React__default.createElement(IconButton, { color: "default", tabIndex: -1, onClick: onIncrement, disabled: disabled },
+                React__default.createElement(Icon, { icon: SvgPlusCircle }))),
+            startAdornment: (React__default.createElement(IconButton, { color: "default", tabIndex: -1, onClick: onDecrement, disabled: disabled },
+                React__default.createElement(Icon, { icon: SvgMinusCircle }))),
+        } }));
+};
+
+var useSelectableChipStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        border: '2px solid',
+        borderColor: theme.palette.grey[100],
+        borderRadius: '50px',
+        backgroundColor: theme.palette.grey[100],
+        color: theme.palette.grey[900],
+        padding: theme.spacing(1, 2),
+        fontSize: '0.875rem',
+        minWidth: 'unset',
+        minHeight: 'unset',
+        opacity: 'unset',
+        '&::-webkit-scrollbar': {
+            display: 'none',
+        },
+        '&.Mui-selected': {
+            backgroundColor: theme.palette.grey[100],
+            borderColor: '#0A202F',
+            color: theme.palette.grey[900],
+            '&:hover': {
+                background: theme.palette.grey[100],
+            },
+        },
+    },
+}); });
+
+var SelectableChip = function (props) {
+    var classes = useSelectableChipStyles(props);
+    return (React__default.createElement(Tab, __assign$1({ classes: {
+            root: classes.root,
+            selected: classes.selected,
+        } }, props)));
+};
+
+var useSelectableChipGroupStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        display: 'flex',
+        gridGap: theme.spacing(1.5),
+        '& div.MuiTabs-scroller': {
+            '& .MuiTabs-flexContainer': {
+                gridGap: theme.spacing(1.5),
+            },
+        },
+    },
+}); });
+
+var SelectableChipGroup = function (props) {
+    var children = props.children, muiProps = __rest$1(props, ["children"]);
+    var classes = useSelectableChipGroupStyles(props);
+    return (React__default.createElement(Tabs, __assign$1({ TabIndicatorProps: {
+            hidden: true,
+        }, variant: "scrollable", scrollButtons: "off", classes: { root: classes.root } }, muiProps), children));
 };
 
-export { ItemTag, ItemTagGroup, ReactionCounter, ReactionCounterGroup };
+export { Button, DishCard, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuDropdown, MenuFilter, QuantityPicker, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, StatusTag };
 //# sourceMappingURL=index.es.js.map