@popmenu/ordering-ui 0.84.2 → 0.85.1

package/build/index.js

@@ -147,52 +147,62 @@ 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$5 = core.makeStyles(function () { return ({
+var useStyles$6 = core.makeStyles(function () { return ({
     img: {
         objectFit: 'cover',
         width: '100%',
@@ -202,7 +212,7 @@ var useStyles$5 = core.makeStyles(function () { return ({
 var MenuItemImg = function (props) {
     var _a = props.image, image = _a === void 0 ? {} : _a;
     var src = image.src, alt = image.alt;
-    var classes = useStyles$5();
+    var classes = useStyles$6();
     if (!src || !alt) {
         return null;
     }
@@ -294,6 +304,24 @@ function SvgClock(props) {
   })))));
 }
 
+var _path$13;
+
+function _extends$2r() { _extends$2r = 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$2r.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2r({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
+  })));
+}
+
 var _g$1m, _defs$J;
 
 function _extends$2q() { _extends$2q = 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$2q.apply(this, arguments); }
@@ -337,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); }
@@ -1012,7 +1061,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$4 = core.makeStyles(function (_a) {
+var useStyles$5 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -1026,7 +1075,7 @@ var useStyles$4 = core.makeStyles(function (_a) {
 });
 var Paper = React.forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$4(props);
+    var classes = useStyles$5(props);
     return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1200,24 +1249,24 @@ var MenuItemReactions = function (props) {
         showReviews && React__default['default'].createElement(ReactionCounter, { icon: SvgReviews, count: reviewCount !== null && reviewCount !== void 0 ? reviewCount : 0 })));
 };
 
-var useStyles$3 = core.makeStyles(function (_a) {
+var useStyles$4 = core.makeStyles(function (_a) {
     var palette = _a.palette, spacing = _a.spacing;
     return ({
         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$3();
+    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)));
 };
 
@@ -1272,7 +1321,7 @@ var MenuItem = React.forwardRef(function (props, ref) {
                 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 }))));
 });
@@ -1280,13 +1329,23 @@ MenuItem.displayName = 'MenuItem';
 
 var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
     root: {
+        '&:first-of-type': {
+            paddingTop: 0,
+        },
+        '&:last-of-type': {
+            paddingBottom: 0,
+            borderBottom: 'none',
+        },
         color: theme.palette.grey[900],
         padding: theme.spacing(2, 0),
         display: 'flex',
         flexDirection: 'column',
         width: '100%',
         gridGap: theme.spacing(2),
-        border: '1px',
+        borderBottom: function (_a) {
+            var borderBottom = _a.borderBottom;
+            return (borderBottom ? '1px solid #E0E0E0' : 'none');
+        },
     },
     deleteButton: {
         color: theme.palette.info.main,
@@ -1294,6 +1353,11 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
     editButton: {
         color: theme.palette.info.main,
     },
+    name: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: '24px',
+    },
     price: {
         fontSize: '18px',
     },
@@ -1301,10 +1365,10 @@ var useDishCheckoutCardStyles = styles.makeStyles(function (theme) { return ({
         paddingLeft: 'unset',
         borderRadius: '25px',
         '& fieldset': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.grey[900],
+            borderColor: theme.palette.grey[700],
             borderWidth: '1px',
         },
         '& .MuiSelect-root': {
@@ -1351,7 +1415,7 @@ var DishCheckoutCard = function (props) {
     return (React__default['default'].createElement(core.Box, { className: classes.root },
         React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", gridGap: 3 },
             React__default['default'].createElement(core.Box, null,
-                React__default['default'].createElement(Typography, { variant: "h6" }, name),
+                React__default['default'].createElement(Typography, { variant: "h6", className: classes.name }, name),
                 modifiers &&
                     modifiers.map(function (modifier, i) { return (React__default['default'].createElement(Typography, { key: i, variant: "body2" },
                         modifier[0],
@@ -1385,14 +1449,14 @@ var DishCheckoutCard = function (props) {
 };
 
 var DishDetailsReview = React.forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, timeSinceCreated = props.timeSinceCreated;
+    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo;
     return (React__default['default'].createElement(core.Box, { display: "flex" },
         React__default['default'].createElement(core.Box, { mr: 1 },
             React__default['default'].createElement(Avatar, { size: "small", src: userAvatarUrl })),
         React__default['default'].createElement(core.Box, { width: "100%" },
             React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", mb: 1 },
                 React__default['default'].createElement(Typography, { color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
-                React__default['default'].createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, timeSinceCreated)),
+                React__default['default'].createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, createdAgo)),
             React__default['default'].createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
 });
 DishDetailsReview.displayName = 'DishDetailsReview';
@@ -1715,11 +1779,11 @@ var LocationCard = function (props) {
                     React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between" },
                         React__default['default'].createElement(Typography, { className: classes.name }, name),
                         selected && React__default['default'].createElement(Icon, { icon: SvgCheck, size: "extra-large", className: classes.checkIcon })),
-                    React__default['default'].createElement(Typography, { className: classes.address, variant: "body2" }, address),
+                    address && (React__default['default'].createElement(Typography, { className: classes.address, variant: "body2" }, address)),
                     React__default['default'].createElement(Typography, { className: classes.distance }, distance)),
-                React__default['default'].createElement(core.Box, { className: classes.availability },
+                availability && (React__default['default'].createElement(core.Box, { className: classes.availability },
                     React__default['default'].createElement(Icon, { icon: SvgClock, size: "large" }),
-                    React__default['default'].createElement(Typography, { variant: "body2" }, availability))))));
+                    React__default['default'].createElement(Typography, { variant: "body2" }, availability)))))));
 };
 
 var _g, _defs;
@@ -1754,21 +1818,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: {
@@ -1785,8 +1857,9 @@ var MenuDropdown = function (props) {
             }, className: classes.select }, menuOptions.map(function (option, index) { return (React__default['default'].createElement(core.MenuItem, { key: index, value: option.id }, option.name)); }))));
 };
 
