@popmenu/ordering-ui 0.126.0 → 0.126.1

package/build/index.js

@@ -1,60 +1,15 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@material-ui/core');
+var tslib = require('tslib');
 var React = require('react');
 var styles = require('@material-ui/core/styles');
-require('@material-ui/lab/Alert');
-require('@material-ui/core/AppBar');
-var MuiAvatar = require('@material-ui/core/Avatar');
-require('@material-ui/core/Badge');
-require('@material-ui/core/Button');
-require('@material-ui/core/CircularProgress');
-require('@material-ui/core/ButtonGroup');
-require('@material-ui/core/Card');
-require('@material-ui/core/CardActionArea');
-require('@material-ui/core/CardActions');
-require('@material-ui/core/CardContent');
-require('@material-ui/core/CardHeader');
-require('@material-ui/core/CardMedia');
-var MuiCheckbox = require('@material-ui/core/Checkbox');
-var FormControlLabel = require('@material-ui/core/FormControlLabel');
-require('@material-ui/core/Chip');
-require('@material-ui/core/Collapse');
-require('@material-ui/core/Dialog');
-require('@material-ui/core/DialogActions');
-require('@material-ui/core/DialogContent');
-require('@material-ui/core/DialogTitle');
-require('@material-ui/core/Drawer');
-require('@material-ui/core/FormControl');
-require('@material-ui/core/Grid');
-var MuiIconButton = require('@material-ui/core/IconButton');
-require('@material-ui/core/InputAdornment');
-require('@material-ui/core/LinearProgress');
-require('@material-ui/core/List');
-require('@material-ui/core/ListItem');
-require('@material-ui/core/ListItemAvatar');
-require('@material-ui/core/ListItemIcon');
-require('@material-ui/core/ListItemSecondaryAction');
-require('@material-ui/core/ListItemText');
-require('@material-ui/core/Menu');
-require('@material-ui/core/MenuItem');
-require('@material-ui/core/MenuList');
-var MuiRadio = require('@material-ui/core/Radio');
-require('@material-ui/core/TextField');
-var MuiSwitch = require('@material-ui/core/Switch');
-var Tab = require('@material-ui/core/Tab');
-require('@material-ui/core/Tabs');
-var MuiToggleButton = require('@material-ui/lab/ToggleButton');
-var MuiToggleButtonGroup = require('@material-ui/lab/ToggleButtonGroup');
-var MuiTooltip = require('@material-ui/core/Tooltip');
+var webIcons = require('@popmenu/web-icons');
+var commonUi = require('@popmenu/common-ui');
 var lab = require('@material-ui/lab');
+var Tab = require('@material-ui/core/Tab');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -62,1416 +17,236 @@ function _interopNamespace(e) {
                 var d = Object.getOwnPropertyDescriptor(e, k);
                 Object.defineProperty(n, k, d.get ? d : {
                     enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
+                    get: function () { return e[k]; }
                 });
             }
         });
     }
