@popmenu/ordering-ui 0.145.0 → 0.148.0

package/build/cjs/index.js

@@ -192,8 +192,11 @@ const MenuItemPrice = (props) => {
 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)));
+        React.createElement(commonUi.Icon, { icon: icon, size: "large", color: "inherit", "aria-hidden": "true" }),
+        React.createElement(commonUi.Typography, { variant: "body2", color: "grey.900" },
+            count,
+            " ",
+            React.createElement("span", { className: "sr-only" }, label))));
 };
 
 const ReactionCounterGroup = (props) => {
@@ -245,17 +248,17 @@ const MenuItemTags = (props) => {
 };
 
 const MenuItem = React.forwardRef((props, ref) => {
-    const { ariaLabel, onClick, id, description, title, loading, statusTags, image, likeCount, reviewCount, price, available, itemTags, className, ...restProps } = props;
+    const { ariaLabel, onClick, description, title, loading, statusTags, image, likeCount, reviewCount, price, available, itemTags, className, ...restProps } = props;
     const classes = useMenuItemStyles(props);
     const handleClick = (event) => {
-        onClick(id, event);
+        onClick(props.id, event);
     };
     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,
                 statusTags?.featured && React.createElement(StatusTag, { ...statusTags.featured }),
                 React.createElement(core.Box, { display: "flex", gridGap: 8, alignItems: "center" },
-                    React.createElement(core.Typography, { component: "h2", className: classes.cardTitle },
+                    React.createElement(core.Typography, { component: "h3", className: classes.cardTitle },
                         loading ? React.createElement(lab.Skeleton, null) : title,
                         statusTags?.outOfStock && (React.createElement("span", { className: classes.statusTags },
                             React.createElement(StatusTag, { ...statusTags.outOfStock }))),
@@ -276,84 +279,151 @@ MenuItem.displayName = 'MenuItem';
 const useMenuTabStyles = core.makeStyles(({ palette, spacing }) => ({
     icon: {
         minWidth: spacing(2.5),
+        marginRight: spacing(1),
     },
-    root: ({ isUnavailable }) => ({
-        color: isUnavailable ? `${palette.grey[700]} !important` : 'inherit',
-        '&.MuiTab-labelIcon': {
-            minHeight: 'unset',
-        },
+    root: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textDecoration: 'none',
+        color: ({ isUnavailable }) => (isUnavailable ? palette.grey[700] : 'inherit'),
+        padding: spacing(1.5, 2),
+        whiteSpace: 'nowrap',
         maxWidth: spacing(29.5),
-        '& > .MuiTab-wrapper': {
-            flexDirection: 'row-reverse',
-            gridGap: spacing(1),
-            textAlign: 'center',
-            '& > svg': {
-                marginBottom: '0 !important',
-            },
-        },
-    }),
+        outlineOffset: -2,
+    },
+    selected: {
+        fontWeight: 500,
+        borderBottom: `2px solid ${palette.primary.main}`,
+    },
+    visuallyHidden: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: 'hidden',
+        clip: 'rect(0, 0, 0, 0)',
+        whiteSpace: 'nowrap',
+        border: 0,
+    },
 }));
 
 const MenuTab = (props) => {
-    const { isUnavailable, value } = props;
-    const classes = useMenuTabStyles({ isUnavailable });
-    return (React.createElement(core.Tab, { "data-tab-for-section-id": value, classes: {
-            root: classes.root,
-        }, icon: isUnavailable ? React.createElement(commonUi.Icon, { icon: webIcons.Clock, size: "large", className: classes.icon }) : undefined, ...props }));
+    const { href, value, label, onClick, selected, isUnavailable, unavailableLabel } = props;
+    const classes = useMenuTabStyles({ isUnavailable, selected });
+    const handleClick = (event) => {
+        event.preventDefault();
+        onClick(event, value);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            onClick(event, value);
+        }
+    };
+    return (React.createElement("li", null,
+        React.createElement(core.Typography, { variant: "body2" },
+            React.createElement("a", { href: href, className: classNames(classes.root, { [classes.selected]: selected }), onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected ? 'page' : undefined },
+                isUnavailable && React.createElement(commonUi.Icon, { icon: webIcons.Clock, "aria-hidden": "true", size: "large", className: classes.icon }),
+                label,
+                isUnavailable && React.createElement("span", { className: classes.visuallyHidden },
+                    ", ",
+                    unavailableLabel)))));
 };
 
+const scrollButtonBase = {
+    position: 'absolute',
+    zIndex: 1,
+    backgroundColor: 'white',
+    height: '100%',
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 40,
+    opacity: 1,
+    '& svg': {
+        height: 24,
+        width: 24,
+    },
+};
 const useMenuTabGroupStyles = core.makeStyles(() => ({
     root: {
-        position: 'relative' /* Establish positioning context */,
-        overflow: 'hidden' /* Prevent scroll buttons from overflowing */,
-        '& .MuiTabScrollButton-root': {
-            position: 'absolute',
-            zIndex: '1',
-            backgroundColor: 'white',
-            height: '100%' /* Inherit full height of parent */,
-            top: '0',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '40px',
-            opacity: 1,
-            /* Position scroller buttons and add gradient to inner sections */
-            '&:first-child': {
-                left: 0,
-                background: 'linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
-            },
-            '&:last-child': {
-                right: 0,
-                background: 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
-            },
-            /* Ensure tab container fills height */
-            '& .MuiSvgIcon-root': {
-                height: '24px',
-                width: '24px',
-            },
-        },
-        /* Adjust scroller to prevent tabs from being hidden */
-        '.MuiTabs-scroller': {
-            padding: '0 40px' /* Match scroll button width */,
-            height: '100%' /* Ensure it fills parent height */,
-        },
-        /* Ensure tab container fills height */
-        '.MuiTabs-flexContainer': {
-            height: '100%',
-        },
-        /* Remove buttons when scroll is all the way to the left or right */
-        '& .MuiTabScrollButton-root.Mui-disabled': {
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    flexContainer: {
+        display: 'flex',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+        '&::-webkit-scrollbar': {
             display: 'none',
         },
+        height: '100%',
+    },
+    scrollButtonLeft: {
+        ...scrollButtonBase,
+        left: 0,
+        background: 'linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
+    },
+    scrollButtonRight: {
+        ...scrollButtonBase,
+        right: 0,
+        background: 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - 8px), rgba(255, 255, 255, 0) 100%)',
     },
 }));
 
 const MenuTabGroup = (props) => {
-    const { children, ...muiProps } = props;
+    const { children, scrollLeftLabel, scrollRightLabel, ...restProps } = props;
     const classes = useMenuTabGroupStyles();
-    return (React.createElement(core.Tabs, { scrollButtons: "on", variant: "scrollable", classes: {
-            root: classes.root,
-        }, ...muiProps }, children));
+    const scrollContainerRef = React.useRef(null);
+    const [showLeftButton, setShowLeftButton] = React.useState(false);
+    const [showRightButton, setShowRightButton] = React.useState(false);
+    const updateScrollButtons = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        setShowLeftButton(scrollLeft > 0);
+        setShowRightButton(scrollLeft + clientWidth < scrollWidth - 1);
+    }, []);
+    React.useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        updateScrollButtons();
+        container.addEventListener('scroll', updateScrollButtons);
+        window.addEventListener('resize', updateScrollButtons);
+        return () => {
+            container.removeEventListener('scroll', updateScrollButtons);
+            window.removeEventListener('resize', updateScrollButtons);
+        };
+    }, [updateScrollButtons]);
+    const scrollLeft = () => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollBy({ left: -container.clientWidth, behavior: 'smooth' });
+    };
+    const scrollRight = () => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollBy({ left: container.clientWidth, behavior: 'smooth' });
+    };
+    return (React.createElement("nav", { className: classes.root, ...restProps },
+        showLeftButton && (React.createElement(core.IconButton, { className: classes.scrollButtonLeft, onClick: scrollLeft, "aria-label": scrollLeftLabel, size: "small" },
+            React.createElement(commonUi.Icon, { icon: webIcons.ChevronLeft, "aria-hidden": "true" }))),
+        React.createElement("ul", { ref: scrollContainerRef, className: classes.flexContainer }, children),
+        showRightButton && (React.createElement(core.IconButton, { className: classes.scrollButtonRight, onClick: scrollRight, "aria-label": scrollRightLabel, size: "small" },
+            React.createElement(commonUi.Icon, { icon: webIcons.ChevronRight, "aria-hidden": "true" })))));
 };
 
 const useMenuItemModifiersListStyles = core.makeStyles((theme) => ({
@@ -616,6 +686,9 @@ const useDishModifierCardStyles = core.makeStyles((theme) => ({
     },
 }));
 const useRadioModifierFormStyles = core.makeStyles((theme) => ({
+    radioGroup: {
+        gap: theme.spacing(1),
+    },
     label: {
         alignItems: 'center',
         display: 'flex',
@@ -642,6 +715,9 @@ const useRadioModifierFormStyles = core.makeStyles((theme) => ({
     },
 }));
 const useCheckboxModifierFormStyles = core.makeStyles((theme) => ({
+    formGroup: {
+        gap: theme.spacing(1),
+    },
     label: {
         alignItems: 'center',
         display: 'flex',
@@ -690,6 +766,9 @@ const useQuantityPickerStyles = core.makeStyles((theme) => ({
     root: {
         height: theme.spacing(7),
         backgroundColor: 'none',
+        '&:has(:focus-visible)': {
+            outline: `2px solid ${theme.palette.info.main}`,
+        },
     },
 }));
 const useQuantityInputStyles = core.makeStyles((theme) => ({
@@ -705,15 +784,17 @@ const useQuantityInputStyles = core.makeStyles((theme) => ({
         },
         '-moz-appearance': 'textfield',
         fontWeight: 600,
-        padding: 0,
         textAlign: 'center',
         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)),
+        minHeight: theme.spacing(3),
+        minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(3)),
         borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),
-        margin: (props) => (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0),
+        margin: theme.spacing(1),
+        padding: 0,
+        outline: 'none !important',
     },
 }));
 const useStartAdornmentStyles = core.makeStyles((theme) => ({
@@ -728,18 +809,76 @@ const useEndAdornmentStyles = core.makeStyles((theme) => ({
     },
 }));
 
-const QuantityPicker = ({ value, onChange, disabled, preventManualChange, disableIncrement, variation, name, min = 0, max = 99, }) => {
+const LIVE_REGION_CLEAR_DELAY = 2000;
+const QuantityPicker = ({ id, value, onChange, disabled, preventManualChange, disableIncrement, variation, name, min = 0, max = 99, incrementButtonTitle, decrementButtonTitle, }) => {
     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 [liveRegionMessage, setLiveRegionMessage] = React.useState('');
+    const liveRegionTimeoutRef = React.useRef(null);
+    // Clear the live region message after a delay to avoid stale announcements
+    const announceLiveRegion = React.useCallback((message) => {
+        if (liveRegionTimeoutRef.current) {
+            clearTimeout(liveRegionTimeoutRef.current);
+        }
+        setLiveRegionMessage(message);
+        liveRegionTimeoutRef.current = setTimeout(() => {
+            setLiveRegionMessage('');
+        }, LIVE_REGION_CLEAR_DELAY);
+    }, []);
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (liveRegionTimeoutRef.current) {
+                clearTimeout(liveRegionTimeoutRef.current);
+            }
+        };
+    }, []);
     const onIncrement = (event) => {
-        onChange(event, { quantity: value + 1, reason: 'increment' });
+        const newValue = value + 1;
+        onChange(event, { quantity: newValue, reason: 'increment' });
+        announceLiveRegion(String(newValue));
     };
     const onDecrement = (event) => {
-        onChange(event, { quantity: value - 1, reason: 'decrement' });
+        const newValue = value - 1;
+        onChange(event, { quantity: newValue, reason: 'decrement' });
+        announceLiveRegion(String(newValue));
+    };
+    const handleKeyDown = (event) => {
+        let newValue = null;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                if (value < max && !disableIncrement) {
+                    newValue = value + 1;
+                    onChange(event, { quantity: newValue, reason: 'increment' });
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (value > min) {
+                    newValue = value - 1;
+                    onChange(event, { quantity: newValue, reason: 'decrement' });
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (value !== min) {
+                    newValue = min;
+                    onChange(event, { quantity: newValue, reason: 'decrement' });
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                if (value !== max && !disableIncrement) {
+                    newValue = max;
+                    onChange(event, { quantity: newValue, reason: 'increment' });
+                }
+                break;
+        }
     };
     const handleChange = (event) => {
         if (preventManualChange) {
@@ -768,28 +907,46 @@ const QuantityPicker = ({ value, onChange, disabled, preventManualChange, disabl
             setShouldSelect(false);
         }
     }, [shouldSelect, value]);
-    return (React.createElement(core.TextField, { "aria-label": `${name} Quantity`, 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 || 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 <= min },
-                React.createElement(commonUi.Icon, { icon: webIcons.MinusCircle }))),
-        }, inputProps: {
-            'aria-label': `${name} quantity`,
-            min,
-            max,
-        } }));
+    const isAtMin = value <= min;
+    const isAtMax = value >= max || disableIncrement;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(core.TextField, { id: id, classes: fieldClasses, type: "text", variant: variation === 'itemCount' ? 'filled' : 'standard', value: value, disabled: disabled, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: inputRef, InputProps: {
+                classes: inputClasses,
+                disableUnderline: true,
+                endAdornment: (React.createElement(commonUi.IconButton, { title: incrementButtonTitle, "aria-controls": id, "aria-disabled": isAtMax || disabled, tabIndex: -1, className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || isAtMax },
+                    React.createElement(commonUi.Icon, { icon: webIcons.PlusCircle, "aria-hidden": "true" }))),
+                startAdornment: (React.createElement(commonUi.IconButton, { title: decrementButtonTitle, "aria-controls": id, "aria-disabled": isAtMin || disabled, tabIndex: -1, className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || isAtMin },
+                    React.createElement(commonUi.Icon, { icon: webIcons.MinusCircle, "aria-hidden": "true" }))),
+            }, inputProps: {
+                role: 'spinbutton',
+                inputMode: 'numeric',
+                'aria-label': `${name} quantity`,
+                'aria-valuenow': value,
+                'aria-valuemin': min,
+                'aria-valuemax': max,
+            } }),
+        React.createElement("output", { "aria-live": "polite", style: {
+                position: 'absolute',
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                border: 0,
+            } }, liveRegionMessage)));
 };
 
 const Label = (props) => {
     const { name, price, disabled = false, hidePrice = false } = props;
     const classes = useLabelStyles();
-    const priceLabel = hidePrice ? React.createElement(React.Fragment, null, "\u00A0") : `+ ${price}`;
+    const numericPrice = price ? parseFloat(price.replace(/[^0-9.-]/g, '')) : NaN;
+    const shouldHidePrice = hidePrice || !price || numericPrice === 0 || isNaN(numericPrice);
     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({ [classes.disabled]: disabled }) }, name)),
-        price && (React.createElement(core.Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) }, priceLabel))));
+        !shouldHidePrice && (React.createElement(core.Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) }, `+ ${price}`))));
 };
 const Options = (props) => {
     const { handleOptionsClick } = props;
@@ -817,7 +974,7 @@ const SingleSelectModifierControl = (props) => {
         });
     };
     return (React.createElement(core.FormControl, { fullWidth: true },
-        React.createElement(core.RadioGroup, { "aria-label": name }, modifiers.map((modifier) => (React.createElement(core.Box, { key: modifier.id },
+        React.createElement(core.RadioGroup, { className: radioClasses.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,
@@ -845,7 +1002,7 @@ const MultipleSelectControl = (props) => {
         });
     };
     return (React.createElement(core.FormControl, { fullWidth: true },
-        React.createElement(core.FormGroup, null, modifiers.map((modifier) => {
+        React.createElement(core.FormGroup, { className: classes.formGroup }, 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((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, hidePrice: modifier.hidePrice }),
@@ -872,7 +1029,7 @@ const MultipleQuantitySelectControl = (props) => {
                 React.createElement(Label, { name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice }),
                 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 }))),
+                !modifier.outOfStock && (React.createElement(QuantityPicker, { incrementButtonTitle: `Add ${modifier.name}`, decrementButtonTitle: `Remove ${modifier.name}`, id: `${modifier.id}-quantity-picker`, 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: () => handleOptionsClick(modifier.id) })),
                 selectionQuantity[modifier.id] &&
@@ -1171,66 +1328,63 @@ const MenuFilter = (props) => {
 
 const useSelectableChipStyles = core.makeStyles((theme) => ({
     root: {
-        border: '2px solid',
-        borderColor: theme.palette.grey[100],
+        border: '2px solid transparent',
         borderRadius: '50px',
+        boxSizing: 'border-box',
         backgroundColor: theme.palette.grey[100],
-        color: theme.palette.grey[900],
+        color: theme.palette.text.primary,
+        display: 'block',
         padding: theme.spacing(1, 2),
-        fontSize: '0.875rem',
-        fontWeight: 400,
-        minWidth: 'unset',
-        minHeight: 'unset',
-        opacity: 'unset',
-        textTransform: 'none',
-        textAlign: 'left',
         '&:hover': {
-            boxShadow: '0px 0px 0px 1px #757575',
+            boxShadow: `0px 0px 0px 1px ${theme.palette.grey[100]}`,
         },
         '&::-webkit-scrollbar': {
             display: 'none',
         },
-        '&.Mui-selected': {
-            backgroundColor: theme.palette.grey[100],
-            borderColor: '#0A202F',
-            color: theme.palette.grey[900],
-            fontWeight: 400,
-            '&:hover': {
-                background: theme.palette.grey[100],
-                boxShadow: 'none',
-            },
-        },
+    },
+    selected: {
+        fontWeight: 500,
+        border: `2px solid ${theme.palette.text.primary}`,
     },
 }));
 
 const SelectableChip = (props) => {
+    const { href, value, label, onClick, selected } = 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 }));
+    const handleClick = (event) => {
+        event.preventDefault();
+        onClick(event, value);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            onClick(event, value);
+        }
+    };
+    return (React.createElement("li", null,
+        React.createElement(core.Typography, { variant: "body2" },
+            React.createElement("a", { href: href, className: classNames({ [classes.root]: true, [classes.selected]: selected }), onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected ? 'true' : undefined }, label))));
 };
 
 const useSelectableChipGroupStyles = core.makeStyles(({ breakpoints, spacing }) => ({
     flexContainer: {
         [breakpoints.up('lg')]: {
+            flexDirection: 'column',
             alignItems: 'flex-start',
         },
+        display: 'flex',
         gridGap: spacing(1.5),
+        listStyle: 'none',
         padding: 2,
-    },
-    flexContainerVertical: {
-        gridGap: spacing(1.5),
-        padding: 2,
+        margin: 0,
     },
 }));
 
 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));
+    const { children, ...restProps } = props;
+    const classes = useSelectableChipGroupStyles();
+    return (React.createElement("nav", { ...restProps },
+        React.createElement("ul", { className: classes.flexContainer }, children)));
 };
 
 const useStyles$4 = core.makeStyles(({ spacing }) => ({
@@ -1268,7 +1422,7 @@ const MenuSection = React.forwardRef((props, ref) => {
     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)),
+            React.createElement(core.Typography, { component: "h2", className: classes.title, tabIndex: -1 }, loading ? React.createElement(lab.Skeleton, null) : name)),
         children));
 });
 MenuSection.displayName = 'MenuSection';
@@ -1537,6 +1691,14 @@ const overrides = {
             },
         },
     },
