@popmenu/ordering-ui 0.151.1 → 0.153.0

package/build/esm/components/ExpandableModifierGroup/ExpandableModifierGroup.styles.js

@@ -0,0 +1,57 @@
+import { makeStyles } from '@material-ui/core';
+
+const useExpandableModifierGroupStyles = makeStyles((theme) => ({
+    root: {
+        backgroundColor: theme.palette.grey[100],
+        borderRadius: '8px',
+    },
+    header: {
+        alignItems: 'center',
+        background: 'none',
+        border: 'none',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(1.5, 2),
+        width: '100%',
+    },
+    name: {
+        color: theme.palette.grey[700],
+        fontSize: '0.75rem',
+        fontWeight: 600,
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+    },
+    chevron: {
+        color: theme.palette.info.main,
+        transition: 'transform 0.2s ease',
+    },
+    chevronExpanded: {
+        transform: 'rotate(90deg)',
+    },
+    headerExpanded: {
+        paddingBottom: theme.spacing(0.5),
+    },
+    summary: {
+        alignItems: 'center',
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        padding: theme.spacing(0, 2, 1.5),
+    },
+    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',
+        lineHeight: 1.2,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+}));
+
+export { useExpandableModifierGroupStyles };
+//# sourceMappingURL=ExpandableModifierGroup.styles.js.map