-    n['default'] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
-var MuiCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(MuiCheckbox);
-var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
-var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
-var MuiRadio__default = /*#__PURE__*/_interopDefaultLegacy(MuiRadio);
-var MuiSwitch__default = /*#__PURE__*/_interopDefaultLegacy(MuiSwitch);
-var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab);
-var MuiToggleButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButton);
-var MuiToggleButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButtonGroup);
-var MuiTooltip__default = /*#__PURE__*/_interopDefaultLegacy(MuiTooltip);
-
-/*! *****************************************************************************
-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);
-};
-
-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;
-}
-
-var Button = React.forwardRef(function (props, ref) {
-    var _a = props.variation, variation = _a === void 0 ? 'primary' : _a, muiProps = __rest$1(props, ["variation"]);
-    var variationProps = {};
-    switch (variation) {
-        case 'primary':
-            variationProps.variant = 'contained';
-            variationProps.color = 'primary';
-            break;
-        case 'secondary':
-            variationProps.variant = 'outlined';
-            variationProps.color = 'primary';
-            break;
-    }
-    return React__default['default'].createElement(core.Button, __assign$1({}, variationProps, muiProps, { ref: ref }));
-});
-Button.displayName = 'Button';
-
-var useMenuItemStyles = styles.makeStyles(function (theme) {
-    var _a, _b;
-    return ({
-        cardActionArea: (_a = {
-                display: 'flex',
-                gridGap: 16,
-                height: '100%'
-            },
-            _a[theme.breakpoints.up('lg')] = {
-                border: '1px solid #E0E0E0',
-                borderRadius: theme.spacing(2),
-                padding: theme.spacing(2),
-            },
-            _a),
-        card: (_b = {},
-            _b[theme.breakpoints.down('md')] = {
-                '&:after': {
-                    content: '""',
-                    position: 'absolute',
-                    backgroundColor: '#E0E0E0',
-                    width: '100%',
-                    height: 1,
-                    bottom: -16,
-                    left: 0,
-                },
-            },
-            _b.height = 185,
-            _b.position = 'relative',
-            _b.overflow = 'visible',
-            _b),
-        cardTitle: {
-            flexGrow: 1,
-            fontWeight: 500,
-            fontSize: 18,
-            lineHeight: '27px',
-            color: theme.palette.grey[900],
-            '-webkit-line-clamp': 2,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-        },
-        cardDescription: {
-            fontWeight: 400,
-            fontSize: 14,
-            lineHeight: '20px',
-            margin: theme.spacing(0.5, 0, 1, 0),
-            color: theme.palette.grey[800],
-            '-webkit-line-clamp': 2,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-        },
-        outOfStockTag: {
-            minWidth: '90px',
-            marginLeft: theme.spacing(1),
-            display: 'inline-block',
-            verticalAlign: 'bottom',
-        },
-    });
-});
-
-var useStyles$6 = core.makeStyles(function () { return ({
-    img: {
-        objectFit: 'cover',
-        width: '100%',
-        height: '100%',
-    },
-}); });
-var MenuItemImg = function (props) {
-    var _a = props.image, image = _a === void 0 ? {} : _a;
-    var src = image.src;
-    var classes = useStyles$6();
-    if (!src) {
-        return null;
-    }
-    return (React__default['default'].createElement(core.Box, { width: 125, height: "100%", borderRadius: 16, overflow: "hidden", flexShrink: 0 }, React__default['default'].createElement("img", { src: src, alt: "", className: classes.img })));
-};
-
-var MenuItemInfo = function (props) {
-    return (React__default['default'].createElement(core.Box, { display: "flex", flexGrow: 1, flexDirection: "column", height: "100%" }, props.children));
-};
-
-var _path$2p;
-
-function _extends$5q() { _extends$5q = 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$5q.apply(this, arguments); }
-
-function SvgChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5q({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$2p || (_path$2p = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M4 6l4 4 4-4",
-    stroke: "currentColor"
-  })));
-}
-
-var _path$2o;
-
-function _extends$5p() { _extends$5p = 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$5p.apply(this, arguments); }
-
-function SvgChevronUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5p({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$2o || (_path$2o = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 10L8 6l-4 4",
-    stroke: "currentColor"
-  })));
-}
-
-var _path$2m;
-
-function _extends$5n() { _extends$5n = 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$5n.apply(this, arguments); }
-
-function SvgChevronRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5n({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$2m || (_path$2m = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M6 12l4-4-4-4",
-    stroke: "currentColor"
-  })));
-}
-
-var _path$27;
-
-function _extends$4L() { _extends$4L = 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$4L.apply(this, arguments); }
-
-function SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4L({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$27 || (_path$27 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M13.333 4L6 11.333 2.667 8",
-    stroke: "currentColor"
-  })));
-}
-
-var _g$2A, _defs$1E;
-
-function _extends$4I() { _extends$4I = 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$4I.apply(this, arguments); }
-
-function SvgClock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4I({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2A || (_g$2A = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#clock_svg__clip0_8_5092)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 4v4l2.667 1.333"
-  }))), _defs$1E || (_defs$1E = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "clock_svg__clip0_8_5092"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$26;
-
-function _extends$4H() { _extends$4H = 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$4H.apply(this, arguments); }
-
-function SvgX(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4H({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$26 || (_path$26 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 4l-8 8m0-8l8 8",
-    stroke: "currentColor"
-  })));
-}
-
-var _g$2z, _defs$1D;
-
-function _extends$4G() { _extends$4G = 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$4G.apply(this, arguments); }
-
-function SvgXCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4G({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2z || (_g$2z = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#x-circle_svg__clip0_8_6136)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.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$1D || (_defs$1D = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "x-circle_svg__clip0_8_6136"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$1$;
-
-function _extends$4q() { _extends$4q = 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$4q.apply(this, arguments); }
-
-function SvgHeart(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4q({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1$ || (_path$1$ = /*#__PURE__*/React__namespace.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$2m, _defs$1t;
-
-function _extends$4m() { _extends$4m = 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$4m.apply(this, arguments); }
-
-function SvgInfo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4m({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2m || (_g$2m = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#info_svg__clip0_8_5377)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.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$1t || (_defs$1t = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "info_svg__clip0_8_5377"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _g$2l;
-
-function _extends$4l() { _extends$4l = 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$4l.apply(this, arguments); }
-
-function SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4l({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2l || (_g$2l = /*#__PURE__*/React__namespace.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12.667 7.333H3.333C2.597 7.333 2 7.93 2 8.668v4.667c0 .736.597 1.333 1.333 1.333h9.334c.736 0 1.333-.597 1.333-1.333V8.667c0-.737-.597-1.333-1.333-1.333z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M4.667 7.333V4.668a3.333 3.333 0 116.666 0v2.667"
-  }))));
-}
-
-var _g$2h, _defs$1r;
-
-function _extends$47() { _extends$47 = 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$47.apply(this, arguments); }
-
-function SvgMinusCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$47({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2h || (_g$2h = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#minus-circle_svg__clip0_8_5970)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
-  }))), _defs$1r || (_defs$1r = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "minus-circle_svg__clip0_8_5970"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$1M;
-
-function _extends$40() { _extends$40 = 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$40.apply(this, arguments); }
-
-function SvgPlus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$40({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1M || (_path$1M = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 3.333v9.334M3.333 8h9.334",
-    stroke: "currentColor"
-  })));
-}
-
-var _g$2e, _defs$1o;
-
-function _extends$3$() { _extends$3$ = 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$3$.apply(this, arguments); }
-
-function SvgPlusCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2e || (_g$2e = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#plus-circle_svg__clip0_8_5870)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.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$1o || (_defs$1o = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "plus-circle_svg__clip0_8_5870"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$1u;
-
-function _extends$3v() { _extends$3v = 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$3v.apply(this, arguments); }
-
-function SvgWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3v({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1u || (_path$1u = /*#__PURE__*/React__namespace.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 _path$18;
-
-function _extends$2V() { _extends$2V = 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$2V.apply(this, arguments); }
-
-function SvgTrash(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2V({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$18 || (_path$18 = /*#__PURE__*/React__namespace.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 _g$12;
-
-function _extends$1H() { _extends$1H = 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$1H.apply(this, arguments); }
-
-function SvgRestaurantMenu(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1H({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$12 || (_g$12 = /*#__PURE__*/React__namespace.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M11.334.667l-8 2.666h8V.667zM3.333 3.333h9.333v11.333H3.333zM5.333 8h5.334m-5.334 2.333h1m2 0h2.334"
-  }))));
-}
-
-var _path$x;
-
-function _extends$1q() { _extends$1q = 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$1q.apply(this, arguments); }
-
-function SvgDollarSign(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1q({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 .667v14.666m3.333-12h-5a2.333 2.333 0 100 4.667h3.334a2.333 2.333 0 010 4.667H4",
-    stroke: "currentColor"
-  })));
-}
-
-var _path$h, _path2$3;
-
-function _extends$D() { _extends$D = 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$D.apply(this, arguments); }
-
-function SvgReviews(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.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$3 || (_path2$3 = /*#__PURE__*/React__namespace.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"
-  })));
-}
-
-/*! *****************************************************************************
-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 = function() {
-    __assign = 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.apply(this, arguments);
-};
-
-function __rest(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;
-}
-
-var _path$1D;
-
-function _extends$3H() { _extends$3H = 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$3H.apply(this, arguments); }
-
-function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3H({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1D || (_path$1D = /*#__PURE__*/React__namespace.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 = core.makeStyles(function (_a) {
-    var spacing = _a.spacing, palette = _a.palette;
-    var getFontSize = function (_a) {
-        var size = _a.size;
-        var sizes = {
-            inherit: 'inherit',
-            small: spacing(1.5),
-            medium: spacing(2),
-            large: spacing(2.5),
-            'extra-large': spacing(3),
-        };
-        return size ? sizes[size] : 'inherit';
-    };
-    var getColor = function (props) {
-        var semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
-        var value = 'inherit';
-        if (props.color) {
-            if (semanticColors.includes(props.color.split('.')[0])) {
-                var _a = props.color.split('.'), color = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
-                // @ts-expect-error - todo.
-                value = palette[color][variant];
-            }
-            else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {
-                value = props.color;
-            }
-        }
-        return value;
-    };
-    return {
-        root: {
-            color: getColor,
-            fontSize: getFontSize,
-            strokeWidth: '1.3px',
-        },
-    };
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var Button = React.forwardRef(function (props, ref) {
+    var _a = props.variation, variation = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["variation"]);
+    var variationProps = {};
+    switch (variation) {
+        case 'primary':
+            variationProps.variant = 'contained';
+            variationProps.color = 'primary';
+            break;
+        case 'secondary':
+            variationProps.variant = 'outlined';
+            variationProps.color = 'primary';
+            break;
+    }
+    return React.createElement(core.Button, tslib.__assign({}, variationProps, muiProps, { ref: ref }));
 });
+Button.displayName = 'Button';
 
-var classnames$1 = {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$1));
-
-var classNames$1 = classnames$1.exports;
-
-var iconStaticClassName = 'pop-icon';
-var Icon = function (props) {
-    var icon = props.icon, className = props.className, restProps = __rest(props, ["icon", "className"]);
-    var hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
-    if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
-        restProps['aria-hidden'] = true;
-    }
-    var classes = useIconStyles(props);
-    var isValid = true;
-    if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
-        isValid = false;
-    }
-    return isValid
-        ? React.createElement(icon, __assign({ className: classNames$1([classes.root, iconStaticClassName, className]) }, restProps))
-        : null;
-};
-Icon.defaultProps = {
-    size: 'inherit',
-    color: 'inherit',
-};
-Icon.displayName = 'Icon';
-
-var LoadingStatus;
-(function (LoadingStatus) {
-    LoadingStatus["ERROR"] = "ERROR";
-    LoadingStatus["LOADED"] = "LOADED";
-    LoadingStatus["PENDING"] = "PENDING";
-})(LoadingStatus || (LoadingStatus = {}));
-var useImgProps = function (avatarProps) {
-    var _a = React__default['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);
-            (_b = (_a = avatarProps.imgProps) === null || _a === void 0 ? void 0 : _a.onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        } });
-    return { imgProps: imgProps, loaded: loaded };
-};
-
-var getAvatarDimensions = function (theme, props) {
-    var factors = {
-        'extra-small': 3,
-        small: 4,
-        medium: 5,
-        large: 6,
-        'extra-large': 12.5,
-    };
-    var sizeFactor = factors[props.size || 'medium'];
-    return theme.spacing(sizeFactor);
-};
-var getAvatarFontSize = function (props) {
-    var fontSizes = {
-        'extra-small': '0.75rem',
-        small: '1rem',
-        medium: '1rem',
-        large: '1.25rem',
-        'extra-large': '3.5rem',
-    };
-    return fontSizes[props.size];
-};
-var useAvatarStyles = styles.makeStyles(function (theme) { return ({
-    root: function (props) { return ({
-        width: getAvatarDimensions(theme, props),
-        height: getAvatarDimensions(theme, props),
-        fontSize: getAvatarFontSize(props),
-        backgroundColor: props.loaded === LoadingStatus.LOADED ? 'transparent' : props.background,
-        color: theme.palette.getContrastText(props.background),
-        objectFit: props.fit,
-    }); },
-    fallback: function (props) { return ({
-        fontSize: getAvatarDimensions(theme, props),
-        strokeWidth: 1,
-    }); },
-}); });
-
-var Avatar = React.forwardRef(function (props, ref) {
-    var children = props.children, src = props.src, alt = props.alt, fallback = props.fallback, muiProps = __rest(props, ["children", "src", "alt", "fallback"]);
-    var _a = useImgProps(props), imgProps = _a.imgProps, loaded = _a.loaded;
-    var classes = useAvatarStyles(__assign(__assign({}, props), { loaded: loaded }));
-    var displayAltTextFallback = src && alt;
-    var displayNoFallback = fallback === 'none';
-    var displayCustomFallback = fallback !== 'none' && typeof fallback !== 'undefined';
-    var Fallback;
-    if (displayAltTextFallback) {
-        Fallback = null;
-    }
-    else if (displayNoFallback) {
-        Fallback = ' ';
-    }
-    else if (displayCustomFallback) {
-        Fallback = fallback;
-    }
-    else {
-        Fallback = React__default['default'].createElement(Icon, { icon: SvgUser, className: classes.fallback });
-    }
-    return (React__default['default'].createElement(MuiAvatar__default['default'], __assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
-});
-Avatar.defaultProps = {
-    size: 'medium',
-    fit: 'cover',
-    background: '#E0E0E0',
-};
-Avatar.displayName = 'Avatar';
-
-styles.makeStyles(function (theme) { return ({
-    circle: {
-        backgroundColor: theme.palette.grey[300],
-        borderRadius: '50%',
-        height: theme.spacing(0.65),
-        width: theme.spacing(0.65),
-        margin: theme.spacing(1) + "px 0 " + theme.spacing(1) + "px " + theme.spacing(1) + "px",
-    },
-    container: {
-        border: "1px solid " + theme.palette.secondary.light,
-        borderRadius: theme.spacing(0.5),
-        flexGrow: 1,
-    },
-    titleBar: {
-        display: 'flex',
-        flexDirection: 'row',
-        borderBottom: "1px solid " + theme.palette.secondary.light,
-        width: '100%',
-    },
-}); });
-
-styles.makeStyles(function () { return ({
-    root: {
-        minWidth: 'unset',
-    },
-    label: {
-        textTransform: function (_a) {
-            var textTransform = _a.textTransform;
-            return textTransform;
-        },
-    },
-}); });
-
-var Checkbox$1 = React.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__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Checkbox$1.displayName = 'Checkbox';
-
-var getBackground = function (theme) { return function (props) {
-    var variant = props.variant, severity = props.severity;
-    var background = theme.palette.grey[100];
-    var backgrounds = {
-        outlined: 'none',
-        error: 'error.main',
-        warning: 'warning.main',
-        info: 'info.light',
-        success: 'success.light',
-    };
-    if (variant === 'outlined') {
-        background = backgrounds[variant];
-    }
-    else if (severity) {
-        var _a = backgrounds[severity].split('.'), color = _a[0], colorVariant = _a[1];
-        // @ts-expect-error - todo.
-        background = theme.palette[color][colorVariant];
-    }
-    return background;
-}; };
-var getColor = function (theme) { return function (props) {
-    var variant = props.variant, severity = props.severity;
-    var textColor;
-    if (variant === 'outlined' && severity) {
-        var textColors = {
-            error: theme.palette.error.main,
-            info: theme.palette.info.main,
-            warning: theme.palette.warning.dark,
-            success: theme.palette.success.dark,
-        };
-        textColor = textColors[severity];
-    }
-    else if (variant === 'outlined' && !severity) {
-        textColor = theme.palette.grey[700];
-    }
-    else if ((variant === 'default' || variant === undefined) && severity) {
-        var textColors = {
-            error: theme.palette.common.white,
-            info: theme.palette.secondary.main,
-            warning: theme.palette.secondary.main,
-            success: theme.palette.secondary.main,
-        };
-        textColor = textColors[severity];
-    }
-    return textColor;
-}; };
-var getBorder = function (theme) { return function (props) {
-    var variant = props.variant, severity = props.severity;
-    var borderColor;
-    if (variant === 'outlined' && severity) {
-        var borderColors = {
-            error: theme.palette.error.main,
-            info: theme.palette.info.main,
-            warning: theme.palette.warning.dark,
-            success: theme.palette.success.dark,
-        };
-        borderColor = borderColors[severity];
-    }
-    return borderColor;
-}; };
-// using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on
-// any component-specific props
-styles.makeStyles(function (theme) { return ({
-    root: {
-        background: getBackground(theme),
-        color: getColor(theme),
-        borderColor: getBorder(theme),
-        borderRadius: theme.spacing(0.5),
-    },
-    icon: {
-        color: 'inherit',
-        height: theme.spacing(2),
-        width: theme.spacing(2),
-    },
-    deleteIcon: {
-        color: theme.palette.grey[500],
-    },
-}); });
-
-var defaultTypographyProps = {
-    variant: 'body1',
-};
-
-var weights = {
-    regular: 400,
-    medium: 500,
-    'semi-bold': 600,
-    bold: 700,
-};
-var getCustomColor = function (theme, color) {
-    var isCommonColor = color && ['white', 'black'].includes(color);
-    var isGreyColor = color && color.match(/^grey\.\d{3}/);
-    var isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
-    var isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
-    switch (true) {
-        case isCommonColor:
-            // @ts-expect-error - todo.
-            return theme.palette.common[color];
-        case Boolean(isGreyColor):
-            var scale = color.split('.')[1];
-            // @ts-expect-error - todo.
-            return theme.palette.grey[scale] || theme.palette.grey[900];
-        case Boolean(isSemanticColor):
-            var _a = color.split('.'), paletteKey = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
-            // @ts-expect-error - todo.
-            return theme.palette[paletteKey][variant];
-        case isTextColor:
-            // @ts-expect-error - todo.
-            return theme.palette.text[color.slice(4).toLowerCase()];
-        default:
-            return undefined;
-    }
-};
-var useTypographyStyles = styles.makeStyles(function (theme) {
-    var _a;
-    return ({
-        root: (_a = {},
-            _a["& ." + iconStaticClassName] = {
-                position: 'relative',
-                top: '0.125em',
-                padding: '0 0.125em',
-                boxSizing: 'content-box',
-            },
-            _a.fontFamily = theme.typography.fontFamily,
-            _a.fontWeight = function (_a) {
-                var variant = _a.variant, weight = _a.weight;
-                return (weight ? weights[weight] : theme.typography[variant].fontWeight);
-            },
-            _a.fontSize = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].fontSize;
-            },
-            _a.lineHeight = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].lineHeight;
-            },
-            _a.textTransform = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].textTransform;
-            },
-            _a.color = function (_a) {
-                var color = _a.color, variant = _a.variant;
-                return (color && getCustomColor(theme, color)) || theme.typography[variant].color;
-            },
-            _a),
-        caption: {
-            display: 'inline',
-        },
-        overline: {
-            display: 'inline',
-        },
-    });
+var useMenuItemStyles = styles.makeStyles(function (theme) {
+    var _a, _b;
+    return ({
+        cardActionArea: (_a = {
+                display: 'flex',
+                gridGap: 16,
+                height: '100%'
+            },
+            _a[theme.breakpoints.up('lg')] = {
+                border: '1px solid #E0E0E0',
+                borderRadius: theme.spacing(2),
+                padding: theme.spacing(2),
+            },
+            _a),
+        card: (_b = {},
+            _b[theme.breakpoints.down('md')] = {
+                '&:after': {
+                    content: '""',
+                    position: 'absolute',
+                    backgroundColor: '#E0E0E0',
+                    width: '100%',
+                    height: 1,
+                    bottom: -16,
+                    left: 0,
+                },
+            },
+            _b.height = 185,
+            _b.position = 'relative',
+            _b.overflow = 'visible',
+            _b),
+        cardTitle: {
+            flexGrow: 1,
+            fontWeight: 500,
+            fontSize: 18,
+            lineHeight: '27px',
+            color: theme.palette.grey[900],
+            '-webkit-line-clamp': 2,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
+        cardDescription: {
+            fontWeight: 400,
+            fontSize: 14,
+            lineHeight: '20px',
+            margin: theme.spacing(0.5, 0, 1, 0),
+            color: theme.palette.grey[800],
+            '-webkit-line-clamp': 2,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
+        outOfStockTag: {
+            minWidth: '90px',
+            marginLeft: theme.spacing(1),
+            display: 'inline-block',
+            verticalAlign: 'bottom',
+        },
+    });
 });
 
-var Typography = function (props) {
-    props.weight; props.color; var TypographyRef = props.TypographyRef, restProps = __rest(props, ["weight", "color", "TypographyRef"]);
-    var classes = useTypographyStyles(__assign({}, props));
-    var variantMapping = { subtitle1: 'p' };
-    return React__default['default'].createElement(core.Typography, __assign({ classes: classes, variantMapping: variantMapping, ref: TypographyRef }, restProps));
-};
-Typography.displayName = 'Typography';
-Typography.defaultProps = defaultTypographyProps;
-
-var getFadeStop = function (_a, typographyVariant) {
-    var typography = _a.typography;
-    // @ts-expect-error - todo.
-    return !isNaN(Number(typography[typographyVariant].lineHeight))
-        ? // @ts-expect-error - todo.
-            typography[typographyVariant].lineHeight + "rem"
-        : // @ts-expect-error - todo.
-            typography[typographyVariant].lineHeight;
-};
-core.makeStyles(function (theme) { return ({
-    overlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        height: '100%',
-        width: '100%',
-        background: function (props) { return "linear-gradient(to top, white, #FFF0 " + getFadeStop(theme, props.typographyVariant) + ")"; },
-    },
+var useStyles$6 = core.makeStyles(function () { return ({
+    img: {
+        objectFit: 'cover',
+        width: '100%',
+        height: '100%',
+    },
 }); });
-
-var SemanticColors;
-(function (SemanticColors) {
-    SemanticColors["PRIMARY_MAIN"] = "primary.main";
-    SemanticColors["PRIMARY_DARK"] = "primary.dark";
-    SemanticColors["PRIMARY_LIGHT"] = "primary.light";
-    SemanticColors["SECONDARY_MAIN"] = "secondary.main";
-    SemanticColors["SECONDARY_DARK"] = "secondary.dark";
-    SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
-})(SemanticColors || (SemanticColors = {}));
-core.makeStyles(function (theme) { return ({
-    dividerRoot: {
-        gap: theme.spacing(2),
-    },
-    textRoot: {
-        color: function (props) {
-            var textColor = props.textColor;
-            if (Object.values(SemanticColors).includes(textColor)) {
-                var _a = textColor.split('.'), semanticColor = _a[0], shade = _a[1];
-                // @ts-expect-error - todo.
-                return theme.palette[semanticColor][shade];
-            }
-            else if (textColor) {
-                return textColor;
-            }
-            else {
-                return 'black';
-            }
-        },
-        textTransform: function (props) { return props.textTransform; },
-    },
-    dividerLine: {
-        backgroundColor: function (props) {
-            var dividerColor = props.dividerColor;
-            if (Object.values(SemanticColors).includes(dividerColor)) {
-                var _a = dividerColor.split('.'), semanticColor = _a[0], shade = _a[1];
-                // @ts-expect-error - todo.
-                return theme.palette[semanticColor][shade];
-            }
-            else if (dividerColor) {
-                return dividerColor;
-            }
-            else {
-                return theme.palette.grey[500];
-            }
-        },
-    },
-}); });
-
-var IconButton = React.forwardRef(function (props, ref) {
-    return React__default['default'].createElement(MuiIconButton__default['default'], __assign({ ref: ref }, props));
-});
-IconButton.displayName = 'IconButton';
-IconButton.defaultProps = {
-    color: 'secondary',
+var MenuItemImg = function (props) {
+    var _a = props.image, image = _a === void 0 ? {} : _a;
+    var src = image.src;
+    var classes = useStyles$6();
+    if (!src) {
+        return null;
+    }
+    return (React.createElement(core.Box, { width: 125, height: "100%", borderRadius: 16, overflow: "hidden", flexShrink: 0 }, React.createElement("img", { src: src, alt: "", className: classes.img })));
 };
 
-var useLinkStyles = styles.makeStyles(function (theme) { return ({
-    root: function (props) {
-        var _a;
-        return (__assign(__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
-            alignSelf: 'center',
-        }, _a)));
-    },
-}); });
-
-// eslint-disable-next-line react/display-name -- false positive
-var Link = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = __rest(props, ["children"]);
-    var classes = useLinkStyles(props);
-    return (React__default['default'].createElement(core.Link, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
-});
-Link.defaultProps = {
-    variant: 'body1',
-};
-Link.displayName = 'Link';
-
-var useStyles$4$1 = core.makeStyles(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            '&:last-child': {
-                marginBottom: 0,
-            },
-            marginBottom: spacing(4),
-            padding: spacing(4),
-        },
-    });
-});
-var Paper = React.forwardRef(function (props, ref) {
-    var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$4$1(props);
-    return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
-});
-Paper.displayName = 'Paper';
-Paper.defaultProps = {
-    legacyStyles: false,
+var MenuItemInfo = function (props) {
+    return (React.createElement(core.Box, { display: "flex", flexGrow: 1, flexDirection: "column", height: "100%" }, props.children));
 };
 
-var Radio$1 = React.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__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Radio$1.displayName = 'Radio';
-
-styles.makeStyles(function () { return ({
-    textfield: {
-        background: function (props) { return (props.backgroundTransparency ? '#FFFFFF44' : 'none'); },
-        borderTopLeftRadius: 4,
-        borderBottomLeftRadius: 4,
-        '& fieldset': {
-            borderRight: 'none',
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-        },
-    },
-    button: {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        alignSelf: 'stretch',
-    },
-    input: {
-        color: function (props) { return props.inputTextColor || 'inherit'; },
-        '&$focused fieldset': {
-            top: -4,
-        },
-    },
-    focused: {},
-}); });
-
-var useSwitchStyles = styles.makeStyles(function (theme) { return ({
-    checked: {
-        '& $thumb': {
-            background: theme.palette.success.main,
-        },
-        '&& + $track': {
-            backgroundColor: theme.palette.success.main,
-        },
-    },
-    thumb: {},
-    track: {},
-}); });
-
-var Switch$1 = React.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__default['default'], __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Switch$1.displayName = 'Switch';
-
-var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        color: theme.palette.text.primary,
-    },
-    selected: {
-        '&&': {
-            '&:hover': {
-                backgroundColor: function (props) { return theme.palette[props.color || 'primary'].dark; },
-            },
-            backgroundColor: function (props) { return theme.palette[props.color || 'primary'].main; },
-            color: 'white',
-        },
-    },
-}); });
-
-var ToggleButton = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = __rest(props, ["children"]);
-    var classes = useToggleButtonStyles(props);
-    return (React__default['default'].createElement(MuiToggleButton__default['default'], __assign({ ref: ref, classes: {
-            root: classes.root,
-            selected: classes.selected,
-        } }, muiProps), children));
-});
-ToggleButton.defaultProps = {
-    color: 'primary',
-};
-ToggleButton.displayName = 'ToggleButton';
-
-var useToggleButtonGroupStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        '&&': {
-            backgroundColor: theme.palette.grey[300],
-        },
-    },
-}); });
-
-var ToggleButtonGroup = React.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)) {
-            return null;
-        }
-        return React__default['default'].cloneElement(child, { color: color });
-    });
-    return (React__default['default'].createElement(MuiToggleButtonGroup__default['default'], __assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
-});
-ToggleButtonGroup.displayName = 'ToggleButtonGroup';
-
-var useTooltipStyles = styles.makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        tooltip: {
-            fontSize: typography.pxToRem(16),
-        },
-    });
-});
-
-var Tooltip = React.forwardRef(function (props, ref) {
-    var classes = useTooltipStyles(props);
-    return React__default['default'].createElement(MuiTooltip__default['default'], __assign({ ref: ref, classes: classes }, props));
-});
-Tooltip.displayName = 'Tooltip';
-
-core.makeStyles(function () { return ({
-    root: {
-        height: 56,
-    },
-}); });
-core.makeStyles(function (theme) { return ({
-    root: {
-        height: '100%',
-        width: 'min-content',
-        borderRadius: theme.spacing(1),
-    },
-    input: {
-        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-            display: 'none',
-        },
-        '-moz-appearance': 'textfield',
-        minWidth: 40,
-        padding: 0,
-        textAlign: 'center',
-    },
-    adornedStart: {
-        padding: 0,
-    },
-    adornedEnd: {
-        padding: 0,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gridGap: 16,
-    },
-}); });
-
-var FollowerAuthenticationDialogContext = React.createContext(null);
-FollowerAuthenticationDialogContext.Provider;
-
-core.makeStyles(function () { return ({
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
-        gridGap: 16,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    main: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gridGap: 16,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    root: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-    },
-}); });
-
-var ReactionCounter = function (props) {
-    var count = props.count, icon = props.icon, label = props.label;
-    return (React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 6, color: "grey.900" },
-        React__default['default'].createElement(Icon, { icon: icon, size: "large", color: "inherit", "aria-label": label }),
-        React__default['default'].createElement(Typography, { variant: "body2", color: "grey.900" }, count)));
+var ReactionCounter = function (props) {
+    var count = props.count, icon = props.icon, label = props.label;
+    return (React.createElement(commonUi.Box, { display: "flex", alignItems: "center", gridGap: 6, color: "grey.900" },
+        React.createElement(commonUi.Icon, { icon: icon, size: "large", color: "inherit", "aria-label": label }),
+        React.createElement(commonUi.Typography, { variant: "body2", color: "grey.900" }, count)));
 };
 
