@popmenu/ordering-ui 0.85.0 → 0.86.0

package/build/index.js

@@ -147,50 +147,60 @@ var Button$1 = React.forwardRef(function (props, ref) {
 });
 Button$1.displayName = 'Button';
 
-var useDishCardStyles = styles.makeStyles(function (theme) { return ({
-    cardActionArea: {
-        display: 'flex',
-        gridGap: 16,
-        height: '100%',
-    },
-    card: {
-        // TODO: https://app.shortcut.com/popmenu/story/92467/hide-menuitem-borders-in-2-column-view-widths
-        '&:after': {
-            content: '""',
-            position: 'absolute',
-            backgroundColor: '#E0E0E0',
-            width: '100%',
-            height: 1,
-            bottom: -16,
-            left: 0,
+var useDishCardStyles = styles.makeStyles(function (theme) {
+    var _a, _b;
+    return ({
+        cardActionArea: (_a = {
+                display: 'flex',
+                gridGap: 16,
+                height: '100%'
+            },
+            _a[theme.breakpoints.up('lg')] = {
+                border: '1px solid #E0E0E0',
+                borderRadius: theme.spacing(2),
+                padding: theme.spacing(2),
+            },
+            _a),
+        card: (_b = {},
+            _b[theme.breakpoints.down('md')] = {
+                '&:after': {
+                    content: '""',
+                    position: 'absolute',
+                    backgroundColor: '#E0E0E0',
+                    width: '100%',
+                    height: 1,
+                    bottom: -16,
+                    left: 0,
+                },
+            },
+            _b.height = 185,
+            _b.position = 'relative',
+            _b.overflow = 'visible',
+            _b),
+        cardTitle: {
+            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',
         },
-        height: 185,
-        position: 'relative',
-        overflow: 'visible',
-    },
-    cardTitle: {
-        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',
-        color: theme.palette.grey[700],
-        '-webkit-line-clamp': 2,
-        display: '-webkit-box',
-        '-webkit-box-orient': 'vertical',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-    },
-}); });
+        cardDescription: {
+            fontWeight: 400,
+            fontSize: 14,
+            lineHeight: '20px',
+            color: theme.palette.grey[700],
+            '-webkit-line-clamp': 2,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
+    });
+});
 
 var useStyles$6 = core.makeStyles(function () { return ({
     img: {
@@ -355,6 +365,27 @@ function SvgHeart(props) {
   })));
 }
 
+var _g$1c;
+
+function _extends$2d() { _extends$2d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2d.apply(this, arguments); }
+
+function SvgLock(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2d({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1c || (_g$1c = /*#__PURE__*/React__namespace.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12.667 7.333H3.333C2.597 7.333 2 7.93 2 8.668v4.667c0 .736.597 1.333 1.333 1.333h9.334c.736 0 1.333-.597 1.333-1.333V8.667c0-.737-.597-1.333-1.333-1.333z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M4.667 7.333V4.668a3.333 3.333 0 116.666 0v2.667"
+  }))));
+}
+
 var _g$19, _defs$C;
 
 function _extends$24() { _extends$24 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$24.apply(this, arguments); }
@@ -777,12 +808,12 @@ var Button = React.forwardRef(function (props, ref) {
 });
 Button.displayName = 'Button';
 
-var Checkbox = React.forwardRef(function (props, ref) {
+var Checkbox$1 = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var control = React__default['default'].createElement(MuiCheckbox__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
     return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Checkbox.displayName = 'Checkbox';
+Checkbox$1.displayName = 'Checkbox';
 
 var getBackground = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
@@ -1052,12 +1083,12 @@ Paper.defaultProps = {
     legacyStyles: false,
 };
 
-var Radio = React.forwardRef(function (props, ref) {
+var Radio$1 = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var control = React__default['default'].createElement(MuiRadio__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
     return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Radio.displayName = 'Radio';
+Radio$1.displayName = 'Radio';
 
 styles.makeStyles(function () { return ({
     textfield: {
@@ -1097,13 +1128,13 @@ var useSwitchStyles = styles.makeStyles(function (theme) { return ({
     track: {},
 }); });
 
-var Switch = React.forwardRef(function (props, ref) {
+var Switch$1 = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
     var classes = useSwitchStyles(props);
     var control = React__default['default'].createElement(MuiSwitch__default['default'], __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
     return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Switch.displayName = 'Switch';
+Switch$1.displayName = 'Switch';
 
 var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
     root: {
@@ -1224,18 +1255,18 @@ var useStyles$4 = core.makeStyles(function (_a) {
         plusIcon: {
             height: '100%',
             padding: spacing(0.25),
-            background: palette.info.main,
-            color: palette.info.contrastText,
+            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$4();
+    var classes = useStyles$4(props);
     return (React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center" },
         React__default['default'].createElement(core.Box, { display: "flex", className: classes.plusIcon },
-            React__default['default'].createElement(Icon, { icon: SvgPlus, size: "medium" })),
+            React__default['default'].createElement(Icon, { icon: props.available ? SvgPlus : SvgLock, size: "medium" })),
         React__default['default'].createElement(core.Typography, null, props.price)));
 };
 
@@ -1277,8 +1308,112 @@ var MenuItemTags = function (props) {
     return (React__default['default'].createElement(ItemTagGroup, null, itemTags === null || itemTags === void 0 ? void 0 : itemTags.slice(0, 5).map(function (itemTag) { return (React__default['default'].createElement(ItemTag, { key: itemTag.name, alt: itemTag.name, color: itemTag.color }, itemTag.abbr)); })));
 };
 
+var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        borderRadius: '5px',
+        display: 'flex',
+        padding: theme.spacing(1),
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+    },
+    filled: {
+        backgroundColor: theme.palette.grey[100],
+        color: theme.palette.grey[900],
+    },
+    outlined: {
+        border: "1px solid var(--surfaces-card-stroke, " + theme.palette.grey[900] + ")",
+    },
+    small: {
+        padding: theme.spacing(0.25, 0.75),
+    },
+    default: {
+        color: theme.palette.grey[900],
+    },
+    warning: {
+        borderColor: theme.palette.warning.dark,
+        color: theme.palette.warning.dark,
+    },
+    error: {
+        borderColor: theme.palette.error.main,
+        color: theme.palette.error.main,
+    },
+}); });
+
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+var StatusTag = function (props) {
+    var variant = props.variant, label = props.label, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.color, color = _b === void 0 ? 'default' : _b;
+    var classes = useStatusTagStyles(props);
+    return (React__default['default'].createElement(core.Box, { className: classNames([classes.root, classes[color], classes[variant], size === 'sm' ? classes.small : '']) },
+        React__default['default'].createElement(Typography, { variant: "caption" }, label)));
+};
+StatusTag.defaultProps = {
+    color: 'default',
+    error: false,
+};
+StatusTag.displayName = 'StatusTag';
+
 var MenuItem = React.forwardRef(function (props, ref) {
-    var onClick = props.onClick, id = props.id, title = props.title, description = props.description;
+    var onClick = props.onClick, id = props.id, title = props.title, description = props.description, isOutOfStock = props.isOutOfStock;
     var classes = useDishCardStyles(props);
     var handleClick = function (event) {
         onClick(id, event);
@@ -1286,11 +1421,13 @@ var MenuItem = React.forwardRef(function (props, ref) {
     return (React__default['default'].createElement(core.Card, { className: classes.card, ref: ref, elevation: 0, "data-component-type": "menu-item" },
         React__default['default'].createElement(core.CardActionArea, { className: classes.cardActionArea, onClick: handleClick },
             React__default['default'].createElement(MenuItemInfo, null,
-                React__default['default'].createElement(core.Typography, { className: classes.cardTitle }, title),
+                React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
+                    React__default['default'].createElement(core.Typography, { className: classes.cardTitle }, title),
+                    isOutOfStock && React__default['default'].createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "sm" })),
                 React__default['default'].createElement(core.Typography, { className: classes.cardDescription, paragraph: true }, description),
                 React__default['default'].createElement(MenuItemReactions, { likeCount: props.likeCount, reviewCount: props.reviewCount }),
                 React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", alignItems: "end", flexGrow: 1 },
-                    React__default['default'].createElement(MenuItemPrice, { price: props.price }),
+                    React__default['default'].createElement(MenuItemPrice, { price: props.price, available: props.available }),
                     React__default['default'].createElement(MenuItemTags, { itemTags: props.itemTags }))),
             React__default['default'].createElement(MenuItemImg, { image: props.image }))));
 });
@@ -1479,117 +1616,21 @@ var useLabelStyles = styles.makeStyles(function (theme) { return ({
     label: {
         margin: theme.spacing(0.5, 0),
     },
-    price: {
-        color: theme.palette.grey[700],
-    },
-}); });
-
-var useStatusTagStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        borderRadius: '5px',
-        display: 'flex',
-        padding: theme.spacing(1),
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 'fit-content',
-    },
-    filled: {
-        backgroundColor: theme.palette.grey[100],
-        color: theme.palette.grey[900],
-    },
-    outlined: {
-        border: "1px solid var(--surfaces-card-stroke, " + theme.palette.grey[900] + ")",
-    },
-    default: {
-        color: theme.palette.grey[900],
-    },
-    warning: {
-        borderColor: theme.palette.warning.dark,
+    outOfStock: {
         color: theme.palette.warning.dark,
     },
-    error: {
-        borderColor: theme.palette.error.main,
-        color: theme.palette.error.main,
+    price: {
+        color: theme.palette.grey[700],
     },
 }); });
 
-var classnames = {exports: {}};
-
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString === Object.prototype.toString) {
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				} else {
-					classes.push(arg.toString());
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if (module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-}(classnames));
-
-var classNames = classnames.exports;
-
-var StatusTag = function (props) {
-    var variant = props.variant, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a;
-    var classes = useStatusTagStyles(props);
-    return (React__default['default'].createElement(core.Box, { className: classNames([classes.root, classes[color], classes[variant]]) },
-        React__default['default'].createElement(Typography, { variant: "caption" }, label)));
-};
-StatusTag.defaultProps = {
-    color: 'default',
-    error: false,
-};
-StatusTag.displayName = 'StatusTag';
-
 var Label = function (props) {
-    var name = props.name, price = props.price, disabled = props.disabled;
+    var name = props.name, price = props.price, disabled = props.disabled, isOutOfStock = props.isOutOfStock;
     var classes = useLabelStyles();
     return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
-        React__default['default'].createElement(core.Typography, null, name),
+        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React__default['default'].createElement(core.Typography, null, name),
+            !isOutOfStock && disabled && (React__default['default'].createElement(core.Typography, { variant: "caption", className: classes.outOfStock }, "Out of stock"))),
         price && React__default['default'].createElement(core.Typography, { className: !disabled ? classes.price : '' },
             "+ ",
             price)));
@@ -1611,9 +1652,9 @@ var CheckboxGroup = function (props) {
     };
     return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
         var targetValue = value === null || value === void 0 ? void 0 : value.find(function (v) { return v.id == modifier.id; });
-        return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price
+        return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock || modifier.outOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price
                     ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2)
-                    : null, disabled: isOutOfStock }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
+                    : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
     })));
 };
 var RadioGroup = function (props) {
@@ -1631,7 +1672,7 @@ var RadioGroup = function (props) {
             },
         ]);
     };
