@popmenu/ordering-ui 0.126.6 → 0.127.1

package/build/esm/components/DishCheckoutCard/DishCheckoutCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DishCheckoutCard.js","sources":["../../../../src/components/DishCheckoutCard/DishCheckoutCard.tsx"],"sourcesContent":["import React, { ChangeEvent, useState } from 'react'\nimport { Box, Icon, Typography, IconButton } from '@popmenu/common-ui'\nimport { Trash, ChevronDown, ChevronUp, Warning } from '@popmenu/web-icons'\n\nimport { DishCheckoutCardProps, ModifierGroupsType, ModifiersType } from './DishCheckoutCardProps'\nimport { useDishCheckoutCardStyles } from './DishCheckoutCard.styles'\nimport { Button } from '../Button'\nimport { FormControl, Select, MenuItem, InputAdornment } from '@material-ui/core'\nimport { useOrderingAppContext } from '../OrderingAppContext'\n\nexport const DishCheckoutCard = (props: DishCheckoutCardProps) => {\n  const {\n    id,\n    name,\n    quantity,\n    modifierGroups,\n    onDelete,\n    onEdit,\n    onQuantityChange,\n    price,\n    specialInstructions,\n    disabled,\n    warningMessage,\n    image = {},\n    messages,\n  } = props\n  const { src } = image\n  const classes = useDishCheckoutCardStyles(props)\n  const [appContext] = useOrderingAppContext()\n  const [open, setOpen] = useState(false)\n  const formattedPrice = typeof price === 'number' ? `${appContext.currencySymbol ?? ''}${price.toFixed(2)}` : price\n  const handleQuantityChange = (event: ChangeEvent<HTMLInputElement>) =>\n    onQuantityChange(id, parseInt(event.target.value, 10))\n\n  const labelString = (label: string) => {\n    return label.replace(/[^a-zA-Z\\s]/g, '').toLowerCase()\n  }\n\n  const formatModifiers = (groups: ModifierGroupsType[], nested = false) => {\n    return groups.map((group: any) => {\n      // Get all selected modifiers for this group\n      const modifiers = group.selectedModifiers\n        .map((modifier: ModifiersType) =>\n          modifier.quantity > 1 ? `${modifier.modifierName} × ${modifier.quantity}` : modifier.modifierName,\n        )\n        .join(', ')\n\n      // Render nested groups recursively\n      const nestedGroups = group.selectedModifiers.flatMap((modifier: ModifiersType) =>\n        modifier?.selectedModifierGroups && modifier?.selectedModifierGroups?.length > 0\n          ? formatModifiers(modifier.selectedModifierGroups, true)\n          : [],\n      )\n\n      // For top-level groups, we render without the list\n      if (!nested) {\n        return (\n          <Typography key={group.id} variant=\"body2\">\n            {group.menuItemModifierGroupName}: {modifiers}\n            {nestedGroups?.length > 0 && <ul className={classes.ul}>{nestedGroups}</ul>}\n          </Typography>\n        )\n      }\n\n      // For nested groups, we use list items\n      return (\n        <li key={group.id} className={classes.li}>\n          <Typography variant=\"body2\">\n            {group.menuItemModifierGroupName}: {modifiers}\n            {nestedGroups && nestedGroups.length > 0 && <ul className={classes.ul}>{nestedGroups}</ul>}\n          </Typography>\n        </li>\n      )\n    })\n  }\n\n  return (\n    <Box className={classes.root}>\n      <Box display=\"flex\" gridGap={3}>\n        {src && <img src={src} alt=\"\" className={classes.img} />}\n        <Box flexGrow={1}>\n          <Typography variant=\"h2\" className={classes.name}>\n            {name}\n          </Typography>\n          {modifierGroups && formatModifiers(modifierGroups)}\n          {specialInstructions && <Typography variant=\"body2\">&quot;{specialInstructions}&quot;</Typography>}\n        </Box>\n        <Box display=\"flex\" gridGap={1} height=\"100%\" alignItems=\"center\">\n          <Button\n            aria-label={messages.ariaEdit}\n            disabled={disabled}\n            className={classes.editButton}\n            variant=\"text\"\n            onClick={onEdit}\n          >\n            {messages.edit}\n          </Button>\n          <IconButton\n            aria-label={messages.ariaDelete}\n            disabled={disabled}\n            onClick={onDelete}\n            classes={{ root: classes.deleteButton }}\n          >\n            <Icon icon={Trash} size=\"large\" />\n          </IconButton>\n        </Box>\n      </Box>\n      <Box display=\"flex\" gridGap={16} alignItems=\"center\">\n        <FormControl variant=\"outlined\" hiddenLabel={true}>\n          <Select\n            disabled={disabled}\n            value={quantity}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n            SelectDisplayProps={{ 'aria-label': `${labelString(name)} quantity select` }}\n            disableUnderline\n            onChange={handleQuantityChange}\n            fullWidth\n            startAdornment={\n              <InputAdornment position=\"start\">\n                <Icon icon={open ? ChevronUp : ChevronDown} size=\"large\" />\n              </InputAdornment>\n            }\n            inputProps={{ shrink: false }}\n            MenuProps={{\n              disablePortal: true,\n              anchorOrigin: {\n                vertical: 'bottom',\n                horizontal: 'left',\n              },\n              transformOrigin: {\n                vertical: 'top',\n                horizontal: 'left',\n              },\n              getContentAnchorEl: null,\n              classes: { paper: classes.selectPaper },\n            }}\n            className={classes.select}\n          >\n            {Array.from({ length: 99 }, (_, index) => (\n              <MenuItem key={index + 1} value={index + 1} aria-label={`${index + 1}`}>\n                {index + 1}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n        <Typography className={classes.price}>{formattedPrice}</Typography>\n      </Box>\n      {warningMessage && (\n        <Box className={classes.warning}>\n          <Box paddingTop={0.25}>\n            <Icon icon={Warning} size=\"medium\" />\n          </Box>\n          <Typography variant=\"body2\">{warningMessage}</Typography>\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DishCheckoutCard.js","sources":["../../../../src/components/DishCheckoutCard/DishCheckoutCard.tsx"],"sourcesContent":["import { Box, Icon, IconButton, Typography } from '@popmenu/common-ui'\nimport { ChevronDown, ChevronUp, Trash, Warning } from '@popmenu/web-icons'\nimport React, { ChangeEvent, useState } from 'react'\n\nimport { FormControl, InputAdornment, MenuItem, Select } from '@material-ui/core'\nimport { Button } from '../Button'\nimport { useOrderingAppContext } from '../OrderingAppContext'\nimport { useDishCheckoutCardStyles } from './DishCheckoutCard.styles'\nimport { DishCheckoutCardProps, ModifierGroupsType, ModifiersType } from './DishCheckoutCardProps'\n\nexport const DishCheckoutCard = ({\n  id,\n  borderBottom,\n  name,\n  quantity,\n  modifierGroups,\n  onDelete,\n  onEdit,\n  onQuantityChange,\n  price,\n  specialInstructions,\n  disabled,\n  warningMessage,\n  image = {},\n  messages,\n  maxQuantity = 99,\n  minQuantity = 1,\n}: DishCheckoutCardProps) => {\n  const { src } = image\n  const classes = useDishCheckoutCardStyles({ borderBottom })\n  const [appContext] = useOrderingAppContext()\n  const [open, setOpen] = useState(false)\n  const formattedPrice = typeof price === 'number' ? `${appContext.currencySymbol ?? ''}${price.toFixed(2)}` : price\n  const handleQuantityChange = (event: ChangeEvent<Record<string, unknown>>) =>\n    onQuantityChange(id, parseInt(event.target.value as string, 10))\n\n  const labelString = (label: string) => {\n    return label.replace(/[^a-zA-Z\\s]/g, '').toLowerCase()\n  }\n\n  const formatModifiers = (groups: ModifierGroupsType[], nested = false) => {\n    return groups.map((group: any) => {\n      // Get all selected modifiers for this group\n      const modifiers = group.selectedModifiers\n        .map((modifier: ModifiersType) =>\n          modifier.quantity > 1 ? `${modifier.modifierName} × ${modifier.quantity}` : modifier.modifierName,\n        )\n        .join(', ')\n\n      // Render nested groups recursively\n      const nestedGroups = group.selectedModifiers.flatMap((modifier: ModifiersType) =>\n        modifier?.selectedModifierGroups && modifier?.selectedModifierGroups?.length > 0\n          ? formatModifiers(modifier.selectedModifierGroups, true)\n          : [],\n      )\n\n      // For top-level groups, we render without the list\n      if (!nested) {\n        return (\n          <Typography key={group.id} variant=\"body2\">\n            {group.menuItemModifierGroupName}: {modifiers}\n            {nestedGroups?.length > 0 && <ul className={classes.ul}>{nestedGroups}</ul>}\n          </Typography>\n        )\n      }\n\n      // For nested groups, we use list items\n      return (\n        <li key={group.id} className={classes.li}>\n          <Typography variant=\"body2\">\n            {group.menuItemModifierGroupName}: {modifiers}\n            {nestedGroups && nestedGroups.length > 0 && <ul className={classes.ul}>{nestedGroups}</ul>}\n          </Typography>\n        </li>\n      )\n    })\n  }\n\n  return (\n    <Box className={classes.root}>\n      <Box display=\"flex\" gridGap={3}>\n        {src && <img src={src} alt=\"\" className={classes.img} />}\n        <Box flexGrow={1}>\n          <Typography variant=\"h2\" className={classes.name}>\n            {name}\n          </Typography>\n          {modifierGroups && formatModifiers(modifierGroups)}\n          {specialInstructions && <Typography variant=\"body2\">&quot;{specialInstructions}&quot;</Typography>}\n        </Box>\n        <Box display=\"flex\" gridGap={1} height=\"100%\" alignItems=\"center\">\n          <Button\n            aria-label={messages.ariaEdit}\n            disabled={disabled}\n            className={classes.editButton}\n            variant=\"text\"\n            onClick={onEdit}\n          >\n            {messages.edit}\n          </Button>\n          <IconButton\n            aria-label={messages.ariaDelete}\n            disabled={disabled}\n            onClick={onDelete}\n            classes={{ root: classes.deleteButton }}\n          >\n            <Icon icon={Trash} size=\"large\" />\n          </IconButton>\n        </Box>\n      </Box>\n      <Box display=\"flex\" gridGap={16} alignItems=\"center\">\n        <FormControl variant=\"outlined\" hiddenLabel={true}>\n          <Select\n            disabled={disabled}\n            value={quantity}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n            SelectDisplayProps={{ 'aria-label': `${labelString(name)} quantity select` }}\n            disableUnderline\n            onChange={handleQuantityChange}\n            fullWidth\n            startAdornment={\n              <InputAdornment position=\"start\">\n                <Icon icon={open ? ChevronUp : ChevronDown} size=\"large\" />\n              </InputAdornment>\n            }\n            inputProps={{ shrink: false }}\n            MenuProps={{\n              disablePortal: true,\n              anchorOrigin: {\n                vertical: 'bottom',\n                horizontal: 'left',\n              },\n              transformOrigin: {\n                vertical: 'top',\n                horizontal: 'left',\n              },\n              getContentAnchorEl: null,\n              classes: { paper: classes.selectPaper },\n            }}\n            className={classes.select}\n          >\n            {Array.from({ length: maxQuantity - minQuantity + 1 }, (_, index) => (\n              <MenuItem key={index + minQuantity} value={index + minQuantity} aria-label={`${index + minQuantity}`}>\n                {index + minQuantity}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n        <Typography className={classes.price}>{formattedPrice}</Typography>\n      </Box>\n      {warningMessage && (\n        <Box className={classes.warning}>\n          <Box paddingTop={0.25}>\n            <Icon icon={Warning} size=\"medium\" />\n          </Box>\n          <Typography variant=\"body2\">{warningMessage}</Typography>\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/DishCheckoutCard/DishCheckoutCard.styles.d.ts

@@ -1,2 +1,2 @@
 import { DishCheckoutCardProps } from './DishCheckoutCardProps';
-export declare const useDishCheckoutCardStyles: (props: DishCheckoutCardProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useDishCheckoutCardStyles: (props: Pick<DishCheckoutCardProps, "borderBottom">) => import("@material-ui/styles").ClassNameMap<string>;

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

@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core';
 
-var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
+const useDishCheckoutCardStyles = makeStyles((theme) => ({
     root: {
         '&:first-of-type': {
             paddingTop: 0,
@@ -15,10 +15,7 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
         flexDirection: 'column',
         width: '100%',
         gridGap: theme.spacing(2),
-        borderBottom: function (_a) {
-            var borderBottom = _a.borderBottom;
-            return (borderBottom ? '1px solid #E0E0E0' : 'none');
-        },
+        borderBottom: ({ borderBottom }) => (borderBottom ? '1px solid #E0E0E0' : 'none'),
     },
     deleteButton: {
         color: theme.palette.info.main,
@@ -79,7 +76,7 @@ var useDishCheckoutCardStyles = makeStyles(function (theme) { return ({
         display: 'flex',
         gridGap: theme.spacing(0.825),
     },
-}); });
+}));
 
 export { useDishCheckoutCardStyles };
 //# sourceMappingURL=DishCheckoutCard.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DishCheckoutCard.styles.js","sources":["../../../../src/components/DishCheckoutCard/DishCheckoutCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { DishCheckoutCardProps } from './DishCheckoutCardProps'\n\nexport const useDishCheckoutCardStyles = makeStyles<Theme, DishCheckoutCardProps>((theme) => ({\n  root: {\n    '&:first-of-type': {\n      paddingTop: 0,\n    },\n    '&:last-of-type': {\n      paddingBottom: 0,\n      borderBottom: 'none',\n    },\n    color: theme.palette.grey[900],\n    padding: theme.spacing(2, 0),\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    gridGap: theme.spacing(2),\n    borderBottom: ({ borderBottom }) => (borderBottom ? '1px solid #E0E0E0' : 'none'),\n  },\n  deleteButton: {\n    color: theme.palette.info.main,\n  },\n  editButton: {\n    color: theme.palette.info.main,\n  },\n  img: {\n    objectFit: 'cover',\n    borderRadius: theme.spacing(1),\n    flexBasis: 'auto',\n    flexShrink: 0,\n    height: theme.spacing(7),\n    marginRight: theme.spacing(1),\n    overflow: 'hidden',\n    width: theme.spacing(7),\n  },\n  name: {\n    fontSize: 16,\n    fontWeight: 500,\n    lineHeight: '24px',\n  },\n  price: {\n    fontSize: '18px',\n  },\n  select: {\n    paddingLeft: 'unset',\n    borderRadius: '25px',\n\n    '& fieldset': {\n      borderColor: theme.palette.grey[700],\n    },\n\n    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n      borderColor: theme.palette.grey[700],\n      borderWidth: '1px',\n    },\n\n    '& .MuiSelect-root': {\n      padding: theme.spacing(1, 1.5, 1, 4.5),\n      zIndex: 10,\n      textAlign: 'right',\n    },\n\n    '& .MuiInputAdornment-positionStart': {\n      position: 'absolute',\n      left: theme.spacing(1.5),\n    },\n\n    '& .MuiSelect-iconOutlined': {\n      display: 'none',\n    },\n  },\n  selectPaper: {\n    maxHeight: theme.spacing(37),\n  },\n  ul: {\n    margin: 0,\n    paddingLeft: theme.spacing(3),\n  },\n  warning: {\n    color: theme.palette.error.main,\n    display: 'flex',\n    gridGap: theme.spacing(0.825),\n  },\n}))\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DishCheckoutCard.styles.js","sources":["../../../../src/components/DishCheckoutCard/DishCheckoutCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { DishCheckoutCardProps } from './DishCheckoutCardProps'\n\nexport const useDishCheckoutCardStyles = makeStyles<Theme, Pick<DishCheckoutCardProps, 'borderBottom'>>((theme) => ({\n  root: {\n    '&:first-of-type': {\n      paddingTop: 0,\n    },\n    '&:last-of-type': {\n      paddingBottom: 0,\n      borderBottom: 'none',\n    },\n    color: theme.palette.grey[900],\n    padding: theme.spacing(2, 0),\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    gridGap: theme.spacing(2),\n    borderBottom: ({ borderBottom }) => (borderBottom ? '1px solid #E0E0E0' : 'none'),\n  },\n  deleteButton: {\n    color: theme.palette.info.main,\n  },\n  editButton: {\n    color: theme.palette.info.main,\n  },\n  img: {\n    objectFit: 'cover',\n    borderRadius: theme.spacing(1),\n    flexBasis: 'auto',\n    flexShrink: 0,\n    height: theme.spacing(7),\n    marginRight: theme.spacing(1),\n    overflow: 'hidden',\n    width: theme.spacing(7),\n  },\n  name: {\n    fontSize: 16,\n    fontWeight: 500,\n    lineHeight: '24px',\n  },\n  price: {\n    fontSize: '18px',\n  },\n  select: {\n    paddingLeft: 'unset',\n    borderRadius: '25px',\n\n    '& fieldset': {\n      borderColor: theme.palette.grey[700],\n    },\n\n    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n      borderColor: theme.palette.grey[700],\n      borderWidth: '1px',\n    },\n\n    '& .MuiSelect-root': {\n      padding: theme.spacing(1, 1.5, 1, 4.5),\n      zIndex: 10,\n      textAlign: 'right',\n    },\n\n    '& .MuiInputAdornment-positionStart': {\n      position: 'absolute',\n      left: theme.spacing(1.5),\n    },\n\n    '& .MuiSelect-iconOutlined': {\n      display: 'none',\n    },\n  },\n  selectPaper: {\n    maxHeight: theme.spacing(37),\n  },\n  ul: {\n    margin: 0,\n    paddingLeft: theme.spacing(3),\n  },\n  warning: {\n    color: theme.palette.error.main,\n    display: 'flex',\n    gridGap: theme.spacing(0.825),\n  },\n}))\n"],"names":[],"mappings":"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"}

package/build/esm/components/DishCheckoutCard/DishCheckoutCardProps.d.ts

@@ -10,6 +10,10 @@ export interface DishCheckoutCardProps {
         alt?: string;
         src?: string | null;
     };
+    /** Maximum quantity of the dish */
+    maxQuantity?: number;
+    /** Minimum quantity of the dish */
+    minQuantity?: number;
     /** Edit and remove button text and aria-label */
     messages: Record<'edit' | 'ariaEdit' | 'ariaDelete', string>;
     /** Modifier group object of the dish */
@@ -31,12 +35,12 @@ export interface DishCheckoutCardProps {
     /** If item is in cart but is not unavailable */
     warningMessage?: string;
 }
-export declare type ModifierGroupsType = {
+export type ModifierGroupsType = {
     id: number;
     menuItemModifierGroupName?: string | null;
     selectedModifiers: ModifiersType[];
 };
-export declare type ModifiersType = {
+export type ModifiersType = {
     id: number;
     modifierName?: string | null;
     quantity: number;

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

@@ -1,2 +1,2 @@
-export { DishCheckoutCard as default } from './DishCheckoutCard';
-export { DishCheckoutCardProps } from './DishCheckoutCardProps';
+export { DishCheckoutCard } from './DishCheckoutCard';
+export type { DishCheckoutCardProps } from './DishCheckoutCardProps';

package/build/esm/components/DishDetailsReview/DishDetailsReview.js

@@ -1,8 +1,8 @@
 import React__default, { forwardRef } from 'react';
 import { Box, Avatar, Typography } from '@popmenu/common-ui';
 
-var DishDetailsReview = forwardRef(function (props) {
-    var userName = props.userName, userAvatarUrl = props.userAvatarUrl, content = props.content, createdAgo = props.createdAgo, alt = props.alt;
+const DishDetailsReview = forwardRef((props) => {
+    const { userName, userAvatarUrl, content, createdAgo, alt } = props;
     return (React__default.createElement(Box, { display: "flex" },
         React__default.createElement(Box, { mr: 1 },
             React__default.createElement(Avatar, { size: "small", src: userAvatarUrl, alt: alt })),

package/build/esm/components/DishDetailsReview/DishDetailsReview.js.map

@@ -1 +1 @@
-{"version":3,"file":"DishDetailsReview.js","sources":["../../../../src/components/DishDetailsReview/DishDetailsReview.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { Avatar, Box, Typography } from '@popmenu/common-ui'\n\nimport { DishDetailsReviewProps } from './DishDetailsReviewProps'\n\nexport const DishDetailsReview = forwardRef<HTMLDivElement, DishDetailsReviewProps>((props) => {\n  const { userName, userAvatarUrl, content, createdAgo, alt } = props\n\n  return (\n    <Box display=\"flex\">\n      <Box mr={1}>\n        <Avatar size=\"small\" src={userAvatarUrl} alt={alt} />\n      </Box>\n      <Box width=\"100%\">\n        <Box display=\"flex\" justifyContent=\"space-between\" mb={1}>\n          <Typography\n            variant=\"body1\"\n            variantMapping={{ body1: 'h3' }}\n            color=\"grey.600\"\n            style={{ display: 'flex', alignItems: 'center' }}\n          >\n            {userName}\n          </Typography>\n          <Typography color=\"grey.600\" variant=\"subtitle1\" style={{ display: 'flex', alignItems: 'center' }}>\n            {createdAgo}\n          </Typography>\n        </Box>\n        <Typography color=\"grey.900\" weight=\"regular\">\n          {content}\n        </Typography>\n      </Box>\n    </Box>\n  )\n})\n\nDishDetailsReview.displayName = 'DishDetailsReview'\n"],"names":["React"],"mappings":";;;AAKa,IAAA,iBAAiB,GAAG,UAAU,CAAyC,UAAC,KAAK,EAAA;IAChF,IAAA,QAAQ,GAA8C,KAAK,CAAnD,QAAA,EAAE,aAAa,GAA+B,KAAK,CAApC,aAAA,EAAE,OAAO,GAAsB,KAAK,CAA3B,OAAA,EAAE,UAAU,GAAU,KAAK,CAAA,UAAf,EAAE,GAAG,GAAK,KAAK,CAAA,GAAV;AAEzD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA;AACjB,QAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,CAAC,EAAA;AACR,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,GAAI,CACjD;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,EAAA;AACtD,gBAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,OAAO,EAAC,OAAO,EACf,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAC/B,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAE/C,QAAQ,CACE;gBACbA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,KAAK,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAC9F,UAAU,CACA,CACT;AACN,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,IAC1C,OAAO,CACG,CACT,CACF;AAEV,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"DishDetailsReview.js","sources":["../../../../src/components/DishDetailsReview/DishDetailsReview.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { Avatar, Box, Typography } from '@popmenu/common-ui'\n\nimport { DishDetailsReviewProps } from './DishDetailsReviewProps'\n\nexport const DishDetailsReview = forwardRef<HTMLDivElement, DishDetailsReviewProps>((props) => {\n  const { userName, userAvatarUrl, content, createdAgo, alt } = props\n\n  return (\n    <Box display=\"flex\">\n      <Box mr={1}>\n        <Avatar size=\"small\" src={userAvatarUrl} alt={alt} />\n      </Box>\n      <Box width=\"100%\">\n        <Box display=\"flex\" justifyContent=\"space-between\" mb={1}>\n          <Typography\n            variant=\"body1\"\n            variantMapping={{ body1: 'h3' }}\n            color=\"grey.600\"\n            style={{ display: 'flex', alignItems: 'center' }}\n          >\n            {userName}\n          </Typography>\n          <Typography color=\"grey.600\" variant=\"subtitle1\" style={{ display: 'flex', alignItems: 'center' }}>\n            {createdAgo}\n          </Typography>\n        </Box>\n        <Typography color=\"grey.900\" weight=\"regular\">\n          {content}\n        </Typography>\n      </Box>\n    </Box>\n  )\n})\n\nDishDetailsReview.displayName = 'DishDetailsReview'\n"],"names":["React"],"mappings":";;;MAKa,iBAAiB,GAAG,UAAU,CAAyC,CAAC,KAAK,KAAI;AAC5F,IAAA,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,KAAK;AAEnE,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA;AACjB,QAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,CAAC,EAAA;AACR,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,GAAI,CACjD;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,EAAA;AACtD,gBAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,OAAO,EAAC,OAAO,EACf,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAC/B,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAE/C,QAAQ,CACE;gBACbA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,KAAK,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAC9F,UAAU,CACA,CACT;AACN,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,IAC1C,OAAO,CACG,CACT,CACF;AAEV,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

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

@@ -1,2 +1,2 @@
-export { DishDetailsReview as default } from './DishDetailsReview';
-export { DishDetailsReviewProps } from './DishDetailsReviewProps';
+export { DishDetailsReview } from './DishDetailsReview';
+export type { DishDetailsReviewProps } from './DishDetailsReviewProps';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DishModifierCardProps } from './DishModifierCardProps';
 export declare const DishModifierCard: {
     (props: DishModifierCardProps): JSX.Element;

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

@@ -1,15 +1,14 @@
-import { __assign } from 'tslib';
-import React__default from 'react';
 import { Box, Typography } from '@popmenu/common-ui';
-import { useDishModifierCardStyles } from './DishModifierCard.styles.js';
+import React__default from 'react';
+import classNames from 'classnames';
 import { StatusTag } from '../StatusTag/StatusTag.js';
+import { useDishModifierCardStyles } from './DishModifierCard.styles.js';
 import { ModifierControls } from './ModifierControls.js';
-import classNames from '../../node_modules/classnames/index.js';
 
-var getStatusTagProps = function (props) {
-    var messages = props.messages, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
-    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText;
-    var color = 'default';
+const getStatusTagProps = (props) => {
+    const { messages, error, isRequired, isOutOfStock } = props;
+    const { optionalText, outOfStockText, requiredText } = messages;
+    let color = 'default';
     switch (true) {
         case error:
             color = 'error';
@@ -18,7 +17,7 @@ var getStatusTagProps = function (props) {
             color = 'warning';
             break;
     }
-    var label = optionalText;
+    let label = optionalText;
     switch (true) {
         case isOutOfStock:
             label = outOfStockText;
@@ -27,17 +26,16 @@ var getStatusTagProps = function (props) {
             label = requiredText;
             break;
     }
-    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
-    return { color: color, label: label, variant: variant };
+    const variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color, label, variant };
 };
-var DishModifierCard = function (props) {
-    var _a;
-    var aggregatePrice = props.aggregatePrice, name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isOutOfStock = props.isOutOfStock, isRequired = props.isRequired, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
-    var classes = useDishModifierCardStyles();
+const DishModifierCard = (props) => {
+    const { aggregatePrice, name, disableNewSelections, modifiers, value, messages, onChange, type, error, isOutOfStock, isRequired, handleOptionsClick, selectionQuantity, } = props;
+    const classes = useDishModifierCardStyles();
     return (React__default.createElement(Box, { className: classes.root },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
-            React__default.createElement(StatusTag, __assign({}, getStatusTagProps(props))),
-            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: classNames((_a = {}, _a[classes.error] = error, _a[classes.helperText] = !error, _a)) }, messages.helperText))),
+            React__default.createElement(StatusTag, { ...getStatusTagProps(props) }),
+            !isOutOfStock && (React__default.createElement(Typography, { variant: "subtitle1", className: classNames({ [classes.error]: error, [classes.helperText]: !error }) }, messages.helperText))),
         React__default.createElement(Typography, { className: classes.name }, name),
         React__default.createElement(Box, null,
             React__default.createElement(ModifierControls, { name: name, value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, isRequired: isRequired, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages, handleOptionsClick: handleOptionsClick, aggregatePrice: aggregatePrice, selectionQuantity: selectionQuantity }))));

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

@@ -1 +1 @@
-{"version":3,"file":"DishModifierCard.js","sources":["../../../../src/components/DishModifierCard/DishModifierCard.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Typography } from '@popmenu/common-ui'\n\nimport { DishModifierCardProps } from './DishModifierCardProps'\nimport { useDishModifierCardStyles } from './DishModifierCard.styles'\nimport StatusTag, { StatusTagProps } from '../StatusTag'\nimport { ModifierControls } from './ModifierControls'\nimport classNames from 'classnames'\n\nconst getStatusTagProps = (props: DishModifierCardProps): StatusTagProps => {\n  const { messages, error, isRequired, isOutOfStock } = props\n  const { optionalText, outOfStockText, requiredText } = messages\n\n  let color: StatusTagProps['color'] = 'default'\n  switch (true) {\n    case error:\n      color = 'error'\n      break\n    case isOutOfStock:\n      color = 'warning'\n      break\n  }\n\n  let label: string = optionalText\n  switch (true) {\n    case isOutOfStock:\n      label = outOfStockText\n      break\n    case isRequired:\n      label = requiredText\n      break\n  }\n\n  const variant = isRequired || isOutOfStock ? 'outlined' : 'filled'\n  return { color, label, variant }\n}\n\nexport const DishModifierCard = (props: DishModifierCardProps) => {\n  const {\n    aggregatePrice,\n    name,\n    disableNewSelections,\n    modifiers,\n    value,\n    messages,\n    onChange,\n    type,\n    error,\n    isOutOfStock,\n    isRequired,\n    handleOptionsClick,\n    selectionQuantity,\n  } = props\n  const classes = useDishModifierCardStyles()\n\n  return (\n    <Box className={classes.root}>\n      <Box\n        display=\"flex\"\n        justifyContent=\"space-between\"\n        width=\"100%\"\n        alignItems=\"center\"\n        height=\"fit-content\"\n        marginBottom={2}\n      >\n        <StatusTag {...getStatusTagProps(props)} />\n        {!isOutOfStock && (\n          <Typography\n            variant=\"subtitle1\"\n            className={classNames({ [classes.error]: error, [classes.helperText]: !error })}\n          >\n            {messages.helperText}\n          </Typography>\n        )}\n      </Box>\n      <Typography className={classes.name}>{name}</Typography>\n      <Box>\n        <ModifierControls\n          name={name}\n          value={value}\n          modifiers={modifiers}\n          isOutOfStock={isOutOfStock}\n          isRequired={isRequired}\n          onChange={onChange}\n          disableNewSelections={disableNewSelections}\n          type={type}\n          messages={messages}\n          handleOptionsClick={handleOptionsClick}\n          aggregatePrice={aggregatePrice}\n          selectionQuantity={selectionQuantity}\n        />\n      </Box>\n    </Box>\n  )\n}\n\nDishModifierCard.displayName = 'DishModifierCard'\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DishModifierCard.js","sources":["../../../../src/components/DishModifierCard/DishModifierCard.tsx"],"sourcesContent":["import { Box, Typography } from '@popmenu/common-ui'\nimport React from 'react'\n\nimport classNames from 'classnames'\nimport type { StatusTagProps } from '../StatusTag'\nimport { StatusTag } from '../StatusTag'\nimport { useDishModifierCardStyles } from './DishModifierCard.styles'\nimport { DishModifierCardProps } from './DishModifierCardProps'\nimport { ModifierControls } from './ModifierControls'\n\nconst getStatusTagProps = (props: DishModifierCardProps): StatusTagProps => {\n  const { messages, error, isRequired, isOutOfStock } = props\n  const { optionalText, outOfStockText, requiredText } = messages\n\n  let color: StatusTagProps['color'] = 'default'\n  switch (true) {\n    case error:\n      color = 'error'\n      break\n    case isOutOfStock:\n      color = 'warning'\n      break\n  }\n\n  let label: string = optionalText\n  switch (true) {\n    case isOutOfStock:\n      label = outOfStockText\n      break\n    case isRequired:\n      label = requiredText\n      break\n  }\n\n  const variant = isRequired || isOutOfStock ? 'outlined' : 'filled'\n  return { color, label, variant }\n}\n\nexport const DishModifierCard = (props: DishModifierCardProps) => {\n  const {\n    aggregatePrice,\n    name,\n    disableNewSelections,\n    modifiers,\n    value,\n    messages,\n    onChange,\n    type,\n    error,\n    isOutOfStock,\n    isRequired,\n    handleOptionsClick,\n    selectionQuantity,\n  } = props\n  const classes = useDishModifierCardStyles()\n\n  return (\n    <Box className={classes.root}>\n      <Box\n        display=\"flex\"\n        justifyContent=\"space-between\"\n        width=\"100%\"\n        alignItems=\"center\"\n        height=\"fit-content\"\n        marginBottom={2}\n      >\n        <StatusTag {...getStatusTagProps(props)} />\n        {!isOutOfStock && (\n          <Typography\n            variant=\"subtitle1\"\n            className={classNames({ [classes.error]: error, [classes.helperText]: !error })}\n          >\n            {messages.helperText}\n          </Typography>\n        )}\n      </Box>\n      <Typography className={classes.name}>{name}</Typography>\n      <Box>\n        <ModifierControls\n          name={name}\n          value={value}\n          modifiers={modifiers}\n          isOutOfStock={isOutOfStock}\n          isRequired={isRequired}\n          onChange={onChange}\n          disableNewSelections={disableNewSelections}\n          type={type}\n          messages={messages}\n          handleOptionsClick={handleOptionsClick}\n          aggregatePrice={aggregatePrice}\n          selectionQuantity={selectionQuantity}\n        />\n      </Box>\n    </Box>\n  )\n}\n\nDishModifierCard.displayName = 'DishModifierCard'\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,KAA4B,KAAoB;IACzE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,KAAK;IAC3D,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,QAAQ;IAE/D,IAAI,KAAK,GAA4B,SAAS;IAC9C,QAAQ,IAAI;AACV,QAAA,KAAK,KAAK;YACR,KAAK,GAAG,OAAO;YACf;AACF,QAAA,KAAK,YAAY;YACf,KAAK,GAAG,SAAS;YACjB;;IAGJ,IAAI,KAAK,GAAW,YAAY;IAChC,QAAQ,IAAI;AACV,QAAA,KAAK,YAAY;YACf,KAAK,GAAG,cAAc;YACtB;AACF,QAAA,KAAK,UAAU;YACb,KAAK,GAAG,YAAY;YACpB;;AAGJ,IAAA,MAAM,OAAO,GAAG,UAAU,IAAI,YAAY,GAAG,UAAU,GAAG,QAAQ;AAClE,IAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;AAClC,CAAC;AAEY,MAAA,gBAAgB,GAAG,CAAC,KAA4B,KAAI;AAC/D,IAAA,MAAM,EACJ,cAAc,EACd,IAAI,EACJ,oBAAoB,EACpB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,iBAAiB,GAClB,GAAG,KAAK;AACT,IAAA,MAAM,OAAO,GAAG,yBAAyB,EAAE;IAE3C,QACEA,6BAAC,GAAG,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAA;QAC1BA,cAAC,CAAA,aAAA,CAAA,GAAG,EACF,EAAA,OAAO,EAAC,MAAM,EACd,cAAc,EAAC,eAAe,EAC9B,KAAK,EAAC,MAAM,EACZ,UAAU,EAAC,QAAQ,EACnB,MAAM,EAAC,aAAa,EACpB,YAAY,EAAE,CAAC,EAAA;AAEf,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAK,EAAA,GAAA,iBAAiB,CAAC,KAAK,CAAC,EAAI,CAAA;AAC1C,YAAA,CAAC,YAAY,KACZA,cAAC,CAAA,aAAA,CAAA,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,UAAU,GAAG,CAAC,KAAK,EAAE,CAAC,EAE9E,EAAA,QAAQ,CAAC,UAAU,CACT,CACd,CACG;QACNA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAG,EAAA,IAAI,CAAc;AACxD,QAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;YACFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,EAC1C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,CAAA,CACE,CACF;AAEV;AAEA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

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

@@ -1,13 +1,13 @@
 import { makeStyles } from '@material-ui/core';
 
-var useDishModifierCardStyles = makeStyles(function (theme) { return ({
+const useDishModifierCardStyles = makeStyles((theme) => ({
     root: {
         borderRadius: '8px',
         border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',
         display: 'flex',
         flexDirection: 'column',
         padding: theme.spacing(2.5),
-        color: theme.palette.grey[900] + " !important",
+        color: `${theme.palette.grey[900]} !important`,
     },
     error: {
         color: theme.palette.error.main,
@@ -19,8 +19,8 @@ var useDishModifierCardStyles = makeStyles(function (theme) { return ({
         fontSize: theme.spacing(2.25),
         marginBottom: theme.spacing(2),
     },
-}); });
-var useRadioModifierFormStyles = makeStyles(function (theme) { return ({
+}));
+const useRadioModifierFormStyles = makeStyles((theme) => ({
     label: {
         alignItems: 'center',
         display: 'flex',
@@ -45,8 +45,8 @@ var useRadioModifierFormStyles = makeStyles(function (theme) { return ({
             flex: 1,
         },
     },
-}); });
-var useCheckboxModifierFormStyles = makeStyles(function (theme) { return ({
+}));
+const useCheckboxModifierFormStyles = makeStyles((theme) => ({
     label: {
         alignItems: 'center',
         display: 'flex',
@@ -71,8 +71,8 @@ var useCheckboxModifierFormStyles = makeStyles(function (theme) { return ({
             flex: 1,
         },
     },
-}); });
-var useLabelStyles = makeStyles(function (theme) { return ({
+}));
+const useLabelStyles = makeStyles((theme) => ({
     label: {
         margin: theme.spacing(0.5, 0),
     },
@@ -82,14 +82,14 @@ var useLabelStyles = makeStyles(function (theme) { return ({
     price: {
         color: theme.palette.grey[700],
     },
-}); });
-var useOptionsStyles = makeStyles(function (theme) { return ({
+}));
+const useOptionsStyles = makeStyles((theme) => ({
     options: {
         color: theme.palette.info.main,
         marginBottom: theme.spacing(1.5),
         padding: 0,
     },
-}); });
+}));
 
 export { useCheckboxModifierFormStyles, useDishModifierCardStyles, useLabelStyles, useOptionsStyles, useRadioModifierFormStyles };
 //# sourceMappingURL=DishModifierCard.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DishModifierCard.styles.js","sources":["../../../../src/components/DishModifierCard/DishModifierCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useDishModifierCardStyles = makeStyles<Theme>((theme) => ({\n  root: {\n    borderRadius: '8px',\n    border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',\n    display: 'flex',\n    flexDirection: 'column',\n    padding: theme.spacing(2.5),\n    color: `${theme.palette.grey[900]} !important`,\n  },\n  error: {\n    color: theme.palette.error.main,\n  },\n  helperText: {\n    color: theme.palette.text.primary,\n  },\n  name: {\n    fontSize: theme.spacing(2.25),\n    marginBottom: theme.spacing(2),\n  },\n}))\n\nexport const useRadioModifierFormStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  radio: {\n    fontSize: theme.spacing(2),\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: 'fill-available',\n\n    '& > :last-child': {\n      flex: 1,\n    },\n  },\n}))\n\nexport const useCheckboxModifierFormStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  checkbox: {\n    color: '#616161',\n    fontSize: theme.spacing(2),\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: 'fill-available',\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  disabled: {\n    color: theme.palette.grey[500],\n  },\n  price: {\n    color: theme.palette.grey[700],\n  },\n}))\n\nexport const useOptionsStyles = makeStyles<Theme>((theme) => ({\n  options: {\n    color: theme.palette.info.main,\n    marginBottom: theme.spacing(1.5),\n    padding: 0,\n  },\n}))\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DishModifierCard.styles.js","sources":["../../../../src/components/DishModifierCard/DishModifierCard.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useDishModifierCardStyles = makeStyles<Theme>((theme) => ({\n  root: {\n    borderRadius: '8px',\n    border: '1px solid var(--surfaces-card-stroke, #E0E0E0)',\n    display: 'flex',\n    flexDirection: 'column',\n    padding: theme.spacing(2.5),\n    color: `${theme.palette.grey[900]} !important`,\n  },\n  error: {\n    color: theme.palette.error.main,\n  },\n  helperText: {\n    color: theme.palette.text.primary,\n  },\n  name: {\n    fontSize: theme.spacing(2.25),\n    marginBottom: theme.spacing(2),\n  },\n}))\n\nexport const useRadioModifierFormStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  radio: {\n    fontSize: theme.spacing(2),\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: 'fill-available',\n\n    '& > :last-child': {\n      flex: 1,\n    },\n  },\n}))\n\nexport const useCheckboxModifierFormStyles = makeStyles<Theme>((theme) => ({\n  label: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  checkbox: {\n    color: '#616161',\n    fontSize: theme.spacing(2),\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: 'fill-available',\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  disabled: {\n    color: theme.palette.grey[500],\n  },\n  price: {\n    color: theme.palette.grey[700],\n  },\n}))\n\nexport const useOptionsStyles = makeStyles<Theme>((theme) => ({\n  options: {\n    color: theme.palette.info.main,\n    marginBottom: theme.spacing(1.5),\n    padding: 0,\n  },\n}))\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-export declare type ModifierValue = {
+export type ModifierValue = {
     groupId: number;
     modifierId: number;
     parentModifierId?: number | null;
@@ -6,7 +6,7 @@ export declare type ModifierValue = {
     quantity: number;
     isRadio?: boolean;
 };
-export declare type Modifier = {
+export type Modifier = {
     id: number;
     hasModifiers: boolean;
     name: string;
@@ -17,7 +17,7 @@ export declare type Modifier = {
     parentModifierGroupId: number;
     parentModifierGroupItemId?: number | null;
 };
-export declare type OnChangeValueType = ModifierValue;
+export type OnChangeValueType = ModifierValue;
 interface Base {
     /** Modifier options */
     modifiers: Array<Modifier>;
@@ -27,7 +27,7 @@ interface Base {
     onChange: (value: OnChangeValueType) => void;
     isOutOfStock: boolean;
 }
-export declare type DishModifierCardProps = {
+export type DishModifierCardProps = {
     /** Aggregate price of the modifier and its nested children modifiers */
     aggregatePrice: Record<number, string>;
     /** Modifier options */
@@ -63,9 +63,9 @@ export declare type DishModifierCardProps = {
         currentSelectionCount: number;
     }>;
 };
-export declare type RadioModifierFormProps = Base;
-export declare type CheckboxModifierFormProps = Base & {
+export type RadioModifierFormProps = Base;
+export type CheckboxModifierFormProps = Base & {
     disableNewSelections?: boolean;
 };
-export declare type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity' | 'name'>;
+export type ModifierOptionsControlProps = Pick<DishModifierCardProps, 'value' | 'modifiers' | 'isOutOfStock' | 'isRequired' | 'onChange' | 'disableNewSelections' | 'type' | 'messages' | 'handleOptionsClick' | 'aggregatePrice' | 'selectionQuantity' | 'name'>;
 export {};

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

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

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

@@ -1,38 +1,36 @@
-import { __assign } from 'tslib';
-import React__default from 'react';
 import { FormControl, FormGroup, Box, Typography, FormControlLabel, Checkbox, RadioGroup, Radio } from '@material-ui/core';
 import { Icon } from '@popmenu/common-ui';
 import { ChevronRight } from '@popmenu/web-icons';
-import classNames from '../../node_modules/classnames/index.js';
-import { useCheckboxModifierFormStyles, useRadioModifierFormStyles, useLabelStyles, useOptionsStyles } from './DishModifierCard.styles.js';
-import { QuantityPicker } from '../QuantityPicker/QuantityPicker.js';
+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';
 
-var Label = function (props) {
-    var _a, _b, _c;
-    var name = props.name, price = props.price, _d = props.disabled, disabled = _d === void 0 ? false : _d;
-    var classes = useLabelStyles();
+const Label = (props) => {
+    const { name, price, disabled = false } = props;
+    const classes = useLabelStyles();
     return (React__default.createElement(Box, { display: "flex", flexDirection: "column", className: classes.label },
         React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 8 },
-            React__default.createElement(Typography, { className: classNames((_a = {}, _a[classes.disabled] = disabled, _a)) }, name)),
-        price && (React__default.createElement(Typography, { className: classNames((_b = {}, _b[classes.price] = !disabled, _b), (_c = {}, _c[classes.disabled] = disabled, _c)) },
+            React__default.createElement(Typography, { className: classNames({ [classes.disabled]: disabled }) }, name)),
+        price && (React__default.createElement(Typography, { className: classNames({ [classes.price]: !disabled }, { [classes.disabled]: disabled }) },
             "+ ",
             price))));
 };
-var Options = function (props) {
-    var handleOptionsClick = props.handleOptionsClick;
-    var classes = useOptionsStyles();
+const Options = (props) => {
+    const { handleOptionsClick } = props;
+    const classes = useOptionsStyles();
     return (React__default.createElement(Box, null,
         React__default.createElement(Button, { variation: "none", className: classes.options, onClick: handleOptionsClick },
             React__default.createElement(Typography, { variant: "caption" }, "OPTIONS"),
             React__default.createElement(Icon, { icon: ChevronRight }))));
 };
-var SingleSelectModifierControl = function (props) {
-    var modifiers = props.modifiers, name = props.name, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice, isRequired = props.isRequired;
-    var radioClasses = useRadioModifierFormStyles();
-    var makeHandleChange = function (modifier) { return function (e) {
-        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+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) {
             handleOptionsClick(modifier.id);
         }
@@ -44,27 +42,23 @@ var SingleSelectModifierControl = function (props) {
             price: modifier.price || 0,
             quantity: 1,
         });
-    }; };
+    };
     return (React__default.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(RadioGroup, { "aria-label": name }, modifiers.map(function (modifier) {
-            var _a;
-            var _b;
-            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: ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.modifierId) === modifier.id, className: classNames((_a = {},
-                            _a[radioClasses.hideRadio] = modifier.outOfStock,
-                            _a[radioClasses.radio] = !modifier.outOfStock,
-                            _a)), 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 }),
-                        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" }),
-                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
-        }))));
+        React__default.createElement(RadioGroup, { "aria-label": name }, modifiers.map((modifier) => (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 }),
+                    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" }),
+            modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id) }))))))));
 };
-var MultipleSelectControl = function (props) {
-    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, aggregatePrice = props.aggregatePrice;
-    var classes = useCheckboxModifierFormStyles();
-    var makeHandleChange = function (modifier) { return function () {
-        var isModifierInValue = Boolean(value.find(function (v) { return v.modifierId === modifier.id; }));
+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) {
             handleOptionsClick(modifier.id);
         }
@@ -76,21 +70,20 @@ var MultipleSelectControl = function (props) {
             price: modifier.price || 0,
             quantity: isModifierInValue ? 0 : 1,
         });
-    }; };
+    };
     return (React__default.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) {
-            var _a, _b;
+        React__default.createElement(FormGroup, null, modifiers.map((modifier) => {
             return (React__default.createElement(Box, { key: modifier.id },
-                React__default.createElement(FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.modifierId === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default.createElement(Checkbox, { className: classNames((_a = {}, _a[classes.hideCheckbox] = modifier.outOfStock, _a), (_b = {}, _b[classes.checkbox] = !modifier.outOfStock, _b)), disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default.createElement(Box, { className: classes.label },
+                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 }),
                         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" }),
-                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } }))));
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id) }))));
         }))));
 };
-var MultipleQuantitySelectControl = function (props) {
-    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, disableNewSelections = props.disableNewSelections, handleOptionsClick = props.handleOptionsClick, selectionQuantity = props.selectionQuantity;
-    var makeHandleChange = function (modifier) { return function (_e, customEvent) {
+const MultipleQuantitySelectControl = (props) => {
+    const { modifiers, isOutOfStock, onChange, disableNewSelections, handleOptionsClick, selectionQuantity } = props;
+    const makeHandleChange = (modifier) => (_e, customEvent) => {
         onChange({
             isRadio: false,
             modifierId: modifier.id,
@@ -99,16 +92,16 @@ var MultipleQuantitySelectControl = function (props) {
             price: modifier.price || 0,
             quantity: customEvent.quantity,
         });
-    }; };
+    };
     return (React__default.createElement(FormControl, { fullWidth: true },
-        React__default.createElement(FormGroup, null, modifiers.map(function (modifier) { return (React__default.createElement(Box, { key: modifier.id, style: { justifyContent: 'space-between', flexDirection: 'column' }, display: "flex" },
+        React__default.createElement(FormGroup, null, modifiers.map((modifier) => (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: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock }),
                 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, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier), disabled: isOutOfStock || modifier.outOfStock, name: modifier.name }))),
             React__default.createElement(Box, { display: "flex", alignItems: "flex-start", gridGap: 4 },
-                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: function () { return handleOptionsClick(modifier.id); } })),
+                modifier.hasModifiers && !modifier.outOfStock && (React__default.createElement(Options, { handleOptionsClick: () => handleOptionsClick(modifier.id) })),
                 selectionQuantity[modifier.id] &&
                     selectionQuantity[modifier.id].requiredSelectionCount > 0 &&
                     selectionQuantity[modifier.id].requiredSelectionCount !==
@@ -116,16 +109,16 @@ var MultipleQuantitySelectControl = function (props) {
                     selectionQuantity[modifier.id].currentSelectionCount,
                     "/",
                     selectionQuantity[modifier.id].requiredSelectionCount,
-                    " selected"))))); }))));
+                    " selected")))))))));
 };
-var ModifierControls = function (props) {
+const ModifierControls = (props) => {
     switch (props.type) {
         case 'singleSelect':
-            return React__default.createElement(SingleSelectModifierControl, __assign({}, props));
+            return React__default.createElement(SingleSelectModifierControl, { ...props });
         case 'multipleSelect':
-            return React__default.createElement(MultipleSelectControl, __assign({}, props));
+            return React__default.createElement(MultipleSelectControl, { ...props });
         case 'multipleQuantitySelect':
-            return React__default.createElement(MultipleQuantitySelectControl, __assign({}, props));
+            return React__default.createElement(MultipleQuantitySelectControl, { ...props });
         default:
             return null;
     }