-var ReactionCounterGroup = function (props) {
-    var children = props.children;
-    return (React__default['default'].createElement(core.Box, { display: "flex", gridGap: 16 }, children));
+var ReactionCounterGroup = function (props) {
+    var children = props.children;
+    return (React.createElement(commonUi.Box, { display: "flex", gridGap: 16 }, children));
 };
 
-var MenuItemReactions = function (props) {
-    var likeCount = props.likeCount, reviewCount = props.reviewCount;
-    var showLikes = likeCount ? likeCount > 0 : false;
-    var showReviews = reviewCount ? reviewCount > 0 : false;
-    return (React__default['default'].createElement(ReactionCounterGroup, null,
-        showLikes && React__default['default'].createElement(ReactionCounter, { icon: SvgHeart, count: likeCount !== null && likeCount !== void 0 ? likeCount : 0, label: "likes" }),
-        showReviews && React__default['default'].createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0, label: "reviews" })));
+var MenuItemReactions = function (props) {
+    var likeCount = props.likeCount, reviewCount = props.reviewCount;
+    var showLikes = likeCount ? likeCount > 0 : false;
+    var showReviews = reviewCount ? reviewCount > 0 : false;
+    return (React.createElement(ReactionCounterGroup, null,
+        showLikes && React.createElement(ReactionCounter, { icon: webIcons.Heart, count: likeCount !== null && likeCount !== void 0 ? likeCount : 0, label: "likes" }),
+        showReviews && React.createElement(ReactionCounter, { icon: webIcons.Reviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0, label: "reviews" })));
 };
 
-var useStyles$5 = core.makeStyles(function (_a) {
-    var palette = _a.palette, spacing = _a.spacing;
-    return ({
-        plusIcon: {
-            height: '100%',
-            padding: spacing(0.25),
-            background: function (props) { return (props.available ? palette.info.main : 'none'); },
-            color: function (props) { return (props.available ? palette.info.contrastText : palette.warning.main); },
-            borderRadius: '30px',
-            marginRight: spacing(1),
-        },
-    });
-});
-var MenuItemPrice = function (props) {
-    var classes = useStyles$5(props);
-    return (React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center" },
-        React__default['default'].createElement(core.Box, { display: "flex", className: classes.plusIcon },
-            React__default['default'].createElement(Icon, { icon: props.available ? SvgPlus : SvgLock, size: "medium" })),
-        React__default['default'].createElement(core.Typography, null, props.price)));
+var useStyles$5 = core.makeStyles(function (_a) {
+    var palette = _a.palette, spacing = _a.spacing;
+    return ({
+        plusIcon: {
+            height: '100%',
+            padding: spacing(0.25),
+            background: function (props) { return (props.available ? palette.info.main : 'none'); },
+            color: function (props) { return (props.available ? palette.info.contrastText : palette.warning.main); },
+            borderRadius: '30px',
+            marginRight: spacing(1),
+        },
+    });
+});
+var MenuItemPrice = function (props) {
+    var classes = useStyles$5(props);
+    return (React.createElement(core.Box, { display: "flex", alignItems: "center" },
+        React.createElement(core.Box, { display: "flex", className: classes.plusIcon },
+            React.createElement(commonUi.Icon, { icon: props.available ? webIcons.Plus : webIcons.Lock, size: "medium" })),
+        React.createElement(core.Typography, null, props.price)));
 };
 
-var useItemTagStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        color: theme.palette.text.primary,
-        borderColor: theme.palette.text.primary,
-        border: '1.5px solid',
-        background: 'none',
-        height: '24px',
-        lineHeight: 1.5,
-        position: 'static',
-        width: '24px',
-    },
-    text: {
-        lineHeight: 1.5,
-    },
+var useItemTagStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        borderColor: theme.palette.text.primary,
+        border: '1.5px solid',
+        background: 'none',
+        height: '24px',
+        lineHeight: 1.5,
+        position: 'static',
+        width: '24px',
+    },
+    text: {
+        lineHeight: 1.5,
+    },
 }); });
 
-var ItemTag = React.forwardRef(function (props, ref) {
-    var alt = props.alt, children = props.children;
-    var classes = useItemTagStyles();
-    return (React__default['default'].createElement(core.Avatar, { ref: ref, alt: alt, classes: { root: classes.root } },
-        React__default['default'].createElement(Typography, { variant: "caption", className: classes.text }, children)));
-});
+var ItemTag = React.forwardRef(function (props, ref) {
+    var alt = props.alt, children = props.children;
+    var classes = useItemTagStyles();
+    return (React.createElement(core.Avatar, { ref: ref, alt: alt, classes: { root: classes.root } },
+        React.createElement(commonUi.Typography, { variant: "caption", className: classes.text }, children)));
+});
 ItemTag.displayName = 'ItemTag';
 
-var ItemTagGroup = function (props) {
-    var children = props.children;
-    return (React__default['default'].createElement(core.Box, { display: "flex", gridGap: 6, ml: 1, flexWrap: "wrap" }, children));
+var ItemTagGroup = function (props) {
+    var children = props.children;
+    return (React.createElement(core.Box, { display: "flex", gridGap: 6, ml: 1, flexWrap: "wrap" }, children));
 };
 
-var MenuItemTags = function (props) {
-    var itemTags = props.itemTags;
-    return (React__default['default'].createElement(ItemTagGroup, null, itemTags === null || itemTags === void 0 ? void 0 : itemTags.slice(0, 5).map(function (itemTag) { return (React__default['default'].createElement(ItemTag, { key: itemTag.name, alt: itemTag.name, color: itemTag.color }, itemTag.abbr)); })));
+var MenuItemTags = function (props) {
+    var itemTags = props.itemTags;
+    return (React.createElement(ItemTagGroup, null, itemTags === null || itemTags === void 0 ? void 0 : itemTags.slice(0, 5).map(function (itemTag) { return (React.createElement(ItemTag, { key: itemTag.name, alt: itemTag.name, color: itemTag.color }, itemTag.abbr)); })));
 };
 
-var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        borderRadius: '5px',
-        display: 'flex',
-        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] + ")",
-    },
-    small: {
-        padding: theme.spacing(0.25, 0.75),
-    },
-    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,
-    },
-    highlight: {
-        backgroundColor: theme.palette.warning.light,
-        color: theme.palette.grey[900],
-    },
+var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        borderRadius: '5px',
+        display: 'flex',
+        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] + ")",
+    },
+    small: {
+        padding: theme.spacing(0.25, 0.75),
+    },
+    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,
+    },
+    highlight: {
+        backgroundColor: theme.palette.warning.light,
+        color: theme.palette.grey[900],
+    },
 }); });
 
 var classnames = {exports: {}};
 
 /*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
 */
 
 (function (module) {
@@ -1481,38 +256,57 @@ var classnames = {exports: {}};
 
 	var hasOwn = {}.hasOwnProperty;
 
-	function classNames() {
-		var classes = [];
+	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());
-				}
+			if (arg) {
+				classes = appendClass(classes, parseValue(arg));
+			}
+		}
+
+		return classes;
+	}
+
+	function parseValue (arg) {
+		if (typeof arg === 'string' || typeof arg === 'number') {
+			return arg;
+		}
+
+		if (typeof arg !== 'object') {
+			return '';
+		}
+
+		if (Array.isArray(arg)) {
+			return classNames.apply(null, arg);
+		}
+
+		if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+			return arg.toString();
+		}
+
+		var classes = '';
+
+		for (var key in arg) {
+			if (hasOwn.call(arg, key) && arg[key]) {
+				classes = appendClass(classes, key);
 			}
 		}
 
-		return classes.join(' ');
+		return classes;
+	}
+
+	function appendClass (value, newClass) {
+		if (!newClass) {
+			return value;
+		}
+	
+		if (value) {
+			return value + ' ' + newClass;
+		}
+	
+		return value + newClass;
 	}
 
 	if (module.exports) {
@@ -1526,712 +320,712 @@ var classnames = {exports: {}};
 
 var classNames = classnames.exports;
 
-var StatusTag = function (props) {
-    var variant = props.variant, label = props.label, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.color, color = _b === void 0 ? 'default' : _b;
-    var classes = useStatusTagStyles(props);
-    return (React__default['default'].createElement(core.Box, { className: classNames([classes.root, classes[color], classes[variant], size === 'sm' ? classes.small : '']) },
-        React__default['default'].createElement(Typography, { variant: "caption" }, label)));
-};
-StatusTag.defaultProps = {
-    color: 'default',
-    error: false,
-};
+var StatusTag = function (props) {
+    var variant = props.variant, label = props.label, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.color, color = _b === void 0 ? 'default' : _b;
+    var classes = useStatusTagStyles(props);
+    return (React.createElement(commonUi.Box, { className: classNames([classes.root, classes[color], classes[variant], size === 'sm' ? classes.small : '']) },
+        React.createElement(commonUi.Typography, { variant: "caption" }, label)));
+};
+StatusTag.defaultProps = {
+    color: 'default',
+    error: false,
+};
 StatusTag.displayName = 'StatusTag';
 
-var MenuItem = React.forwardRef(function (props, ref) {
-    var ariaLabel = props.ariaLabel, onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading, isFeatured = props.isFeatured, image = props.image, likeCount = props.likeCount, reviewCount = props.reviewCount, price = props.price, available = props.available, itemTags = props.itemTags, className = props.className, restProps = __rest$1(props, ["ariaLabel", "onClick", "id", "description", "isOutOfStock", "title", "loading", "isFeatured", "image", "likeCount", "reviewCount", "price", "available", "itemTags", "className"]);
-    var classes = useMenuItemStyles(props);
-    var handleClick = function (event) {
-        onClick(id, event);
-    };
-    return (React__default['default'].createElement(core.Card, __assign$1({ className: classNames(classes.card, className), ref: ref, elevation: 0, "data-component-type": "menu-item" }, restProps),
-        React__default['default'].createElement(core.CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading, "aria-label": ariaLabel },
-            React__default['default'].createElement(MenuItemInfo, null,
-                isFeatured && React__default['default'].createElement(StatusTag, { color: "highlight", label: "Featured", variant: "filled", size: "sm" }),
-                React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
-                    React__default['default'].createElement(core.Typography, { component: "h2", className: classes.cardTitle },
-                        loading ? React__default['default'].createElement(lab.Skeleton, null) : title,
-                        isOutOfStock && (React__default['default'].createElement("span", { className: classes.outOfStockTag },
-                            React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" }))))),
-                React__default['default'].createElement(core.Typography, { className: classes.cardDescription, paragraph: true }, loading ? React__default['default'].createElement(lab.Skeleton, null) : description),
-                loading ? (React__default['default'].createElement(lab.Skeleton, null,
-                    React__default['default'].createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount }))) : (React__default['default'].createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount })),
-                loading ? (React__default['default'].createElement(lab.Skeleton, { style: { flexGrow: 1 }, width: 100, height: 48 })) : (React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
-                    React__default['default'].createElement(MenuItemPrice, { price: price, available: available }),
-                    React__default['default'].createElement(MenuItemTags, { itemTags: itemTags })))),
-            loading ? React__default['default'].createElement(lab.Skeleton, { height: 100, width: 100 }) : React__default['default'].createElement(MenuItemImg, { image: image }))));
-});
+var MenuItem = React.forwardRef(function (props, ref) {
+    var ariaLabel = props.ariaLabel, onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading, isFeatured = props.isFeatured, image = props.image, likeCount = props.likeCount, reviewCount = props.reviewCount, price = props.price, available = props.available, itemTags = props.itemTags, className = props.className, restProps = tslib.__rest(props, ["ariaLabel", "onClick", "id", "description", "isOutOfStock", "title", "loading", "isFeatured", "image", "likeCount", "reviewCount", "price", "available", "itemTags", "className"]);
+    var classes = useMenuItemStyles(props);
+    var handleClick = function (event) {
+        onClick(id, event);
+    };
+    return (React.createElement(core.Card, tslib.__assign({ className: classNames(classes.card, className), ref: ref, elevation: 0, "data-component-type": "menu-item" }, restProps),
+        React.createElement(core.CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading, "aria-label": ariaLabel },
+            React.createElement(MenuItemInfo, null,
+                isFeatured && React.createElement(StatusTag, { color: "highlight", label: "Featured", variant: "filled", size: "sm" }),
+                React.createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
+                    React.createElement(core.Typography, { component: "h2", className: classes.cardTitle },
+                        loading ? React.createElement(lab.Skeleton, null) : title,
+                        isOutOfStock && (React.createElement("span", { className: classes.outOfStockTag },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" }))))),
+                React.createElement(core.Typography, { className: classes.cardDescription, paragraph: true }, loading ? React.createElement(lab.Skeleton, null) : description),
+                loading ? (React.createElement(lab.Skeleton, null,
+                    React.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount }))) : (React.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount })),
+                loading ? (React.createElement(lab.Skeleton, { style: { flexGrow: 1 }, width: 100, height: 48 })) : (React.createElement(core.Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
+                    React.createElement(MenuItemPrice, { price: price, available: available }),
+                    React.createElement(MenuItemTags, { itemTags: itemTags })))),
+            loading ? React.createElement(lab.Skeleton, { height: 100, width: 100 }) : React.createElement(MenuItemImg, { image: image }))));
+});
 MenuItem.displayName = 'MenuItem';
 