-    return (React__default['default'].createElement(MuiRadioGroup__default['default'], { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Radio, { className: classes.radio, disabled: isOutOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null, disabled: isOutOfStock }) })); })));
+    return (React__default['default'].createElement(MuiRadioGroup__default['default'], { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Radio, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }) })); })));
 };
 
 var ModifierOptionsControl = function (props) {
@@ -1649,17 +1690,18 @@ var ModifierOptionsControl = function (props) {
 var DishModifierCard = function (props) {
     var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
     var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText, helperText = messages.helperText;
+    var isFullyOutOfStock = isOutOfStock || !modifiers.some(function (modifier) { return !modifier.outOfStock; });
     var classes = useDishModifierCardStyles();
     var color = 'default';
     switch (true) {
         case error:
             color = 'error';
-        case isOutOfStock:
+        case isFullyOutOfStock:
             color = 'warning';
     }
     var label = optionalText;
     switch (true) {
-        case isOutOfStock:
+        case isFullyOutOfStock:
             label = outOfStockText;
             break;
         case isRequired:
@@ -1671,11 +1713,11 @@ var DishModifierCard = function (props) {
             React__default['default'].createElement(core.Box, { className: classes.nameContainer },
                 React__default['default'].createElement(Typography, { className: classes.name }, name),
                 React__default['default'].createElement(core.Box, { className: classes.statusTagContainer },
-                    React__default['default'].createElement(StatusTag, { variant: isRequired || isOutOfStock ? 'outlined' : 'filled', label: label, color: color }))),
-            React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText)),
+                    React__default['default'].createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }))),
+            !isFullyOutOfStock && (React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText))),
         React__default['default'].createElement(core.Box, null,
             React__default['default'].createElement(core.FormControl, null,
-                React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock })))));
+                React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isFullyOutOfStock })))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -1787,21 +1829,29 @@ function SvgRestaurantMenuIcon(props) {
   })))));
 }
 
