@popmenu/ordering-ui 0.154.0 → 0.155.0

package/build/cjs/components/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ButtonProps } from './ButtonProps';
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "className" | "style" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "variation" | "disableFocusRipple" | "href" | "size" | "variant" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps"> & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/DialogSection/DialogSection.d.ts

@@ -1,8 +1,8 @@
 import { BoxProps } from '@material-ui/core';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 interface DialogSectionProps extends BoxProps {
     edgeToEdge?: boolean;
     borderBottom?: boolean;
 }
-export declare const DialogSection: (props: PropsWithChildren<DialogSectionProps>) => React.JSX.Element;
+export declare const DialogSection: (props: PropsWithChildren<DialogSectionProps>) => JSX.Element;
 export {};

package/build/cjs/components/DialogTitle/DialogTitle.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 interface DialogTitleProps {
     title: string;
     titleId: string;
     Icon?: ReactNode;
     onClose?: () => void;
 }
-export declare const DialogTitle: (props: DialogTitleProps) => React.JSX.Element;
+export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
 export {};

package/build/cjs/components/DishCheckoutCard/DishCheckoutCard.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { DishCheckoutCardProps } from './DishCheckoutCardProps';
-export declare const DishCheckoutCard: ({ id, borderBottom, name, quantity, modifierGroups, onDelete, onEdit, onQuantityChange, price, specialInstructions, disabled, warningMessage, warningMessageLevel, image, messages, maxQuantity, minQuantity, }: DishCheckoutCardProps) => React.JSX.Element;
+export declare const DishCheckoutCard: ({ id, borderBottom, name, quantity, modifierGroups, onDelete, onEdit, onQuantityChange, price, specialInstructions, disabled, warningMessage, warningMessageLevel, image, messages, maxQuantity, minQuantity, }: DishCheckoutCardProps) => JSX.Element;

package/build/cjs/components/DishModifierCard/DishModifierCard.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import { DishModifierCardProps } from './DishModifierCardProps';
 export declare const DishModifierCard: {
-    (props: DishModifierCardProps): React.JSX.Element;
+    (props: DishModifierCardProps): JSX.Element;
     displayName: string;
 };

package/build/cjs/components/DishModifierCard/ModifierControls.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { ModifierOptionsControlProps } from './DishModifierCardProps';
-export declare const ModifierControls: (props: ModifierOptionsControlProps) => React.JSX.Element | null;
+export declare const ModifierControls: (props: ModifierOptionsControlProps) => JSX.Element | null;

package/build/cjs/components/DishModifierCard/ModifierForm.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CheckboxModifierFormProps, RadioModifierFormProps } from './DishModifierCardProps';
-export declare const CheckboxGroup: (props: CheckboxModifierFormProps) => React.JSX.Element;
-export declare const RadioGroup: (props: RadioModifierFormProps) => React.JSX.Element;
+export declare const CheckboxGroup: (props: CheckboxModifierFormProps) => JSX.Element;
+export declare const RadioGroup: (props: RadioModifierFormProps) => JSX.Element;

package/build/cjs/components/ExpandableModifierGroup/ExpandableModifierGroup.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import { ExpandableModifierGroupProps } from './ExpandableModifierGroupProps';
 export declare const ExpandableModifierGroup: {
-    ({ name, children, defaultExpanded, selectedSummary, }: ExpandableModifierGroupProps): React.JSX.Element;
+    ({ name, children, defaultExpanded, selectedSummary, }: ExpandableModifierGroupProps): JSX.Element;
     displayName: string;
 };

package/build/cjs/components/ItemTagGroup/ItemTagGroup.d.ts

@@ -1,2 +1,2 @@
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const ItemTagGroup: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element;
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const ItemTagGroup: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/build/cjs/components/LocationCard/LocationCard.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { LocationCardProps } from './LocationCardProps';
-export declare const LocationCard: (props: LocationCardProps) => React.JSX.Element;
+export declare const LocationCard: (props: LocationCardProps) => JSX.Element;

package/build/cjs/components/MenuBanner/MenuBanner.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuBannerProps } from './MenuBannerProps';
-export declare const MenuBanner: (props: MenuBannerProps) => React.JSX.Element | null;
+export declare const MenuBanner: (props: MenuBannerProps) => JSX.Element | null;