-var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        '&:first-of-type': {
-            paddingTop: 0,
-        },
-        '&:last-of-type': {
-            paddingBottom: 0,
-            borderBottom: 'none',
-        },
-        color: theme.palette.grey[900],
-        padding: theme.spacing(2, 0),
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-        gridGap: theme.spacing(2),
-        borderBottom: function (_a) {
-            var borderBottom = _a.borderBottom;
-            return (borderBottom ? '1px solid #E0E0E0' : 'none');
-        },
-    },
-    deleteButton: {
-        color: theme.palette.info.main,
-    },
-    editButton: {
-        color: theme.palette.info.main,
-    },
-    img: {
-        objectFit: 'cover',
-        borderRadius: theme.spacing(1),
-        flexBasis: 'auto',
-        flexShrink: 0,
-        height: theme.spacing(7),
-        marginRight: theme.spacing(1),
-        overflow: 'hidden',
-        width: theme.spacing(7),
-    },
-    name: {
-        fontSize: 16,
-        fontWeight: 500,
-        lineHeight: '24px',
-    },
-    price: {
-        fontSize: '18px',
-    },
-    select: {
-        paddingLeft: 'unset',
-        borderRadius: '25px',
-        '& fieldset': {
-            borderColor: theme.palette.grey[700],
-        },
-        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.grey[700],
-            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),
-    },
-    ul: {
-        margin: 0,
-        paddingLeft: theme.spacing(3),
-    },
-    warning: {
-        color: theme.palette.error.main,
-        display: 'flex',
-        gridGap: theme.spacing(0.825),
-    },
+var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        '&:first-of-type': {
+            paddingTop: 0,
+        },
+        '&:last-of-type': {
+            paddingBottom: 0,
+            borderBottom: 'none',
+        },
+        color: theme.palette.grey[900],
+        padding: theme.spacing(2, 0),
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        gridGap: theme.spacing(2),
+        borderBottom: function (_a) {
+            var borderBottom = _a.borderBottom;
+            return (borderBottom ? '1px solid #E0E0E0' : 'none');
+        },
+    },
+    deleteButton: {
+        color: theme.palette.info.main,
+    },
+    editButton: {
+        color: theme.palette.info.main,
+    },
+    img: {
+        objectFit: 'cover',
+        borderRadius: theme.spacing(1),
+        flexBasis: 'auto',
+        flexShrink: 0,
+        height: theme.spacing(7),
+        marginRight: theme.spacing(1),
+        overflow: 'hidden',
+        width: theme.spacing(7),
+    },
+    name: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '24px',
+    },
+    price: {
+        fontSize: '18px',
+    },
+    select: {
+        paddingLeft: 'unset',
+        borderRadius: '25px',
+        '& fieldset': {
+            borderColor: theme.palette.grey[700],
+        },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.grey[700],
+            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),
+    },
+    ul: {
+        margin: 0,
+        paddingLeft: theme.spacing(3),
+    },
+    warning: {
+        color: theme.palette.error.main,
+        display: 'flex',
+        gridGap: theme.spacing(0.825),
+    },
 }); });
 
-var OrderingAppContext = React.createContext(null);
-var useOrderingAppContext = function () {
-    var context = React.useContext(OrderingAppContext);
-    if (!context) {
-        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
-    }
-    return context;
-};
-var OrderingAppContextProvider = function (props) {
-    var context = React.useState(props.defaultContext);
-    return React__default['default'].createElement(OrderingAppContext.Provider, { value: context }, props.children);
+var OrderingAppContext = React.createContext(null);
+var useOrderingAppContext = function () {
+    var context = React.useContext(OrderingAppContext);
+    if (!context) {
+        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
+    }
+    return context;
+};
+var OrderingAppContextProvider = function (props) {
+    var context = React.useState(props.defaultContext);
+    return React.createElement(OrderingAppContext.Provider, { value: context }, props.children);
 };
 
-var DishCheckoutCard = function (props) {
-    var _a;
-    var id = props.id, name = props.name, quantity = props.quantity, modifierGroups = props.modifierGroups, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage, _b = props.image, image = _b === void 0 ? {} : _b, messages = props.messages;
-    var src = image.src;
-    var classes = useDishCheckoutCardStyles(props);
-    var appContext = useOrderingAppContext()[0];
-    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
-    var formattedPrice = typeof price === 'number' ? "" + ((_a = appContext.currencySymbol) !== null && _a !== void 0 ? _a : '') + price.toFixed(2) : price;
-    var handleQuantityChange = function (event) {
-        return onQuantityChange(id, parseInt(event.target.value, 10));
-    };
-    var labelString = function (label) {
-        return label.replace(/[^a-zA-Z\s]/g, '').toLowerCase();
-    };
-    var formatModifiers = function (groups, nested) {
-        if (nested === void 0) { nested = false; }
-        return groups.map(function (group) {
-            // Get all selected modifiers for this group
-            var modifiers = group.selectedModifiers
-                .map(function (modifier) {
-                return modifier.quantity > 1 ? modifier.modifierName + " \u00D7 " + modifier.quantity : modifier.modifierName;
-            })
-                .join(', ');
-            // Render nested groups recursively
-            var nestedGroups = group.selectedModifiers.flatMap(function (modifier) {
-                var _a;
-                return (modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) && ((_a = modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) === null || _a === void 0 ? void 0 : _a.length) > 0
-                    ? formatModifiers(modifier.selectedModifierGroups, true)
-                    : [];
-            });
-            // For top-level groups, we render without the list
-            if (!nested) {
-                return (React__default['default'].createElement(Typography, { key: group.id, variant: "body2" },
-                    group.menuItemModifierGroupName,
-                    ": ",
-                    modifiers,
-                    (nestedGroups === null || nestedGroups === void 0 ? void 0 : nestedGroups.length) > 0 && React__default['default'].createElement("ul", { className: classes.ul }, nestedGroups)));
-            }
-            // For nested groups, we use list items
-            return (React__default['default'].createElement("li", { key: group.id, className: classes.li },
-                React__default['default'].createElement(Typography, { variant: "body2" },
-                    group.menuItemModifierGroupName,
-                    ": ",
-                    modifiers,
-                    nestedGroups && nestedGroups.length > 0 && React__default['default'].createElement("ul", { className: classes.ul }, nestedGroups))));
-        });
-    };
-    return (React__default['default'].createElement(core.Box, { className: classes.root },
-        React__default['default'].createElement(core.Box, { display: "flex", gridGap: 3 },
-            src && React__default['default'].createElement("img", { src: src, alt: "", className: classes.img }),
-            React__default['default'].createElement(core.Box, { flexGrow: 1 },
-                React__default['default'].createElement(Typography, { variant: "h2", className: classes.name }, name),
-                modifierGroups && formatModifiers(modifierGroups),
-                specialInstructions && React__default['default'].createElement(Typography, { variant: "body2" },
-                    "\"",
-                    specialInstructions,
-                    "\"")),
-            React__default['default'].createElement(core.Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
-                React__default['default'].createElement(Button, { "aria-label": messages.ariaEdit, disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, messages.edit),
-                React__default['default'].createElement(IconButton, { "aria-label": messages.ariaDelete, disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
-                    React__default['default'].createElement(Icon, { icon: SvgTrash, size: "large" })))),
-        React__default['default'].createElement(core.Box, { display: "flex", gridGap: 16, alignItems: "center" },
-            React__default['default'].createElement(core.FormControl, { variant: "outlined", hiddenLabel: true },
-                React__default['default'].createElement(core.Select, { disabled: disabled, value: quantity, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, SelectDisplayProps: { 'aria-label': labelString(name) + " quantity select" }, disableUnderline: true, onChange: handleQuantityChange, fullWidth: true, startAdornment: React__default['default'].createElement(core.InputAdornment, { position: "start" },
-                        React__default['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['default'].createElement(core.MenuItem, { key: index + 1, value: index + 1, "aria-label": "" + (index + 1) }, index + 1)); }))),
-            React__default['default'].createElement(Typography, { className: classes.price }, formattedPrice)),
-        warningMessage && (React__default['default'].createElement(core.Box, { className: classes.warning },
-            React__default['default'].createElement(core.Box, { paddingTop: 0.25 },
-                React__default['default'].createElement(Icon, { icon: SvgWarning, size: "medium" })),
-            React__default['default'].createElement(Typography, { variant: "body2" }, warningMessage)))));
+var DishCheckoutCard = function (props) {
+    var _a;
+    var id = props.id, name = props.name, quantity = props.quantity, modifierGroups = props.modifierGroups, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage, _b = props.image, image = _b === void 0 ? {} : _b, messages = props.messages;
+    var src = image.src;
+    var classes = useDishCheckoutCardStyles(props);
+    var appContext = useOrderingAppContext()[0];
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var formattedPrice = typeof price === 'number' ? "" + ((_a = appContext.currencySymbol) !== null && _a !== void 0 ? _a : '') + price.toFixed(2) : price;
+    var handleQuantityChange = function (event) {
+        return onQuantityChange(id, parseInt(event.target.value, 10));
+    };
+    var labelString = function (label) {
+        return label.replace(/[^a-zA-Z\s]/g, '').toLowerCase();
+    };
+    var formatModifiers = function (groups, nested) {
+        if (nested === void 0) { nested = false; }
+        return groups.map(function (group) {
+            // Get all selected modifiers for this group
+            var modifiers = group.selectedModifiers
+                .map(function (modifier) {
+                return modifier.quantity > 1 ? modifier.modifierName + " \u00D7 " + modifier.quantity : modifier.modifierName;
+            })
+                .join(', ');
+            // Render nested groups recursively
+            var nestedGroups = group.selectedModifiers.flatMap(function (modifier) {
+                var _a;
+                return (modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) && ((_a = modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) === null || _a === void 0 ? void 0 : _a.length) > 0
+                    ? formatModifiers(modifier.selectedModifierGroups, true)
+                    : [];
+            });
+            // For top-level groups, we render without the list
+            if (!nested) {
+                return (React.createElement(commonUi.Typography, { key: group.id, variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    (nestedGroups === null || nestedGroups === void 0 ? void 0 : nestedGroups.length) > 0 && React.createElement("ul", { className: classes.ul }, nestedGroups)));
+            }
+            // For nested groups, we use list items
+            return (React.createElement("li", { key: group.id, className: classes.li },
+                React.createElement(commonUi.Typography, { variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    nestedGroups && nestedGroups.length > 0 && React.createElement("ul", { className: classes.ul }, nestedGroups))));
+        });
+    };
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Box, { display: "flex", gridGap: 3 },
+            src && React.createElement("img", { src: src, alt: "", className: classes.img }),
+            React.createElement(commonUi.Box, { flexGrow: 1 },
+                React.createElement(commonUi.Typography, { variant: "h2", className: classes.name }, name),
+                modifierGroups && formatModifiers(modifierGroups),
+                specialInstructions && React.createElement(commonUi.Typography, { variant: "body2" },
+                    "\"",
+                    specialInstructions,
+                    "\"")),
+            React.createElement(commonUi.Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
+                React.createElement(Button, { "aria-label": messages.ariaEdit, disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, messages.edit),
+                React.createElement(commonUi.IconButton, { "aria-label": messages.ariaDelete, disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
+                    React.createElement(commonUi.Icon, { icon: webIcons.Trash, size: "large" })))),
+        React.createElement(commonUi.Box, { display: "flex", gridGap: 16, alignItems: "center" },
+            React.createElement(core.FormControl, { variant: "outlined", hiddenLabel: true },
+                React.createElement(core.Select, { disabled: disabled, value: quantity, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, SelectDisplayProps: { 'aria-label': labelString(name) + " quantity select" }, disableUnderline: true, onChange: handleQuantityChange, fullWidth: true, startAdornment: React.createElement(core.InputAdornment, { position: "start" },
+                        React.createElement(commonUi.Icon, { icon: open ? webIcons.ChevronUp : webIcons.ChevronDown, 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.createElement(core.MenuItem, { key: index + 1, value: index + 1, "aria-label": "" + (index + 1) }, index + 1)); }))),
+            React.createElement(commonUi.Typography, { className: classes.price }, formattedPrice)),
+        warningMessage && (React.createElement(commonUi.Box, { className: classes.warning },
+            React.createElement(commonUi.Box, { paddingTop: 0.25 },
+                React.createElement(commonUi.Icon, { icon: webIcons.Warning, size: "medium" })),
+            React.createElement(commonUi.Typography, { variant: "body2" }, warningMessage)))));
 };
 
-var DishDetailsReview = React.forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo, alt = props.alt;
-    return (React__default['default'].createElement(core.Box, { display: "flex" },
-        React__default['default'].createElement(core.Box, { mr: 1 },
-            React__default['default'].createElement(Avatar, { size: "small", src: userAvatarUrl, alt: alt })),
-        React__default['default'].createElement(core.Box, { width: "100%" },
-            React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", mb: 1 },
-                React__default['default'].createElement(Typography, { variant: "body1", variantMapping: { body1: 'h3' }, color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
-                React__default['default'].createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
-            React__default['default'].createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
-});
+var DishDetailsReview = React.forwardRef(function (props) {
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo, alt = props.alt;
+    return (React.createElement(commonUi.Box, { display: "flex" },
+        React.createElement(commonUi.Box, { mr: 1 },
+            React.createElement(commonUi.Avatar, { size: "small", src: userAvatarUrl, alt: alt })),
+        React.createElement(commonUi.Box, { width: "100%" },
+            React.createElement(commonUi.Box, { display: "flex", justifyContent: "space-between", mb: 1 },
+                React.createElement(commonUi.Typography, { variant: "body1", variantMapping: { body1: 'h3' }, color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
+                React.createElement(commonUi.Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
+            React.createElement(commonUi.Typography, { color: "grey.900", weight: "regular" }, content))));
+});
 DishDetailsReview.displayName = 'DishDetailsReview';
 
-var useDishModifierCardStyles = styles.makeStyles(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,
-    },
-    helperText: {
-        color: theme.palette.text.primary,
-    },
-    name: {
-        fontSize: theme.spacing(2.25),
-        marginBottom: theme.spacing(2),
-    },
-}); });
-var useRadioModifierFormStyles = styles.makeStyles(function (theme) { return ({
-    label: {
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'space-between',
-    },
-    radio: {
-        fontSize: theme.spacing(2),
-        padding: 'unset',
-        marginRight: theme.spacing(-0.25),
-        '&.Mui-checked': {
-            color: theme.palette.info.main,
-        },
-    },
-    hideRadio: {
-        display: 'none',
-    },
-    root: {
-        justifyContent: 'space-between',
-        margin: 0,
-        width: 'fill-available',
-        '& > :last-child': {
-            flex: 1,
-        },
-    },
-}); });
-var useCheckboxModifierFormStyles = styles.makeStyles(function (theme) { return ({
-    label: {
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'space-between',
-    },
-    checkbox: {
-        color: '#616161',
-        fontSize: theme.spacing(2),
-        marginRight: theme.spacing(-0.25),
-        padding: 'unset',
-        '&.Mui-checked': {
-            color: theme.palette.info.main,
-        },
-    },
-    hideCheckbox: {
-        display: 'none',
-    },
-    root: {
-        margin: 0,
-        width: 'fill-available',
-        '& > :last-child': {
-            flex: 1,
-        },
-    },
-}); });
-var useLabelStyles = styles.makeStyles(function (theme) { return ({
-    label: {
-        margin: theme.spacing(0.5, 0),
-    },
-    disabled: {
-        color: theme.palette.grey[500],
-    },
-    price: {
-        color: theme.palette.grey[700],
-    },
-}); });
-var useOptionsStyles = styles.makeStyles(function (theme) { return ({
-    options: {
-        color: theme.palette.info.main,
-        marginBottom: theme.spacing(1.5),
-        padding: 0,
-    },
+var useDishModifierCardStyles = styles.makeStyles(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,
+    },
+    helperText: {
+        color: theme.palette.text.primary,
+    },
+    name: {
+        fontSize: theme.spacing(2.25),
+        marginBottom: theme.spacing(2),
+    },
+}); });
+var useRadioModifierFormStyles = styles.makeStyles(function (theme) { return ({
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    radio: {
+        fontSize: theme.spacing(2),
+        padding: 'unset',
+        marginRight: theme.spacing(-0.25),
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideRadio: {
+        display: 'none',
+    },
+    root: {
+        justifyContent: 'space-between',
+        margin: 0,
+        width: 'fill-available',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}); });
+var useCheckboxModifierFormStyles = styles.makeStyles(function (theme) { return ({
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    checkbox: {
+        color: '#616161',
+        fontSize: theme.spacing(2),
+        marginRight: theme.spacing(-0.25),
+        padding: 'unset',
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideCheckbox: {
+        display: 'none',
+    },
+    root: {
+        margin: 0,
+        width: 'fill-available',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}); });
+var useLabelStyles = styles.makeStyles(function (theme) { return ({
+    label: {
+        margin: theme.spacing(0.5, 0),
+    },
+    disabled: {
+        color: theme.palette.grey[500],
+    },
+    price: {
+        color: theme.palette.grey[700],
+    },
+}); });
+var useOptionsStyles = styles.makeStyles(function (theme) { return ({
+    options: {
+        color: theme.palette.info.main,
+        marginBottom: theme.spacing(1.5),
+        padding: 0,
+    },
 }); });
 
-var useQuantityPickerStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        height: theme.spacing(7),
-        backgroundColor: 'none',
-    },
-}); });
-var useQuantityInputStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        height: '100%',
-        width: 'min-content',
-        borderRadius: theme.spacing(12.5),
-        background: function (props) { return (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]); },
-    },
-    input: {
-        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-            display: 'none',
-        },
-        '-moz-appearance': 'textfield',
-        fontWeight: 600,
-        padding: 0,
-        textAlign: 'center',
-        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
-        backgroundColor: function (props) { return (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'); },
-        alignSelf: function (props) { return (props.variation === 'modifierCount' ? 'stretch' : 'unset'); },
-        height: function (props) { return (props.variation === 'modifierCount' ? 'auto' : 'unset'); },
-        minWidth: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)); },
-        borderRadius: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'); },
-        margin: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0); },
-    },
-}); });
-var useStartAdornmentStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        color: theme.palette.text.primary,
-        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
-    },
-}); });
-var useEndAdornmentStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        color: theme.palette.text.primary,
-    },
+var useQuantityPickerStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        height: theme.spacing(7),
+        backgroundColor: 'none',
+    },
+}); });
+var useQuantityInputStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(12.5),
+        background: function (props) { return (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]); },
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        fontWeight: 600,
+        padding: 0,
+        textAlign: 'center',
+        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+        backgroundColor: function (props) { return (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'); },
+        alignSelf: function (props) { return (props.variation === 'modifierCount' ? 'stretch' : 'unset'); },
+        height: function (props) { return (props.variation === 'modifierCount' ? 'auto' : 'unset'); },
+        minWidth: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)); },
+        borderRadius: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'); },
+        margin: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0); },
+    },
+}); });
+var useStartAdornmentStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+    },
+}); });
+var useEndAdornmentStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+    },
 }); });
 