-var useMenuDropdownStyles = styles.makeStyles(function (theme) { return ({
-    select: {
-        '& .MuiSelect-root': {
-            color: '#212121',
-            padding: theme.spacing(1, 0.5, 1, 0.5),
-            zIndex: 10,
+var useMenuDropdownStyles = styles.makeStyles(function (theme) {
+    var _a;
+    return ({
+        formControl: (_a = {},
+            _a[theme.breakpoints.up('lg')] = {
+                alignSelf: 'start',
+            },
+            _a),
+        select: {
+            '& .MuiSelect-root': {
+                color: '#212121',
+                padding: theme.spacing(1, 0.5, 1, 0.5),
+                zIndex: 10,
+            },
         },
-    },
-}); });
+    });
+});
 
 var MenuDropdown = function (props) {
     var menuOptions = props.menuOptions, onSelect = props.onSelect, selectedOptionId = props.selectedOptionId;
     var classes = useMenuDropdownStyles(props);
     var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    return (React__default['default'].createElement(core.FormControl, { hiddenLabel: true },
+    return (React__default['default'].createElement(core.FormControl, { hiddenLabel: true, classes: { root: classes.formControl } },
         React__default['default'].createElement(core.Select, { open: open, value: selectedOptionId, labelId: "menu-dropdown-select", onClick: function () { return setOpen(!open); }, disableUnderline: true, onChange: function (event) { return onSelect(event.target.value); }, fullWidth: true, startAdornment: React__default['default'].createElement(core.InputAdornment, { position: "start" },
                 React__default['default'].createElement(Icon, { icon: SvgRestaurantMenuIcon, size: "large" })), IconComponent: function () { return (React__default['default'].createElement(core.InputAdornment, { position: "end" },
                 React__default['default'].createElement(Icon, { color: "#0076CB", icon: open ? SvgChevronUp : SvgChevronDown, size: "large" }))); }, MenuProps: {
@@ -1967,25 +2017,29 @@ var SelectableChip = function (props) {
         } }, props)));
 };
 
-var useSelectableChipGroupStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-    flexContainer: {
-        gridGap: theme.spacing(1.5),
-    },
-}); });
+var useSelectableChipGroupStyles = styles.makeStyles(function (_a) {
+    var _b;
+    var breakpoints = _a.breakpoints, spacing = _a.spacing;
+    return ({
+        flexContainer: (_b = {},
+            _b[breakpoints.down('md')] = {
+                padding: spacing(0, 2),
+            },
+            _b[breakpoints.up('lg')] = {
+                alignItems: 'flex-start',
+                flexDirection: 'column',
+            },
+            _b.gridGap = spacing(1.5),
+            _b),
+    });
+});
 
 var SelectableChipGroup = function (props) {
     var children = props.children, muiProps = __rest$1(props, ["children"]);
     var classes = useSelectableChipGroupStyles(props);
     return (React__default['default'].createElement(core.Tabs, __assign$1({ TabIndicatorProps: {
             hidden: true,
-        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps),
-        React__default['default'].createElement(core.Box, { minWidth: "1px" }),
-        children,
-        React__default['default'].createElement(core.Box, { minWidth: "1px" })));
+        }, variant: "scrollable", scrollButtons: "off", classes: classes }, muiProps), children));
 };
 
 var useStyles$3 = core.makeStyles(function (_a) {
@@ -2036,14 +2090,22 @@ var MenuSection = React.forwardRef(function (props, ref) {
 });
 MenuSection.displayName = 'MenuSection';
 
-var useStyles$1 = core.makeStyles(function () { return ({
-    main: {
-        display: 'grid',
-        // tune so that 2x columns hit at the md breakpoint
-        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-        gridGap: 32,
-    },
-}); });
+var useStyles$1 = 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$1();
@@ -2073,6 +2135,50 @@ var DialogSection = function (props) {
     return (React__default['default'].createElement(core.Box, { paddingTop: 4, paddingBottom: props.borderBottom ? 4 : 0, paddingX: props.edgeToEdge ? 0 : 2, borderBottom: props.borderBottom ? '1px solid #E0E0E0' : undefined }, props.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 palette = {
     primary: {
         light: '#7B7FA3',
@@ -2117,6 +2223,9 @@ var overrides = {
         outlined: {
             padding: 'inherit',
         },
+        textPrimary: {
+            color: '#0076CB',
+        },
     },
     MuiDialogTitle: {
         root: {
@@ -2144,6 +2253,17 @@ var overrides = {
             boxShadow: '-4px 0px 8px 0px #0000001A',
         },
     },
+    MuiDialog: {
+        paper: {
+            minWidth: 500,
+        },
+        paperWidthMd: {
+            minWidth: 640,
+        },
+        paperFullScreen: {
+            minWidth: 'unset',
+        },
+    },
 };
 
 var props = {
@@ -2221,6 +2341,7 @@ var orderingTheme = {
 };
 
 exports.Button = Button$1;
+exports.Checkbox = Checkbox;
 exports.DialogSection = DialogSection;
 exports.DialogTitle = DialogTitle;
 exports.DishCheckoutCard = DishCheckoutCard;
@@ -2239,12 +2360,14 @@ 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) {