package/build/cjs/components/MenuBanner/MenuBannerIcons.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 export declare const BannerTypeIcons: {
-    alert: React.JSX.Element;
-    info: React.JSX.Element;
-    offer: React.JSX.Element;
+    alert: JSX.Element;
+    info: JSX.Element;
+    offer: JSX.Element;
 };

package/build/cjs/components/MenuItemCard/MenuItemCardImg.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardImg: (props: Pick<MenuItemCardProps, "image">) => React.JSX.Element | null;
+export declare const MenuItemCardImg: (props: Pick<MenuItemCardProps, "image">) => JSX.Element | null;

package/build/cjs/components/MenuItemCard/MenuItemCardInfo.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const MenuItemCardInfo: (props: {
     children: React.ReactNode;
-}) => React.JSX.Element;
+}) => JSX.Element;

package/build/cjs/components/MenuItemCard/MenuItemCardPrice.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardPrice: (props: Pick<MenuItemCardProps, "price" | "available">) => React.JSX.Element;
+export declare const MenuItemCardPrice: (props: Pick<MenuItemCardProps, "price" | "available">) => JSX.Element;

package/build/cjs/components/MenuItemCard/MenuItemCardReactions.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardReactions: (props: Pick<MenuItemCardProps, "likeCount" | "reviewCount">) => React.JSX.Element;
+export declare const MenuItemCardReactions: (props: Pick<MenuItemCardProps, "likeCount" | "reviewCount">) => JSX.Element;

package/build/cjs/components/MenuItemCard/MenuItemCardTags.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuItemCardProps } from './MenuItemCardProps';
-export declare const MenuItemCardTags: (props: Pick<MenuItemCardProps, "itemTags">) => React.JSX.Element;
+export declare const MenuItemCardTags: (props: Pick<MenuItemCardProps, "itemTags">) => JSX.Element;

package/build/cjs/components/MenuItemModifiersList/MenuItemModifiersList.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import { ModifierGroupsType } from '../DishCheckoutCard/DishCheckoutCardProps';
 export declare const MenuItemModifiersList: ({ modifierGroups, specialInstructions, }: {
     modifierGroups: ModifierGroupsType[];
     specialInstructions: string | null;
-}) => React.JSX.Element;
+}) => JSX.Element;

package/build/cjs/components/MenuItemModifiersList/ModifierGroup.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { ModifierGroupsType } from '../DishCheckoutCard/DishCheckoutCardProps';
-export declare const ModifierGroup: (group: ModifierGroupsType, isNested: boolean) => React.JSX.Element;
+export declare const ModifierGroup: (group: ModifierGroupsType, isNested: boolean) => JSX.Element;

package/build/cjs/components/MenuTab/MenuTab.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuTabProps } from './MenuTabProps';
-export declare const MenuTab: (props: MenuTabProps) => React.JSX.Element;
+export declare const MenuTab: (props: MenuTabProps) => JSX.Element;

package/build/cjs/components/MenuTabGroup/MenuTabGroup.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { MenuTabGroupProps } from './MenuTabGroupProps';
-export declare const MenuTabGroup: (props: MenuTabGroupProps) => React.JSX.Element;
+export declare const MenuTabGroup: (props: MenuTabGroupProps) => JSX.Element;

package/build/cjs/components/NestedModsV2DishModifierCard/DishModifierCardProps.d.ts

@@ -33,6 +33,8 @@ export type ModifierControlsOptions = {
      * selected.
      */
     hideNestedOptionsButton?: boolean;
+    /** Renders single-select and multiple-select rows with modifier quantity buttons instead of radio/checkbox controls */
+    selectionControlVariant?: 'default' | 'quantityButtons';
 };
 export type NestedModsV2DishModifierCardProps = {
     /** Aggregate price of the modifier and its nested children modifiers */

package/build/cjs/components/NestedModsV2DishModifierCard/ModifierControls.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { ModifierOptionsControlProps } from './DishModifierCardProps';
-export declare const ModifierControls: (props: ModifierOptionsControlProps) => React.JSX.Element | null;
+export declare const ModifierControls: (props: ModifierOptionsControlProps) => JSX.Element | null;

package/build/cjs/components/NestedModsV2DishModifierCard/NestedModsV2DishModifierCard.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import { NestedModsV2DishModifierCardProps } from './DishModifierCardProps';
 export declare const NestedModsV2DishModifierCard: {
-    (props: NestedModsV2DishModifierCardProps): React.JSX.Element;
+    (props: NestedModsV2DishModifierCardProps): JSX.Element;
     displayName: string;
 };

package/build/cjs/components/OrderingAppContext/OrderingAppContext.d.ts

@@ -14,5 +14,5 @@ export declare const useOrderingAppContext: () => OrderingAppContextType;
 type OrderingAppContextProviderProps = PropsWithChildren<{
     defaultContext: OrderingAppContextValue;
 }>;
-export declare const OrderingAppContextProvider: (props: OrderingAppContextProviderProps) => React.JSX.Element;
+export declare const OrderingAppContextProvider: (props: OrderingAppContextProviderProps) => JSX.Element;
 export {};

package/build/cjs/components/PageSection/PageSection.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const PageSection: (props: {
     children: React.ReactNode;
-}) => React.JSX.Element;
+}) => JSX.Element;