-var QuantityPicker = function (props) {
-    var value = props.value, onChange = props.onChange, disabled = props.disabled, disableIncrement = props.disableIncrement, preventManualChange = props.preventManualChange, variation = props.variation, name = props.name;
-    var fieldClasses = useQuantityPickerStyles();
-    var inputClasses = useQuantityInputStyles(props);
-    var startAdornmentClasses = useStartAdornmentStyles(props);
-    var endAdornmentClasses = useEndAdornmentStyles(props);
-    var onIncrement = function (event) {
-        onChange(event, { quantity: value + 1, reason: 'increment' });
-    };
-    var onDecrement = function (event) {
-        onChange(event, { quantity: value - 1, reason: 'decrement' });
-    };
-    var handleChange = function (event) {
-        if (preventManualChange) {
-            event.preventDefault();
-        }
-        if (!preventManualChange) {
-            onChange(event, { quantity: parseInt(event.target.value), reason: 'change' });
-        }
-    };
-    return (React__default['default'].createElement(core.TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, InputProps: {
-            classes: inputClasses,
-            disableUnderline: true,
-            endAdornment: (React__default['default'].createElement(IconButton, { "aria-label": "increase quantity " + name, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || disableIncrement },
-                React__default['default'].createElement(Icon, { icon: SvgPlusCircle }))),
-            startAdornment: (React__default['default'].createElement(IconButton, { "aria-label": "decrease quantity " + name, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= 0 },
-                React__default['default'].createElement(Icon, { icon: SvgMinusCircle }))),
-        } }));
+var QuantityPicker = function (props) {
+    var value = props.value, onChange = props.onChange, disabled = props.disabled, disableIncrement = props.disableIncrement, preventManualChange = props.preventManualChange, variation = props.variation, name = props.name;
+    var fieldClasses = useQuantityPickerStyles();
+    var inputClasses = useQuantityInputStyles(props);
+    var startAdornmentClasses = useStartAdornmentStyles(props);
+    var endAdornmentClasses = useEndAdornmentStyles(props);
+    var onIncrement = function (event) {
+        onChange(event, { quantity: value + 1, reason: 'increment' });
+    };
+    var onDecrement = function (event) {
+        onChange(event, { quantity: value - 1, reason: 'decrement' });
+    };
+    var handleChange = function (event) {
+        if (preventManualChange) {
+            event.preventDefault();
+        }
+        if (!preventManualChange) {
+            onChange(event, { quantity: parseInt(event.target.value), reason: 'change' });
+        }
+    };
+    return (React.createElement(core.TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, InputProps: {
+            classes: inputClasses,
+            disableUnderline: true,
+            endAdornment: (React.createElement(commonUi.IconButton, { "aria-label": "increase quantity " + name, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || disableIncrement },
+                React.createElement(commonUi.Icon, { icon: webIcons.PlusCircle }))),
+            startAdornment: (React.createElement(commonUi.IconButton, { "aria-label": "decrease quantity " + name, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= 0 },
+                React.createElement(commonUi.Icon, { icon: webIcons.MinusCircle }))),
+        } }));
 };
 
-var Label = function (props) {
-    var _a, _b, _c;
-    var name = props.name, price = props.price, _d = props.disabled, disabled = _d === void 0 ? false : _d;
-    var classes = useLabelStyles();
-    return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
-        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
-            React__default['default'].createElement(core.Typography, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
-        price && (React__default['default'].createElement(core.Typography, { className: classNames((_b = {}, _b[classes.price] = !disabled, _b), (_c = {}, _c[classes.disabled] = disabled, _c)) },
-            "+ ",
-            price))));
-};
-var Options = function (props) {
-    var handleOptionsClick = props.handleOptionsClick;
-    var classes = useOptionsStyles();
-    return (React__default['default'].createElement(core.Box, null,
-        React__default['default'].createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
-            React__default['default'].createElement(core.Typography, { variant: "caption" }, "OPTIONS"),
-            React__default['default'].createElement(Icon, { icon: SvgChevronRight }))));
-};
-var SingleSelectModifierControl = function (props) {
-    var modifiers = props.modifiers, name = props.name, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice, isRequired = props.isRequired;
-    var radioClasses = useRadioModifierFormStyles();
-    var makeHandleChange = function (modifier) { return function (e) {
-        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
-        if (!isModifierInValue && modifier.hasModifiers) {
-            handleOptionsClick(modifier.id);
-        }
-        onChange({
-            isRadio: true,
-            modifierId: Number(e.target.value),
-            groupId: modifier.parentModifierGroupId,
-            parentModifierId: modifier.parentModifierGroupItemId,
-            price: modifier.price || 0,
-            quantity: 1,
-        });
-    }; };
-    return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
-        React__default['default'].createElement(core.RadioGroup, { "aria-label": name }, modifiers.map(function (modifier) {
-            var _a;
-            var _b;
-            return (React__default['default'].createElement(core.Box, { key: modifier.id },
-                React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default['default'].createElement(core.Radio, { checked: ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.modifierId) === modifier.id, className: classNames((_a = {},
-                            _a[radioClasses.hideRadio] = modifier.outOfStock,
-                            _a[radioClasses.radio] = !modifier.outOfStock,
-                            _a)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React__default['default'].createElement(core.Box, { className: radioClasses.label },
-                        React__default['default'].createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
-                        modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
-                            React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                modifier.hasModifiers && !modifier.outOfStock && (React__default['default'].createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
-        }))));
-};
-var MultipleSelectControl = function (props) {
-    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice;
-    var classes = useCheckboxModifierFormStyles();
-    var makeHandleChange = function (modifier) { return function () {
-        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
-        if (!isModifierInValue && modifier.hasModifiers) {
-            handleOptionsClick(modifier.id);
-        }
-        onChange({
-            isRadio: false,
-            modifierId: modifier.id,
-            groupId: modifier.parentModifierGroupId,
-            parentModifierId: modifier.parentModifierGroupItemId,
-            price: modifier.price || 0,
-            quantity: isModifierInValue ? 0 : 1,
-        });
-    }; };
-    return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
-        React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) {
-            var _a, _b;
-            return (React__default['default'].createElement(core.Box, { key: modifier.id },
-                React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default['default'].createElement(core.Checkbox, { className: classNames((_a = {}, _a[classes.hideCheckbox] = modifier.outOfStock, _a), (_b = {}, _b[classes.checkbox] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default['default'].createElement(core.Box, { className: classes.label },
-                        React__default['default'].createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
-                        modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
-                            React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                modifier.hasModifiers && !modifier.outOfStock && (React__default['default'].createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
-        }))));
-};
-var MultipleQuantitySelectControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
-    var makeHandleChange = function (modifier) { return function (_e, customEvent) {
-        onChange({
-            isRadio: false,
-            modifierId: modifier.id,
-            groupId: modifier.parentModifierGroupId,
-            parentModifierId: modifier.parentModifierGroupItemId,
-            price: modifier.price || 0,
-            quantity: customEvent.quantity,
-        });
-    }; };
-    return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
-        React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React__default['default'].createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
-            React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
-                React__default['default'].createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
-                modifier.outOfStock && (React__default['default'].createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
-                    React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
-                !modifier.outOfStock && (React__default['default'].createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
-            React__default['default'].createElement(core.Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
-                modifier.hasModifiers && !modifier.outOfStock && (React__default['default'].createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } })),
-                selectionQuantity[modifier.id] &&
-                    selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
-                    selectionQuantity[modifier.id].requiredSelectionCount !==
-                        selectionQuantity[modifier.id].currentSelectionCount && (React__default['default'].createElement(core.Typography, { variant: "caption", color: "error" },
-                    selectionQuantity[modifier.id].currentSelectionCount,
-                    "/",
-                    selectionQuantity[modifier.id].requiredSelectionCount,
-                    " selected"))))); }))));
-};
-var ModifierControls = function (props) {
-    switch (props.type) {
-        case 'singleSelect':
-            return React__default['default'].createElement(SingleSelectModifierControl, __assign$1({}, props));
-        case 'multipleSelect':
-            return React__default['default'].createElement(MultipleSelectControl, __assign$1({}, props));
-        case 'multipleQuantitySelect':
-            return React__default['default'].createElement(MultipleQuantitySelectControl, __assign$1({}, props));
-        default:
-            return null;
-    }
+var Label = function (props) {
+    var _a, _b, _c;
+    var name = props.name, price = props.price, _d = props.disabled, disabled = _d === void 0 ? false : _d;
+    var classes = useLabelStyles();
+    return (React.createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
+        React.createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React.createElement(core.Typography, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
+        price && (React.createElement(core.Typography, { className: classNames((_b = {}, _b[classes.price] = !disabled, _b), (_c = {}, _c[classes.disabled] = disabled, _c)) },
+            "+ ",
+            price))));
+};
+var Options = function (props) {
+    var handleOptionsClick = props.handleOptionsClick;
+    var classes = useOptionsStyles();
+    return (React.createElement(core.Box, null,
+        React.createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
+            React.createElement(core.Typography, { variant: "caption" }, "OPTIONS"),
+            React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight }))));
+};
+var SingleSelectModifierControl = function (props) {
+    var modifiers = props.modifiers, name = props.name, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice, isRequired = props.isRequired;
+    var radioClasses = useRadioModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function (e) {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: true,
+            modifierId: Number(e.target.value),
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: 1,
+        });
+    }; };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.RadioGroup, { "aria-label": name }, modifiers.map(function (modifier) {
+            var _a;
+            var _b;
+            return (React.createElement(core.Box, { key: modifier.id },
+                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React.createElement(core.Radio, { checked: ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.modifierId) === modifier.id, className: classNames((_a = {},
+                            _a[radioClasses.hideRadio] = modifier.outOfStock,
+                            _a[radioClasses.radio] = !modifier.outOfStock,
+                            _a)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React.createElement(core.Box, { className: radioClasses.label },
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
+        }))));
+};
+var MultipleSelectControl = function (props) {
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice;
+    var classes = useCheckboxModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function () {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: isModifierInValue ? 0 : 1,
+        });
+    }; };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.FormGroup, null, modifiers.map(function (modifier) {
+            var _a, _b;
+            return (React.createElement(core.Box, { key: modifier.id },
+                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React.createElement(core.Checkbox, { className: classNames((_a = {}, _a[classes.hideCheckbox] = modifier.outOfStock, _a), (_b = {}, _b[classes.checkbox] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React.createElement(core.Box, { className: classes.label },
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
+        }))));
+};
+var MultipleQuantitySelectControl = function (props) {
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
+    var makeHandleChange = function (modifier) { return function (_e, customEvent) {
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: customEvent.quantity,
+        });
+    }; };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React.createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
+            React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                React.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                    React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
+                !modifier.outOfStock && (React.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
+            React.createElement(core.Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } })),
+                selectionQuantity[modifier.id] &&
+                    selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
+                    selectionQuantity[modifier.id].requiredSelectionCount !==
+                        selectionQuantity[modifier.id].currentSelectionCount && (React.createElement(core.Typography, { variant: "caption", color: "error" },
+                    selectionQuantity[modifier.id].currentSelectionCount,
+                    "/",
+                    selectionQuantity[modifier.id].requiredSelectionCount,
+                    " selected"))))); }))));
+};
+var ModifierControls = function (props) {
+    switch (props.type) {
+        case 'singleSelect':
+            return React.createElement(SingleSelectModifierControl, tslib.__assign({}, props));
+        case 'multipleSelect':
+            return React.createElement(MultipleSelectControl, tslib.__assign({}, props));
+        case 'multipleQuantitySelect':
+            return React.createElement(MultipleQuantitySelectControl, tslib.__assign({}, props));
+        default:
+            return null;
+    }
 };
 