package/build/esm/components/ExpandableModifierGroup/ExpandableModifierGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableModifierGroup.styles.js","sources":["../../../../src/components/ExpandableModifierGroup/ExpandableModifierGroup.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useExpandableModifierGroupStyles = makeStyles<Theme>((theme) => ({\n  root: {\n    backgroundColor: theme.palette.grey[100],\n    borderRadius: '8px',\n  },\n  header: {\n    alignItems: 'center',\n    background: 'none',\n    border: 'none',\n    borderRadius: '8px',\n    cursor: 'pointer',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing(1.5, 2),\n    width: '100%',\n  },\n  name: {\n    color: theme.palette.grey[700],\n    fontSize: '0.75rem',\n    fontWeight: 600,\n    letterSpacing: '0.08em',\n    textTransform: 'uppercase',\n  },\n  chevron: {\n    color: theme.palette.info.main,\n    transition: 'transform 0.2s ease',\n  },\n  chevronExpanded: {\n    transform: 'rotate(90deg)',\n  },\n  headerExpanded: {\n    paddingBottom: theme.spacing(0.5),\n  },\n  summary: {\n    alignItems: 'center',\n    columnGap: theme.spacing(1),\n    display: 'flex',\n    padding: theme.spacing(0, 2, 1.5),\n  },\n  summaryIcon: {\n    color: theme.palette.success.main,\n  },\n  // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup\n  summaryText: {\n    color: theme.palette.grey[700],\n    fontSize: '0.625rem',\n    lineHeight: 1.2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n}))\n"],"names":[],"mappings":";;AAEa,MAAA,gCAAgC,GAAG,UAAU,CAAQ,CAAC,KAAK,MAAM;AAC5E,IAAA,IAAI,EAAE;QACJ,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACxC,QAAA,YAAY,EAAE,KAAK;AACpB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,cAAc,EAAE,eAAe;QAC/B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;AAC9B,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,QAAQ,EAAE,SAAS;AACnB,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,aAAa,EAAE,WAAW;AAC3B,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,QAAA,UAAU,EAAE,qBAAqB;AAClC,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,SAAS,EAAE,eAAe;AAC3B,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAClC,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,QAAA,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;AAClC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;AAClC,KAAA;;AAED,IAAA,WAAW,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,YAAY,EAAE,UAAU;AACxB,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/components/ExpandableModifierGroup/ExpandableModifierGroupProps.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ExpandableModifierGroupProps {
+    /** The name of the modifier group, displayed as an uppercase header */
+    name: string;
+    /** Content to render inside the expanded body */
+    children: React.ReactNode;
+    /** Whether the group starts expanded. Defaults to true */
+    defaultExpanded?: boolean;
+    /** Summary of currently selected options, shown below the header when collapsed */
+    selectedSummary?: string;
+}

package/build/esm/components/ExpandableModifierGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpandableModifierGroup } from './ExpandableModifierGroup';
+export type { ExpandableModifierGroupProps } from './ExpandableModifierGroupProps';

package/build/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/NestedModsV2DishModifierCard/DishModifierCard.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const useDishModifierCardStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useRadioModifierFormStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useCheckboxModifierFormStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useLabelStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useOptionsStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/NestedModsV2DishModifierCard/DishModifierCard.styles.js

@@ -0,0 +1,165 @@
+import { makeStyles } from '@material-ui/core';
+
+const useDishModifierCardStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(2.5),
+        color: `${theme.palette.grey[900]} !important`,
+    },
+    card: {
+        borderRadius: '8px',
+        border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',
+    },
+    error: {
+        color: theme.palette.error.main,
+    },
+    helperText: {
+        color: theme.palette.grey[700],
+    },
+    optionalStatusTag: {
+        '& > div': {
+            backgroundColor: theme.palette.grey[300],
+        },
+    },
+    name: {
+        fontSize: '1.125rem',
+        fontWeight: theme.typography.fontWeightBold,
+        marginBottom: theme.spacing(2),
+    },
+}));
+const useRadioModifierFormStyles = makeStyles((theme) => ({
+    radioGroup: {
+        gap: theme.spacing(2),
+    },
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    radio: {
+        fontSize: '1rem',
+        padding: 'unset',
+        marginRight: theme.spacing(-0.25),
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideRadio: {
+        display: 'none',
+    },
+    root: {
+        justifyContent: 'space-between',
+        margin: 0,
+        width: '100%',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}));
+const useCheckboxModifierFormStyles = makeStyles((theme) => ({
+    formGroup: {
+        gap: theme.spacing(2),
+    },
+    label: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    checkbox: {
+        color: theme.palette.grey[700],
+        fontSize: '1rem',
+        marginRight: theme.spacing(-0.25),
+        padding: 'unset',
+        '&.Mui-checked': {
+            color: theme.palette.info.main,
+        },
+    },
+    hideCheckbox: {
+        display: 'none',
+    },
+    root: {
+        margin: 0,
+        width: '100%',
+        '& > :last-child': {
+            flex: 1,
+        },
+    },
+}));
+const useLabelStyles = makeStyles((theme) => ({
+    label: {
+        margin: theme.spacing(0.5, 0),
+    },
+    selectedLabel: {
+        margin: theme.spacing(0.5, 0),
+    },
+    disabled: {
+        color: theme.palette.grey[500],
+    },
+    price: {
+        color: theme.palette.grey[700],
+    },
+    selectedSummary: {
+        color: theme.palette.grey[700],
+    },
+    selectedSummaryInlineRow: {
+        alignItems: 'center',
+        color: theme.palette.grey[700],
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginTop: theme.spacing(0.5),
+        minHeight: theme.spacing(2.5),
+        width: '100%',
+    },
+    selectedSummaryPrimary: {
+        alignItems: 'center',
+        columnGap: theme.spacing(1),
+        display: 'flex',
+        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',
+        fontWeight: theme.typography.fontWeightRegular,
+        lineHeight: 1.2,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    selectedSummaryIcon: {
+        color: theme.palette.success.main,
+    },
+}));
+const useOptionsStyles = makeStyles((theme) => ({
+    options: {
+        color: theme.palette.info.main,
+        marginBottom: theme.spacing(1.5),
+        minWidth: 'unset',
+        padding: 0,
+    },
+    inlineOptions: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        height: 'auto',
+        marginBottom: 0,
+        minHeight: 'unset',
+        paddingBottom: 0,
+        paddingLeft: '10px',
+        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',
+            lineHeight: 1.2,
+        },
+    },
+}));
+
+export { useCheckboxModifierFormStyles, useDishModifierCardStyles, useLabelStyles, useOptionsStyles, useRadioModifierFormStyles };
+//# sourceMappingURL=DishModifierCard.styles.js.map

package/build/esm/components/NestedModsV2DishModifierCard/DishModifierCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DishModifierCard.styles.js","sources":["../../../../src/components/NestedModsV2DishModifierCard/DishModifierCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useDishModifierCardStyles = makeStyles<Theme>((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    padding: theme.spacing(2.5),\n    color: `${theme.palette.grey[900]} !important`,\n  },\n  card: {\n    borderRadius: '8px',\n    border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',\n  },\n  error: {\n    color: theme.palette.error.main,\n  },\n  helperText: {\n    color: theme.palette.grey[700],\n  },\n  optionalStatusTag: {\n    '& > div': {\n      backgroundColor: theme.palette.grey[300],\n    },\n  },\n  name: {\n    fontSize: '1.125rem',\n    fontWeight: theme.typography.fontWeightBold,\n    marginBottom: theme.spacing(2),\n  },\n}))\n\nexport const useRadioModifierFormStyles = makeStyles<Theme>((theme) => ({\n  radioGroup: {\n    gap: theme.spacing(2),\n  },\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  radio: {\n    fontSize: '1rem',\n    padding: 'unset',\n    marginRight: theme.spacing(-0.25),\n\n    '&.Mui-checked': {\n      color: theme.palette.info.main,\n    },\n  },\n  hideRadio: {\n    display: 'none',\n  },\n  root: {\n    justifyContent: 'space-between',\n    margin: 0,\n    width: '100%',\n\n    '& > :last-child': {\n      flex: 1,\n    },\n  },\n}))\n\nexport const useCheckboxModifierFormStyles = makeStyles<Theme>((theme) => ({\n  formGroup: {\n    gap: theme.spacing(2),\n  },\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  checkbox: {\n    color: theme.palette.grey[700],\n    fontSize: '1rem',\n    marginRight: theme.spacing(-0.25),\n    padding: 'unset',\n\n    '&.Mui-checked': {\n      color: theme.palette.info.main,\n    },\n  },\n  hideCheckbox: {\n    display: 'none',\n  },\n  root: {\n    margin: 0,\n    width: '100%',\n\n    '& > :last-child': {\n      flex: 1,\n    },\n  },\n}))\n\nexport const useLabelStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    margin: theme.spacing(0.5, 0),\n  },\n  selectedLabel: {\n    margin: theme.spacing(0.5, 0),\n  },\n  disabled: {\n    color: theme.palette.grey[500],\n  },\n  price: {\n    color: theme.palette.grey[700],\n  },\n  selectedSummary: {\n    color: theme.palette.grey[700],\n  },\n  selectedSummaryInlineRow: {\n    alignItems: 'center',\n    color: theme.palette.grey[700],\n    columnGap: theme.spacing(1),\n    display: 'flex',\n    justifyContent: 'space-between',\n    marginTop: theme.spacing(0.5),\n    minHeight: theme.spacing(2.5),\n    width: '100%',\n  },\n  selectedSummaryPrimary: {\n    alignItems: 'center',\n    columnGap: theme.spacing(1),\n    display: 'flex',\n    flex: 1,\n    minWidth: 0,\n  },\n  // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup\n  selectedSummaryPrimaryText: {\n    color: theme.palette.grey[700],\n    fontSize: '0.625rem',\n    fontWeight: theme.typography.fontWeightRegular,\n    lineHeight: 1.2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  selectedSummaryIcon: {\n    color: theme.palette.success.main,\n  },\n}))\n\nexport const useOptionsStyles = makeStyles<Theme>((theme) => ({\n  options: {\n    color: theme.palette.info.main,\n    marginBottom: theme.spacing(1.5),\n    minWidth: 'unset',\n    padding: 0,\n  },\n  inlineOptions: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    height: 'auto',\n    marginBottom: 0,\n    minHeight: 'unset',\n    paddingBottom: 0,\n    paddingLeft: '10px',\n    paddingRight: 0,\n    paddingTop: 0,\n    '& .MuiTypography-root': {\n      // TODO [sc-162475]: 0.625rem (10px) is below the recommended minimum font size for accessibility — address in followup\n      fontSize: '0.625rem',\n      lineHeight: 1.2,\n    },\n  },\n}))\n"],"names":[],"mappings":";;AAEa,MAAA,yBAAyB,GAAG,UAAU,CAAQ,CAAC,KAAK,MAAM;AACrE,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAC3B,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAa,WAAA,CAAA;AAC/C,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,MAAM,EAAE,gDAAgD;AACzD,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;AAChC,KAAA;AACD,IAAA,UAAU,EAAE;QACV,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/B,KAAA;AACD,IAAA,iBAAiB,EAAE;AACjB,QAAA,SAAS,EAAE;YACT,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc;AAC3C,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC/B,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,0BAA0B,GAAG,UAAU,CAAQ,CAAC,KAAK,MAAM;AACtE,IAAA,UAAU,EAAE;AACV,QAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEjC,QAAA,eAAe,EAAE;AACf,YAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,MAAM;AAChB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,KAAK,EAAE,MAAM;AAEb,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,CAAC;AACR,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,6BAA6B,GAAG,UAAU,CAAQ,CAAC,KAAK,MAAM;AACzE,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AACjC,QAAA,OAAO,EAAE,OAAO;AAEhB,QAAA,eAAe,EAAE;AACf,YAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,OAAO,EAAE,MAAM;AAChB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,KAAK,EAAE,MAAM;AAEb,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,CAAC;AACR,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,cAAc,GAAG,UAAU,CAAQ,CAAC,KAAK,MAAM;AAC1D,IAAA,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;AAC9B,KAAA;AACD,IAAA,aAAa,EAAE;QACb,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;AAC9B,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/B,KAAA;AACD,IAAA,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/B,KAAA;AACD,IAAA,eAAe,EAAE;QACf,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/B,KAAA;AACD,IAAA,wBAAwB,EAAE;AACxB,QAAA,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAC7B,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAC7B,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACD,IAAA,sBAAsB,EAAE;AACtB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,QAAQ,EAAE,CAAC;AACZ,KAAA;;AAED,IAAA,0BAA0B,EAAE;QAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB;AAC9C,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,YAAY,EAAE,UAAU;AACxB,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA,mBAAmB,EAAE;AACnB,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;AAClC,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,gBAAgB,GAAG,UAAU,CAAQ,CAAC,KAAK,MAAM;AAC5D,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAChC,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,SAAS,EAAE,OAAO;AAClB,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,UAAU,EAAE,CAAC;AACb,QAAA,uBAAuB,EAAE;;AAEvB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,UAAU,EAAE,GAAG;AAChB,SAAA;AACF,KAAA;AACF,CAAA,CAAC;;;;"}

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

@@ -0,0 +1,79 @@
+export type ModifierValue = {
+    groupId: number;
+    modifierId: number;
+    parentModifierId?: number | null;
+    price: number;
+    quantity: number;
+    isRadio?: boolean;
+};
+export type Modifier = {
+    id: number;
+    hasModifiers: boolean;
+    name: string;
+    outOfStock: boolean;
+    price: number;
+    formattedPrice: string;
+    hidePrice?: boolean;
+    quantity: number;
+    parentModifierGroupId: number;
+    parentModifierGroupItemId?: number | null;
+};
+export type OnChangeValueType = ModifierValue;
+export type ModifierControlsOptions = {
+    /** Applies selected modifier visual treatment used by nested mods V2 */
+    enableSelectedModifierStyles?: boolean;
+    /** Changes the action label to UPDATE when a modifier is selected */
+    showUpdateButton?: boolean;
+    /** Optional selected modifier summary text shown below selected modifier names */
+    selectedNestedSummaryByModifierId?: Record<number, string>;
+    /**
+     * Suppresses the inline OPTIONS / UPDATE action on every modifier row,
+     * regardless of selection state, AND prevents the built-in auto-trigger
+     * of `handleOptionsClick` when a modifier with `hasModifiers: true` is
+     * selected.
+     */
+    hideNestedOptionsButton?: boolean;
+};
+export type NestedModsV2DishModifierCardProps = {
+    /** Aggregate price of the modifier and its nested children modifiers */
+    aggregatePrice: Record<number, string>;
+    /** Modifier options */
+    modifiers: Array<Modifier>;
+    /** The values of the modifier form */
+    value: Array<ModifierValue>;
+    /** Handles the change event */
+    onChange: (value: OnChangeValueType) => void;
+    /** Name of the modifier */
+    name: string;
+    /** Denotes the max amount of selections have been reached */
+    disableNewSelections?: boolean;
+    /** Denotes if modifier has an error */
+    error: boolean;
+    /** Denotes if modifier is required */
+    isRequired: boolean;
+    /** Denotes if modifier is out of stock */
+    isOutOfStock: boolean;
+    /** Selection type for modifier group */
+    type: 'singleSelect' | 'multipleSelect' | 'multipleQuantitySelect';
+    /** Renders the text of the dish modifiers */
+    messages: {
+        optionalText: string;
+        outOfStockText: string;
+        requiredText: string;
+        helperText: string;
+    };
+    /** Handles the dialog change for nested modifiers */
+    handleOptionsClick: (id: number) => void;
+    /** Used by parent modifier quantity tracking: parent modifier quantity denotes requiredSelectionCount and currentSelectionCount is the total quantity of the child modifier */
+    selectionQuantity: Record<number, {
+        requiredSelectionCount: number;
+        currentSelectionCount: number;
+    }>;
+    /** Optional feature-gated options for nested modifier controls */
+    modifierControlsOptions?: ModifierControlsOptions;
+    /** Removes the card border and border-radius, for use inside a container that provides its own card styling */
+    disableCardStyle?: boolean;
+    /** Hides the group name heading, useful when the name is already shown by a parent container */
+    hideName?: boolean;
+};
+export type ModifierOptionsControlProps = Pick<NestedModsV2DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity' | 'name' | 'modifierControlsOptions'>;

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

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

package/build/esm/components/NestedModsV2DishModifierCard/ModifierControls.js

@@ -0,0 +1,171 @@
+import { FormControl, FormGroup, Box, Typography, FormControlLabel, Checkbox, RadioGroup, Radio } from '@material-ui/core';
+import { Icon } from '@popmenu/common-ui';
+import { CheckCircle, ChevronRight } from '@popmenu/web-icons';
+import classNames from 'classnames';
+import React__default from 'react';
+import { Button } from '../Button/Button.js';
+import { QuantityPicker } from '../QuantityPicker/QuantityPicker.js';
+import { StatusTag } from '../StatusTag/StatusTag.js';
+import { useCheckboxModifierFormStyles, useRadioModifierFormStyles, useLabelStyles, useOptionsStyles } from './DishModifierCard.styles.js';
+
+const Label = (props) => {
+    const { name, price, disabled = false, hidePrice = false, isSelected = false, selectedSummary, enableSelectedModifierStyles = false, } = props;
+    const classes = useLabelStyles();
+    const numericPrice = price ? parseFloat(price.replace(/[^0-9.-]/g, '')) : NaN;
+    const shouldHidePrice = hidePrice || !price || numericPrice === 0 || isNaN(numericPrice);
+    const showSelectedSummary = Boolean(enableSelectedModifierStyles && isSelected && selectedSummary);
+    return (React__default.createElement(Box, { display: "flex", flexDirection: "column", className: classNames({ [classes.label]: !showSelectedSummary, [classes.selectedLabel]: showSelectedSummary }) },
+        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 8 },
+            React__default.createElement(Typography, { className: classNames({
+                    [classes.disabled]: disabled,
+                }) }, name)),
+        !shouldHidePrice && (React__default.createElement(Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) }, `+ ${price}`)),
+        showSelectedSummary && React__default.createElement(Typography, { className: classes.selectedSummary }, selectedSummary)));
+};
+const Options = (props) => {
+    const { handleOptionsClick, actionLabel, hidden = false, inline = false } = props;
+    const classes = useOptionsStyles();
+    const displayActionLabel = inline ? (actionLabel === 'UPDATE' ? 'Update' : 'Options') : actionLabel;
+    if (hidden)
+        return null;
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Button, { variation: "none", className: classNames(classes.options, { [classes.inlineOptions]: inline }), onClick: handleOptionsClick },
+            React__default.createElement(Typography, { variant: "caption" }, displayActionLabel),
+            !inline && React__default.createElement(Icon, { icon: ChevronRight }))));
+};
+const getIsSelected = (modifierId, value) => value.some((modifierValue) => modifierValue.modifierId === modifierId && modifierValue.quantity > 0);
+const getActionLabel = (isSelected, props) => props.modifierControlsOptions?.showUpdateButton && isSelected ? 'UPDATE' : 'OPTIONS';
+const shouldHideNestedOptionsButton = (isSelected, props) => Boolean(props.modifierControlsOptions?.hideNestedOptionsButton ||
+    (props.modifierControlsOptions?.enableSelectedModifierStyles && !isSelected));
+const shouldShowInlineAction = (isSelected, props) => Boolean(isSelected &&
+    props.modifierControlsOptions?.enableSelectedModifierStyles &&
+    !props.modifierControlsOptions?.hideNestedOptionsButton);
+const getModifierActionState = (modifier, isSelected, props) => ({
+    isSelected,
+    shouldHideNestedOptions: shouldHideNestedOptionsButton(isSelected, props),
+    showInlineAction: shouldShowInlineAction(isSelected, props),
+    actionLabel: getActionLabel(isSelected, props),
+    selectedSummary: props.modifierControlsOptions?.selectedNestedSummaryByModifierId?.[modifier.id],
+});
+const NestedModifierActions = (props) => {
+    const { modifier, handleOptionsClick, state, renderRegularButton = true } = props;
+    const labelClasses = useLabelStyles();
+    if (!modifier.hasModifiers || modifier.outOfStock)
+        return null;
+    return (React__default.createElement(React__default.Fragment, null,
+        state.showInlineAction && state.selectedSummary && (React__default.createElement(Box, { className: labelClasses.selectedSummaryInlineRow },
+            React__default.createElement(Box, { className: labelClasses.selectedSummaryPrimary },
+                React__default.createElement(Icon, { icon: CheckCircle, size: "medium", className: labelClasses.selectedSummaryIcon }),
+                React__default.createElement(Typography, { variant: "caption", className: labelClasses.selectedSummaryPrimaryText }, state.selectedSummary)),
+            React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, inline: true, hidden: state.shouldHideNestedOptions }))),
+        renderRegularButton && (React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: state.actionLabel, hidden: state.shouldHideNestedOptions || (state.showInlineAction && Boolean(state.selectedSummary)) }))));
+};
+const SingleSelectModifierControl = (props) => {
+    const { modifiers, name, isOutOfStock, onChange, value, handleOptionsClick, aggregatePrice, isRequired } = props;
+    const radioClasses = useRadioModifierFormStyles();
+    const makeHandleChange = (modifier) => (e) => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
+        if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: true,
+            modifierId: Number(e.target.value),
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: 1,
+        });
+    };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(RadioGroup, { className: radioClasses.radioGroup, "aria-label": name }, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel, { key: modifier.id, value: modifier.id, className: radioClasses.root, control: React__default.createElement(Radio, { checked: value[0]?.modifierId === modifier.id, className: classNames({
+                            [radioClasses.hideRadio]: modifier.outOfStock,
+                            [radioClasses.radio]: !modifier.outOfStock,
+                        }), disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier), required: isRequired }), label: React__default.createElement(Box, { className: radioClasses.label },
+                        React__default.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__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
+                            React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                React__default.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+        }))));
+};
+const MultipleSelectControl = (props) => {
+    const { modifiers, value, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, aggregatePrice } = props;
+    const classes = useCheckboxModifierFormStyles();
+    const makeHandleChange = (modifier) => () => {
+        const isModifierInValue = Boolean(value.find((v) => v.modifierId === modifier.id));
+        if (!isModifierInValue && modifier.hasModifiers && !props.modifierControlsOptions?.hideNestedOptionsButton) {
+            handleOptionsClick(modifier.id);
+        }
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: isModifierInValue ? 0 : 1,
+        });
+    };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, { className: classes.formGroup }, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, getIsSelected(modifier.id, value), props);
+            return (React__default.createElement(Box, { key: modifier.id },
+                React__default.createElement(FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some((v) => v.modifierId === modifier.id), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox, { className: classNames({ [classes.hideCheckbox]: modifier.outOfStock }, { [classes.checkbox]: !modifier.outOfStock }), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Box, { className: classes.label },
+                        React__default.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__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
+                            React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" })))), labelPlacement: "start" }),
+                React__default.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState })));
+        }))));
+};
+const MultipleQuantitySelectControl = (props) => {
+    const { modifiers, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, selectionQuantity, aggregatePrice, } = props;
+    const makeHandleChange = (modifier) => (_e, customEvent) => {
+        onChange({
+            isRadio: false,
+            modifierId: modifier.id,
+            groupId: modifier.parentModifierGroupId,
+            parentModifierId: modifier.parentModifierGroupItemId,
+            price: modifier.price || 0,
+            quantity: customEvent.quantity,
+        });
+    };
+    return (React__default.createElement(FormControl, { fullWidth: true },
+        React__default.createElement(FormGroup, null, modifiers.map((modifier) => {
+            const modifierActionState = getModifierActionState(modifier, modifier.quantity > 0, props);
+            return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
+                React__default.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" },
+                    React__default.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__default.createElement(Box, { minWidth: "90px", marginLeft: 2 },
+                        React__default.createElement(StatusTag, { color: "warning", label: "Out of stock", variant: "outlined", size: "md" }))),
+                    !modifier.outOfStock && (React__default.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__default.createElement(NestedModifierActions, { modifier: modifier, handleOptionsClick: handleOptionsClick, state: modifierActionState, renderRegularButton: false }),
+                React__default.createElement(Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
+                    modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id), actionLabel: modifierActionState.actionLabel, hidden: modifierActionState.shouldHideNestedOptions ||
+                            (modifierActionState.showInlineAction && Boolean(modifierActionState.selectedSummary)) })),
+                    selectionQuantity[modifier.id] &&
+                        selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
+                        selectionQuantity[modifier.id].requiredSelectionCount !==
+                            selectionQuantity[modifier.id].currentSelectionCount && (React__default.createElement(Typography, { variant: "caption", color: "error" },
+                        selectionQuantity[modifier.id].currentSelectionCount,
+                        "/",
+                        selectionQuantity[modifier.id].requiredSelectionCount,
+                        " selected")))));
+        }))));
+};
+const ModifierControls = (props) => {
+    switch (props.type) {
+        case 'singleSelect':
+            return React__default.createElement(SingleSelectModifierControl, { ...props });
+        case 'multipleSelect':
+            return React__default.createElement(MultipleSelectControl, { ...props });
+        case 'multipleQuantitySelect':
+            return React__default.createElement(MultipleQuantitySelectControl, { ...props });
+        default:
+            return null;
+    }
+};
+
+export { ModifierControls };
+//# sourceMappingURL=ModifierControls.js.map