package/build/cjs/components/ReactionCounter/ReactionCounter.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { ReactionCounterProps } from './ReactionCounterProps';
-export declare const ReactionCounter: (props: ReactionCounterProps) => React.JSX.Element;
+export declare const ReactionCounter: (props: ReactionCounterProps) => JSX.Element;

package/build/cjs/components/ReactionCounterGroup/ReactionCounterGroup.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 type ReactionCounterGroupProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-export declare const ReactionCounterGroup: (props: ReactionCounterGroupProps) => React.JSX.Element;
+export declare const ReactionCounterGroup: (props: ReactionCounterGroupProps) => JSX.Element;
 export {};

package/build/cjs/components/SelectableChip/SelectableChip.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { SelectableChipProps } from './SelectableChipProps';
-export declare const SelectableChip: (props: SelectableChipProps) => React.JSX.Element;
+export declare const SelectableChip: (props: SelectableChipProps) => JSX.Element;

package/build/cjs/components/SelectableChipGroup/SelectableChipGroup.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 type SelectableChipGroupProps = {
     children: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>;
-export declare const SelectableChipGroup: (props: SelectableChipGroupProps) => React.JSX.Element;
+export declare const SelectableChipGroup: (props: SelectableChipGroupProps) => JSX.Element;
 export {};

package/build/cjs/components/SelectedMenuFiltersList/SelectedMenuFiltersList.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { SelectedMenuFiltersListProps } from './SelectedMenuFiltersListProps';
-export declare const SelectedMenuFiltersList: (props: SelectedMenuFiltersListProps) => React.JSX.Element;
+export declare const SelectedMenuFiltersList: (props: SelectedMenuFiltersListProps) => JSX.Element;

package/build/cjs/components/StatusTag/StatusTag.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import { StatusTagProps } from './StatusTagProps';
 export declare const StatusTag: {
-    ({ color, label, size, variant }: StatusTagProps): React.JSX.Element;
+    ({ color, label, size, variant }: StatusTagProps): JSX.Element;
     displayName: string;
 };

package/build/cjs/index.js

@@ -1658,10 +1658,9 @@ const useExpandableModifierGroupStyles = core.makeStyles((theme) => ({
     summaryIcon: {
         color: theme.palette.success.main,
     },
-    // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
     summaryText: {
         color: theme.palette.grey[700],
-        fontSize: '0.625rem',
+        fontSize: '0.75rem',
         lineHeight: 1.2,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -1706,14 +1705,14 @@ const useDishModifierCardStyles = core.makeStyles((theme) => ({
         },
     },
     name: {
-        fontSize: '1.125rem',
-        fontWeight: theme.typography.fontWeightBold,
+        fontSize: '1rem',
+        fontWeight: 500,
         marginBottom: theme.spacing(2),
     },
 }));
 const useRadioModifierFormStyles = core.makeStyles((theme) => ({
     radioGroup: {
-        gap: theme.spacing(2),
+        gap: theme.spacing(1.5),
     },
     label: {
         alignItems: 'center',
@@ -1743,7 +1742,7 @@ const useRadioModifierFormStyles = core.makeStyles((theme) => ({
 }));
 const useCheckboxModifierFormStyles = core.makeStyles((theme) => ({
     formGroup: {
-        gap: theme.spacing(2),
+        gap: theme.spacing(1.5),
     },
     label: {
         alignItems: 'center',
@@ -1793,7 +1792,7 @@ const useLabelStyles = core.makeStyles((theme) => ({
         columnGap: theme.spacing(1),
         display: 'flex',
         justifyContent: 'space-between',
-        marginTop: theme.spacing(0.5),
+        marginTop: theme.spacing(1),
         minHeight: theme.spacing(2.5),
         width: '100%',
     },
@@ -1804,10 +1803,9 @@ const useLabelStyles = core.makeStyles((theme) => ({
         flex: 1,
         minWidth: 0,
     },
-    // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
     selectedSummaryPrimaryText: {
         color: theme.palette.grey[700],
-        fontSize: '0.625rem',
+        fontSize: '0.75rem',
         fontWeight: theme.typography.fontWeightRegular,
         lineHeight: 1.2,
         overflow: 'hidden',
@@ -1837,8 +1835,7 @@ const useOptionsStyles = core.makeStyles((theme) => ({
         paddingRight: 0,
         paddingTop: 0,
         '& .MuiTypography-root': {
-            // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup
-            fontSize: '0.625rem',
+            fontSize: '0.75rem',
             lineHeight: 1.2,
         },
     },
@@ -1927,6 +1924,37 @@ const SingleSelectModifierControl = (props) => {
                 React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
         }))));
 };
+const QuantityButtonControl = (props) => {
+    const { modifiers, name, isOutOfStock, onChange, value, handleOptionsClick, aggregatePrice, disableNewSelections } = props;
+    const radioClasses = useRadioModifierFormStyles();
+    const isSingleSelect = props.type === 'singleSelect';
+    const makeHandleChange = (modifier, isSelected) => (_e, customEvent) => {
+        if (!isSelected && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: isSingleSelect,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: isSingleSelect && customEvent.quantity > 0 ? 1 : customEvent.quantity,
+        });
+    };
+    return (React.createElement(core.FormControl, { fullWidth: true },
+        React.createElement(core.FormGroup, { className: radioClasses.radioGroup, "aria-label": name }, modifiers.map((modifier) => {
+            const selectedModifier = value.find((v) => v.modifierId === modifier.id && v.quantity > 0);
+            const isSelected = Boolean(selectedModifier);
+            const modifierActionState = getModifierActionState(modifier, isSelected, props);
+            return (React.createElement(core.Box, { key: modifier.id },
+                React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                    React.createElement(Label, { name: modifier.name, price: aggregatePrice[modifier.id] || modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, hidePrice: modifier.hidePrice, isSelected: modifierActionState.isSelected, enableSelectedModifierStyles: props.modifierControlsOptions?.enableSelectedModifierStyles, selectedSummary: modifierActionState.showInlineAction ? undefined : modifierActionState.selectedSummary }),
+                    modifier.outOfStock && (React.createElement(core.Box, { minWidth: "90px", marginLeft: 2 },
+                        React.createElement(StatusTag, { color: "warning", label: props.messages.outOfStockText, variant: "outlined", size: "md" }))),
+                    !modifier.outOfStock && (React.createElement(QuantityPicker, { incrementButtonTitle: `Add ${modifier.name}`, decrementButtonTitle: `Remove ${modifier.name}`, id: `${modifier.id}-quantity-picker`, variation: "modifierCount", value: selectedModifier?.quantity ?? 0, min: 0, max: isSingleSelect ? 1 : undefined, preventManualChange: true, disableIncrement: !isSingleSelect && disableNewSelections, onChange: makeHandleChange(modifier, isSelected), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
+                React.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, renderRegularButton: false })));
+        }))));
+};
 const MultipleSelectControl = (props) => {
     const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props;
     const classes = useCheckboxModifierFormStyles();
@@ -1993,8 +2021,14 @@ const MultipleQuantitySelectControl = (props) => {
 const ModifierControls = (props) => {
     switch (props.type) {
         case 'singleSelect':
+            if (props.modifierControlsOptions?.selectionControlVariant === 'quantityButtons') {
+                return React.createElement(QuantityButtonControl, { ...props });
+            }
             return React.createElement(SingleSelectModifierControl, { ...props });
         case 'multipleSelect':
+            if (props.modifierControlsOptions?.selectionControlVariant === 'quantityButtons') {
+                return React.createElement(QuantityButtonControl, { ...props });
+            }
             return React.createElement(MultipleSelectControl, { ...props });
         case 'multipleQuantitySelect':
             return React.createElement(MultipleQuantitySelectControl, { ...props });