-var getStatusTagProps = function (props) {
-    var messages = props.messages, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
-    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText;
-    var color = 'default';
-    switch (true) {
-        case error:
-            color = 'error';
-            break;
-        case isOutOfStock:
-            color = 'warning';
-            break;
-    }
-    var label = optionalText;
-    switch (true) {
-        case isOutOfStock:
-            label = outOfStockText;
-            break;
-        case isRequired:
-            label = requiredText;
-            break;
-    }
-    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
-    return { color: color, label: label, variant: variant };
-};
-var DishModifierCard = function (props) {
-    var _a;
-    var aggregatePrice = props.aggregatePrice, name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock, isRequired = props.isRequired, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
-    var classes = useDishModifierCardStyles();
-    return (React__default['default'].createElement(core.Box, { className: classes.root },
-        React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
-            React__default['default'].createElement(StatusTag, __assign$1({}, getStatusTagProps(props))),
-            !isOutOfStock && (React__default['default'].createElement(Typography, { variant: "subtitle1", className: classNames((_a = {}, _a[classes.error] = error, _a[classes.helperText] = !error, _a)) }, messages.helperText))),
-        React__default['default'].createElement(Typography, { className: classes.name }, name),
-        React__default['default'].createElement(core.Box, null,
-            React__default['default'].createElement(ModifierControls, { name: name, value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, isRequired: isRequired, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));
-};
+var getStatusTagProps = function (props) {
+    var messages = props.messages, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
+    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText;
+    var color = 'default';
+    switch (true) {
+        case error:
+            color = 'error';
+            break;
+        case isOutOfStock:
+            color = 'warning';
+            break;
+    }
+    var label = optionalText;
+    switch (true) {
+        case isOutOfStock:
+            label = outOfStockText;
+            break;
+        case isRequired:
+            label = requiredText;
+            break;
+    }
+    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color: color, label: label, variant: variant };
+};
+var DishModifierCard = function (props) {
+    var _a;
+    var aggregatePrice = props.aggregatePrice, name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock, isRequired = props.isRequired, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
+    var classes = useDishModifierCardStyles();
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
+            React.createElement(StatusTag, tslib.__assign({}, getStatusTagProps(props))),
+            !isOutOfStock && (React.createElement(commonUi.Typography, { variant: "subtitle1", className: classNames((_a = {}, _a[classes.error] = error, _a[classes.helperText] = !error, _a)) }, messages.helperText))),
+        React.createElement(commonUi.Typography, { className: classes.name }, name),
+        React.createElement(commonUi.Box, null,
+            React.createElement(ModifierControls, { name: name, value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, isRequired: isRequired, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));
+};
 DishModifierCard.displayName = 'DishModifierCard';
 
-var useLocationCardStyles = styles.makeStyles(function (theme) {
-    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, background = _a.background, spacing = theme.spacing;
-    var selectedBackgroundColor = styles.lighten(info.light, 0.9);
-    var backgroundColor = background.default;
-    return {
-        root: {
-            border: function (_a) {
-                var selected = _a.selected;
-                return selected ? "1px solid " + info.light : '1px solid var(--surfaces-card-stroke, #E0E0E0)';
-            },
-            display: 'flex',
-            borderRadius: '10px',
-            color: grey[900],
-            backgroundColor: function (_a) {
-                var selected = _a.selected, outOfRange = _a.outOfRange;
-                return selected ? selectedBackgroundColor : outOfRange ? grey[200] : backgroundColor;
-            },
-        },
-        actionAreaFocusHighlight: {
-            '&:disabled': {
-                backgroundColor: 'inherit',
-            },
-        },
-        availability: {
-            color: secondary.light,
-            display: 'grid',
-            gridGap: spacing(0.5),
-            gridTemplateColumns: 'auto 1fr',
-        },
-        availabilityMessage: {
-            gridColumn: '2 / 3',
-        },
-        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,
-        },
-        greyText: {
-            color: grey[800],
-        },
-    };
+var useLocationCardStyles = styles.makeStyles(function (theme) {
+    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, background = _a.background, spacing = theme.spacing;
+    var selectedBackgroundColor = styles.lighten(info.light, 0.9);
+    var backgroundColor = background.default;
+    return {
+        root: {
+            border: function (_a) {
+                var selected = _a.selected;
+                return selected ? "1px solid " + info.light : '1px solid var(--surfaces-card-stroke, #E0E0E0)';
+            },
+            display: 'flex',
+            borderRadius: '10px',
+            color: grey[900],
+            backgroundColor: function (_a) {
+                var selected = _a.selected, outOfRange = _a.outOfRange;
+                return selected ? selectedBackgroundColor : outOfRange ? grey[200] : backgroundColor;
+            },
+        },
+        actionAreaFocusHighlight: {
+            '&:disabled': {
+                backgroundColor: 'inherit',
+            },
+        },
+        availability: {
+            color: secondary.light,
+            display: 'grid',
+            gridGap: spacing(0.5),
+            gridTemplateColumns: 'auto 1fr',
+        },
+        availabilityMessage: {
+            gridColumn: '2 / 3',
+        },
+        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,
+        },
+        greyText: {
+            color: grey[800],
+        },
+    };
 });
 
-var LocationCard = function (props) {
-    var name = props.name, address = props.address, distance = props.distance, generalAvailability = props.generalAvailability, pickupAvailability = props.pickupAvailability, deliveryAvailability = props.deliveryAvailability, onClick = props.onClick, selected = props.selected, value = props.value, outOfRange = props.outOfRange, outOfRangeMessage = props.outOfRangeMessage, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "outOfRange", "outOfRangeMessage", "CardActionAreaProps"]);
-    var classes = useLocationCardStyles(props);
-    var anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
-    var handleClick = function () {
-        onClick(value);
-    };
-    return (React__default['default'].createElement(core.Card, __assign$1({ className: classes.root }, muiProps),
-        React__default['default'].createElement(core.CardActionArea, __assign$1({ onClick: handleClick, role: "radio", "aria-checked": selected, disabled: outOfRange || Boolean(anyAvailability), classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
-            React__default['default'].createElement(core.CardContent, { className: classes.content },
-                React__default['default'].createElement(core.Box, { className: classes.locationInfo },
-                    React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between" },
-                        React__default['default'].createElement(core.Typography, { className: classes.name }, name),
-                        selected && React__default['default'].createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    address && (React__default['default'].createElement(core.Typography, { className: classes.greyText, variant: "body2" }, address)),
-                    !outOfRange && React__default['default'].createElement(core.Typography, { className: classes.distance }, distance)),
-                anyAvailability && (React__default['default'].createElement(core.Box, { className: classes.availability },
-                    React__default['default'].createElement(Icon, { icon: SvgClock, size: "large" }),
-                    generalAvailability && (React__default['default'].createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
-                    pickupAvailability && (React__default['default'].createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
-                    deliveryAvailability && (React__default['default'].createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability)))),
-                outOfRange && (React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center", color: "grey.800" },
-                    React__default['default'].createElement(Icon, { icon: SvgInfo, size: "large", color: "inherit" }),
-                    React__default['default'].createElement(core.Typography, { variant: "body2", className: classes.greyText }, outOfRangeMessage)))))));
+var LocationCard = function (props) {
+    var name = props.name, address = props.address, distance = props.distance, generalAvailability = props.generalAvailability, pickupAvailability = props.pickupAvailability, deliveryAvailability = props.deliveryAvailability, onClick = props.onClick, selected = props.selected, value = props.value, outOfRange = props.outOfRange, outOfRangeMessage = props.outOfRangeMessage, CardActionAreaProps = props.CardActionAreaProps, muiProps = tslib.__rest(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "outOfRange", "outOfRangeMessage", "CardActionAreaProps"]);
+    var classes = useLocationCardStyles(props);
+    var anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
+    var handleClick = function () {
+        onClick(value);
+    };
+    return (React.createElement(core.Card, tslib.__assign({ className: classes.root }, muiProps),
+        React.createElement(core.CardActionArea, tslib.__assign({ onClick: handleClick, role: "radio", "aria-checked": selected, disabled: outOfRange || Boolean(anyAvailability), classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
+            React.createElement(core.CardContent, { className: classes.content },
+                React.createElement(core.Box, { className: classes.locationInfo },
+                    React.createElement(core.Box, { display: "flex", justifyContent: "space-between" },
+                        React.createElement(core.Typography, { className: classes.name }, name),
+                        selected && React.createElement(commonUi.Icon, { icon: webIcons.Check, size: "extra-large", className: classes.checkIcon })),
+                    address && (React.createElement(core.Typography, { className: classes.greyText, variant: "body2" }, address)),
+                    !outOfRange && React.createElement(core.Typography, { className: classes.distance }, distance)),
+                anyAvailability && (React.createElement(core.Box, { className: classes.availability },
+                    React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large" }),
+                    generalAvailability && (React.createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
+                    pickupAvailability && (React.createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
+                    deliveryAvailability && (React.createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability)))),
+                outOfRange && (React.createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center", color: "grey.800" },
+                    React.createElement(commonUi.Icon, { icon: webIcons.Info, size: "large", color: "inherit" }),
+                    React.createElement(core.Typography, { variant: "body2", className: classes.greyText }, outOfRangeMessage)))))));
 };
 
-var useMenuDropdownStyles = styles.makeStyles(function (theme) {
-    var _a, _b;
-    return ({
-        formControl: (_a = {},
-            _a[theme.breakpoints.up('lg')] = {
-                alignSelf: 'start',
-            },
-            _a),
-        menuItem: {
-            alignItems: 'center',
-            display: 'flex',
-            gridGap: theme.spacing(1),
-        },
-        select: {
-            '& .MuiSelect-root': (_b = {
-                    '&:focus': {
-                        outline: '2px solid #0076CB',
-                        borderRadius: 8,
-                    },
-                    color: '#212121',
-                    padding: theme.spacing(1, 0.5, 1, 0.5),
-                    zIndex: 10
-                },
-                _b[theme.breakpoints.down('md')] = {
-                    width: 0,
-                    minWidth: 0,
-                    padding: 0,
-                },
-                _b),
-        },
-        unavailable: {
-            color: theme.palette.grey[700],
-        },
-    });
+var useMenuDropdownStyles = styles.makeStyles(function (theme) {
+    var _a, _b;
+    return ({
+        formControl: (_a = {},
+            _a[theme.breakpoints.up('lg')] = {
+                alignSelf: 'start',
+            },
+            _a),
+        menuItem: {
+            alignItems: 'center',
+            display: 'flex',
+            gridGap: theme.spacing(1),
+        },
+        select: {
+            '& .MuiSelect-root': (_b = {
+                    '&:focus': {
+                        outline: '2px solid #0076CB',
+                        borderRadius: 8,
+                    },
+                    color: '#212121',
+                    padding: theme.spacing(1, 0.5, 1, 0.5),
+                    zIndex: 10
+                },
+                _b[theme.breakpoints.down('md')] = {
+                    width: 0,
+                    minWidth: 0,
+                    padding: 0,
+                },
+                _b),
+        },
+        unavailable: {
+            color: theme.palette.grey[700],
+        },
+    });
 });
 
-var MenuDropdown = function (props) {
-    var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
-    var classes = useMenuDropdownStyles(props);
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var isMobile = core.useMediaQuery(function (_a) {
-        var breakpoints = _a.breakpoints;
-        return breakpoints.down('md');
-    });
-    return (React__default['default'].createElement(core.FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
-        React__default['default'].createElement("label", { id: "menu-dropdown-label", className: "sr-only" }, props.label),
-        React__default['default'].createElement(core.Select, { SelectDisplayProps: { 'aria-labelledby': 'menu-dropdown-label' }, value: selectedOptionId, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, disableUnderline: true, onChange: function (event) { return onSelect(event.target.value); }, fullWidth: true, open: open, startAdornment: React__default['default'].createElement(core.InputAdornment, { position: "start", onClick: function () { return setOpen(true); } },
-                React__default['default'].createElement(Icon, { icon: SvgRestaurantMenu, size: isMobile ? 'extra-large' : 'large' })), IconComponent: function () { return (React__default['default'].createElement(core.InputAdornment, { position: "end", onClick: function () { return setOpen(true); } },
-                React__default['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, renderValue: function (selected) { var _a; return (_a = menuOptions.find(function (menuOption) { return menuOption.id === selected; })) === null || _a === void 0 ? void 0 : _a.name; } }, menuOptions.map(function (option, index) { return (React__default['default'].createElement(core.MenuItem, { key: index, value: option.id, className: classNames(classes.menuItem, option.isUnavailable ? classes.unavailable : '') },
-            option.name,
-            option.isUnavailable && React__default['default'].createElement(Icon, { icon: SvgClock, size: "large" }))); }))));
+var MenuDropdown = function (props) {
+    var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
+    var classes = useMenuDropdownStyles(props);
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var isMobile = core.useMediaQuery(function (_a) {
+        var breakpoints = _a.breakpoints;
+        return breakpoints.down('md');
+    });
+    return (React.createElement(core.FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
+        React.createElement("label", { id: "menu-dropdown-label", className: "sr-only" }, props.label),
+        React.createElement(core.Select, { SelectDisplayProps: { 'aria-labelledby': 'menu-dropdown-label' }, value: selectedOptionId, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, disableUnderline: true, onChange: function (event) { return onSelect(event.target.value); }, fullWidth: true, open: open, startAdornment: React.createElement(core.InputAdornment, { position: "start", onClick: function () { return setOpen(true); } },
+                React.createElement(commonUi.Icon, { icon: webIcons.RestaurantMenu, size: isMobile ? 'extra-large' : 'large' })), IconComponent: function () { return (React.createElement(core.InputAdornment, { position: "end", onClick: function () { return setOpen(true); } },
+                React.createElement(commonUi.Icon, { color: "#0076CB", icon: open ? webIcons.ChevronUp : webIcons.ChevronDown, size: "large" }))); }, MenuProps: {
+                disablePortal: true,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                },
+                getContentAnchorEl: null,
+            }, className: classes.select, renderValue: function (selected) { var _a; return (_a = menuOptions.find(function (menuOption) { return menuOption.id === selected; })) === null || _a === void 0 ? void 0 : _a.name; } }, menuOptions.map(function (option, index) { return (React.createElement(core.MenuItem, { key: index, value: option.id, className: classNames(classes.menuItem, option.isUnavailable ? classes.unavailable : '') },
+            option.name,
+            option.isUnavailable && React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large" }))); }))));
 };
 
-var useMenuFilterStyles = styles.makeStyles(function (theme) { return ({
-    triggerLabel: {
-        color: theme.palette.info.main,
-        whiteSpace: 'nowrap',
-    },
+var useMenuFilterStyles = styles.makeStyles(function (theme) { return ({
+    triggerLabel: {
+        color: theme.palette.info.main,
+        whiteSpace: 'nowrap',
+    },
 }); });
 
 var _path;
@@ -2250,500 +1044,500 @@ function SvgLeafIcon(props) {
   })));
 }
 
-var MenuFilter = function (props) {
-    var options = props.options, onChange = props.onChange, onClear = props.onClear, value = props.value, _a = props.triggerLabel, triggerLabel = _a === void 0 ? 'Add Filter' : _a, _b = props.noOptionsLabel, noOptionsLabel = _b === void 0 ? 'Reset Filters' : _b;
-    var triggerId = 'menu-filter-trigger';
-    var popoverId = 'menu-filter-popover';
-    var classes = useMenuFilterStyles();
-    var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
-    var open = Boolean(anchorEl);
-    var optionIds = options.map(function (opt) { return opt.id; });
-    var valueIds = value.map(function (val) { return val.id; });
-    var availableIds = optionIds.filter(function (optionId) { return !valueIds.includes(optionId); });
-    var availableFilters = options.filter(function (opt) { return availableIds.includes(opt.id); });
-    var allFiltersSelected = availableFilters.length === 0;
-    var handleChange = function (value, event) {
-        onChange(value, event);
-        setAnchorEl(null);
-    };
-    var handleTriggerClick = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
-    var handleClose = function () {
-        setAnchorEl(null);
-    };
-    var handleClear = function () {
-        onClear();
-        setAnchorEl(null);
-    };
-    if (allFiltersSelected) {
-        return (React__default['default'].createElement(core.Button, { size: "small", startIcon: React__default['default'].createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel }, onClick: handleClear }, noOptionsLabel));
-    }
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(core.Button, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React__default['default'].createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel } }, triggerLabel),
-        React__default['default'].createElement(core.Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose }, availableFilters.map(function (option, index) {
-            return (React__default['default'].createElement(core.MenuItem, { key: index, value: option.id, onClick: function (event) { return handleChange(option, event); } },
-                React__default['default'].createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
-                React__default['default'].createElement(core.Box, { ml: 1 }, option.name)));
-        }))));
+var MenuFilter = function (props) {
+    var options = props.options, onChange = props.onChange, onClear = props.onClear, value = props.value, _a = props.triggerLabel, triggerLabel = _a === void 0 ? 'Add Filter' : _a, _b = props.noOptionsLabel, noOptionsLabel = _b === void 0 ? 'Reset Filters' : _b;
+    var triggerId = 'menu-filter-trigger';
+    var popoverId = 'menu-filter-popover';
+    var classes = useMenuFilterStyles();
+    var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
+    var open = Boolean(anchorEl);
+    var optionIds = options.map(function (opt) { return opt.id; });
+    var valueIds = value.map(function (val) { return val.id; });
+    var availableIds = optionIds.filter(function (optionId) { return !valueIds.includes(optionId); });
+    var availableFilters = options.filter(function (opt) { return availableIds.includes(opt.id); });
+    var allFiltersSelected = availableFilters.length === 0;
+    var handleChange = function (value, event) {
+        onChange(value, event);
+        setAnchorEl(null);
+    };
+    var handleTriggerClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var handleClear = function () {
+        onClear();
+        setAnchorEl(null);
+    };
+    if (allFiltersSelected) {
+        return (React.createElement(core.Button, { size: "small", startIcon: React.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel }, onClick: handleClear }, noOptionsLabel));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(core.Button, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel } }, triggerLabel),
+        React.createElement(core.Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose }, availableFilters.map(function (option, index) {
+            return (React.createElement(core.MenuItem, { key: index, value: option.id, onClick: function (event) { return handleChange(option, event); } },
+                React.createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
+                React.createElement(core.Box, { ml: 1 }, option.name)));
+        }))));
 };
 
-var useSelectableChipStyles = styles.makeStyles(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',
-        fontWeight: 400,
-        minWidth: 'unset',
-        minHeight: 'unset',
-        opacity: 'unset',
-        textTransform: 'none',
-        textAlign: 'left',
-        '&::-webkit-scrollbar': {
-            display: 'none',
-        },
-        '&.Mui-selected': {
-            backgroundColor: theme.palette.grey[100],
-            borderColor: '#0A202F',
-            color: theme.palette.grey[900],
-            fontWeight: 400,
-            '&:hover': {
-                background: theme.palette.grey[100],
-            },
-        },
-    },
+var useSelectableChipStyles = styles.makeStyles(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',
+        fontWeight: 400,
+        minWidth: 'unset',
+        minHeight: 'unset',
+        opacity: 'unset',
+        textTransform: 'none',
+        textAlign: 'left',
+        '&::-webkit-scrollbar': {
+            display: 'none',
+        },
+        '&.Mui-selected': {
+            backgroundColor: theme.palette.grey[100],
+            borderColor: '#0A202F',
+            color: theme.palette.grey[900],
+            fontWeight: 400,
+            '&:hover': {
+                background: theme.palette.grey[100],
+            },
+        },
+    },
 }); });
 
