@popmenu/ordering-ui 0.126.0 → 0.126.2

package/build/index.es.js

@@ -1,2713 +0,0 @@
-import { Button as Button$1, makeStyles as makeStyles$1, Box, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Avatar as Avatar$1, Card, CardActionArea, FormControl, Select, InputAdornment, MenuItem as MenuItem$1, TextField, RadioGroup, FormControlLabel as FormControlLabel$1, Radio as Radio$2, FormGroup, Checkbox as Checkbox$2, CardContent, useMediaQuery, Menu, Tabs, Chip, DialogTitle as DialogTitle$1, IconButton as IconButton$1, withStyles, Switch as Switch$2, CardHeader } from '@material-ui/core';
-export * from '@material-ui/core';
-import * as React from 'react';
-import React__default, { forwardRef, createContext, createElement, useContext, useState } from 'react';
-import { makeStyles, lighten } from '@material-ui/core/styles';
-import '@material-ui/lab/Alert';
-import '@material-ui/core/AppBar';
-import MuiAvatar from '@material-ui/core/Avatar';
-import '@material-ui/core/Badge';
-import '@material-ui/core/Button';
-import '@material-ui/core/CircularProgress';
-import '@material-ui/core/ButtonGroup';
-import '@material-ui/core/Card';
-import '@material-ui/core/CardActionArea';
-import '@material-ui/core/CardActions';
-import '@material-ui/core/CardContent';
-import '@material-ui/core/CardHeader';
-import '@material-ui/core/CardMedia';
-import MuiCheckbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import '@material-ui/core/Chip';
-import '@material-ui/core/Collapse';
-import '@material-ui/core/Dialog';
-import '@material-ui/core/DialogActions';
-import '@material-ui/core/DialogContent';
-import '@material-ui/core/DialogTitle';
-import '@material-ui/core/Drawer';
-import '@material-ui/core/FormControl';
-import '@material-ui/core/Grid';
-import MuiIconButton from '@material-ui/core/IconButton';
-import '@material-ui/core/InputAdornment';
-import '@material-ui/core/LinearProgress';
-import '@material-ui/core/List';
-import '@material-ui/core/ListItem';
-import '@material-ui/core/ListItemAvatar';
-import '@material-ui/core/ListItemIcon';
-import '@material-ui/core/ListItemSecondaryAction';
-import '@material-ui/core/ListItemText';
-import '@material-ui/core/Menu';
-import '@material-ui/core/MenuItem';
-import '@material-ui/core/MenuList';
-import MuiRadio from '@material-ui/core/Radio';
-import '@material-ui/core/TextField';
-import MuiSwitch from '@material-ui/core/Switch';
-import Tab from '@material-ui/core/Tab';
-import '@material-ui/core/Tabs';
-import MuiToggleButton from '@material-ui/lab/ToggleButton';
-import MuiToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import MuiTooltip from '@material-ui/core/Tooltip';
-import { Skeleton } from '@material-ui/lab';
-
-/*! *****************************************************************************
-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 = 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.createElement(Button$1, __assign$1({}, variationProps, muiProps, { ref: ref }));
-});
-Button.displayName = 'Button';
-
-var useMenuItemStyles = 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 = makeStyles$1(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.createElement(Box, { width: 125, height: "100%", borderRadius: 16, overflow: "hidden", flexShrink: 0 }, React__default.createElement("img", { src: src, alt: "", className: classes.img })));
-};
-
-var MenuItemInfo = function (props) {
-    return (React__default.createElement(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.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.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.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.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.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.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.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.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.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.createElement("g", {
-    clipPath: "url(#clock_svg__clip0_8_5092)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M8 4v4l2.667 1.333"
-  }))), _defs$1E || (_defs$1E = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "clock_svg__clip0_8_5092"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _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.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.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.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.createElement("g", {
-    clipPath: "url(#x-circle_svg__clip0_8_6136)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
-  }))), _defs$1D || (_defs$1D = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "x-circle_svg__clip0_8_6136"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$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.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.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.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.createElement("g", {
-    clipPath: "url(#info_svg__clip0_8_5377)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
-  }))), _defs$1t || (_defs$1t = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "info_svg__clip0_8_5377"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _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.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.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.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.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.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.createElement("g", {
-    clipPath: "url(#minus-circle_svg__clip0_8_5970)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
-  }))), _defs$1r || (_defs$1r = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "minus-circle_svg__clip0_8_5970"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$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.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.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.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.createElement("g", {
-    clipPath: "url(#plus-circle_svg__clip0_8_5870)",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-9.334v5.334M5.333 8h5.334"
-  }))), _defs$1o || (_defs$1o = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "plus-circle_svg__clip0_8_5870"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-var _path$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.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.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.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.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.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.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.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.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.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.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.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.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.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.createElement("path", {
-    d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
-    stroke: "currentColor"
-  })));
-}
-
-var useIconStyles = makeStyles$1(function (_a) {
-    var 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 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
-        ? 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.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 = 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 = 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.createElement(Icon, { icon: SvgUser, className: classes.fallback });
-    }
-    return (React__default.createElement(MuiAvatar, __assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
-});
-Avatar.defaultProps = {
-    size: 'medium',
-    fit: 'cover',
-    background: '#E0E0E0',
-};
-Avatar.displayName = 'Avatar';
-
-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%',
-    },
-}); });
-
-makeStyles(function () { return ({
-    root: {
-        minWidth: 'unset',
-    },
-    label: {
-        textTransform: function (_a) {
-            var textTransform = _a.textTransform;
-            return textTransform;
-        },
-    },
-}); });
-
-var Checkbox$1 = forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React__default.createElement(MuiCheckbox, __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Checkbox$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
-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 = 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 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.createElement(Typography$1, __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;
-};
-makeStyles$1(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 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 = {}));
-makeStyles$1(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 = forwardRef(function (props, ref) {
-    return React__default.createElement(MuiIconButton, __assign({ ref: ref }, props));
-});
-IconButton.displayName = 'IconButton';
-IconButton.defaultProps = {
-    color: 'secondary',
-};
-
-var useLinkStyles = 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 = forwardRef(function (props, ref) {
-    var children = props.children, muiProps = __rest(props, ["children"]);
-    var classes = useLinkStyles(props);
-    return (React__default.createElement(Link$1, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
-});
-Link.defaultProps = {
-    variant: 'body1',
-};
-Link.displayName = 'Link';
-
-var useStyles$4$1 = makeStyles$1(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            '&:last-child': {
-                marginBottom: 0,
-            },
-            marginBottom: spacing(4),
-            padding: spacing(4),
-        },
-    });
-});
-var Paper = forwardRef(function (props, ref) {
-    var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$4$1(props);
-    return React__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
-});
-Paper.displayName = 'Paper';
-Paper.defaultProps = {
-    legacyStyles: false,
-};
-
-var Radio$1 = forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React__default.createElement(MuiRadio, __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Radio$1.displayName = 'Radio';
-
-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 = makeStyles(function (theme) { return ({
-    checked: {
-        '& $thumb': {
-            background: theme.palette.success.main,
-        },
-        '&& + $track': {
-            backgroundColor: theme.palette.success.main,
-        },
-    },
-    thumb: {},
-    track: {},
-}); });
-
-var Switch$1 = 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.createElement(MuiSwitch, __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Switch$1.displayName = 'Switch';
-
-var useToggleButtonStyles = 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 = forwardRef(function (props, ref) {
-    var children = props.children, muiProps = __rest(props, ["children"]);
-    var classes = useToggleButtonStyles(props);
-    return (React__default.createElement(MuiToggleButton, __assign({ ref: ref, classes: {
-            root: classes.root,
-            selected: classes.selected,
-        } }, muiProps), children));
-});
-ToggleButton.defaultProps = {
-    color: 'primary',
-};
-ToggleButton.displayName = 'ToggleButton';
-
-var useToggleButtonGroupStyles = makeStyles(function (theme) { return ({
-    root: {
-        '&&': {
-            backgroundColor: theme.palette.grey[300],
-        },
-    },
-}); });
-
-var ToggleButtonGroup = forwardRef(function (props, ref) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = __rest(props, ["children", "color"]);
-    var classes = useToggleButtonGroupStyles(props);
-    var childrenWithProps = React__default.Children.map(children, function (child) {
-        if (!React__default.isValidElement(child)) {
-            return null;
-        }
-        return React__default.cloneElement(child, { color: color });
-    });
-    return (React__default.createElement(MuiToggleButtonGroup, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
-});
-ToggleButtonGroup.displayName = 'ToggleButtonGroup';
-
-var useTooltipStyles = makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        tooltip: {
-            fontSize: typography.pxToRem(16),
-        },
-    });
-});
-
-var Tooltip = forwardRef(function (props, ref) {
-    var classes = useTooltipStyles(props);
-    return React__default.createElement(MuiTooltip, __assign({ ref: ref, classes: classes }, props));
-});
-Tooltip.displayName = 'Tooltip';
-
-makeStyles$1(function () { return ({
-    root: {
-        height: 56,
-    },
-}); });
-makeStyles$1(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,
-    },
-}); });
-
-makeStyles$1(function () { return ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gridGap: 16,
-    },
-}); });
-
-var FollowerAuthenticationDialogContext = createContext(null);
-FollowerAuthenticationDialogContext.Provider;
-
-makeStyles$1(function () { return ({
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
-        gridGap: 16,
-    },
-}); });
-
-makeStyles$1(function () { return ({
-    main: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gridGap: 16,
-    },
-}); });
-
-makeStyles$1(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.createElement(Box, { display: "flex", alignItems: "center", gridGap: 6, color: "grey.900" },
-        React__default.createElement(Icon, { icon: icon, size: "large", color: "inherit", "aria-label": label }),
-        React__default.createElement(Typography, { variant: "body2", color: "grey.900" }, count)));
-};
-
-var ReactionCounterGroup = function (props) {
-    var children = props.children;
-    return (React__default.createElement(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.createElement(ReactionCounterGroup, null,
-        showLikes && React__default.createElement(ReactionCounter, { icon: SvgHeart, count: likeCount !== null && likeCount !== void 0 ? likeCount : 0, label: "likes" }),
-        showReviews && React__default.createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0, label: "reviews" })));
-};
-
-var useStyles$5 = makeStyles$1(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.createElement(Box, { display: "flex", alignItems: "center" },
-        React__default.createElement(Box, { display: "flex", className: classes.plusIcon },
-            React__default.createElement(Icon, { icon: props.available ? SvgPlus : SvgLock, size: "medium" })),
-        React__default.createElement(Typography$1, null, props.price)));
-};
-
-var useItemTagStyles = 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 = forwardRef(function (props, ref) {
-    var alt = props.alt, children = props.children;
-    var classes = useItemTagStyles();
-    return (React__default.createElement(Avatar$1, { ref: ref, alt: alt, classes: { root: classes.root } },
-        React__default.createElement(Typography, { variant: "caption", className: classes.text }, children)));
-});
-ItemTag.displayName = 'ItemTag';
-
-var ItemTagGroup = function (props) {
-    var children = props.children;
-    return (React__default.createElement(Box, { display: "flex", gridGap: 6, ml: 1, flexWrap: "wrap" }, children));
-};
-
-var MenuItemTags = function (props) {
-    var itemTags = props.itemTags;
-    return (React__default.createElement(ItemTagGroup, null, itemTags === null || itemTags === void 0 ? void 0 : itemTags.slice(0, 5).map(function (itemTag) { return (React__default.createElement(ItemTag, { key: itemTag.name, alt: itemTag.name, color: itemTag.color }, itemTag.abbr)); })));
-};
-
-var useStatusTagStyles = 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
-*/
-
-(function (module) {
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString === Object.prototype.toString) {
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				} else {
-					classes.push(arg.toString());
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if (module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-}(classnames));
-
-var classNames = classnames.exports;
-
-var 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.createElement(Box, { className: classNames([classes.root, classes[color], classes[variant], size === 'sm' ? classes.small : '']) },
-        React__default.createElement(Typography, { variant: "caption" }, label)));
-};
-StatusTag.defaultProps = {
-    color: 'default',
-    error: false,
-};
-StatusTag.displayName = 'StatusTag';
-
-var MenuItem = 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.createElement(Card, __assign$1({ className: classNames(classes.card, className), ref: ref, elevation: 0, "data-component-type": "menu-item" }, restProps),
-        React__default.createElement(CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading, "aria-label": ariaLabel },
-            React__default.createElement(MenuItemInfo, null,
-                isFeatured && React__default.createElement(StatusTag, { color: "highlight", label: "Featured", variant: "filled", size: "sm" }),
-                React__default.createElement(Box, { display: "flex", gridGap: 8, alignItems: "center" },
-                    React__default.createElement(Typography$1, { component: "h2", className: classes.cardTitle },
-                        loading ? React__default.createElement(Skeleton, null) : title,
-                        isOutOfStock && (React__default.createElement("span", { className: classes.outOfStockTag },
-                            React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" }))))),
-                React__default.createElement(Typography$1, { className: classes.cardDescription, paragraph: true }, loading ? React__default.createElement(Skeleton, null) : description),
-                loading ? (React__default.createElement(Skeleton, null,
-                    React__default.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount }))) : (React__default.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount })),
-                loading ? (React__default.createElement(Skeleton, { style: { flexGrow: 1 }, width: 100, height: 48 })) : (React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
-                    React__default.createElement(MenuItemPrice, { price: price, available: available }),
-                    React__default.createElement(MenuItemTags, { itemTags: itemTags })))),
-            loading ? React__default.createElement(Skeleton, { height: 100, width: 100 }) : React__default.createElement(MenuItemImg, { image: image }))));
-});
-MenuItem.displayName = 'MenuItem';
-
-var useDishCheckoutCardStyles = 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 = createContext(null);
-var useOrderingAppContext = function () {
-    var context = useContext(OrderingAppContext);
-    if (!context) {
-        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
-    }
-    return context;
-};
-var OrderingAppContextProvider = function (props) {
-    var context = useState(props.defaultContext);
-    return React__default.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 = 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.createElement(Typography, { key: group.id, variant: "body2" },
-                    group.menuItemModifierGroupName,
-                    ": ",
-                    modifiers,
-                    (nestedGroups === null || nestedGroups === void 0 ? void 0 : nestedGroups.length) > 0 && React__default.createElement("ul", { className: classes.ul }, nestedGroups)));
-            }
-            // For nested groups, we use list items
-            return (React__default.createElement("li", { key: group.id, className: classes.li },
-                React__default.createElement(Typography, { variant: "body2" },
-                    group.menuItemModifierGroupName,
-                    ": ",
-                    modifiers,
-                    nestedGroups && nestedGroups.length > 0 && React__default.createElement("ul", { className: classes.ul }, nestedGroups))));
-        });
-    };
-    return (React__default.createElement(Box, { className: classes.root },
-        React__default.createElement(Box, { display: "flex", gridGap: 3 },
-            src && React__default.createElement("img", { src: src, alt: "", className: classes.img }),
-            React__default.createElement(Box, { flexGrow: 1 },
-                React__default.createElement(Typography, { variant: "h2", className: classes.name }, name),
-                modifierGroups && formatModifiers(modifierGroups),
-                specialInstructions && React__default.createElement(Typography, { variant: "body2" },
-                    "\"",
-                    specialInstructions,
-                    "\"")),
-            React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
-                React__default.createElement(Button, { "aria-label": messages.ariaEdit, disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, messages.edit),
-                React__default.createElement(IconButton, { "aria-label": messages.ariaDelete, disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
-                    React__default.createElement(Icon, { icon: SvgTrash, size: "large" })))),
-        React__default.createElement(Box, { display: "flex", gridGap: 16, alignItems: "center" },
-            React__default.createElement(FormControl, { variant: "outlined", hiddenLabel: true },
-                React__default.createElement(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.createElement(InputAdornment, { position: "start" },
-                        React__default.createElement(Icon, { icon: open ? SvgChevronUp : SvgChevronDown, size: "large" })), inputProps: { shrink: false }, MenuProps: {
-                        disablePortal: true,
-                        anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'left',
-                        },
-                        transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'left',
-                        },
-                        getContentAnchorEl: null,
-                        classes: { paper: classes.selectPaper },
-                    }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React__default.createElement(MenuItem$1, { key: index + 1, value: index + 1, "aria-label": "" + (index + 1) }, index + 1)); }))),
-            React__default.createElement(Typography, { className: classes.price }, formattedPrice)),
-        warningMessage && (React__default.createElement(Box, { className: classes.warning },
-            React__default.createElement(Box, { paddingTop: 0.25 },
-                React__default.createElement(Icon, { icon: SvgWarning, size: "medium" })),
-            React__default.createElement(Typography, { variant: "body2" }, warningMessage)))));
-};
-
-var DishDetailsReview = forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo, alt = props.alt;
-    return (React__default.createElement(Box, { display: "flex" },
-        React__default.createElement(Box, { mr: 1 },
-            React__default.createElement(Avatar, { size: "small", src: userAvatarUrl, alt: alt })),
-        React__default.createElement(Box, { width: "100%" },
-            React__default.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 1 },
-                React__default.createElement(Typography, { variant: "body1", variantMapping: { body1: 'h3' }, color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
-                React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
-            React__default.createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
-});
-DishDetailsReview.displayName = 'DishDetailsReview';
-
-var useDishModifierCardStyles = 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 = 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 = 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 = 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 = makeStyles(function (theme) { return ({
-    options: {
-        color: theme.palette.info.main,
-        marginBottom: theme.spacing(1.5),
-        padding: 0,
-    },
-}); });
-
-var useQuantityPickerStyles = makeStyles(function (theme) { return ({
-    root: {
-        height: theme.spacing(7),
-        backgroundColor: 'none',
-    },
-}); });
-var useQuantityInputStyles = 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 = makeStyles(function (theme) { return ({
-    root: {
-        color: theme.palette.text.primary,
-        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
-    },
-}); });
-var useEndAdornmentStyles = 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.createElement(TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, InputProps: {
-            classes: inputClasses,
-            disableUnderline: true,
-            endAdornment: (React__default.createElement(IconButton, { "aria-label": "increase quantity " + name, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || disableIncrement },
-                React__default.createElement(Icon, { icon: SvgPlusCircle }))),
-            startAdornment: (React__default.createElement(IconButton, { "aria-label": "decrease quantity " + name, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= 0 },
-                React__default.createElement(Icon, { icon: SvgMinusCircle }))),
-        } }));
-};
-
-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.createElement(Box, { display: "flex", flexDirection: "column", className: classes.label },
-        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 8 },
-            React__default.createElement(Typography$1, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
-        price && (React__default.createElement(Typography$1, { 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.createElement(Box, null,
-        React__default.createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
-            React__default.createElement(Typography$1, { variant: "caption" }, "OPTIONS"),
-            React__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.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(RadioGroup, { "aria-label": name }, modifiers.map(function (modifier) {
-            var _a;
-            var _b;
-            return (React__default.createElement(Box, { key: modifier.id },
-                React__default.createElement(FormControlLabel$1, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default.createElement(Radio$2, { 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.createElement(Box, { className: radioClasses.label },
-                        React__default.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
-                        modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
-                            React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                modifier.hasModifiers && !modifier.outOfStock && (React__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.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) {
-            var _a, _b;
-            return (React__default.createElement(Box, { key: modifier.id },
-                React__default.createElement(FormControlLabel$1, { 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.createElement(Checkbox$2, { 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.createElement(Box, { className: classes.label },
-                        React__default.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
-                        modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
-                            React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
-                modifier.hasModifiers && !modifier.outOfStock && (React__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.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
-            React__default.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
-                React__default.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
-                modifier.outOfStock && (React__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
-                    React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
-                !modifier.outOfStock && (React__default.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
-            React__default.createElement(Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
-                modifier.hasModifiers && !modifier.outOfStock && (React__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.createElement(Typography$1, { 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.createElement(SingleSelectModifierControl, __assign$1({}, props));
-        case 'multipleSelect':
-            return React__default.createElement(MultipleSelectControl, __assign$1({}, props));
-        case 'multipleQuantitySelect':
-            return React__default.createElement(MultipleQuantitySelectControl, __assign$1({}, 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.createElement(Box, { className: classes.root },
-        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
-            React__default.createElement(StatusTag, __assign$1({}, getStatusTagProps(props))),
-            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: classNames((_a = {}, _a[classes.error] = error, _a[classes.helperText] = !error, _a)) }, messages.helperText))),
-        React__default.createElement(Typography, { className: classes.name }, name),
-        React__default.createElement(Box, null,
-            React__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 }))));
-};
-DishModifierCard.displayName = 'DishModifierCard';
-
-var useLocationCardStyles = makeStyles(function (theme) {
-    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, background = _a.background, spacing = theme.spacing;
-    var selectedBackgroundColor = 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.createElement(Card, __assign$1({ className: classes.root }, muiProps),
-        React__default.createElement(CardActionArea, __assign$1({ onClick: handleClick, role: "radio", "aria-checked": selected, disabled: outOfRange || Boolean(anyAvailability), classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
-            React__default.createElement(CardContent, { className: classes.content },
-                React__default.createElement(Box, { className: classes.locationInfo },
-                    React__default.createElement(Box, { display: "flex", justifyContent: "space-between" },
-                        React__default.createElement(Typography$1, { className: classes.name }, name),
-                        selected && React__default.createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    address && (React__default.createElement(Typography$1, { className: classes.greyText, variant: "body2" }, address)),
-                    !outOfRange && React__default.createElement(Typography$1, { className: classes.distance }, distance)),
-                anyAvailability && (React__default.createElement(Box, { className: classes.availability },
-                    React__default.createElement(Icon, { icon: SvgClock, size: "large" }),
-                    generalAvailability && (React__default.createElement(Typography$1, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
-                    pickupAvailability && (React__default.createElement(Typography$1, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
-                    deliveryAvailability && (React__default.createElement(Typography$1, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability)))),
-                outOfRange && (React__default.createElement(Box, { display: "flex", gridGap: 8, alignItems: "center", color: "grey.800" },
-                    React__default.createElement(Icon, { icon: SvgInfo, size: "large", color: "inherit" }),
-                    React__default.createElement(Typography$1, { variant: "body2", className: classes.greyText }, outOfRangeMessage)))))));
-};
-
-var useMenuDropdownStyles = 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 = useState(false), open = _a[0], setOpen = _a[1];
-    var isMobile = useMediaQuery(function (_a) {
-        var breakpoints = _a.breakpoints;
-        return breakpoints.down('md');
-    });
-    return (React__default.createElement(FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
-        React__default.createElement("label", { id: "menu-dropdown-label", className: "sr-only" }, props.label),
-        React__default.createElement(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.createElement(InputAdornment, { position: "start", onClick: function () { return setOpen(true); } },
-                React__default.createElement(Icon, { icon: SvgRestaurantMenu, size: isMobile ? 'extra-large' : 'large' })), IconComponent: function () { return (React__default.createElement(InputAdornment, { position: "end", onClick: function () { return setOpen(true); } },
-                React__default.createElement(Icon, { color: "#0076CB", icon: open ? SvgChevronUp : SvgChevronDown, size: "large" }))); }, MenuProps: {
-                disablePortal: true,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                },
-                getContentAnchorEl: null,
-            }, className: classes.select, 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.createElement(MenuItem$1, { key: index, value: option.id, className: classNames(classes.menuItem, option.isUnavailable ? classes.unavailable : '') },
-            option.name,
-            option.isUnavailable && React__default.createElement(Icon, { icon: SvgClock, size: "large" }))); }))));
-};
-
-var useMenuFilterStyles = makeStyles(function (theme) { return ({
-    triggerLabel: {
-        color: theme.palette.info.main,
-        whiteSpace: 'nowrap',
-    },
-}); });
-
-var _path;
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function SvgLeafIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 16,
-    height: 18,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M6.857 6.823c.065-.081-.18.115-.262.196A13.587 13.587 0 004.716 8.98c-.604.768-1.143 1.683-1.585 2.614-.44.931-.718 1.928-.898 2.86-.082.473-.13.914-.18 1.355-.016.36-.033.752-.033 1.079a.164.164 0 01-.163.163H.191c-.098 0-.164-.082-.164-.18.05-.424.147-.915.229-1.34.114-.473.245-.98.408-1.486.213-.621.474-1.258.768-1.863.033-.065.017-.13-.032-.18A5.05 5.05 0 01.109 7.477c.033-.163.082-.327.13-.49C1.4 2.804 5.632.207 9.913 1.137c2.254.475 4.1 1.863 5.244 3.677.164.261.31.523.441.8.147.294.278.605.393.932.048.13-.082.261-.213.196a4.846 4.846 0 00-.898-.31c-2.206-.49-4.412.93-4.886 3.169-.555 2.647-3.12 4.362-5.783 3.921-.13-.016-.213-.13-.213-.261-.016-.768.196-3.35 2.86-6.438z",
-    fill: "#00663E"
-  })));
-}
-
-var MenuFilter = function (props) {
-    var 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 = 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.createElement(Button$1, { size: "small", startIcon: React__default.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel }, onClick: handleClear }, noOptionsLabel));
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Button$1, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React__default.createElement(SvgLeafIcon, null), classes: { label: classes.triggerLabel } }, triggerLabel),
-        React__default.createElement(Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose }, availableFilters.map(function (option, index) {
-            return (React__default.createElement(MenuItem$1, { key: index, value: option.id, onClick: function (event) { return handleChange(option, event); } },
-                React__default.createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
-                React__default.createElement(Box, { ml: 1 }, option.name)));
-        }))));
-};
-
-var useSelectableChipStyles = 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.createElement(Tab, __assign$1({ "data-tab-for-section-id": props.value, classes: {
-            root: classes.root,
-            selected: classes.selected,
-        } }, props)));
-};
-
-var useSelectableChipGroupStyles = 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.createElement(Tabs, __assign$1({ TabIndicatorProps: {
-            hidden: true,
-        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps), children));
-};
-
-var useStyles$4 = makeStyles$1(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.createElement(React__default.Fragment, null, filters.map(function (filter, index) { return (React__default.createElement(Chip, { key: filter.name + "-" + index, classes: classes, onClick: function (event) { return onChipClick(filter, event); }, label: React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
-            React__default.createElement(Typography$1, { variant: "caption" }, filter.name),
-            React__default.createElement(Icon, { icon: SvgXCircle, size: "large" })) })); })));
-};
-
-var MenuSectionGroup = forwardRef(function (props, ref) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default.createElement(Box, __assign$1({ display: "flex", flexDirection: "column", gridGap: 40, marginBottom: 4 }, restProps, { ref: ref }, { "data-component-type": "menu-section-group" }), children));
-});
-MenuSectionGroup.displayName = 'MenuSectionGroup';
-
-var useStyles$3 = makeStyles$1(function () { return ({
-    title: {
-        fontWeight: 400,
-        fontSize: 20,
-        lineHeight: '30px',
-    },
-}); });
-
-var MenuSection = 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.createElement(Box, __assign$1({}, restProps, { ref: ref, component: 'section' }, { "data-component-type": "menu-section", style: { scrollMarginTop: '70px' } }),
-        React__default.createElement(Box, { marginTop: 1, marginBottom: 4 },
-            React__default.createElement(Typography$1, { component: "h1", className: classes.title }, loading ? React__default.createElement(Skeleton, null) : name)),
-        children));
-});
-MenuSection.displayName = 'MenuSection';
-
-var useStyles$2 = makeStyles$1(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 = forwardRef(function (props, ref) {
-    var classes = useStyles$2();
-    props.children; var className = props.className, restProps = __rest$1(props, ["children", "className"]);
-    return (React__default.createElement(Box, __assign$1({ 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.createElement(Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
-
-var useStyles$1 = makeStyles$1(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.createElement(DialogTitle$1, null,
-        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 16 },
-            Icon && Icon,
-            React__default.createElement(Typography$1, { variant: "h1", id: titleId }, title)),
-        onClose && (React__default.createElement(IconButton$1, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
-            React__default.createElement(SvgX, 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.createElement(Box, __assign$1({ paddingTop: 4, paddingBottom: borderBottom ? 4 : 0, paddingX: edgeToEdge ? 0 : 2, borderBottom: borderBottom ? '1px solid #E0E0E0' : undefined }, restProps), children));
-};
-
-var Switch = 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: {},
-    });
-})(Switch$2);
-
-var Checkbox = withStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        checked: {},
-        root: {
-            '&$checked': {
-                color: palette.info.main,
-            },
-        },
-    });
-})(Checkbox$2);
-
-var Radio = withStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        checked: {},
-        root: {
-            '&$checked': {
-                color: palette.info.main,
-            },
-        },
-    });
-})(Radio$2);
-
-var useStyles = makeStyles$1(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.createElement(SvgWarning, { style: bannerIconStyles }),
-    // @ts-expect-error style prop works
-    info: React__default.createElement(SvgInfo, { style: bannerIconStyles }),
-    // @ts-expect-error style prop works
-    offer: React__default.createElement(SvgDollarSign, { style: bannerIconStyles }),
-};
-
-var MenuBanner = function (props) {
-    var show = props.show;
-    var classes = useStyles(props);
-    if (!show)
-        return null;
-    return (React__default.createElement(Card, { classes: { root: classes.root }, variant: "outlined" },
-        React__default.createElement(CardHeader, { avatar: BannerTypeIcons[props.type], title: props.title, titleTypographyProps: { variant: 'body1' }, classes: { root: classes.header, title: classes.headerTitle } }),
-        React__default.createElement(MenuBannerDescription, __assign$1({}, props)),
-        React__default.createElement(MenuBannerButton, __assign$1({}, props))));
-};
-function MenuBannerDescription(props) {
-    var classes = useStyles(props);
-    var description = props.description;
-    if (!description)
-        return null;
-    return (React__default.createElement(CardContent, { classes: { root: classes.content } },
-        React__default.createElement(Typography$1, { className: classes.description, variant: "body2" }, props.description)));
-}
-function MenuBannerButton(props) {
-    var classes = useStyles(props);
-    if (!props.buttonLabel)
-        return null;
-    return (React__default.createElement(CardContent, { classes: { root: classes.content } },
-        React__default.createElement(Link$1, __assign$1({}, { 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 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 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,
-};
-
-export { Button, Checkbox, DialogSection, DialogTitle, DishCheckoutCard, DishDetailsReview, DishModifierCard, ItemTag, ItemTagGroup, LocationCard, MenuBanner, MenuDropdown, MenuFilter, MenuItem, MenuItemGroup, MenuSection, MenuSectionGroup, OrderingAppContext, OrderingAppContextProvider, PageSection, QuantityPicker, Radio, ReactionCounter, ReactionCounterGroup, SelectableChip, SelectableChipGroup, SelectedMenuFiltersList, StatusTag, Switch, orderingTheme, useOrderingAppContext };
-//# sourceMappingURL=index.es.js.map