-var useMenuFilterStyles = styles.makeStyles(function () { return ({
+var useMenuFilterStyles = styles.makeStyles(function (theme) { return ({
     triggerLabel: {
+        color: theme.palette.info.main,
         whiteSpace: 'nowrap',
     },
 }); });
@@ -1933,28 +2006,32 @@ 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$2 = core.makeStyles(function (_a) {
+var useStyles$3 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -1972,7 +2049,7 @@ var useStyles$2 = core.makeStyles(function (_a) {
 });
 var SelectedMenuFiltersList = function (props) {
     var filters = props.filters, onChipClick = props.onChipClick;
-    var classes = useStyles$2();
+    var classes = useStyles$3();
     return (React__default['default'].createElement(React__default['default'].Fragment, null, filters.map(function (filter, index) { return (React__default['default'].createElement(core.Chip, { key: filter.name + "-" + index, classes: classes, deleteIcon: React__default['default'].createElement(SvgXCircle, null), onDelete: function (event) { return onChipClick(filter, event); }, label: React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement(ItemTag, { alt: filter.abbr, color: filter.color }, filter.abbr),
             React__default['default'].createElement(core.Typography, { variant: "caption" }, filter.name)) })); })));
@@ -1984,7 +2061,7 @@ var MenuSectionGroup = React.forwardRef(function (props, ref) {
 });
 MenuSectionGroup.displayName = 'MenuSectionGroup';
 
-var useStyles$1 = core.makeStyles(function () { return ({
+var useStyles$2 = core.makeStyles(function () { return ({
     title: {
         fontWeight: 400,
         fontSize: 20,
@@ -1994,7 +2071,7 @@ var useStyles$1 = core.makeStyles(function () { return ({
 
 var MenuSection = React.forwardRef(function (props, ref) {
     var name = props.name, children = props.children, restProps = __rest$1(props, ["name", "children"]);
-    var classes = useStyles$1();
+    var classes = useStyles$2();
     return (React__default['default'].createElement(core.Box, __assign$1({}, restProps, { ref: ref }, { "data-component-type": "menu-section" }),
         React__default['default'].createElement(core.Box, { marginTop: 1, marginBottom: 4 },
             React__default['default'].createElement(core.Typography, { className: classes.title }, name)),
@@ -2002,23 +2079,51 @@ var MenuSection = React.forwardRef(function (props, ref) {
 });
 MenuSection.displayName = 'MenuSection';
 
-var useStyles = 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();
+    var classes = useStyles$1();
     return (React__default['default'].createElement(core.Box, __assign$1({ className: classes.main }, { ref: ref }, { "data-component-type": "menu-item-group" }), props.children));
 });
 MenuItemGroup.displayName = 'MenuItemGroup';
 
 var PageSection = function (props) { return (React__default['default'].createElement(core.Box, { p: 4, borderBottom: "1px solid #E0E0E0" }, props.children)); };
 
+var useStyles = core.makeStyles(function () { return ({
+    closeButton: {
+        padding: 0,
+    },
+}); });
+var DialogTitle = function (props) {
+    var Icon = props.Icon, title = props.title, onClose = props.onClose;
+    var classes = useStyles();
+    return (React__default['default'].createElement(core.DialogTitle, null,
+        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 16 },
+            Icon && Icon,
+            React__default['default'].createElement(core.Typography, { variant: "h6" }, title)),
+        React__default['default'].createElement(core.IconButton, { color: "inherit", className: classes.closeButton, "aria-label": "Close dialog", onClick: onClose },
+            React__default['default'].createElement(SvgX, null))));
+};
+
+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 palette = {
     primary: {
         light: '#7B7FA3',
@@ -2058,6 +2163,50 @@ var overrides = {
         root: {
             borderRadius: 32,
             textTransform: 'none',
+            padding: '18px 16px',
+        },
+        outlined: {
+            padding: 'inherit',
+        },
+        textPrimary: {
+            color: '#0076CB',
+        },
+    },
+    MuiDialogTitle: {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderBottom: '1px solid #E0E0E0',
+        },
+    },
+    MuiDialogContent: {
+        root: {
+            '&:first-child': {
+                paddingTop: 0,
+            },
+            paddingTop: 0,
+            paddingRight: 0,
+            paddingLeft: 0,
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    },
+    MuiDialogActions: {
+        root: {
+            padding: 16,
+            boxShadow: '-4px 0px 8px 0px #0000001A',
+        },
+    },
+    MuiDialog: {
+        paper: {
+            minWidth: 500,
+        },
+        paperWidthMd: {
+            minWidth: 640,
+        },
+        paperFullScreen: {
+            minWidth: 'unset',
         },
     },
 };
@@ -2066,6 +2215,9 @@ var props = {
     MuiButton: {
         disableElevation: true,
     },
+    MuiDialogTitle: {
+        disableTypography: true,
+    },
 };
 
 var fonts = ['"Poppins"', '"sans-serif"'];
@@ -2134,6 +2286,8 @@ var orderingTheme = {
 };
 
 exports.Button = Button$1;
+exports.DialogSection = DialogSection;
+exports.DialogTitle = DialogTitle;
 exports.DishCheckoutCard = DishCheckoutCard;
 exports.DishDetailsReview = DishDetailsReview;
 exports.DishModifierCard = DishModifierCard;