-var SelectableChip = function (props) {
-    var classes = useSelectableChipStyles(props);
-    return (React__default['default'].createElement(Tab__default['default'], __assign$1({ "data-tab-for-section-id": props.value, classes: {
-            root: classes.root,
-            selected: classes.selected,
-        } }, props)));
+var SelectableChip = function (props) {
+    var classes = useSelectableChipStyles(props);
+    return (React.createElement(Tab, tslib.__assign({ "data-tab-for-section-id": props.value, classes: {
+            root: classes.root,
+            selected: classes.selected,
+        } }, props)));
 };
 
-var useSelectableChipGroupStyles = styles.makeStyles(function (_a) {
-    var _b;
-    var breakpoints = _a.breakpoints, spacing = _a.spacing;
-    return ({
-        flexContainer: (_b = {},
-            _b[breakpoints.down('md')] = {
-                padding: spacing(0, 2),
-            },
-            _b[breakpoints.up('lg')] = {
-                alignItems: 'flex-start',
-                flexDirection: 'column',
-            },
-            _b.gridGap = spacing(1.5),
-            _b),
-    });
+var useSelectableChipGroupStyles = styles.makeStyles(function (_a) {
+    var _b;
+    var breakpoints = _a.breakpoints, spacing = _a.spacing;
+    return ({
+        flexContainer: (_b = {},
+            _b[breakpoints.down('md')] = {
+                padding: spacing(0, 2),
+            },
+            _b[breakpoints.up('lg')] = {
+                alignItems: 'flex-start',
+                flexDirection: 'column',
+            },
+            _b.gridGap = spacing(1.5),
+            _b),
+    });
 });
 
-var SelectableChipGroup = function (props) {
-    var children = props.children, muiProps = __rest$1(props, ["children"]);
-    var classes = useSelectableChipGroupStyles(props);
-    return (React__default['default'].createElement(core.Tabs, __assign$1({ TabIndicatorProps: {
-            hidden: true,
-        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps), children));
+var SelectableChipGroup = function (props) {
+    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
+    var classes = useSelectableChipGroupStyles(props);
+    return (React.createElement(core.Tabs, tslib.__assign({ TabIndicatorProps: {
+            hidden: true,
+        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps), children));
 };
 
-var useStyles$4 = core.makeStyles(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            padding: spacing(0.5, 0),
-            height: 'unset',
-            borderRadius: 4,
-        },
-        label: {
-            paddingLeft: 8,
-            display: 'flex',
-            gridGap: 8,
-            alignItems: 'center',
-        },
-    });
-});
-var SelectedMenuFiltersList = function (props) {
-    var filters = props.filters, onChipClick = props.onChipClick;
-    var classes = useStyles$4();
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, filters.map(function (filter, index) { return (React__default['default'].createElement(core.Chip, { key: filter.name + "-" + index, classes: classes, onClick: function (event) { return onChipClick(filter, event); }, label: React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
-            React__default['default'].createElement(core.Typography, { variant: "caption" }, filter.name),
-            React__default['default'].createElement(Icon, { icon: SvgXCircle, size: "large" })) })); })));
+var useStyles$4 = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            padding: spacing(0.5, 0),
+            height: 'unset',
+            borderRadius: 4,
+        },
+        label: {
+            paddingLeft: 8,
+            display: 'flex',
+            gridGap: 8,
+            alignItems: 'center',
+        },
+    });
+});
+var SelectedMenuFiltersList = function (props) {
+    var filters = props.filters, onChipClick = props.onChipClick;
+    var classes = useStyles$4();
+    return (React.createElement(React.Fragment, null, filters.map(function (filter, index) { return (React.createElement(core.Chip, { key: filter.name + "-" + index, classes: classes, onClick: function (event) { return onChipClick(filter, event); }, label: React.createElement(React.Fragment, null,
+            React.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
+            React.createElement(core.Typography, { variant: "caption" }, filter.name),
+            React.createElement(commonUi.Icon, { icon: webIcons.XCircle, size: "large" })) })); })));
 };
 
-var MenuSectionGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", flexDirection: "column", gridGap: 40, marginBottom: 4 }, restProps, { ref: ref }, { "data-component-type": "menu-section-group" }), children));
-});
+var MenuSectionGroup = React.forwardRef(function (props, ref) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(core.Box, tslib.__assign({ display: "flex", flexDirection: "column", gridGap: 40, marginBottom: 4 }, restProps, { ref: ref }, { "data-component-type": "menu-section-group" }), children));
+});
 MenuSectionGroup.displayName = 'MenuSectionGroup';
 
-var useStyles$3 = core.makeStyles(function () { return ({
-    title: {
-        fontWeight: 400,
-        fontSize: 20,
-        lineHeight: '30px',
-    },
+var useStyles$3 = core.makeStyles(function () { return ({
+    title: {
+        fontWeight: 400,
+        fontSize: 20,
+        lineHeight: '30px',
+    },
 }); });
 
-var MenuSection = React.forwardRef(function (props, ref) {
-    var name = props.name, children = props.children, loading = props.loading, restProps = __rest$1(props, ["name", "children", "loading"]);
-    var classes = useStyles$3();
-    return (React__default['default'].createElement(core.Box, __assign$1({}, restProps, { ref: ref, component: 'section' }, { "data-component-type": "menu-section", style: { scrollMarginTop: '70px' } }),
-        React__default['default'].createElement(core.Box, { marginTop: 1, marginBottom: 4 },
-            React__default['default'].createElement(core.Typography, { component: "h1", className: classes.title }, loading ? React__default['default'].createElement(lab.Skeleton, null) : name)),
-        children));
-});
+var MenuSection = React.forwardRef(function (props, ref) {
+    var name = props.name, children = props.children, loading = props.loading, restProps = tslib.__rest(props, ["name", "children", "loading"]);
+    var classes = useStyles$3();
+    return (React.createElement(core.Box, tslib.__assign({}, restProps, { ref: ref, component: 'section' }, { "data-component-type": "menu-section", style: { scrollMarginTop: '70px' } }),
+        React.createElement(core.Box, { marginTop: 1, marginBottom: 4 },
+            React.createElement(core.Typography, { component: "h1", className: classes.title }, loading ? React.createElement(lab.Skeleton, null) : name)),
+        children));
+});
 MenuSection.displayName = 'MenuSection';
 
-var useStyles$2 = core.makeStyles(function (_a) {
-    var _b;
-    var breakpoints = _a.breakpoints;
-    return ({
-        main: (_b = {},
-            _b[breakpoints.down('md')] = {
-                gridTemplateColumns: '1fr',
-            },
-            _b[breakpoints.up('lg')] = {
-                gridTemplateColumns: 'repeat(2, minmax(280px, 1fr))',
-            },
-            _b.display = 'grid',
-            _b.gridGap = 32,
-            _b),
-    });
+var useStyles$2 = core.makeStyles(function (_a) {
+    var _b;
+    var breakpoints = _a.breakpoints;
+    return ({
+        main: (_b = {},
+            _b[breakpoints.down('md')] = {
+                gridTemplateColumns: '1fr',
+            },
+            _b[breakpoints.up('lg')] = {
+                gridTemplateColumns: 'repeat(2, minmax(280px, 1fr))',
+            },
+            _b.display = 'grid',
+            _b.gridGap = 32,
+            _b),
+    });
 });
 
-var MenuItemGroup = React.forwardRef(function (props, ref) {
-    var classes = useStyles$2();
-    props.children; var className = props.className, restProps = __rest$1(props, ["children", "className"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ className: classNames(classes.main, className) }, { ref: ref }, { "data-component-type": "menu-item-group" }, restProps), props.children));
-});
+var MenuItemGroup = React.forwardRef(function (props, ref) {
+    var classes = useStyles$2();
+    props.children; var className = props.className, restProps = tslib.__rest(props, ["children", "className"]);
+    return (React.createElement(core.Box, tslib.__assign({ className: classNames(classes.main, className) }, { ref: ref }, { "data-component-type": "menu-item-group" }, restProps), props.children));
+});
 MenuItemGroup.displayName = 'MenuItemGroup';
 
-var PageSection = function (props) { return (React__default['default'].createElement(core.Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
-
-var useStyles$1 = core.makeStyles(function () { return ({
-    closeButton: {
-        padding: 0,
-    },
-}); });
-var DialogTitle = function (props) {
-    var Icon = props.Icon, title = props.title, titleId = props.titleId, onClose = props.onClose;
-    var classes = useStyles$1();
-    return (React__default['default'].createElement(core.DialogTitle, null,
-        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 16 },
-            Icon && Icon,
-            React__default['default'].createElement(core.Typography, { variant: "h1", id: titleId }, title)),
-        onClose && (React__default['default'].createElement(core.IconButton, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
-            React__default['default'].createElement(SvgX, null)))));
+var PageSection = function (props) { return (React.createElement(core.Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
+
+var useStyles$1 = core.makeStyles(function () { return ({
+    closeButton: {
+        padding: 0,
+    },
+}); });
+var DialogTitle = function (props) {
+    var Icon = props.Icon, title = props.title, titleId = props.titleId, onClose = props.onClose;
+    var classes = useStyles$1();
+    return (React.createElement(core.DialogTitle, null,
+        React.createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 16 },
+            Icon && Icon,
+            React.createElement(core.Typography, { variant: "h1", id: titleId }, title)),
+        onClose && (React.createElement(core.IconButton, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
+            React.createElement(webIcons.X, null)))));
 };
 
-var DialogSection = function (props) {
-    var edgeToEdge = props.edgeToEdge, borderBottom = props.borderBottom, children = props.children, restProps = __rest$1(props, ["edgeToEdge", "borderBottom", "children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ paddingTop: 4, paddingBottom: borderBottom ? 4 : 0, paddingX: edgeToEdge ? 0 : 2, borderBottom: borderBottom ? '1px solid #E0E0E0' : undefined }, restProps), children));
+var DialogSection = function (props) {
+    var edgeToEdge = props.edgeToEdge, borderBottom = props.borderBottom, children = props.children, restProps = tslib.__rest(props, ["edgeToEdge", "borderBottom", "children"]);
+    return (React.createElement(core.Box, tslib.__assign({ paddingTop: 4, paddingBottom: borderBottom ? 4 : 0, paddingX: edgeToEdge ? 0 : 2, borderBottom: borderBottom ? '1px solid #E0E0E0' : undefined }, restProps), children));
 };
 
-var Switch = core.withStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        checked: {
-            '& $thumb': {
-                backgroundColor: palette.success.main,
-            },
-            '&& + $track': {
-                backgroundColor: palette.success.main,
-                opacity: 0.5,
-            },
-        },
-        switchBase: {
-            color: palette.grey[300],
-        },
-        thumb: {},
-        track: {},
-    });
+var Switch = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {
+            '& $thumb': {
+                backgroundColor: palette.success.main,
+            },
+            '&& + $track': {
+                backgroundColor: palette.success.main,
+                opacity: 0.5,
+            },
+        },
+        switchBase: {
+            color: palette.grey[300],
+        },
+        thumb: {},
+        track: {},
+    });
 })(core.Switch);
 
-var Checkbox = core.withStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        checked: {},
-        root: {
-            '&$checked': {
-                color: palette.info.main,
-            },
-        },
-    });
+var Checkbox = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {},
+        root: {
+            '&$checked': {
+                color: palette.info.main,
+            },
+        },
+    });
 })(core.Checkbox);
 
