@popmenu/ordering-ui 0.126.0 → 0.126.2

package/build/cjs/index.js

@@ -0,0 +1,1576 @@
+'use strict';
+
+var core = require('@material-ui/core');
+var tslib = require('tslib');
+var React = require('react');
+var webIcons = require('@popmenu/web-icons');
+var commonUi = require('@popmenu/common-ui');
+var lab = require('@material-ui/lab');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var Button = React.forwardRef(function (props, ref) {
+    var _a = props.variation, variation = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["variation"]);
+    var variationProps = {};
+    switch (variation) {
+        case 'primary':
+            variationProps.variant = 'contained';
+            variationProps.color = 'primary';
+            break;
+        case 'secondary':
+            variationProps.variant = 'outlined';
+            variationProps.color = 'primary';
+            break;
+    }
+    return React.createElement(core.Button, tslib.__assign({}, variationProps, muiProps, { ref: ref }));
+});
+Button.displayName = 'Button';
+
+var useMenuItemStyles = core.makeStyles(function (theme) {
+    var _a, _b;
+    return ({
+        cardActionArea: (_a = {
+                display: 'flex',
+                gridGap: 16,
+                height: '100%'
+            },
+            _a[theme.breakpoints.up('lg')] = {
+                border: '1px solid #E0E0E0',
+                borderRadius: theme.spacing(2),
+                padding: theme.spacing(2),
+            },
+            _a),
+        card: (_b = {},
+            _b[theme.breakpoints.down('md')] = {
+                '&:after': {
+                    content: '""',
+                    position: 'absolute',
+                    backgroundColor: '#E0E0E0',
+                    width: '100%',
+                    height: 1,
+                    bottom: -16,
+                    left: 0,
+                },
+            },
+            _b.height = 185,
+            _b.position = 'relative',
+            _b.overflow = 'visible',
+            _b),
+        cardTitle: {
+            flexGrow: 1,
+            fontWeight: 500,
+            fontSize: 18,
+            lineHeight: '27px',
+            color: theme.palette.grey[900],
+            '-webkit-line-clamp': 2,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
+        cardDescription: {
+            fontWeight: 400,
+            fontSize: 14,
+            lineHeight: '20px',
+            margin: theme.spacing(0.5, 0, 1, 0),
+            color: theme.palette.grey[800],
+            '-webkit-line-clamp': 2,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
+        outOfStockTag: {
+            minWidth: '90px',
+            marginLeft: theme.spacing(1),
+            display: 'inline-block',
+            verticalAlign: 'bottom',
+        },
+    });
+});
+
+var useStyles$6 = core.makeStyles(function () { return ({
+    img: {
+        objectFit: 'cover',
+        width: '100%',
+        height: '100%',
+    },
+}); });
+var MenuItemImg = function (props) {
+    var _a = props.image, image = _a === void 0 ? {} : _a;
+    var src = image.src;
+    var classes = useStyles$6();
+    if (!src) {
+        return null;
+    }
+    return (React.createElement(core.Box, { width: 125, height: "100%", borderRadius: 16, overflow: "hidden", flexShrink: 0 }, React.createElement("img", { src: src, alt: "", className: classes.img })));
+};
+
+var MenuItemInfo = function (props) {
+    return (React.createElement(core.Box, { display: "flex", flexGrow: 1, flexDirection: "column", height: "100%" }, props.children));
+};
+
+var ReactionCounter = function (props) {
+    var count = props.count, icon = props.icon, label = props.label;
+    return (React.createElement(commonUi.Box, { display: "flex", alignItems: "center", gridGap: 6, color: "grey.900" },
+        React.createElement(commonUi.Icon, { icon: icon, size: "large", color: "inherit", "aria-label": label }),
+        React.createElement(commonUi.Typography, { variant: "body2", color: "grey.900" }, count)));
+};
+
+var ReactionCounterGroup = function (props) {
+    var children = props.children;
+    return (React.createElement(commonUi.Box, { display: "flex", gridGap: 16 }, children));
+};
+
+var MenuItemReactions = function (props) {
+    var likeCount = props.likeCount, reviewCount = props.reviewCount;
+    var showLikes = likeCount ? likeCount > 0 : false;
+    var showReviews = reviewCount ? reviewCount > 0 : false;
+    return (React.createElement(ReactionCounterGroup, null,
+        showLikes && React.createElement(ReactionCounter, { icon: webIcons.Heart, count: likeCount !== null && likeCount !== void 0 ? likeCount : 0, label: "likes" }),
+        showReviews && React.createElement(ReactionCounter, { icon: webIcons.Reviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0, label: "reviews" })));
+};
+
+var useStyles$5 = core.makeStyles(function (_a) {
+    var palette = _a.palette, spacing = _a.spacing;
+    return ({
+        plusIcon: {
+            height: '100%',
+            padding: spacing(0.25),
+            background: function (props) { return (props.available ? palette.info.main : 'none'); },
+            color: function (props) { return (props.available ? palette.info.contrastText : palette.warning.main); },
+            borderRadius: '30px',
+            marginRight: spacing(1),
+        },
+    });
+});
+var MenuItemPrice = function (props) {
+    var classes = useStyles$5(props);
+    return (React.createElement(core.Box, { display: "flex", alignItems: "center" },
+        React.createElement(core.Box, { display: "flex", className: classes.plusIcon },
+            React.createElement(commonUi.Icon, { icon: props.available ? webIcons.Plus : webIcons.Lock, size: "medium" })),
+        React.createElement(core.Typography, null, props.price)));
+};
+
+var useItemTagStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        borderColor: theme.palette.text.primary,
+        border: '1.5px solid',
+        background: 'none',
+        height: '24px',
+        lineHeight: 1.5,
+        position: 'static',
+        width: '24px',
+    },
+    text: {
+        lineHeight: 1.5,
+    },
+}); });
+
+var ItemTag = React.forwardRef(function (props, ref) {
+    var alt = props.alt, children = props.children;
+    var classes = useItemTagStyles();
+    return (React.createElement(core.Avatar, { ref: ref, alt: alt, classes: { root: classes.root } },
+        React.createElement(commonUi.Typography, { variant: "caption", className: classes.text }, children)));
+});
+ItemTag.displayName = 'ItemTag';
+
+var ItemTagGroup = function (props) {
+    var children = props.children;
+    return (React.createElement(core.Box, { display: "flex", gridGap: 6, ml: 1, flexWrap: "wrap" }, children));
+};
+
+var MenuItemTags = function (props) {
+    var itemTags = props.itemTags;
+    return (React.createElement(ItemTagGroup, null, itemTags === null || itemTags === void 0 ? void 0 : itemTags.slice(0, 5).map(function (itemTag) { return (React.createElement(ItemTag, { key: itemTag.name, alt: itemTag.name, color: itemTag.color }, itemTag.abbr)); })));
+};
+
+var useStatusTagStyles = core.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) {
+				classes = appendClass(classes, parseValue(arg));
+			}
+		}
+
+		return classes;
+	}
+
+	function parseValue (arg) {
+		if (typeof arg === 'string' || typeof arg === 'number') {
+			return arg;
+		}
+
+		if (typeof arg !== 'object') {
+			return '';
+		}
+
+		if (Array.isArray(arg)) {
+			return classNames.apply(null, arg);
+		}
+
+		if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+			return arg.toString();
+		}
+
+		var classes = '';
+
+		for (var key in arg) {
+			if (hasOwn.call(arg, key) && arg[key]) {
+				classes = appendClass(classes, key);
+			}
+		}
+
+		return classes;
+	}
+
+	function appendClass (value, newClass) {
+		if (!newClass) {
+			return value;
+		}
+	
+		if (value) {
+			return value + ' ' + newClass;
+		}
+	
+		return value + newClass;
+	}
+
+	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.createElement(commonUi.Box, { className: classNames([classes.root, classes[color], classes[variant], size === 'sm' ? classes.small : '']) },
+        React.createElement(commonUi.Typography, { variant: "caption" }, label)));
+};
+StatusTag.defaultProps = {
+    color: 'default',
+    error: false,
+};
+StatusTag.displayName = 'StatusTag';
+
+var MenuItem = React.forwardRef(function (props, ref) {
+    var ariaLabel = props.ariaLabel, onClick = props.onClick, id = props.id, description = props.description, isOutOfStock = props.isOutOfStock, title = props.title, loading = props.loading, isFeatured = props.isFeatured, image = props.image, likeCount = props.likeCount, reviewCount = props.reviewCount, price = props.price, available = props.available, itemTags = props.itemTags, className = props.className, restProps = tslib.__rest(props, ["ariaLabel", "onClick", "id", "description", "isOutOfStock", "title", "loading", "isFeatured", "image", "likeCount", "reviewCount", "price", "available", "itemTags", "className"]);
+    var classes = useMenuItemStyles(props);
+    var handleClick = function (event) {
+        onClick(id, event);
+    };
+    return (React.createElement(core.Card, tslib.__assign({ className: classNames(classes.card, className), ref: ref, elevation: 0, "data-component-type": "menu-item" }, restProps),
+        React.createElement(core.CardActionArea, { className: classes.cardActionArea, onClick: handleClick, disabled: loading, "aria-label": ariaLabel },
+            React.createElement(MenuItemInfo, null,
+                isFeatured && React.createElement(StatusTag, { color: "highlight", label: "Featured", variant: "filled", size: "sm" }),
+                React.createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
+                    React.createElement(core.Typography, { component: "h2", className: classes.cardTitle },
+                        loading ? React.createElement(lab.Skeleton, null) : title,
+                        isOutOfStock && (React.createElement("span", { className: classes.outOfStockTag },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" }))))),
+                React.createElement(core.Typography, { className: classes.cardDescription, paragraph: true }, loading ? React.createElement(lab.Skeleton, null) : description),
+                loading ? (React.createElement(lab.Skeleton, null,
+                    React.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount }))) : (React.createElement(MenuItemReactions, { likeCount: likeCount, reviewCount: reviewCount })),
+                loading ? (React.createElement(lab.Skeleton, { style: { flexGrow: 1 }, width: 100, height: 48 })) : (React.createElement(core.Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
+                    React.createElement(MenuItemPrice, { price: price, available: available }),
+                    React.createElement(MenuItemTags, { itemTags: itemTags })))),
+            loading ? React.createElement(lab.Skeleton, { height: 100, width: 100 }) : React.createElement(MenuItemImg, { image: image }))));
+});
+MenuItem.displayName = 'MenuItem';
+
+var useDishCheckoutCardStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        '&:first-of-type': {
+            paddingTop: 0,
+        },
+        '&:last-of-type': {
+            paddingBottom: 0,
+            borderBottom: 'none',
+        },
+        color: theme.palette.grey[900],
+        padding: theme.spacing(2, 0),
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        gridGap: theme.spacing(2),
+        borderBottom: function (_a) {
+            var borderBottom = _a.borderBottom;
+            return (borderBottom ? '1px solid #E0E0E0' : 'none');
+        },
+    },
+    deleteButton: {
+        color: theme.palette.info.main,
+    },
+    editButton: {
+        color: theme.palette.info.main,
+    },
+    img: {
+        objectFit: 'cover',
+        borderRadius: theme.spacing(1),
+        flexBasis: 'auto',
+        flexShrink: 0,
+        height: theme.spacing(7),
+        marginRight: theme.spacing(1),
+        overflow: 'hidden',
+        width: theme.spacing(7),
+    },
+    name: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '24px',
+    },
+    price: {
+        fontSize: '18px',
+    },
+    select: {
+        paddingLeft: 'unset',
+        borderRadius: '25px',
+        '& fieldset': {
+            borderColor: theme.palette.grey[700],
+        },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.grey[700],
+            borderWidth: '1px',
+        },
+        '& .MuiSelect-root': {
+            padding: theme.spacing(1, 1.5, 1, 4.5),
+            zIndex: 10,
+            textAlign: 'right',
+        },
+        '& .MuiInputAdornment-positionStart': {
+            position: 'absolute',
+            left: theme.spacing(1.5),
+        },
+        '& .MuiSelect-iconOutlined': {
+            display: 'none',
+        },
+    },
+    selectPaper: {
+        maxHeight: theme.spacing(37),
+    },
+    ul: {
+        margin: 0,
+        paddingLeft: theme.spacing(3),
+    },
+    warning: {
+        color: theme.palette.error.main,
+        display: 'flex',
+        gridGap: theme.spacing(0.825),
+    },
+}); });
+
+var OrderingAppContext = React.createContext(null);
+var useOrderingAppContext = function () {
+    var context = React.useContext(OrderingAppContext);
+    if (!context) {
+        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
+    }
+    return context;
+};
+var OrderingAppContextProvider = function (props) {
+    var context = React.useState(props.defaultContext);
+    return React.createElement(OrderingAppContext.Provider, { value: context }, props.children);
+};
+
+var DishCheckoutCard = function (props) {
+    var _a;
+    var id = props.id, name = props.name, quantity = props.quantity, modifierGroups = props.modifierGroups, onDelete = props.onDelete, onEdit = props.onEdit, onQuantityChange = props.onQuantityChange, price = props.price, specialInstructions = props.specialInstructions, disabled = props.disabled, warningMessage = props.warningMessage, _b = props.image, image = _b === void 0 ? {} : _b, messages = props.messages;
+    var src = image.src;
+    var classes = useDishCheckoutCardStyles(props);
+    var appContext = useOrderingAppContext()[0];
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var formattedPrice = typeof price === 'number' ? "" + ((_a = appContext.currencySymbol) !== null && _a !== void 0 ? _a : '') + price.toFixed(2) : price;
+    var handleQuantityChange = function (event) {
+        return onQuantityChange(id, parseInt(event.target.value, 10));
+    };
+    var labelString = function (label) {
+        return label.replace(/[^a-zA-Z\s]/g, '').toLowerCase();
+    };
+    var formatModifiers = function (groups, nested) {
+        if (nested === void 0) { nested = false; }
+        return groups.map(function (group) {
+            // Get all selected modifiers for this group
+            var modifiers = group.selectedModifiers
+                .map(function (modifier) {
+                return modifier.quantity > 1 ? modifier.modifierName + " \u00D7 " + modifier.quantity : modifier.modifierName;
+            })
+                .join(', ');
+            // Render nested groups recursively
+            var nestedGroups = group.selectedModifiers.flatMap(function (modifier) {
+                var _a;
+                return (modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) && ((_a = modifier === null || modifier === void 0 ? void 0 : modifier.selectedModifierGroups) === null || _a === void 0 ? void 0 : _a.length) > 0
+                    ? formatModifiers(modifier.selectedModifierGroups, true)
+                    : [];
+            });
+            // For top-level groups, we render without the list
+            if (!nested) {
+                return (React.createElement(commonUi.Typography, { key: group.id, variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    (nestedGroups === null || nestedGroups === void 0 ? void 0 : nestedGroups.length) > 0 && React.createElement("ul", { className: classes.ul }, nestedGroups)));
+            }
+            // For nested groups, we use list items
+            return (React.createElement("li", { key: group.id, className: classes.li },
+                React.createElement(commonUi.Typography, { variant: "body2" },
+                    group.menuItemModifierGroupName,
+                    ": ",
+                    modifiers,
+                    nestedGroups && nestedGroups.length > 0 && React.createElement("ul", { className: classes.ul }, nestedGroups))));
+        });
+    };
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Box, { display: "flex", gridGap: 3 },
+            src && React.createElement("img", { src: src, alt: "", className: classes.img }),
+            React.createElement(commonUi.Box, { flexGrow: 1 },
+                React.createElement(commonUi.Typography, { variant: "h2", className: classes.name }, name),
+                modifierGroups && formatModifiers(modifierGroups),
+                specialInstructions && React.createElement(commonUi.Typography, { variant: "body2" },
+                    "\"",
+                    specialInstructions,
+                    "\"")),
+            React.createElement(commonUi.Box, { display: "flex", gridGap: 1, height: "100%", alignItems: "center" },
+                React.createElement(Button, { "aria-label": messages.ariaEdit, disabled: disabled, className: classes.editButton, variant: "text", onClick: onEdit }, messages.edit),
+                React.createElement(commonUi.IconButton, { "aria-label": messages.ariaDelete, disabled: disabled, onClick: onDelete, classes: { root: classes.deleteButton } },
+                    React.createElement(commonUi.Icon, { icon: webIcons.Trash, size: "large" })))),
+        React.createElement(commonUi.Box, { display: "flex", gridGap: 16, alignItems: "center" },
+            React.createElement(core.FormControl, { variant: "outlined", hiddenLabel: true },
+                React.createElement(core.Select, { disabled: disabled, value: quantity, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, SelectDisplayProps: { 'aria-label': labelString(name) + " quantity select" }, disableUnderline: true, onChange: handleQuantityChange, fullWidth: true, startAdornment: React.createElement(core.InputAdornment, { position: "start" },
+                        React.createElement(commonUi.Icon, { icon: open ? webIcons.ChevronUp : webIcons.ChevronDown, size: "large" })), inputProps: { shrink: false }, MenuProps: {
+                        disablePortal: true,
+                        anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                        },
+                        transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'left',
+                        },
+                        getContentAnchorEl: null,
+                        classes: { paper: classes.selectPaper },
+                    }, className: classes.select }, Array.from({ length: 99 }, function (_, index) { return (React.createElement(core.MenuItem, { key: index + 1, value: index + 1, "aria-label": "" + (index + 1) }, index + 1)); }))),
+            React.createElement(commonUi.Typography, { className: classes.price }, formattedPrice)),
+        warningMessage && (React.createElement(commonUi.Box, { className: classes.warning },
+            React.createElement(commonUi.Box, { paddingTop: 0.25 },
+                React.createElement(commonUi.Icon, { icon: webIcons.Warning, size: "medium" })),
+            React.createElement(commonUi.Typography, { variant: "body2" }, warningMessage)))));
+};
+
+var DishDetailsReview = React.forwardRef(function (props) {
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo, alt = props.alt;
+    return (React.createElement(commonUi.Box, { display: "flex" },
+        React.createElement(commonUi.Box, { mr: 1 },
+            React.createElement(commonUi.Avatar, { size: "small", src: userAvatarUrl, alt: alt })),
+        React.createElement(commonUi.Box, { width: "100%" },
+            React.createElement(commonUi.Box, { display: "flex", justifyContent: "space-between", mb: 1 },
+                React.createElement(commonUi.Typography, { variant: "body1", variantMapping: { body1: 'h3' }, color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
+                React.createElement(commonUi.Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
+            React.createElement(commonUi.Typography, { color: "grey.900", weight: "regular" }, content))));
+});
+DishDetailsReview.displayName = 'DishDetailsReview';
+
+var useDishModifierCardStyles = core.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 = core.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 = core.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 = core.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 = core.makeStyles(function (theme) { return ({
+    options: {
+        color: theme.palette.info.main,
+        marginBottom: theme.spacing(1.5),
+        padding: 0,
+    },
+}); });
+
+var useQuantityPickerStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        height: theme.spacing(7),
+        backgroundColor: 'none',
+    },
+}); });
+var useQuantityInputStyles = core.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 = core.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+    },
+}); });
+var useEndAdornmentStyles = core.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.createElement(core.TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, InputProps: {
+            classes: inputClasses,
+            disableUnderline: true,
+            endAdornment: (React.createElement(commonUi.IconButton, { "aria-label": "increase quantity " + name, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || disableIncrement },
+                React.createElement(commonUi.Icon, { icon: webIcons.PlusCircle }))),
+            startAdornment: (React.createElement(commonUi.IconButton, { "aria-label": "decrease quantity " + name, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= 0 },
+                React.createElement(commonUi.Icon, { icon: webIcons.MinusCircle }))),
+        } }));
+};
+
+var Label = function (props) {
+    var _a, _b, _c;
+    var name = props.name, price = props.price, _d = props.disabled, disabled = _d === void 0 ? false : _d;
+    var classes = useLabelStyles();
+    return (React.createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
+        React.createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React.createElement(core.Typography, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
+        price && (React.createElement(core.Typography, { className: classNames((_b = {}, _b[classes.price] = !disabled, _b), (_c = {}, _c[classes.disabled] = disabled, _c)) },
+            "+ ",
+            price))));
+};
+var Options = function (props) {
+    var handleOptionsClick = props.handleOptionsClick;
+    var classes = useOptionsStyles();
+    return (React.createElement(core.Box, null,
+        React.createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
+            React.createElement(core.Typography, { variant: "caption" }, "OPTIONS"),
+            React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight }))));
+};
+var SingleSelectModifierControl = function (props) {
+    var modifiers = props.modifiers, name = props.name, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice, isRequired = props.isRequired;
+    var radioClasses = useRadioModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function (e) {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: true,
+            modifierId: Number(e.target.value),
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: 1,
+        });
+    }; };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.RadioGroup, { "aria-label": name }, modifiers.map(function (modifier) {
+            var _a;
+            var _b;
+            return (React.createElement(core.Box, { key: modifier.id },
+                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React.createElement(core.Radio, { checked: ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.modifierId) === modifier.id, className: classNames((_a = {},
+                            _a[radioClasses.hideRadio] = modifier.outOfStock,
+                            _a[radioClasses.radio] = !modifier.outOfStock,
+                            _a)), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React.createElement(core.Box, { className: radioClasses.label },
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
+        }))));
+};
+var MultipleSelectControl = function (props) {
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice;
+    var classes = useCheckboxModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function () {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+        if (!isModifierInValue && modifier.hasModifiers) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: isModifierInValue ? 0 : 1,
+        });
+    }; };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.FormGroup, null, modifiers.map(function (modifier) {
+            var _a, _b;
+            return (React.createElement(core.Box, { key: modifier.id },
+                React.createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React.createElement(core.Checkbox, { className: classNames((_a = {}, _a[classes.hideCheckbox] = modifier.outOfStock, _a), (_b = {}, _b[classes.checkbox] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React.createElement(core.Box, { className: classes.label },
+                        React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                        modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                            React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
+        }))));
+};
+var MultipleQuantitySelectControl = function (props) {
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
+    var makeHandleChange = function (modifier) { return function (_e, customEvent) {
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: customEvent.quantity,
+        });
+    }; };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React.createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
+            React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                React.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
+                modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                    React.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
+                !modifier.outOfStock && (React.createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
+            React.createElement(core.Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } })),
+                selectionQuantity[modifier.id] &&
+                    selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
+                    selectionQuantity[modifier.id].requiredSelectionCount !==
+                        selectionQuantity[modifier.id].currentSelectionCount && (React.createElement(core.Typography, { variant: "caption", color: "error" },
+                    selectionQuantity[modifier.id].currentSelectionCount,
+                    "/",
+                    selectionQuantity[modifier.id].requiredSelectionCount,
+                    " selected"))))); }))));
+};
+var ModifierControls = function (props) {
+    switch (props.type) {
+        case 'singleSelect':
+            return React.createElement(SingleSelectModifierControl, tslib.__assign({}, props));
+        case 'multipleSelect':
+            return React.createElement(MultipleSelectControl, tslib.__assign({}, props));
+        case 'multipleQuantitySelect':
+            return React.createElement(MultipleQuantitySelectControl, tslib.__assign({}, props));
+        default:
+            return null;
+    }
+};
+
+var getStatusTagProps = function (props) {
+    var messages = props.messages, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
+    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText;
+    var color = 'default';
+    switch (true) {
+        case error:
+            color = 'error';
+            break;
+        case isOutOfStock:
+            color = 'warning';
+            break;
+    }
+    var label = optionalText;
+    switch (true) {
+        case isOutOfStock:
+            label = outOfStockText;
+            break;
+        case isRequired:
+            label = requiredText;
+            break;
+    }
+    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color: color, label: label, variant: variant };
+};
+var DishModifierCard = function (props) {
+    var _a;
+    var aggregatePrice = props.aggregatePrice, name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock, isRequired = props.isRequired, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
+    var classes = useDishModifierCardStyles();
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
+            React.createElement(StatusTag, tslib.__assign({}, getStatusTagProps(props))),
+            !isOutOfStock && (React.createElement(commonUi.Typography, { variant: "subtitle1", className: classNames((_a = {}, _a[classes.error] = error, _a[classes.helperText] = !error, _a)) }, messages.helperText))),
+        React.createElement(commonUi.Typography, { className: classes.name }, name),
+        React.createElement(commonUi.Box, null,
+            React.createElement(ModifierControls, { name: name, value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, isRequired: isRequired, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));
+};
+DishModifierCard.displayName = 'DishModifierCard';
+
+var useLocationCardStyles = core.makeStyles(function (theme) {
+    var _a = theme.palette, info = _a.info, grey = _a.grey, secondary = _a.secondary, background = _a.background, spacing = theme.spacing;
+    var selectedBackgroundColor = core.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 = tslib.__rest(props, ["name", "address", "distance", "generalAvailability", "pickupAvailability", "deliveryAvailability", "onClick", "selected", "value", "outOfRange", "outOfRangeMessage", "CardActionAreaProps"]);
+    var classes = useLocationCardStyles(props);
+    var anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
+    var handleClick = function () {
+        onClick(value);
+    };
+    return (React.createElement(core.Card, tslib.__assign({ className: classes.root }, muiProps),
+        React.createElement(core.CardActionArea, tslib.__assign({ onClick: handleClick, role: "radio", "aria-checked": selected, disabled: outOfRange || Boolean(anyAvailability), classes: { focusHighlight: classes.actionAreaFocusHighlight } }, CardActionAreaProps),
+            React.createElement(core.CardContent, { className: classes.content },
+                React.createElement(core.Box, { className: classes.locationInfo },
+                    React.createElement(core.Box, { display: "flex", justifyContent: "space-between" },
+                        React.createElement(core.Typography, { className: classes.name }, name),
+                        selected && React.createElement(commonUi.Icon, { icon: webIcons.Check, size: "extra-large", className: classes.checkIcon })),
+                    address && (React.createElement(core.Typography, { className: classes.greyText, variant: "body2" }, address)),
+                    !outOfRange && React.createElement(core.Typography, { className: classes.distance }, distance)),
+                anyAvailability && (React.createElement(core.Box, { className: classes.availability },
+                    React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large" }),
+                    generalAvailability && (React.createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, generalAvailability)),
+                    pickupAvailability && (React.createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, pickupAvailability)),
+                    deliveryAvailability && (React.createElement(core.Typography, { className: classes.availabilityMessage, variant: "body2" }, deliveryAvailability)))),
+                outOfRange && (React.createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center", color: "grey.800" },
+                    React.createElement(commonUi.Icon, { icon: webIcons.Info, size: "large", color: "inherit" }),
+                    React.createElement(core.Typography, { variant: "body2", className: classes.greyText }, outOfRangeMessage)))))));
+};
+
+var useMenuDropdownStyles = core.makeStyles(function (theme) {
+    var _a, _b;
+    return ({
+        formControl: (_a = {},
+            _a[theme.breakpoints.up('lg')] = {
+                alignSelf: 'start',
+            },
+            _a),
+        menuItem: {
+            alignItems: 'center',
+            display: 'flex',
+            gridGap: theme.spacing(1),
+        },
+        select: {
+            '& .MuiSelect-root': (_b = {
+                    '&:focus': {
+                        outline: '2px solid #0076CB',
+                        borderRadius: 8,
+                    },
+                    color: '#212121',
+                    padding: theme.spacing(1, 0.5, 1, 0.5),
+                    zIndex: 10
+                },
+                _b[theme.breakpoints.down('md')] = {
+                    width: 0,
+                    minWidth: 0,
+                    padding: 0,
+                },
+                _b),
+        },
+        unavailable: {
+            color: theme.palette.grey[700],
+        },
+    });
+});
+
+var MenuDropdown = function (props) {
+    var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
+    var classes = useMenuDropdownStyles(props);
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var isMobile = core.useMediaQuery(function (_a) {
+        var breakpoints = _a.breakpoints;
+        return breakpoints.down('md');
+    });
+    return (React.createElement(core.FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
+        React.createElement("label", { id: "menu-dropdown-label", className: "sr-only" }, props.label),
+        React.createElement(core.Select, { SelectDisplayProps: { 'aria-labelledby': 'menu-dropdown-label' }, value: selectedOptionId, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, disableUnderline: true, onChange: function (event) { return onSelect(event.target.value); }, fullWidth: true, open: open, startAdornment: React.createElement(core.InputAdornment, { position: "start", onClick: function () { return setOpen(true); } },
+                React.createElement(commonUi.Icon, { icon: webIcons.RestaurantMenu, size: isMobile ? 'extra-large' : 'large' })), IconComponent: function () { return (React.createElement(core.InputAdornment, { position: "end", onClick: function () { return setOpen(true); } },
+                React.createElement(commonUi.Icon, { color: "#0076CB", icon: open ? webIcons.ChevronUp : webIcons.ChevronDown, size: "large" }))); }, MenuProps: {
+                disablePortal: true,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                },
+                getContentAnchorEl: null,
+            }, className: classes.select, renderValue: function (selected) { var _a; return (_a = menuOptions.find(function (menuOption) { return menuOption.id === selected; })) === null || _a === void 0 ? void 0 : _a.name; } }, menuOptions.map(function (option, index) { return (React.createElement(core.MenuItem, { key: index, value: option.id, className: classNames(classes.menuItem, option.isUnavailable ? classes.unavailable : '') },
+            option.name,
+            option.isUnavailable && React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large" }))); }))));
+};
+
+var _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__namespace.createElement("svg", _extends({
+    viewBox: "0 0 16 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: true,
+    height: true
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.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 useMenuFilterStyles = core.makeStyles(function (theme) { return ({
+    triggerLabel: {
+        color: theme.palette.info.main,
+        whiteSpace: 'nowrap',
+    },
+}); });
+
+var MenuFilter = function (props) {
+    var options = props.options, onChange = props.onChange, onClear = props.onClear, value = props.value, _a = props.triggerLabel, triggerLabel = _a === void 0 ? 'Add Filter' : _a, _b = props.noOptionsLabel, noOptionsLabel = _b === void 0 ? 'Reset Filters' : _b;
+    var triggerId = 'menu-filter-trigger';
+    var popoverId = 'menu-filter-popover';
+    var classes = useMenuFilterStyles();
+    var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
+    var open = Boolean(anchorEl);
+    var optionIds = options.map(function (opt) { return opt.id; });
+    var valueIds = value.map(function (val) { return val.id; });
+    var availableIds = optionIds.filter(function (optionId) { return !valueIds.includes(optionId); });
+    var availableFilters = options.filter(function (opt) { return availableIds.includes(opt.id); });
+    var allFiltersSelected = availableFilters.length === 0;
+    var handleChange = function (value, event) {
+        onChange(value, event);
+        setAnchorEl(null);
+    };
+    var handleTriggerClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var handleClear = function () {
+        onClear();
+        setAnchorEl(null);
+    };
+    if (allFiltersSelected) {
+        return (React.createElement(core.Button, { size: "small", startIcon: React.createElement(commonUi.Icon, { icon: SvgLeafIcon }), classes: { label: classes.triggerLabel }, onClick: handleClear }, noOptionsLabel));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(core.Button, { id: triggerId, "aria-controls": popoverId, "aria-haspopup": "true", "aria-expanded": open, onClick: handleTriggerClick, size: "small", startIcon: React.createElement(commonUi.Icon, { icon: SvgLeafIcon }), classes: { label: classes.triggerLabel } }, triggerLabel),
+        React.createElement(core.Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose }, availableFilters.map(function (option, index) {
+            return (React.createElement(core.MenuItem, { key: index, value: option.id, onClick: function (event) { return handleChange(option, event); } },
+                React.createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
+                React.createElement(core.Box, { ml: 1 }, option.name)));
+        }))));
+};
+
+var useSelectableChipStyles = core.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.createElement(core.Tab, tslib.__assign({ "data-tab-for-section-id": props.value, classes: {
+            root: classes.root,
+            selected: classes.selected,
+        } }, props)));
+};
+
+var useSelectableChipGroupStyles = core.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 = tslib.__rest(props, ["children"]);
+    var classes = useSelectableChipGroupStyles(props);
+    return (React.createElement(core.Tabs, tslib.__assign({ TabIndicatorProps: {
+            hidden: true,
+        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps), children));
+};
+
+var useStyles$4 = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            padding: spacing(0.5, 0),
+            height: 'unset',
+            borderRadius: 4,
+        },
+        label: {
+            paddingLeft: 8,
+            display: 'flex',
+            gridGap: 8,
+            alignItems: 'center',
+        },
+    });
+});
+var SelectedMenuFiltersList = function (props) {
+    var filters = props.filters, onChipClick = props.onChipClick;
+    var classes = useStyles$4();
+    return (React.createElement(React.Fragment, null, filters.map(function (filter, index) { return (React.createElement(core.Chip, { key: filter.name + "-" + index, classes: classes, onClick: function (event) { return onChipClick(filter, event); }, label: React.createElement(React.Fragment, null,
+            React.createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
+            React.createElement(core.Typography, { variant: "caption" }, filter.name),
+            React.createElement(commonUi.Icon, { icon: webIcons.XCircle, size: "large" })) })); })));
+};
+
+var MenuSectionGroup = React.forwardRef(function (props, ref) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(core.Box, tslib.__assign({ display: "flex", flexDirection: "column", gridGap: 40, marginBottom: 4 }, restProps, { ref: ref }, { "data-component-type": "menu-section-group" }), children));
+});
+MenuSectionGroup.displayName = 'MenuSectionGroup';
+
+var useStyles$3 = core.makeStyles(function () { return ({
+    title: {
+        fontWeight: 400,
+        fontSize: 20,
+        lineHeight: '30px',
+    },
+}); });
+
+var MenuSection = React.forwardRef(function (props, ref) {
+    var name = props.name, children = props.children, loading = props.loading, restProps = tslib.__rest(props, ["name", "children", "loading"]);
+    var classes = useStyles$3();
+    return (React.createElement(core.Box, tslib.__assign({}, restProps, { ref: ref, component: 'section' }, { "data-component-type": "menu-section", style: { scrollMarginTop: '70px' } }),
+        React.createElement(core.Box, { marginTop: 1, marginBottom: 4 },
+            React.createElement(core.Typography, { component: "h1", className: classes.title }, loading ? React.createElement(lab.Skeleton, null) : name)),
+        children));
+});
+MenuSection.displayName = 'MenuSection';
+
+var useStyles$2 = core.makeStyles(function (_a) {
+    var _b;
+    var breakpoints = _a.breakpoints;
+    return ({
+        main: (_b = {},
+            _b[breakpoints.down('md')] = {
+                gridTemplateColumns: '1fr',
+            },
+            _b[breakpoints.up('lg')] = {
+                gridTemplateColumns: 'repeat(2, minmax(280px, 1fr))',
+            },
+            _b.display = 'grid',
+            _b.gridGap = 32,
+            _b),
+    });
+});
+
+var MenuItemGroup = React.forwardRef(function (props, ref) {
+    var classes = useStyles$2();
+    props.children; var className = props.className, restProps = tslib.__rest(props, ["children", "className"]);
+    return (React.createElement(core.Box, tslib.__assign({ className: classNames(classes.main, className) }, { ref: ref }, { "data-component-type": "menu-item-group" }, restProps), props.children));
+});
+MenuItemGroup.displayName = 'MenuItemGroup';
+
+var PageSection = function (props) { return (React.createElement(core.Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
+
+var useStyles$1 = core.makeStyles(function () { return ({
+    closeButton: {
+        padding: 0,
+    },
+}); });
+var DialogTitle = function (props) {
+    var Icon = props.Icon, title = props.title, titleId = props.titleId, onClose = props.onClose;
+    var classes = useStyles$1();
+    return (React.createElement(core.DialogTitle, null,
+        React.createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 16 },
+            Icon && Icon,
+            React.createElement(core.Typography, { variant: "h1", id: titleId }, title)),
+        onClose && (React.createElement(core.IconButton, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
+            React.createElement(webIcons.X, null)))));
+};
+
+var DialogSection = function (props) {
+    var edgeToEdge = props.edgeToEdge, borderBottom = props.borderBottom, children = props.children, restProps = tslib.__rest(props, ["edgeToEdge", "borderBottom", "children"]);
+    return (React.createElement(core.Box, tslib.__assign({ paddingTop: 4, paddingBottom: borderBottom ? 4 : 0, paddingX: edgeToEdge ? 0 : 2, borderBottom: borderBottom ? '1px solid #E0E0E0' : undefined }, restProps), children));
+};
+
+var Switch = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {
+            '& $thumb': {
+                backgroundColor: palette.success.main,
+            },
+            '&& + $track': {
+                backgroundColor: palette.success.main,
+                opacity: 0.5,
+            },
+        },
+        switchBase: {
+            color: palette.grey[300],
+        },
+        thumb: {},
+        track: {},
+    });
+})(core.Switch);
+
+var Checkbox = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {},
+        root: {
+            '&$checked': {
+                color: palette.info.main,
+            },
+        },
+    });
+})(core.Checkbox);
+
+var Radio = core.withStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        checked: {},
+        root: {
+            '&$checked': {
+                color: palette.info.main,
+            },
+        },
+    });
+})(core.Radio);
+
+var useStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        '& > div': {
+            padding: 0,
+            '&:last-child': {
+                padding: 0,
+            },
+        },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        gridGap: theme.spacing(1),
+        padding: theme.spacing(2),
+        borderRadius: theme.spacing(2),
+    },
+    button: {
+        color: theme.palette.info.main,
+    },
+    description: {
+        color: theme.palette.grey[700],
+    },
+    header: {
+        color: function (props) {
+            return ({
+                alert: theme.palette.error.main,
+                info: theme.palette.info.main,
+                offer: theme.palette.success.main,
+            }[props.type]);
+        },
+    },
+    headerTitle: {
+        color: function (props) {
+            return ({
+                alert: theme.palette.error.main,
+                info: theme.palette.info.main,
+                offer: theme.palette.success.main,
+            }[props.type]);
+        },
+        fontWeight: 600,
+    },
+    content: {
+        marginLeft: theme.spacing(5),
+    },
+}); });
+
+var bannerIconStyles = { color: 'inherit', width: 24, height: 24 };
+var BannerTypeIcons = {
+    alert: React.createElement(webIcons.Warning, { style: bannerIconStyles }),
+    info: React.createElement(webIcons.Info, { style: bannerIconStyles }),
+    offer: React.createElement(webIcons.DollarSign, { style: bannerIconStyles }),
+};
+
+var MenuBanner = function (props) {
+    var show = props.show;
+    var classes = useStyles(props);
+    if (!show)
+        return null;
+    return (React.createElement(core.Card, { classes: { root: classes.root }, variant: "outlined" },
+        React.createElement(core.CardHeader, { avatar: BannerTypeIcons[props.type], title: props.title, titleTypographyProps: { variant: 'body1' }, classes: { root: classes.header, title: classes.headerTitle } }),
+        React.createElement(MenuBannerDescription, tslib.__assign({}, props)),
+        React.createElement(MenuBannerButton, tslib.__assign({}, props))));
+};
+function MenuBannerDescription(props) {
+    var classes = useStyles(props);
+    var description = props.description;
+    if (!description)
+        return null;
+    return (React.createElement(core.CardContent, { classes: { root: classes.content } },
+        React.createElement(core.Typography, { className: classes.description, variant: "body2" }, props.description)));
+}
+function MenuBannerButton(props) {
+    var classes = useStyles(props);
+    if (!props.buttonLabel)
+        return null;
+    return (React.createElement(core.CardContent, { classes: { root: classes.content } },
+        React.createElement(core.Link, tslib.__assign({}, { component: 'button', variant: 'body2', className: classes.button }, props.ButtonProps), props.buttonLabel)));
+}
+
+var palette = {
+    primary: {
+        main: '#0A202F',
+    },
+    info: {
+        light: '#52B7FF',
+        main: '#0076CB',
+        dark: '#164B54',
+    },
+    success: {
+        light: '#48D3AB',
+        main: '#00B485',
+        dark: '#00663E',
+        contrastText: '#FFFFFF',
+    },
+    error: {
+        light: '#DA777E',
+        main: '#E52021',
+        dark: '#A80005',
+    },
+    warning: {
+        light: '#F0DFBA',
+        main: '#F5C364',
+        dark: '#E57E45',
+    },
+};
+
+var 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,
+};
+
+exports.Button = Button;
+exports.Checkbox = Checkbox;
+exports.DialogSection = DialogSection;
+exports.DialogTitle = DialogTitle;
+exports.DishCheckoutCard = DishCheckoutCard;
+exports.DishDetailsReview = DishDetailsReview;
+exports.DishModifierCard = DishModifierCard;
+exports.ItemTag = ItemTag;
+exports.ItemTagGroup = ItemTagGroup;
+exports.LocationCard = LocationCard;
+exports.MenuBanner = MenuBanner;
+exports.MenuDropdown = MenuDropdown;
+exports.MenuFilter = MenuFilter;
+exports.MenuItem = MenuItem;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuSection = MenuSection;
+exports.MenuSectionGroup = MenuSectionGroup;
+exports.OrderingAppContext = OrderingAppContext;
+exports.OrderingAppContextProvider = OrderingAppContextProvider;
+exports.PageSection = PageSection;
+exports.QuantityPicker = QuantityPicker;
+exports.Radio = Radio;
+exports.ReactionCounter = ReactionCounter;
+exports.ReactionCounterGroup = ReactionCounterGroup;
+exports.SelectableChip = SelectableChip;
+exports.SelectableChipGroup = SelectableChipGroup;
+exports.SelectedMenuFiltersList = SelectedMenuFiltersList;
+exports.StatusTag = StatusTag;
+exports.Switch = Switch;
+exports.orderingTheme = orderingTheme;
+exports.useOrderingAppContext = useOrderingAppContext;
+Object.keys(core).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return core[k]; }
+    });
+});
+//# sourceMappingURL=index.js.map