@popmenu/ordering-ui 0.126.6 → 0.127.1

package/build/cjs/index.js

@@ -1,11 +1,11 @@
 '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');
+var classNames = require('classnames');
+var commonUi = require('@popmenu/common-ui');
+var webIcons = require('@popmenu/web-icons');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -26,9 +26,9 @@ function _interopNamespaceDefault(e) {
 
 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 = {};
+const Button = React.forwardRef((props, ref) => {
+    const { variation = 'primary', ...muiProps } = props;
+    const variationProps = {};
     switch (variation) {
         case 'primary':
             variationProps.variant = 'contained';
@@ -39,137 +39,173 @@ var Button = React.forwardRef(function (props, ref) {
             variationProps.color = 'primary';
             break;
     }
-    return React.createElement(core.Button, tslib.__assign({}, variationProps, muiProps, { ref: ref }));
+    return React.createElement(core.Button, { ...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',
+const useStatusTagStyles = core.makeStyles((theme) => ({
+    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],
+    },
+}));
+
+const StatusTag = ({ color = 'default', label, size = 'md', variant }) => {
+    const classes = useStatusTagStyles();
+    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.displayName = 'StatusTag';
+
+const useMenuItemStyles = core.makeStyles((theme) => ({
+    cardActionArea: {
+        display: 'flex',
+        gridGap: 16,
+        height: '100%',
+        [theme.breakpoints.up('lg')]: {
+            border: '1px solid #E0E0E0',
+            borderRadius: theme.spacing(2),
+            padding: theme.spacing(2),
         },
-        outOfStockTag: {
-            minWidth: '90px',
-            marginLeft: theme.spacing(1),
-            display: 'inline-block',
-            verticalAlign: 'bottom',
+    },
+    card: {
+        [theme.breakpoints.down('md')]: {
+            '&:after': {
+                content: '""',
+                position: 'absolute',
+                backgroundColor: '#E0E0E0',
+                width: '100%',
+                height: 1,
+                bottom: -16,
+                left: 0,
+            },
         },
-    });
-});
+        height: 185,
+        position: 'relative',
+        overflow: 'visible',
+    },
+    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 ({
+const useStyles$6 = core.makeStyles(() => ({
     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();
+}));
+const MenuItemImg = (props) => {
+    const { image = {} } = props;
+    const { src } = image;
+    const 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) {
+const MenuItemInfo = (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;
+const useStyles$5 = core.makeStyles(({ palette, spacing }) => ({
+    plusIcon: {
+        height: '100%',
+        padding: spacing(0.25),
+        background: (props) => (props.available ? palette.info.main : 'none'),
+        color: (props) => (props.available ? palette.info.contrastText : palette.warning.main),
+        borderRadius: '30px',
+        marginRight: spacing(1),
+    },
+}));
+const MenuItemPrice = (props) => {
+    const 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)));
+};
+
+const ReactionCounter = (props) => {
+    const { count, icon, label } = props;
     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;
+const ReactionCounterGroup = (props) => {
+    const { children } = props;
     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;
+const MenuItemReactions = (props) => {
+    const { likeCount, reviewCount } = props;
+    const showLikes = likeCount ? likeCount > 0 : false;
+    const 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" })));
+        showLikes && React.createElement(ReactionCounter, { icon: webIcons.Heart, count: likeCount ?? 0, label: "likes" }),
+        showReviews && React.createElement(ReactionCounter, { icon: webIcons.Reviews, count: 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 ({
+const useItemTagStyles = core.makeStyles((theme) => ({
     root: {
         color: theme.palette.text.primary,
         borderColor: theme.palette.text.primary,
@@ -183,156 +219,33 @@ var useItemTagStyles = core.makeStyles(function (theme) { return ({
     text: {
         lineHeight: 1.5,
     },
-}); });
+}));
 
-var ItemTag = React.forwardRef(function (props, ref) {
-    var alt = props.alt, children = props.children;
-    var classes = useItemTagStyles();
+const ItemTag = React.forwardRef((props, ref) => {
+    const { alt, children } = props;
+    const 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;
+const ItemTagGroup = (props) => {
+    const { children } = props;
     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)); })));
+const MenuItemTags = (props) => {
+    const { itemTags } = props;
+    return (React.createElement(ItemTagGroup, null, itemTags?.slice(0, 5).map((itemTag) => (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 (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'default' : _b, label = _a.label, _c = _a.size, size = _c === void 0 ? 'md' : _c, variant = _a.variant;
-    var classes = useStatusTagStyles();
-    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.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) {
+const MenuItem = React.forwardRef((props, ref) => {
+    const { ariaLabel, onClick, id, description, isOutOfStock, title, loading, isFeatured, image, likeCount, reviewCount, price, available, itemTags, className, ...restProps } = props;
+    const classes = useMenuItemStyles(props);
+    const handleClick = (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),
+    return (React.createElement(core.Card, { 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" }),
@@ -351,7 +264,49 @@ var MenuItem = React.forwardRef(function (props, ref) {
 });
 MenuItem.displayName = 'MenuItem';
 
-var useDishCheckoutCardStyles = core.makeStyles(function (theme) { return ({
+const useMenuTabStyles = core.makeStyles(({ palette, spacing }) => ({
+    root: {
+        '& > .MuiTab-wrapper': {
+            flexDirection: 'row-reverse',
+            gridGap: spacing(1),
+            textAlign: 'center',
+            '& > svg': {
+                marginBottom: '0 !important',
+            },
+        },
+    },
+    isUnavailable: {
+        color: palette.grey[700],
+    },
+}));
+
+const MenuTab = (props) => {
+    const { isUnavailable, value } = props;
+    const classes = useMenuTabStyles(props);
+    return (React.createElement(core.Tab, { "data-tab-for-section-id": value, classes: {
+            root: classes.root,
+        }, disabled: isUnavailable, icon: isUnavailable ? React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large" }) : undefined, ...props }));
+};
+
+const MenuTabGroup = (props) => {
+    const { children, ...muiProps } = props;
+    return (React.createElement(core.Tabs, { scrollButtons: "on", variant: "scrollable", ...muiProps }, children));
+};
+
+const OrderingAppContext = React.createContext(null);
+const useOrderingAppContext = () => {
+    const context = React.useContext(OrderingAppContext);
+    if (!context) {
+        throw new Error('useOrderingAppContext has to be used within <OrderingAppContext.Provider>');
+    }
+    return context;
+};
+const OrderingAppContextProvider = (props) => {
+    const context = React.useState(props.defaultContext);
+    return React.createElement(OrderingAppContext.Provider, { value: context }, props.children);
+};
+
+const useDishCheckoutCardStyles = core.makeStyles((theme) => ({
     root: {
         '&:first-of-type': {
             paddingTop: 0,
@@ -366,10 +321,7 @@ var useDishCheckoutCardStyles = core.makeStyles(function (theme) { return ({
         flexDirection: 'column',
         width: '100%',
         gridGap: theme.spacing(2),
-        borderBottom: function (_a) {
-            var borderBottom = _a.borderBottom;
-            return (borderBottom ? '1px solid #E0E0E0' : 'none');
-        },
+        borderBottom: ({ borderBottom }) => (borderBottom ? '1px solid #E0E0E0' : 'none'),
     },
     deleteButton: {
         color: theme.palette.info.main,
@@ -430,58 +382,35 @@ var useDishCheckoutCardStyles = core.makeStyles(function (theme) { return ({
         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) {
+const DishCheckoutCard = ({ id, borderBottom, name, quantity, modifierGroups, onDelete, onEdit, onQuantityChange, price, specialInstructions, disabled, warningMessage, image = {}, messages, maxQuantity = 99, minQuantity = 1, }) => {
+    const { src } = image;
+    const classes = useDishCheckoutCardStyles({ borderBottom });
+    const [appContext] = useOrderingAppContext();
+    const [open, setOpen] = React.useState(false);
+    const formattedPrice = typeof price === 'number' ? `${appContext.currencySymbol ?? ''}${price.toFixed(2)}` : price;
+    const handleQuantityChange = (event) => onQuantityChange(id, parseInt(event.target.value, 10));
+    const labelString = (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) {
+    const formatModifiers = (groups, nested = false) => {
+        return groups.map((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;
-            })
+            const modifiers = group.selectedModifiers
+                .map((modifier) => modifier.quantity > 1 ? `${modifier.modifierName} × ${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)
-                    : [];
-            });
+            const nestedGroups = group.selectedModifiers.flatMap((modifier) => modifier?.selectedModifierGroups && modifier?.selectedModifierGroups?.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)));
+                    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 },
@@ -508,7 +437,7 @@ var DishCheckoutCard = function (props) {
                     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(core.Select, { disabled: disabled, value: quantity, onOpen: () => setOpen(true), onClose: () => 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: {
@@ -521,7 +450,7 @@ var DishCheckoutCard = function (props) {
                         },
                         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)); }))),
+                    }, className: classes.select }, Array.from({ length: maxQuantity - minQuantity + 1 }, (_, index) => (React.createElement(core.MenuItem, { key: index + minQuantity, value: index + minQuantity, "aria-label": `${index + minQuantity}` }, index + minQuantity))))),
             React.createElement(commonUi.Typography, { className: classes.price }, formattedPrice)),
         warningMessage && (React.createElement(commonUi.Box, { className: classes.warning },
             React.createElement(commonUi.Box, { paddingTop: 0.25 },
@@ -529,8 +458,8 @@ var DishCheckoutCard = function (props) {
             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;
+const DishDetailsReview = React.forwardRef((props) => {
+    const { userName, userAvatarUrl, content, createdAgo, alt } = props;
     return (React.createElement(commonUi.Box, { display: "flex" },
         React.createElement(commonUi.Box, { mr: 1 },
             React.createElement(commonUi.Avatar, { size: "small", src: userAvatarUrl, alt: alt })),
@@ -542,14 +471,14 @@ var DishDetailsReview = React.forwardRef(function (props) {
 });
 DishDetailsReview.displayName = 'DishDetailsReview';
 
-var useDishModifierCardStyles = core.makeStyles(function (theme) { return ({
+const useDishModifierCardStyles = core.makeStyles((theme) => ({
     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",
+        color: `${theme.palette.grey[900]} !important`,
     },
     error: {
         color: theme.palette.error.main,
@@ -561,8 +490,8 @@ var useDishModifierCardStyles = core.makeStyles(function (theme) { return ({
         fontSize: theme.spacing(2.25),
         marginBottom: theme.spacing(2),
     },
-}); });
-var useRadioModifierFormStyles = core.makeStyles(function (theme) { return ({
+}));
+const useRadioModifierFormStyles = core.makeStyles((theme) => ({
     label: {
         alignItems: 'center',
         display: 'flex',
@@ -587,8 +516,8 @@ var useRadioModifierFormStyles = core.makeStyles(function (theme) { return ({
             flex: 1,
         },
     },
-}); });
-var useCheckboxModifierFormStyles = core.makeStyles(function (theme) { return ({
+}));
+const useCheckboxModifierFormStyles = core.makeStyles((theme) => ({
     label: {
         alignItems: 'center',
         display: 'flex',
@@ -613,8 +542,8 @@ var useCheckboxModifierFormStyles = core.makeStyles(function (theme) { return ({
             flex: 1,
         },
     },
-}); });
-var useLabelStyles = core.makeStyles(function (theme) { return ({
+}));
+const useLabelStyles = core.makeStyles((theme) => ({
     label: {
         margin: theme.spacing(0.5, 0),
     },
@@ -624,27 +553,27 @@ var useLabelStyles = core.makeStyles(function (theme) { return ({
     price: {
         color: theme.palette.grey[700],
     },
-}); });
-var useOptionsStyles = core.makeStyles(function (theme) { return ({
+}));
+const useOptionsStyles = core.makeStyles((theme) => ({
     options: {
         color: theme.palette.info.main,
         marginBottom: theme.spacing(1.5),
         padding: 0,
     },
-}); });
+}));
 
-var useQuantityPickerStyles = core.makeStyles(function (theme) { return ({
+const useQuantityPickerStyles = core.makeStyles((theme) => ({
     root: {
         height: theme.spacing(7),
         backgroundColor: 'none',
     },
-}); });
-var useQuantityInputStyles = core.makeStyles(function (theme) { return ({
+}));
+const useQuantityInputStyles = core.makeStyles((theme) => ({
     root: {
         height: '100%',
         width: 'min-content',
         borderRadius: theme.spacing(12.5),
-        background: function (props) { return (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]); },
+        background: (props) => (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]),
     },
     input: {
         '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
@@ -654,81 +583,103 @@ var useQuantityInputStyles = core.makeStyles(function (theme) { return ({
         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 ({
+        zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),
+        backgroundColor: (props) => (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'),
+        alignSelf: (props) => (props.variation === 'modifierCount' ? 'stretch' : 'unset'),
+        height: (props) => (props.variation === 'modifierCount' ? 'auto' : 'unset'),
+        minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)),
+        borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),
+        margin: (props) => (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0),
+    },
+}));
+const useStartAdornmentStyles = core.makeStyles((theme) => ({
     root: {
         color: theme.palette.text.primary,
-        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+        zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),
     },
-}); });
-var useEndAdornmentStyles = core.makeStyles(function (theme) { return ({
+}));
+const useEndAdornmentStyles = core.makeStyles((theme) => ({
     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) {
+const QuantityPicker = ({ value, onChange, disabled, preventManualChange, disableIncrement, variation, name, min = 1, max = 99, }) => {
+    const fieldClasses = useQuantityPickerStyles();
+    const inputClasses = useQuantityInputStyles({ variation, value });
+    const startAdornmentClasses = useStartAdornmentStyles({ variation, value });
+    const endAdornmentClasses = useEndAdornmentStyles({ variation, value });
+    const inputRef = React.useRef(null);
+    const [shouldSelect, setShouldSelect] = React.useState(false);
+    const onIncrement = (event) => {
         onChange(event, { quantity: value + 1, reason: 'increment' });
     };
-    var onDecrement = function (event) {
+    const onDecrement = (event) => {
         onChange(event, { quantity: value - 1, reason: 'decrement' });
     };
-    var handleChange = function (event) {
+    const handleChange = (event) => {
         if (preventManualChange) {
             event.preventDefault();
+            return;
         }
-        if (!preventManualChange) {
-            onChange(event, { quantity: parseInt(event.target.value), reason: 'change' });
+        let newValue = parseInt(event.target.value, 10);
+        if (isNaN(newValue)) {
+            newValue = min;
+            setShouldSelect(true);
         }
+        else {
+            setShouldSelect(false);
+        }
+        // Clamp value between min and max
+        if (newValue < min)
+            newValue = min;
+        if (newValue > max)
+            newValue = max;
+        onChange(event, { quantity: newValue, reason: 'change' });
     };
-    return (React.createElement(core.TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, InputProps: {
+    React.useEffect(() => {
+        if (shouldSelect && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+            setShouldSelect(false);
+        }
+    }, [shouldSelect, value]);
+    return (React.createElement(core.TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, inputRef: inputRef, 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 },
+            endAdornment: (React.createElement(commonUi.IconButton, { "aria-label": `increase quantity ${name}`, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || value >= max || 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 },
+            startAdornment: (React.createElement(commonUi.IconButton, { "aria-label": `decrease quantity ${name}`, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= min },
                 React.createElement(commonUi.Icon, { icon: webIcons.MinusCircle }))),
+        }, inputProps: {
+            min,
+            max,
         } }));
 };
 
-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();
+const Label = (props) => {
+    const { name, price, disabled = false } = props;
+    const 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)) },
+            React.createElement(core.Typography, { className: classNames({ [classes.disabled]: disabled }) }, name)),
+        price && (React.createElement(core.Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) },
             "+ ",
             price))));
 };
-var Options = function (props) {
-    var handleOptionsClick = props.handleOptionsClick;
-    var classes = useOptionsStyles();
+const Options = (props) => {
+    const { handleOptionsClick } = props;
+    const 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; }));
+const SingleSelectModifierControl = (props) => {
+    const { modifiers, name, isOutOfStock, onChange, value, handleOptionsClick, aggregatePrice, isRequired } = props;
+    const radioClasses = useRadioModifierFormStyles();
+    const makeHandleChange = (modifier) => (e) => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
         if (!isModifierInValue && modifier.hasModifiers) {
             handleOptionsClick(modifier.id);
         }
@@ -740,27 +691,23 @@ var SingleSelectModifierControl = function (props) {
             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); } }))));
-        }))));
+        React.createElement(core.RadioGroup, { "aria-label": name }, modifiers.map((modifier) => (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: value[0]?.modifierId === modifier.id, className: classNames({
+                        [radioClasses.hideRadio]: modifier.outOfStock,
+                        [radioClasses.radio]: !modifier.outOfStock,
+                    }), 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: () => 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; }));
+const MultipleSelectControl = (props) => {
+    const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props;
+    const classes = useCheckboxModifierFormStyles();
+    const makeHandleChange = (modifier) => () => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
         if (!isModifierInValue && modifier.hasModifiers) {
             handleOptionsClick(modifier.id);
         }
@@ -772,21 +719,20 @@ var MultipleSelectControl = function (props) {
             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;
+        React.createElement(core.FormGroup, null, modifiers.map((modifier) => {
             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(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some((v) => v.modifierId === modifier.id), onChange: makeHandleChange(modifier), control: React.createElement(core.Checkbox, { className: classNames({ [classes.hideCheckbox]: modifier.outOfStock }, { [classes.checkbox]: !modifier.outOfStock }), 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); } }))));
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: () => 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) {
+const MultipleQuantitySelectControl = (props) => {
+    const { modifiers, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, selectionQuantity } = props;
+    const makeHandleChange = (modifier) => (_e, customEvent) => {
         onChange({
             isRadio: false,
             modifierId: modifier.id,
@@ -795,16 +741,16 @@ var MultipleQuantitySelectControl = function (props) {
             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.FormGroup, null, modifiers.map((modifier) => (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); } })),
+                modifier.hasModifiers && !modifier.outOfStock && (React.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id) })),
                 selectionQuantity[modifier.id] &&
                     selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
                     selectionQuantity[modifier.id].requiredSelectionCount !==
@@ -812,25 +758,25 @@ var MultipleQuantitySelectControl = function (props) {
                     selectionQuantity[modifier.id].currentSelectionCount,
                     "/",
                     selectionQuantity[modifier.id].requiredSelectionCount,
-                    " selected"))))); }))));
+                    " selected")))))))));
 };
-var ModifierControls = function (props) {
+const ModifierControls = (props) => {
     switch (props.type) {
         case 'singleSelect':
-            return React.createElement(SingleSelectModifierControl, tslib.__assign({}, props));
+            return React.createElement(SingleSelectModifierControl, { ...props });
         case 'multipleSelect':
-            return React.createElement(MultipleSelectControl, tslib.__assign({}, props));
+            return React.createElement(MultipleSelectControl, { ...props });
         case 'multipleQuantitySelect':
-            return React.createElement(MultipleQuantitySelectControl, tslib.__assign({}, props));
+            return React.createElement(MultipleQuantitySelectControl, { ...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';
+const getStatusTagProps = (props) => {
+    const { messages, error, isRequired, isOutOfStock } = props;
+    const { optionalText, outOfStockText, requiredText } = messages;
+    let color = 'default';
     switch (true) {
         case error:
             color = 'error';
@@ -839,7 +785,7 @@ var getStatusTagProps = function (props) {
             color = 'warning';
             break;
     }
-    var label = optionalText;
+    let label = optionalText;
     switch (true) {
         case isOutOfStock:
             label = outOfStockText;
@@ -848,40 +794,33 @@ var getStatusTagProps = function (props) {
             label = requiredText;
             break;
     }
-    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
-    return { color: color, label: label, variant: variant };
+    const variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color, label, 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();
+const DishModifierCard = (props) => {
+    const { aggregatePrice, name, disableNewSelections, modifiers, value, messages, onChange, type, error, isOutOfStock, isRequired, handleOptionsClick, selectionQuantity, } = props;
+    const 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(StatusTag, { ...getStatusTagProps(props) }),
+            !isOutOfStock && (React.createElement(commonUi.Typography, { variant: "subtitle1", className: classNames({ [classes.error]: error, [classes.helperText]: !error }) }, 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;
+const useLocationCardStyles = core.makeStyles((theme) => {
+    const { palette: { info, grey, secondary, background }, spacing, } = theme;
+    const selectedBackgroundColor = core.lighten(info.light, 0.9);
+    const 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)';
-            },
+            border: ({ selected }) => 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;
-            },
+            backgroundColor: ({ selected, outOfRange }) => selected ? selectedBackgroundColor : outOfRange ? grey[200] : backgroundColor,
         },
         actionAreaFocusHighlight: {
             '&:disabled': {
@@ -925,15 +864,15 @@ var useLocationCardStyles = core.makeStyles(function (theme) {
     };
 });
 
-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 () {
+const LocationCard = (props) => {
+    const { name, address, distance, generalAvailability, pickupAvailability, deliveryAvailability, onClick, selected, value, outOfRange, outOfRangeMessage, CardActionAreaProps, ...muiProps } = props;
+    const classes = useLocationCardStyles(props);
+    const anyAvailability = generalAvailability || pickupAvailability || deliveryAvailability;
+    const handleClick = () => {
         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),
+    return (React.createElement(core.Card, { className: classes.root, ...muiProps },
+        React.createElement(core.CardActionArea, { 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" },
@@ -951,55 +890,48 @@ var LocationCard = function (props) {
                     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),
+const useMenuDropdownStyles = core.makeStyles((theme) => ({
+    formControl: {
+        [theme.breakpoints.up('lg')]: {
+            alignSelf: 'start',
         },
-        unavailable: {
-            color: theme.palette.grey[700],
+    },
+    menuItem: {
+        alignItems: 'center',
+        display: 'flex',
+        gridGap: theme.spacing(1),
+    },
+    select: {
+        '& .MuiSelect-root': {
+            '&:focus': {
+                outline: '2px solid #0076CB',
+                borderRadius: 8,
+            },
+            color: '#212121',
+            padding: theme.spacing(1, 0.5, 1, 0.5),
+            zIndex: 10,
+            [theme.breakpoints.down('md')]: {
+                width: 0,
+                minWidth: 0,
+                padding: 0,
+            },
         },
-    });
-});
+    },
+    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');
-    });
+const MenuDropdown = (props) => {
+    const { menuOptions, onSelect, selectedOptionId } = props;
+    const classes = useMenuDropdownStyles(props);
+    const [open, setOpen] = React.useState(false);
+    const isMobile = core.useMediaQuery((theme) => theme.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: {
+        React.createElement(core.Select, { SelectDisplayProps: { 'aria-labelledby': 'menu-dropdown-label' }, value: selectedOptionId, onOpen: () => setOpen(true), onClose: () => setOpen(false), disableUnderline: true, onChange: (event) => onSelect(event.target.value), fullWidth: true, open: open, startAdornment: React.createElement(core.InputAdornment, { position: "start", onClick: () => setOpen(true) },
+                React.createElement(commonUi.Icon, { icon: webIcons.RestaurantMenu, size: isMobile ? 'extra-large' : 'large' })), IconComponent: () => (React.createElement(core.InputAdornment, { position: "end", onClick: () => setOpen(true) },
+                React.createElement(commonUi.Icon, { color: "#0076CB", icon: open ? webIcons.ChevronUp : webIcons.ChevronDown, size: "large" }))), MenuProps: {
                 disablePortal: true,
                 anchorOrigin: {
                     vertical: 'bottom',
@@ -1010,9 +942,9 @@ var MenuDropdown = function (props) {
                     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 : '') },
+            }, className: classes.select, renderValue: (selected) => menuOptions.find((menuOption) => menuOption.id === selected)?.name }, menuOptions.map((option, index) => (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" }))); }))));
+            option.isUnavailable && React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large" })))))));
 };
 
 var _path;
@@ -1032,36 +964,36 @@ function SvgLeafIcon(props) {
   })));
 }
 
-var useMenuFilterStyles = core.makeStyles(function (theme) { return ({
+const useMenuFilterStyles = core.makeStyles((theme) => ({
     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) {
+}));
+
+const MenuFilter = (props) => {
+    const { options, onChange, onClear, value, triggerLabel = 'Add Filter', noOptionsLabel = 'Reset Filters' } = props;
+    const triggerId = 'menu-filter-trigger';
+    const popoverId = 'menu-filter-popover';
+    const classes = useMenuFilterStyles();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const optionIds = options.map((opt) => opt.id);
+    const valueIds = value.map((val) => val.id);
+    const availableIds = optionIds.filter((optionId) => !valueIds.includes(optionId));
+    const availableFilters = options.filter((opt) => availableIds.includes(opt.id));
+    const allFiltersSelected = availableFilters.length === 0;
+    const handleChange = (value, event) => {
         onChange(value, event);
         setAnchorEl(null);
     };
-    var handleTriggerClick = function (event) {
+    const handleTriggerClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    var handleClose = function () {
+    const handleClose = () => {
         setAnchorEl(null);
     };
-    var handleClear = function () {
+    const handleClear = () => {
         onClear();
         setAnchorEl(null);
     };
@@ -1070,46 +1002,14 @@ var MenuFilter = function (props) {
     }
     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(core.Menu, { id: popoverId, anchorEl: anchorEl, open: open, onClose: handleClose }, availableFilters.map((option, index) => {
+            return (React.createElement(core.MenuItem, { key: index, value: option.id, onClick: (event) => handleChange(option, event) },
                 React.createElement(ItemTag, { alt: option.abbr, color: option.color }, option.abbr),
                 React.createElement(core.Box, { ml: 1 }, option.name)));
         }))));
 };
 
-var useMenuTabStyles = core.makeStyles(function (_a) {
-    var palette = _a.palette, spacing = _a.spacing;
-    return ({
-        root: {
-            '& > .MuiTab-wrapper': {
-                flexDirection: 'row-reverse',
-                gridGap: spacing(1),
-                textAlign: 'center',
-                '& > svg': {
-                    marginBottom: '0 !important',
-                },
-            },
-        },
-        isUnavailable: {
-            color: palette.grey[700],
-        },
-    });
-});
-
-var MenuTab = function (props) {
-    var isUnavailable = props.isUnavailable, value = props.value;
-    var classes = useMenuTabStyles(props);
-    return (React.createElement(core.Tab, tslib.__assign({ "data-tab-for-section-id": value, classes: {
-            root: classes.root,
-        }, disabled: isUnavailable, icon: isUnavailable ? React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large" }) : undefined }, props)));
-};
-
-var MenuTabGroup = function (props) {
-    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
-    return (React.createElement(core.Tabs, tslib.__assign({ scrollButtons: "on", variant: "scrollable" }, muiProps), children));
-};
-
-var useSelectableChipStyles = core.makeStyles(function (theme) { return ({
+const useSelectableChipStyles = core.makeStyles((theme) => ({
     root: {
         border: '2px solid',
         borderColor: theme.palette.grey[100],
@@ -1137,124 +1037,113 @@ var useSelectableChipStyles = core.makeStyles(function (theme) { return ({
             },
         },
     },
-}); });
+}));
 
-var SelectableChip = function (props) {
-    var classes = useSelectableChipStyles(props);
-    return (React.createElement(core.Tab, tslib.__assign({ "data-tab-for-section-id": props.value, classes: {
+const SelectableChip = (props) => {
+    const classes = useSelectableChipStyles(props);
+    return (React.createElement(core.Tab, { "data-tab-for-section-id": props.value, classes: {
             root: classes.root,
             selected: classes.selected,
-        } }, props)));
+        }, ...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),
-    });
-});
+const useSelectableChipGroupStyles = core.makeStyles(({ breakpoints, spacing }) => ({
+    flexContainer: {
+        [breakpoints.down('md')]: {
+            padding: spacing(0, 2),
+        },
+        [breakpoints.up('lg')]: {
+            alignItems: 'flex-start',
+            flexDirection: 'column',
+        },
+        gridGap: spacing(1.5),
+    },
+}));
 
-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: {
+const SelectableChipGroup = (props) => {
+    const { children, ...muiProps } = props;
+    const classes = useSelectableChipGroupStyles(props);
+    return (React.createElement(core.Tabs, { TabIndicatorProps: {
             hidden: true,
-        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps), children));
+        }, 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,
+const useStyles$4 = core.makeStyles(({ spacing }) => ({
+    root: {
+        padding: spacing(0.5, 0),
+        height: 'unset',
+        borderRadius: 4,
+    },
+    label: {
+        paddingLeft: 8,
+        display: 'flex',
+        gridGap: 8,
+        alignItems: 'center',
+    },
+}));
+const SelectedMenuFiltersList = (props) => {
+    const { filters, onChipClick } = props;
+    const classes = useStyles$4();
+    return (React.createElement(React.Fragment, null, filters.map((filter, index) => (React.createElement(core.Chip, { key: `${filter.name}-${index}`, classes: classes, onClick: (event) => 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" })) })); })));
+            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 ({
+const useStyles$3 = core.makeStyles(() => ({
     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' } }),
+const MenuSection = React.forwardRef((props, ref) => {
+    const { name, children, loading, ...restProps } = props;
+    const classes = useStyles$3();
+    return (React.createElement(core.Box, { ...restProps, 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),
-    });
+const MenuSectionGroup = React.forwardRef((props, ref) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(core.Box, { display: "flex", flexDirection: "column", gridGap: 40, marginBottom: 4, ...restProps, ref, "data-component-type": "menu-section-group" }, children));
 });
+MenuSectionGroup.displayName = 'MenuSectionGroup';
 
-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));
+const useStyles$2 = core.makeStyles(({ breakpoints }) => ({
+    main: {
+        [breakpoints.down('md')]: {
+            gridTemplateColumns: '1fr',
+        },
+        [breakpoints.up('lg')]: {
+            gridTemplateColumns: 'repeat(2, minmax(280px, 1fr))',
+        },
+        display: 'grid',
+        gridGap: 32,
+    },
+}));
+
+const MenuItemGroup = React.forwardRef((props, ref) => {
+    const classes = useStyles$2();
+    const { children, className, ...restProps } = props;
+    return (React.createElement(core.Box, { className: classNames(classes.main, className), 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)); };
+const PageSection = (props) => (React.createElement(core.Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children));
 
-var useStyles$1 = core.makeStyles(function () { return ({
+const useStyles$1 = core.makeStyles(() => ({
     closeButton: {
         padding: 0,
     },
-}); });
-var DialogTitle = function (props) {
-    var Icon = props.Icon, title = props.title, titleId = props.titleId, onClose = props.onClose;
-    var classes = useStyles$1();
+}));
+const DialogTitle = (props) => {
+    const { Icon, title, titleId, onClose } = props;
+    const classes = useStyles$1();
     return (React.createElement(core.DialogTitle, null,
         React.createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 16 },
             Icon && Icon,
@@ -1263,56 +1152,47 @@ var DialogTitle = function (props) {
             React.createElement(commonUi.Icon, { icon: webIcons.X })))));
 };
 
-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));
+const DialogSection = (props) => {
+    const { edgeToEdge, borderBottom, children, ...restProps } = props;
+    return (React.createElement(core.Box, { 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,
-            },
+const Switch = core.withStyles(({ palette }) => ({
+    checked: {
+        '& $thumb': {
+            backgroundColor: palette.success.main,
         },
-        switchBase: {
-            color: palette.grey[300],
+        '&& + $track': {
+            backgroundColor: palette.success.main,
+            opacity: 0.5,
         },
-        thumb: {},
-        track: {},
-    });
-})(core.Switch);
+    },
+    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,
-            },
+const Checkbox = core.withStyles(({ palette }) => ({
+    checked: {},
+    root: {
+        '&$checked': {
+            color: palette.info.main,
         },
-    });
-})(core.Checkbox);
+    },
+}))(core.Checkbox);
 
-var Radio = core.withStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        checked: {},
-        root: {
-            '&$checked': {
-                color: palette.info.main,
-            },
+const Radio = core.withStyles(({ palette }) => ({
+    checked: {},
+    root: {
+        '&$checked': {
+            color: palette.info.main,
         },
-    });
-})(core.Radio);
+    },
+}))(core.Radio);
 
-var useStyles = core.makeStyles(function (theme) { return ({
+const useStyles = core.makeStyles((theme) => ({
     root: {
         '& > div': {
             padding: 0,
@@ -1334,63 +1214,59 @@ var useStyles = core.makeStyles(function (theme) { return ({
         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]);
-        },
+        color: (props) => ({
+            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]);
-        },
+        color: (props) => ({
+            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 = {
+const bannerIconStyles = { color: 'inherit', width: 24, height: 24 };
+const 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);
+const MenuBanner = (props) => {
+    const { show } = props;
+    const 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))));
+        React.createElement(MenuBannerDescription, { ...props }),
+        React.createElement(MenuBannerButton, { ...props })));
 };
 function MenuBannerDescription(props) {
-    var classes = useStyles(props);
-    var description = props.description;
+    const classes = useStyles(props);
+    const { description } = props;
     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);
+    const 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)));
+        React.createElement(core.Link, { component: 'button', variant: 'body2', className: classes.button, ...props.ButtonProps }, props.buttonLabel)));
 }
 
-var palette = {
+const palette = {
     primary: {
         main: '#0A202F',
     },
@@ -1417,7 +1293,7 @@ var palette = {
     },
 };
 
-var overrides = {
+const overrides = {
     MuiButton: {
         root: {
             borderRadius: 32,
@@ -1490,7 +1366,7 @@ var overrides = {
     },
 };
 
-var props = {
+const props = {
     MuiButton: {
         disableElevation: true,
     },
@@ -1499,8 +1375,8 @@ var props = {
     },
 };
 
-var fonts = ['"Poppins"', '"sans-serif"'];
-var typography = {
+const fonts = ['"Poppins"', '"sans-serif"'];
+const typography = {
     htmlFontSize: 16,
     fontFamily: fonts.join(', '),
     h1: {
@@ -1557,11 +1433,11 @@ var typography = {
     },
 };
 
-var orderingTheme = {
-    typography: typography,
-    palette: palette,
-    overrides: overrides,
-    props: props,
+const orderingTheme = {
+    typography,
+    palette,
+    overrides,
+    props,
 };
 
 exports.Button = Button;