-var Radio = core.withStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        checked: {},
-        root: {
-            '&$checked': {
-                color: palette.info.main,
-            },
-        },
-    });
+var Radio = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {},
+        root: {
+            '&$checked': {
+                color: palette.info.main,
+            },
+        },
+    });
 })(core.Radio);
 
-var useStyles = core.makeStyles(function (theme) { return ({
-    root: {
-        '& > div': {
-            padding: 0,
-            '&:last-child': {
-                padding: 0,
-            },
-        },
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-        gridGap: theme.spacing(1),
-        padding: theme.spacing(2),
-        borderRadius: theme.spacing(2),
-    },
-    button: {
-        color: theme.palette.info.main,
-    },
-    description: {
-        color: theme.palette.grey[700],
-    },
-    header: {
-        color: function (props) {
-            return ({
-                alert: theme.palette.error.main,
-                info: theme.palette.info.main,
-                offer: theme.palette.success.main,
-            }[props.type]);
-        },
-    },
-    headerTitle: {
-        color: function (props) {
-            return ({
-                alert: theme.palette.error.main,
-                info: theme.palette.info.main,
-                offer: theme.palette.success.main,
-            }[props.type]);
-        },
-        fontWeight: 600,
-    },
-    content: {
-        marginLeft: theme.spacing(5),
-    },
+var useStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        '& > div': {
+            padding: 0,
+            '&:last-child': {
+                padding: 0,
+            },
+        },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        gridGap: theme.spacing(1),
+        padding: theme.spacing(2),
+        borderRadius: theme.spacing(2),
+    },
+    button: {
+        color: theme.palette.info.main,
+    },
+    description: {
+        color: theme.palette.grey[700],
+    },
+    header: {
+        color: function (props) {
+            return ({
+                alert: theme.palette.error.main,
+                info: theme.palette.info.main,
+                offer: theme.palette.success.main,
+            }[props.type]);
+        },
+    },
+    headerTitle: {
+        color: function (props) {
+            return ({
+                alert: theme.palette.error.main,
+                info: theme.palette.info.main,
+                offer: theme.palette.success.main,
+            }[props.type]);
+        },
+        fontWeight: 600,
+    },
+    content: {
+        marginLeft: theme.spacing(5),
+    },
 }); });
 
-var bannerIconStyles = { color: 'inherit', width: 24, height: 24 };
-var BannerTypeIcons = {
-    // @ts-expect-error style prop works
-    alert: React__default['default'].createElement(SvgWarning, { style: bannerIconStyles }),
-    // @ts-expect-error style prop works
-    info: React__default['default'].createElement(SvgInfo, { style: bannerIconStyles }),
-    // @ts-expect-error style prop works
-    offer: React__default['default'].createElement(SvgDollarSign, { style: bannerIconStyles }),
+var bannerIconStyles = { color: 'inherit', width: 24, height: 24 };
+var BannerTypeIcons = {
+    // @ts-expect-error style prop works
+    alert: React.createElement(webIcons.Warning, { style: bannerIconStyles }),
+    // @ts-expect-error style prop works
+    info: React.createElement(webIcons.Info, { style: bannerIconStyles }),
+    // @ts-expect-error style prop works
+    offer: React.createElement(webIcons.DollarSign, { style: bannerIconStyles }),
 };
 
-var MenuBanner = function (props) {
-    var show = props.show;
-    var classes = useStyles(props);
-    if (!show)
-        return null;
-    return (React__default['default'].createElement(core.Card, { classes: { root: classes.root }, variant: "outlined" },
-        React__default['default'].createElement(core.CardHeader, { avatar: BannerTypeIcons[props.type], title: props.title, titleTypographyProps: { variant: 'body1' }, classes: { root: classes.header, title: classes.headerTitle } }),
-        React__default['default'].createElement(MenuBannerDescription, __assign$1({}, props)),
-        React__default['default'].createElement(MenuBannerButton, __assign$1({}, props))));
-};
-function MenuBannerDescription(props) {
-    var classes = useStyles(props);
-    var description = props.description;
-    if (!description)
-        return null;
-    return (React__default['default'].createElement(core.CardContent, { classes: { root: classes.content } },
-        React__default['default'].createElement(core.Typography, { className: classes.description, variant: "body2" }, props.description)));
-}
-function MenuBannerButton(props) {
-    var classes = useStyles(props);
-    if (!props.buttonLabel)
-        return null;
-    return (React__default['default'].createElement(core.CardContent, { classes: { root: classes.content } },
-        React__default['default'].createElement(core.Link, __assign$1({}, { component: 'button', variant: 'body2', className: classes.button }, props.ButtonProps), props.buttonLabel)));
+var MenuBanner = function (props) {
+    var show = props.show;
+    var classes = useStyles(props);
+    if (!show)
+        return null;
+    return (React.createElement(core.Card, { classes: { root: classes.root }, variant: "outlined" },
+        React.createElement(core.CardHeader, { avatar: BannerTypeIcons[props.type], title: props.title, titleTypographyProps: { variant: 'body1' }, classes: { root: classes.header, title: classes.headerTitle } }),
+        React.createElement(MenuBannerDescription, tslib.__assign({}, props)),
+        React.createElement(MenuBannerButton, tslib.__assign({}, props))));
+};
+function MenuBannerDescription(props) {
+    var classes = useStyles(props);
+    var description = props.description;
+    if (!description)
+        return null;
+    return (React.createElement(core.CardContent, { classes: { root: classes.content } },
+        React.createElement(core.Typography, { className: classes.description, variant: "body2" }, props.description)));
+}
+function MenuBannerButton(props) {
+    var classes = useStyles(props);
+    if (!props.buttonLabel)
+        return null;
+    return (React.createElement(core.CardContent, { classes: { root: classes.content } },
+        React.createElement(core.Link, tslib.__assign({}, { component: 'button', variant: 'body2', className: classes.button }, props.ButtonProps), props.buttonLabel)));
 }
 
-var palette = {
-    primary: {
-        main: '#0A202F',
-    },
-    info: {
-        light: '#52B7FF',
-        main: '#0076CB',
-        dark: '#164B54',
-    },
-    success: {
-        light: '#48D3AB',
-        main: '#00B485',
-        dark: '#00663E',
-        contrastText: '#FFFFFF',
-    },
-    error: {
-        light: '#DA777E',
-        main: '#E52021',
-        dark: '#A80005',
-    },
-    warning: {
-        light: '#F0DFBA',
-        main: '#F5C364',
-        dark: '#E57E45',
-    },
+var palette = {
+    primary: {
+        main: '#0A202F',
+    },
+    info: {
+        light: '#52B7FF',
+        main: '#0076CB',
+        dark: '#164B54',
+    },
+    success: {
+        light: '#48D3AB',
+        main: '#00B485',
+        dark: '#00663E',
+        contrastText: '#FFFFFF',
+    },
+    error: {
+        light: '#DA777E',
+        main: '#E52021',
+        dark: '#A80005',
+    },
+    warning: {
+        light: '#F0DFBA',
+        main: '#F5C364',
+        dark: '#E57E45',
+    },
 };
 
-var overrides = {
-    MuiButton: {
-        root: {
-            borderRadius: 32,
-            textTransform: 'none',
-            padding: '18px 16px',
-        },
-        outlined: {},
-        textPrimary: {
-            color: '#0076CB',
-        },
-    },
-    MuiDialogTitle: {
-        root: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            borderBottom: '1px solid #E0E0E0',
-        },
-    },
-    MuiDialogContent: {
-        root: {
-            '&:first-child': {
-                paddingTop: 0,
-            },
-            paddingTop: 0,
-            paddingRight: 0,
-            paddingLeft: 0,
-            display: 'flex',
-            flexDirection: 'column',
-        },
-    },
-    MuiDialogActions: {
-        root: {
-            padding: 16,
-            boxShadow: '-4px 0px 8px 0px #0000001A',
-        },
-    },
-    MuiDialog: {
-        paper: {
-            minWidth: 500,
-        },
-        paperWidthMd: {
-            minWidth: 640,
-        },
-        paperFullScreen: {
-            minWidth: 'unset',
-        },
-    },
-    MuiCssBaseline: {
-        '@global': {
-            '*:focus-visible, a:focus-visible': {
-                '&': {
-                    outline: '2px solid #0076CB !important',
-                    outlineOffset: -4,
-                    borderRadius: 8,
-                },
-            },
-            'sr-only': {
-                position: 'absolute',
-                width: 1,
-                height: 1,
-                padding: 0,
-                margin: -1,
-                overflow: 'hidden',
-                clip: 'rect(0, 0, 0, 0)',
-                whiteSpace: 'nowrap',
-                borderWidth: 0,
-            },
-        },
-    },
+var overrides = {
+    MuiButton: {
+        root: {
+            borderRadius: 32,
+            textTransform: 'none',
+            padding: '18px 16px',
+        },
+        outlined: {},
+        textPrimary: {
+            color: '#0076CB',
+        },
+    },
+    MuiDialogTitle: {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderBottom: '1px solid #E0E0E0',
+        },
+    },
+    MuiDialogContent: {
+        root: {
+            '&:first-child': {
+                paddingTop: 0,
+            },
+            paddingTop: 0,
+            paddingRight: 0,
+            paddingLeft: 0,
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    },
+    MuiDialogActions: {
+        root: {
+            padding: 16,
+            boxShadow: '-4px 0px 8px 0px #0000001A',
+        },
+    },
+    MuiDialog: {
+        paper: {
+            minWidth: 500,
+        },
+        paperWidthMd: {
+            minWidth: 640,
+        },
+        paperFullScreen: {
+            minWidth: 'unset',
+        },
+    },
+    MuiCssBaseline: {
+        '@global': {
+            '*:focus-visible, a:focus-visible': {
+                '&': {
+                    outline: '2px solid #0076CB !important',
+                    outlineOffset: -4,
+                    borderRadius: 8,
+                },
+            },
+            'sr-only': {
+                position: 'absolute',
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                borderWidth: 0,
+            },
+        },
+    },
 };
 
-var props = {
-    MuiButton: {
-        disableElevation: true,
-    },
-    MuiDialogTitle: {
-        disableTypography: true,
-    },
+var props = {
+    MuiButton: {
+        disableElevation: true,
+    },
+    MuiDialogTitle: {
+        disableTypography: true,
+    },
 };
 
-var fonts = ['"Poppins"', '"sans-serif"'];
-var typography = {
-    htmlFontSize: 16,
-    fontFamily: fonts.join(', '),
-    h1: {
-        fontWeight: 500,
-        fontSize: '1.5rem',
-        lineHeight: '100%',
-    },
-    h2: {
-        fontWeight: 600,
-        fontSize: '1.25rem',
-        lineHeight: '100%',
-    },
-    h3: {
-        fontWeight: 500,
-        fontSize: '1.25rem',
-        lineHeight: '1.875rem',
-    },
-    h4: {
-        fontWeight: 500,
-        fontSize: '1.25rem',
-        lineHeight: '1.875rem',
-    },
-    h5: {
-        fontWeight: 500,
-        fontSize: '1.25rem',
-        lineHeight: '1.875rem',
-    },
-    h6: {
-        fontWeight: 500,
-        fontSize: '1.25rem',
-        lineHeight: '1.875rem',
-    },
-    body1: {
-        fontWeight: 400,
-        fontSize: '1rem',
-        lineHeight: '1.5rem',
-    },
-    body2: {
-        fontWeight: 400,
-        fontSize: '0.875rem',
-        lineHeight: '1.25rem',
-    },
-    subtitle1: {
-        fontWeight: 400,
-        fontSize: '0.75rem',
-        lineHeight: '1.125rem',
-        color: '#9E9E9E',
-    },
-    button: {
-        fontWeight: 500,
-        fontSize: '0.875rem',
-        lineHeight: '1.25rem',
-        textTransform: 'capitalize',
-    },
+var fonts = ['"Poppins"', '"sans-serif"'];
+var typography = {
+    htmlFontSize: 16,
+    fontFamily: fonts.join(', '),
+    h1: {
+        fontWeight: 500,
+        fontSize: '1.5rem',
+        lineHeight: '100%',
+    },
+    h2: {
+        fontWeight: 600,
+        fontSize: '1.25rem',
+        lineHeight: '100%',
+    },
+    h3: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    h4: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    h5: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    h6: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    body1: {
+        fontWeight: 400,
+        fontSize: '1rem',
+        lineHeight: '1.5rem',
+    },
+    body2: {
+        fontWeight: 400,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+    },
+    subtitle1: {
+        fontWeight: 400,
+        fontSize: '0.75rem',
+        lineHeight: '1.125rem',
+        color: '#9E9E9E',
+    },
+    button: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        textTransform: 'capitalize',
+    },
 };
 
-var orderingTheme = {
-    typography: typography,
-    palette: palette,
-    overrides: overrides,
-    props: props,
+var orderingTheme = {
+    typography: typography,
+    palette: palette,
+    overrides: overrides,
+    props: props,
 };
 
 exports.Button = Button;
@@ -2778,11 +1572,9 @@ exports.Switch = Switch;
 exports.orderingTheme = orderingTheme;
 exports.useOrderingAppContext = useOrderingAppContext;
 Object.keys(core).forEach(function (k) {
-    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,
-        get: function () {
-            return core[k];
-        }
+        get: function () { return core[k]; }
     });
 });
 //# sourceMappingURL=index.js.map