+    MuiOutlinedInput: {
+        input: {
+            '&::placeholder': {
+                color: '#757575',
+                opacity: 1,
+            },
+        },
+    },
     MuiInputLabel: {
         root: {
             color: '#757575',
@@ -1561,12 +1723,39 @@ const overrides = {
         },
         inputMultiline: {},
     },
+    MuiRadio: {
+        root: {
+            '&.Mui-focusVisible': {
+                outline: `2px solid ${palette.info.main} !important`,
+            },
+        },
+    },
     MuiCssBaseline: {
         '@global': {
+            a: {
+                color: 'inherit',
+                textDecoration: 'none',
+                fontWeight: 'inherit',
+                '&:hover': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+                '&:focus': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+                '&:active': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+                '&:visited': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+            },
             '*:focus-visible, a:focus-visible': {
                 '&': {
                     outline: `2px solid ${palette.info.main} !important`,
-                    borderRadius: 8,
                 },
             },
             'sr-only': {
@@ -1589,6 +1778,11 @@ const props = {
         disableElevation: true,
         disableFocusRipple: true,
     },
+    MuiDialog: {
+        PaperProps: {
+            'aria-modal': 'true',
+        },
+    },
     MuiDialogTitle: {
         disableTypography: true,
     },
@@ -1598,6 +1792,10 @@ const props = {
     MuiTab: {
         disableFocusRipple: true,
     },
+    MuiPaper: {
+        elevation: 0,
+        square: true,
+    },
 };
 
 const fonts = ['"Poppins"', '"sans-serif"'];