@popmenu/ordering-ui 0.145.0 → 0.148.0

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

@@ -4,6 +4,9 @@ const useQuantityPickerStyles = makeStyles((theme) => ({
     root: {
         height: theme.spacing(7),
         backgroundColor: 'none',
+        '&:has(:focus-visible)': {
+            outline: `2px solid ${theme.palette.info.main}`,
+        },
     },
 }));
 const useQuantityInputStyles = makeStyles((theme) => ({
@@ -19,15 +22,17 @@ const useQuantityInputStyles = makeStyles((theme) => ({
         },
         '-moz-appearance': 'textfield',
         fontWeight: 600,
-        padding: 0,
         textAlign: 'center',
         zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),
         backgroundColor: (props) => (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'),
         alignSelf: (props) => (props.variation === 'modifierCount' ? 'stretch' : 'unset'),
         height: (props) => (props.variation === 'modifierCount' ? 'auto' : 'unset'),
-        minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)),
+        minHeight: theme.spacing(3),
+        minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(3)),
         borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),
-        margin: (props) => (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0),
+        margin: theme.spacing(1),
+        padding: 0,
+        outline: 'none !important',
     },
 }));
 const useStartAdornmentStyles = makeStyles((theme) => ({

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

@@ -1 +1 @@
-{"version":3,"file":"QuantityPicker.styles.js","sources":["../../../../src/components/QuantityPicker/QuantityPicker.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { QuantityPickerProps } from './QuantityPickerProps'\n\nexport const useQuantityPickerStyles = makeStyles((theme) => ({\n  root: {\n    height: theme.spacing(7),\n    backgroundColor: 'none',\n  },\n}))\n\nexport const useQuantityInputStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    height: '100%',\n    width: 'min-content',\n    borderRadius: theme.spacing(12.5),\n    background: (props) => (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]),\n  },\n  input: {\n    '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n      display: 'none',\n    },\n    '-moz-appearance': 'textfield',\n    fontWeight: 600,\n    padding: 0,\n    textAlign: 'center',\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n    backgroundColor: (props) => (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'),\n    alignSelf: (props) => (props.variation === 'modifierCount' ? 'stretch' : 'unset'),\n    height: (props) => (props.variation === 'modifierCount' ? 'auto' : 'unset'),\n    minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)),\n    borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),\n    margin: (props) => (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0),\n  },\n}))\n\nexport const useStartAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n  },\n}))\n\nexport const useEndAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n  },\n}))\n"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,UAAU,CAAC,CAAC,KAAK,MAAM;AAC5D,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACxB,QAAA,eAAe,EAAE,MAAM;AACxB,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,sBAAsB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACpH,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACjC,UAAU,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACjG,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,qFAAqF,EAAE;AACrF,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,iBAAiB,EAAE,WAAW;AAC9B,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;QACtF,eAAe,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QACrG,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;QACjF,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAC3E,QAAA,QAAQ,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnG,YAAY,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;QAC3F,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;AACrF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,uBAAuB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACrH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QACjC,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;AACvF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,qBAAqB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACnH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;AAClC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"QuantityPicker.styles.js","sources":["../../../../src/components/QuantityPicker/QuantityPicker.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { QuantityPickerProps } from './QuantityPickerProps'\n\nexport const useQuantityPickerStyles = makeStyles((theme) => ({\n  root: {\n    height: theme.spacing(7),\n    backgroundColor: 'none',\n    '&:has(:focus-visible)': {\n      outline: `2px solid ${theme.palette.info.main}`,\n    },\n  },\n}))\n\nexport const useQuantityInputStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    height: '100%',\n    width: 'min-content',\n    borderRadius: theme.spacing(12.5),\n    background: (props) => (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]),\n  },\n  input: {\n    '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n      display: 'none',\n    },\n    '-moz-appearance': 'textfield',\n    fontWeight: 600,\n    textAlign: 'center',\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n    backgroundColor: (props) => (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'),\n    alignSelf: (props) => (props.variation === 'modifierCount' ? 'stretch' : 'unset'),\n    height: (props) => (props.variation === 'modifierCount' ? 'auto' : 'unset'),\n    minHeight: theme.spacing(3),\n    minWidth: (props) => (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(3)),\n    borderRadius: (props) => (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'),\n    margin: theme.spacing(1),\n    padding: 0,\n    outline: 'none !important',\n  },\n}))\n\nexport const useStartAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n    zIndex: (props) => (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1),\n  },\n}))\n\nexport const useEndAdornmentStyles = makeStyles<Theme, Pick<QuantityPickerProps, 'variation' | 'value'>>((theme) => ({\n  root: {\n    color: theme.palette.text.primary,\n  },\n}))\n"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,UAAU,CAAC,CAAC,KAAK,MAAM;AAC5D,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACxB,QAAA,eAAe,EAAE,MAAM;AACvB,QAAA,uBAAuB,EAAE;YACvB,OAAO,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAE,CAAA;AAChD,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,sBAAsB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACpH,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACjC,UAAU,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACjG,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,qFAAqF,EAAE;AACrF,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,iBAAiB,EAAE,WAAW;AAC9B,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;QACtF,eAAe,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QACrG,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;QACjF,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAC3E,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,QAAA,QAAQ,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAChG,YAAY,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;AAC3F,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACxB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,iBAAiB;AAC3B,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,uBAAuB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACrH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QACjC,MAAM,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,GAAG,EAAE,GAAG,CAAC,CAAC;AACvF,KAAA;AACF,CAAA,CAAC;AAEW,MAAA,qBAAqB,GAAG,UAAU,CAA0D,CAAC,KAAK,MAAM;AACnH,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;AAClC,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/components/QuantityPicker/QuantityPickerProps.d.ts

@@ -4,8 +4,10 @@ export type QuantityChangeEvent = {
     reason: string;
 };
 export interface QuantityPickerProps {
+    /** Unique ID for the spinbutton input - required for aria-controls on buttons */
+    id: string;
     /** Callback for when the quantity is increased or decreased for the parent form  */
-    onChange: (event: ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>, change: QuantityChangeEvent) => void;
+    onChange: (event: ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement>, change: QuantityChangeEvent) => void;
     /** the quantity represented by the picker */
     value: number;
     /** determines if picker is active */
@@ -22,4 +24,8 @@ export interface QuantityPickerProps {
     variation: 'itemCount' | 'modifierCount';
     /** name of the modifier the quantity picker is assigned to */
     name: string;
+    /** Accessible title for the increment button (e.g., "Add adult") - used for i18n */
+    incrementButtonTitle: string;
+    /** Accessible title for the decrement button (e.g., "Remove adult") - used for i18n */
+    decrementButtonTitle: string;
 }

package/build/esm/components/ReactionCounter/ReactionCounter.js

@@ -4,8 +4,11 @@ import { Box, Icon, Typography } from '@popmenu/common-ui';
 const ReactionCounter = (props) => {
     const { count, icon, label } = props;
     return (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: 6, color: "grey.900" },
-        React__default.createElement(Icon, { icon: icon, size: "large", color: "inherit", "aria-label": label }),
-        React__default.createElement(Typography, { variant: "body2", color: "grey.900" }, count)));
+        React__default.createElement(Icon, { icon: icon, size: "large", color: "inherit", "aria-hidden": "true" }),
+        React__default.createElement(Typography, { variant: "body2", color: "grey.900" },
+            count,
+            " ",
+            React__default.createElement("span", { className: "sr-only" }, label))));
 };
 
 export { ReactionCounter };

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionCounter.js","sources":["../../../../src/components/ReactionCounter/ReactionCounter.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Icon, Typography } from '@popmenu/common-ui'\nimport { ReactionCounterProps } from './ReactionCounterProps'\n\nexport const ReactionCounter = (props: ReactionCounterProps) => {\n  const { count, icon, label } = props\n\n  return (\n    <Box display=\"flex\" alignItems=\"center\" gridGap={6} color=\"grey.900\">\n      <Icon icon={icon} size=\"large\" color=\"inherit\" aria-label={label} />\n      <Typography variant=\"body2\" color=\"grey.900\">\n        {count}\n      </Typography>\n    </Box>\n  )\n}\n"],"names":["React"],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,KAA2B,KAAI;IAC7D,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK;AAEpC,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAC,UAAU,EAAA;AAClE,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAA,YAAA,EAAa,KAAK,EAAI,CAAA;AACpE,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EACzC,EAAA,KAAK,CACK,CACT;AAEV;;;;"}
+{"version":3,"file":"ReactionCounter.js","sources":["../../../../src/components/ReactionCounter/ReactionCounter.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Icon, Typography } from '@popmenu/common-ui'\nimport { ReactionCounterProps } from './ReactionCounterProps'\n\nexport const ReactionCounter = (props: ReactionCounterProps) => {\n  const { count, icon, label } = props\n\n  return (\n    <Box display=\"flex\" alignItems=\"center\" gridGap={6} color=\"grey.900\">\n      <Icon icon={icon} size=\"large\" color=\"inherit\" aria-hidden=\"true\" />\n      <Typography variant=\"body2\" color=\"grey.900\">\n        {count} <span className=\"sr-only\">{label}</span>\n      </Typography>\n    </Box>\n  )\n}\n"],"names":["React"],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,KAA2B,KAAI;IAC7D,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK;AAEpC,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAC,UAAU,EAAA;AAClE,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAA,aAAA,EAAa,MAAM,EAAG,CAAA;QACpEA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAAA;YACzC,KAAK;;YAAEA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,SAAS,EAAA,EAAE,KAAK,CAAQ,CACrC,CACT;AAEV;;;;"}

package/build/esm/components/ReactionCounter/ReactionCounterProps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface ReactionCounterProps {
     count: number;
-    icon: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    icon: React.FC<React.SVGProps<SVGSVGElement>>;
     label: string;
 }

package/build/esm/components/SelectableChip/SelectableChip.js

@@ -1,13 +1,24 @@
-import { Tab } from '@material-ui/core';
 import React__default from 'react';
 import { useSelectableChipStyles } from './SelectableChip.styles.js';
+import classNames from 'classnames';
+import { Typography } from '@material-ui/core';
 
 const SelectableChip = (props) => {
+    const { href, value, label, onClick, selected } = props;
     const classes = useSelectableChipStyles(props);
-    return (React__default.createElement(Tab, { "data-tab-for-section-id": props.value, classes: {
-            root: classes.root,
-            selected: classes.selected,
-        }, ...props }));
+    const handleClick = (event) => {
+        event.preventDefault();
+        onClick(event, value);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            onClick(event, value);
+        }
+    };
+    return (React__default.createElement("li", null,
+        React__default.createElement(Typography, { variant: "body2" },
+            React__default.createElement("a", { href: href, className: classNames({ [classes.root]: true, [classes.selected]: selected }), onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected ? 'true' : undefined }, label))));
 };
 
 export { SelectableChip };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableChip.js","sources":["../../../../src/components/SelectableChip/SelectableChip.tsx"],"sourcesContent":["import { Tab } from '@material-ui/core'\nimport React from 'react'\n\nimport { useSelectableChipStyles } from './SelectableChip.styles'\nimport { SelectableChipProps } from './SelectableChipProps'\n\nexport const SelectableChip = (props: SelectableChipProps) => {\n  const classes = useSelectableChipStyles(props)\n\n  return (\n    <Tab\n      data-tab-for-section-id={props.value}\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n      }}\n      {...props}\n    />\n  )\n}\n"],"names":["React"],"mappings":";;;;AAMa,MAAA,cAAc,GAAG,CAAC,KAA0B,KAAI;AAC3D,IAAA,MAAM,OAAO,GAAG,uBAAuB,CAAC,KAAK,CAAC;IAE9C,QACEA,6BAAC,GAAG,EAAA,EAAA,yBAAA,EACuB,KAAK,CAAC,KAAK,EACpC,OAAO,EAAE;YACP,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ;SAC3B,EACG,GAAA,KAAK,EACT,CAAA;AAEN;;;;"}
+{"version":3,"file":"SelectableChip.js","sources":["../../../../src/components/SelectableChip/SelectableChip.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useSelectableChipStyles } from './SelectableChip.styles'\nimport { SelectableChipProps } from './SelectableChipProps'\nimport classNames from 'classnames'\nimport { Typography } from '@material-ui/core'\n\nexport const SelectableChip = (props: SelectableChipProps) => {\n  const { href, value, label, onClick, selected } = props\n  const classes = useSelectableChipStyles(props)\n\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    event.preventDefault()\n    onClick(event, value)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault()\n      onClick(event, value)\n    }\n  }\n\n  return (\n    <li>\n      <Typography variant=\"body2\">\n        <a\n          href={href}\n          className={classNames({ [classes.root]: true, [classes.selected]: selected })}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          aria-current={selected ? 'true' : undefined}\n        >\n          {label}\n        </a>\n      </Typography>\n    </li>\n  )\n}\n"],"names":["React"],"mappings":";;;;;AAOa,MAAA,cAAc,GAAG,CAAC,KAA0B,KAAI;AAC3D,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK;AACvD,IAAA,MAAM,OAAO,GAAG,uBAAuB,CAAC,KAAK,CAAC;AAE9C,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;QACjE,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;AACvB,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAA6C,KAAI;AACtE,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;;AAEzB,KAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,OAAO,EAAA;YACzBA,cACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC,EAC7E,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACV,cAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,EAE1C,KAAK,CACJ,CACO,CACV;AAET;;;;"}

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

@@ -2,35 +2,23 @@ import { makeStyles } from '@material-ui/core';
 
 const useSelectableChipStyles = makeStyles((theme) => ({
     root: {
-        border: '2px solid',
-        borderColor: theme.palette.grey[100],
+        border: '2px solid transparent',
         borderRadius: '50px',
+        boxSizing: 'border-box',
         backgroundColor: theme.palette.grey[100],
-        color: theme.palette.grey[900],
+        color: theme.palette.text.primary,
+        display: 'block',
         padding: theme.spacing(1, 2),
-        fontSize: '0.875rem',
-        fontWeight: 400,
-        minWidth: 'unset',
-        minHeight: 'unset',
-        opacity: 'unset',
-        textTransform: 'none',
-        textAlign: 'left',
         '&:hover': {
-            boxShadow: '0px 0px 0px 1px #757575',
+            boxShadow: `0px 0px 0px 1px ${theme.palette.grey[100]}`,
         },
         '&::-webkit-scrollbar': {
             display: 'none',
         },
-        '&.Mui-selected': {
-            backgroundColor: theme.palette.grey[100],
-            borderColor: '#0A202F',
-            color: theme.palette.grey[900],
-            fontWeight: 400,
-            '&:hover': {
-                background: theme.palette.grey[100],
-                boxShadow: 'none',
-            },
-        },
+    },
+    selected: {
+        fontWeight: 500,
+        border: `2px solid ${theme.palette.text.primary}`,
     },
 }));
 

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableChip.styles.js","sources":["../../../../src/components/SelectableChip/SelectableChip.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { SelectableChipProps } from './SelectableChipProps'\n\nexport const useSelectableChipStyles = makeStyles<Theme, SelectableChipProps>((theme) => ({\n  root: {\n    border: '2px solid',\n    borderColor: theme.palette.grey[100],\n    borderRadius: '50px',\n    backgroundColor: theme.palette.grey[100],\n    color: theme.palette.grey[900],\n    padding: theme.spacing(1, 2),\n    fontSize: '0.875rem',\n    fontWeight: 400,\n    minWidth: 'unset',\n    minHeight: 'unset',\n    opacity: 'unset',\n    textTransform: 'none',\n    textAlign: 'left',\n    '&:hover': {\n      boxShadow: '0px 0px 0px 1px #757575',\n    },\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    '&.Mui-selected': {\n      backgroundColor: theme.palette.grey[100],\n      borderColor: '#0A202F',\n      color: theme.palette.grey[900],\n      fontWeight: 400,\n      '&:hover': {\n        background: theme.palette.grey[100],\n        boxShadow: 'none',\n      },\n    },\n  },\n}))\n"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,UAAU,CAA6B,CAAC,KAAK,MAAM;AACxF,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpC,QAAA,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QACxC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,SAAS,EAAE,OAAO;AAClB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,SAAS,EAAE;AACT,YAAA,SAAS,EAAE,yBAAyB;AACrC,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,gBAAgB,EAAE;YAChB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACxC,YAAA,WAAW,EAAE,SAAS;YACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"SelectableChip.styles.js","sources":["../../../../src/components/SelectableChip/SelectableChip.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { SelectableChipProps } from './SelectableChipProps'\n\nexport const useSelectableChipStyles = makeStyles<Theme, SelectableChipProps>((theme) => ({\n  root: {\n    border: '2px solid transparent',\n    borderRadius: '50px',\n    boxSizing: 'border-box',\n    backgroundColor: theme.palette.grey[100],\n    color: theme.palette.text.primary,\n    display: 'block',\n    padding: theme.spacing(1, 2),\n    '&:hover': {\n      boxShadow: `0px 0px 0px 1px ${theme.palette.grey[100]}`,\n    },\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n  },\n  selected: {\n    fontWeight: 500,\n    border: `2px solid ${theme.palette.text.primary}`,\n  },\n}))\n"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,UAAU,CAA6B,CAAC,KAAK,MAAM;AACxF,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,YAAY,EAAE,MAAM;AACpB,QAAA,SAAS,EAAE,YAAY;QACvB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACxC,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;AACjC,QAAA,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,SAAS,EAAE;YACT,SAAS,EAAE,CAAmB,gBAAA,EAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAE,CAAA;AACxD,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAE,CAAA;AAClD,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/components/SelectableChip/SelectableChipProps.d.ts

@@ -1,2 +1,7 @@
-import { TabProps } from '@material-ui/core';
-export type SelectableChipProps = TabProps;
+export type SelectableChipProps = {
+    onClick: (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>, value: number) => void;
+    value: number;
+    label: string;
+    href: string;
+    selected: boolean;
+};

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

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

package/build/esm/components/SelectableChipGroup/SelectableChipGroup.js

@@ -1,13 +1,11 @@
 import React__default from 'react';
-import { Tabs } from '@material-ui/core';
 import { useSelectableChipGroupStyles } from './SelectableChipGroup.styles.js';
 
 const SelectableChipGroup = (props) => {
-    const { children, ...muiProps } = props;
-    const classes = useSelectableChipGroupStyles(props);
-    return (React__default.createElement(Tabs, { TabIndicatorProps: {
-            hidden: true,
-        }, variant: "scrollable", scrollButtons: "off", classes: classes, ...muiProps }, children));
+    const { children, ...restProps } = props;
+    const classes = useSelectableChipGroupStyles();
+    return (React__default.createElement("nav", { ...restProps },
+        React__default.createElement("ul", { className: classes.flexContainer }, children)));
 };
 
 export { SelectableChipGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableChipGroup.js","sources":["../../../../src/components/SelectableChipGroup/SelectableChipGroup.tsx"],"sourcesContent":["import React from 'react'\nimport { Tabs } from '@material-ui/core'\nimport { SelectableChipGroupProps } from './SelectableChipGroupProps'\nimport { useSelectableChipGroupStyles } from './SelectableChipGroup.styles'\n\nexport const SelectableChipGroup = (props: SelectableChipGroupProps) => {\n  const { children, ...muiProps } = props\n  const classes = useSelectableChipGroupStyles(props)\n\n  return (\n    <Tabs\n      TabIndicatorProps={{\n        hidden: true,\n      }}\n      variant=\"scrollable\"\n      scrollButtons=\"off\"\n      classes={classes}\n      {...muiProps}\n    >\n      {children}\n    </Tabs>\n  )\n}\n"],"names":["React"],"mappings":";;;;AAKa,MAAA,mBAAmB,GAAG,CAAC,KAA+B,KAAI;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK;AACvC,IAAA,MAAM,OAAO,GAAG,4BAA4B,CAAC,KAAK,CAAC;AAEnD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,iBAAiB,EAAE;AACjB,YAAA,MAAM,EAAE,IAAI;AACb,SAAA,EACD,OAAO,EAAC,YAAY,EACpB,aAAa,EAAC,KAAK,EACnB,OAAO,EAAE,OAAO,EACZ,GAAA,QAAQ,IAEX,QAAQ,CACJ;AAEX;;;;"}
+{"version":3,"file":"SelectableChipGroup.js","sources":["../../../../src/components/SelectableChipGroup/SelectableChipGroup.tsx"],"sourcesContent":["import React from 'react'\nimport { useSelectableChipGroupStyles } from './SelectableChipGroup.styles'\n\ntype SelectableChipGroupProps = {\n  children: React.ReactNode\n} & React.HTMLAttributes<HTMLElement>\n\nexport const SelectableChipGroup = (props: SelectableChipGroupProps) => {\n  const { children, ...restProps } = props\n  const classes = useSelectableChipGroupStyles()\n\n  return (\n    <nav {...restProps}>\n      <ul className={classes.flexContainer}>{children}</ul>\n    </nav>\n  )\n}\n"],"names":["React"],"mappings":";;;AAOa,MAAA,mBAAmB,GAAG,CAAC,KAA+B,KAAI;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACxC,IAAA,MAAM,OAAO,GAAG,4BAA4B,EAAE;IAE9C,QACEA,yCAAS,SAAS,EAAA;QAChBA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,aAAa,IAAG,QAAQ,CAAM,CACjD;AAEV;;;;"}

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

@@ -3,14 +3,14 @@ import { makeStyles } from '@material-ui/core';
 const useSelectableChipGroupStyles = makeStyles(({ breakpoints, spacing }) => ({
     flexContainer: {
         [breakpoints.up('lg')]: {
+            flexDirection: 'column',
             alignItems: 'flex-start',
         },
+        display: 'flex',
         gridGap: spacing(1.5),
+        listStyle: 'none',
         padding: 2,
-    },
-    flexContainerVertical: {
-        gridGap: spacing(1.5),
-        padding: 2,
+        margin: 0,
     },
 }));
 

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableChipGroup.styles.js","sources":["../../../../src/components/SelectableChipGroup/SelectableChipGroup.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useSelectableChipGroupStyles = makeStyles<Theme>(({ breakpoints, spacing }) => ({\n  flexContainer: {\n    [breakpoints.up('lg')]: {\n      alignItems: 'flex-start',\n    },\n    gridGap: spacing(1.5),\n    padding: 2,\n  },\n  flexContainerVertical: {\n    gridGap: spacing(1.5),\n    padding: 2,\n  },\n}))\n"],"names":[],"mappings":";;AAEO,MAAM,4BAA4B,GAAG,UAAU,CAAQ,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM;AAC3F,IAAA,aAAa,EAAE;AACb,QAAA,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;AACtB,YAAA,UAAU,EAAE,YAAY;AACzB,SAAA;AACD,QAAA,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;AACrB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACD,IAAA,qBAAqB,EAAE;AACrB,QAAA,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;AACrB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"SelectableChipGroup.styles.js","sources":["../../../../src/components/SelectableChipGroup/SelectableChipGroup.styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useSelectableChipGroupStyles = makeStyles<Theme>(({ breakpoints, spacing }) => ({\n  flexContainer: {\n    [breakpoints.up('lg')]: {\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n    },\n    display: 'flex',\n    gridGap: spacing(1.5),\n    listStyle: 'none',\n    padding: 2,\n    margin: 0,\n  },\n}))\n"],"names":[],"mappings":";;AAEO,MAAM,4BAA4B,GAAG,UAAU,CAAQ,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM;AAC3F,IAAA,aAAa,EAAE;AACb,QAAA,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;AACtB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,UAAU,EAAE,YAAY;AACzB,SAAA;AACD,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC;AACrB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,CAAC;AACV,KAAA;AACF,CAAA,CAAC;;;;"}

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

@@ -1,2 +1 @@
 export { SelectableChipGroup } from './SelectableChipGroup';
-export type { SelectableChipGroupProps } from './SelectableChipGroupProps';

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

@@ -31,7 +31,6 @@ export type { QuantityChangeEvent, QuantityPickerProps } from './QuantityPicker'
 export { SelectableChip } from './SelectableChip';
 export type { SelectableChipProps } from './SelectableChip';
 export { SelectableChipGroup } from './SelectableChipGroup';
-export type { SelectableChipGroupProps } from './SelectableChipGroup';
 export { StatusTag } from './StatusTag';
 export type { StatusTagProps } from './StatusTag';
 export { SelectedMenuFiltersList } from './SelectedMenuFiltersList';

package/build/esm/theme/overrides.js

@@ -73,6 +73,14 @@ const overrides = {
             },
         },
     },
+    MuiOutlinedInput: {
+        input: {
+            '&::placeholder': {
+                color: '#757575',
+                opacity: 1,
+            },
+        },
+    },
     MuiInputLabel: {
         root: {
             color: '#757575',
@@ -97,12 +105,39 @@ const overrides = {
         },
         inputMultiline: {},
     },
+    MuiRadio: {
+        root: {
+            '&.Mui-focusVisible': {
+                outline: `2px solid ${palette.info.main} !important`,
+            },
+        },
+    },
     MuiCssBaseline: {
         '@global': {
+            a: {
+                color: 'inherit',
+                textDecoration: 'none',
+                fontWeight: 'inherit',
+                '&:hover': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+                '&:focus': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+                '&:active': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+                '&:visited': {
+                    color: 'inherit',
+                    textDecoration: 'none',
+                },
+            },
             '*:focus-visible, a:focus-visible': {
                 '&': {
                     outline: `2px solid ${palette.info.main} !important`,
-                    borderRadius: 8,
                 },
             },
             'sr-only': {

package/build/esm/theme/overrides.js.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.js","sources":["../../../src/theme/overrides.ts"],"sourcesContent":["import { Theme } from '@material-ui/core'\nimport { palette } from './palette'\n\nexport const overrides: Theme['overrides'] = {\n  MuiButton: {\n    root: {\n      borderRadius: 32,\n      textTransform: 'none',\n      padding: '18px 16px',\n      '&$disableElevation:hover': {\n        boxShadow: '0px 0px 0px 1px #757575',\n      },\n    },\n    containedPrimary: {\n      outlineOffset: 1,\n    },\n    outlined: {},\n    textPrimary: {\n      color: palette.info.main,\n    },\n    disableElevation: {},\n  },\n  MuiIconButton: {\n    root: {\n      '&:hover': {\n        boxShadow: '0px 0px 0px 1px #757575',\n      },\n    },\n  },\n  MuiDialogTitle: {\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      borderBottom: '1px solid #E0E0E0',\n    },\n  },\n  MuiDialogContent: {\n    root: {\n      '&:first-child': {\n        paddingTop: 0,\n      },\n      paddingTop: 0,\n      paddingRight: 0,\n      paddingLeft: 0,\n      display: 'flex',\n      flexDirection: 'column',\n    },\n  },\n  MuiDialogActions: {\n    root: {\n      padding: 16,\n      boxShadow: '-4px 0px 8px 0px #0000001A',\n    },\n  },\n  MuiDialog: {\n    paper: {\n      minWidth: 500,\n    },\n    paperWidthMd: {\n      minWidth: 640,\n    },\n    paperFullScreen: {\n      minWidth: 'unset',\n    },\n  },\n  MuiTextField: {\n    root: {\n      '& .MuiOutlinedInput-notchedOutline': {\n        borderColor: '#757575',\n      },\n      '& .MuiOutlinedInput-root': {\n        borderColor: '#757575',\n      },\n    },\n  },\n  MuiInputLabel: {\n    root: {\n      color: '#757575',\n    },\n  },\n  MuiCheckbox: {\n    root: {\n      '&.Mui-focusVisible': {\n        outline: `2px solid ${palette.info.main} !important`,\n      },\n    },\n  },\n  MuiInputBase: {\n    input: {\n      '&:focus': {\n        outlineOffset: -8,\n      },\n      '&$inputMultiline:focus': {\n        outlineOffset: 6,\n        borderRadius: 2,\n      },\n    },\n    inputMultiline: {},\n  },\n  MuiCssBaseline: {\n    '@global': {\n      '*:focus-visible, a:focus-visible': {\n        '&': {\n          outline: `2px solid ${palette.info.main} !important`,\n          borderRadius: 8,\n        },\n      },\n      'sr-only': {\n        position: 'absolute',\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        borderWidth: 0,\n      },\n    },\n  },\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"overrides.js","sources":["../../../src/theme/overrides.ts"],"sourcesContent":["import { Theme } from '@material-ui/core'\nimport { palette } from './palette'\n\nexport const overrides: Theme['overrides'] = {\n  MuiButton: {\n    root: {\n      borderRadius: 32,\n      textTransform: 'none',\n      padding: '18px 16px',\n      '&$disableElevation:hover': {\n        boxShadow: '0px 0px 0px 1px #757575',\n      },\n    },\n    containedPrimary: {\n      outlineOffset: 1,\n    },\n    outlined: {},\n    textPrimary: {\n      color: palette.info.main,\n    },\n    disableElevation: {},\n  },\n  MuiIconButton: {\n    root: {\n      '&:hover': {\n        boxShadow: '0px 0px 0px 1px #757575',\n      },\n    },\n  },\n  MuiDialogTitle: {\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      borderBottom: '1px solid #E0E0E0',\n    },\n  },\n  MuiDialogContent: {\n    root: {\n      '&:first-child': {\n        paddingTop: 0,\n      },\n      paddingTop: 0,\n      paddingRight: 0,\n      paddingLeft: 0,\n      display: 'flex',\n      flexDirection: 'column',\n    },\n  },\n  MuiDialogActions: {\n    root: {\n      padding: 16,\n      boxShadow: '-4px 0px 8px 0px #0000001A',\n    },\n  },\n  MuiDialog: {\n    paper: {\n      minWidth: 500,\n    },\n    paperWidthMd: {\n      minWidth: 640,\n    },\n    paperFullScreen: {\n      minWidth: 'unset',\n    },\n  },\n  MuiTextField: {\n    root: {\n      '& .MuiOutlinedInput-notchedOutline': {\n        borderColor: '#757575',\n      },\n      '& .MuiOutlinedInput-root': {\n        borderColor: '#757575',\n      },\n    },\n  },\n  MuiOutlinedInput: {\n    input: {\n      '&::placeholder': {\n        color: '#757575',\n        opacity: 1,\n      },\n    },\n  },\n  MuiInputLabel: {\n    root: {\n      color: '#757575',\n    },\n  },\n  MuiCheckbox: {\n    root: {\n      '&.Mui-focusVisible': {\n        outline: `2px solid ${palette.info.main} !important`,\n      },\n    },\n  },\n  MuiInputBase: {\n    input: {\n      '&:focus': {\n        outlineOffset: -8,\n      },\n      '&$inputMultiline:focus': {\n        outlineOffset: 6,\n        borderRadius: 2,\n      },\n    },\n    inputMultiline: {},\n  },\n  MuiRadio: {\n    root: {\n      '&.Mui-focusVisible': {\n        outline: `2px solid ${palette.info.main} !important`,\n      },\n    },\n  },\n  MuiCssBaseline: {\n    '@global': {\n      a: {\n        color: 'inherit',\n        textDecoration: 'none',\n        fontWeight: 'inherit',\n        '&:hover': {\n          color: 'inherit',\n          textDecoration: 'none',\n        },\n        '&:focus': {\n          color: 'inherit',\n          textDecoration: 'none',\n        },\n        '&:active': {\n          color: 'inherit',\n          textDecoration: 'none',\n        },\n        '&:visited': {\n          color: 'inherit',\n          textDecoration: 'none',\n        },\n      },\n      '*:focus-visible, a:focus-visible': {\n        '&': {\n          outline: `2px solid ${palette.info.main} !important`,\n        },\n      },\n      'sr-only': {\n        position: 'absolute',\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        borderWidth: 0,\n      },\n    },\n  },\n}\n"],"names":[],"mappings":"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"}

package/build/esm/theme/props.js

@@ -3,6 +3,11 @@ const props = {
         disableElevation: true,
         disableFocusRipple: true,
     },
+    MuiDialog: {
+        PaperProps: {
+            'aria-modal': 'true',
+        },
+    },
     MuiDialogTitle: {
         disableTypography: true,
     },
@@ -12,6 +17,10 @@ const props = {
     MuiTab: {
         disableFocusRipple: true,
     },
+    MuiPaper: {
+        elevation: 0,
+        square: true,
+    },
 };
 
 export { props };

package/build/esm/theme/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../src/theme/props.ts"],"sourcesContent":["import { Theme } from '@material-ui/core'\n\nexport const props: Theme['props'] = {\n  MuiButton: {\n    disableElevation: true,\n    disableFocusRipple: true,\n  },\n  MuiDialogTitle: {\n    disableTypography: true,\n  },\n  MuiIconButton: {\n    disableFocusRipple: true,\n  },\n  MuiTab: {\n    disableFocusRipple: true,\n  },\n}\n"],"names":[],"mappings":"AAEa,MAAA,KAAK,GAAmB;AACnC,IAAA,SAAS,EAAE;AACT,QAAA,gBAAgB,EAAE,IAAI;AACtB,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,iBAAiB,EAAE,IAAI;AACxB,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA;;;;;"}
+{"version":3,"file":"props.js","sources":["../../../src/theme/props.ts"],"sourcesContent":["import { Theme } from '@material-ui/core'\n\nexport const props: Theme['props'] = {\n  MuiButton: {\n    disableElevation: true,\n    disableFocusRipple: true,\n  },\n  MuiDialog: {\n    PaperProps: {\n      'aria-modal': 'true',\n    },\n  },\n  MuiDialogTitle: {\n    disableTypography: true,\n  },\n  MuiIconButton: {\n    disableFocusRipple: true,\n  },\n  MuiTab: {\n    disableFocusRipple: true,\n  },\n  MuiPaper: {\n    elevation: 0,\n    square: true,\n  },\n}\n"],"names":[],"mappings":"AAEa,MAAA,KAAK,GAAmB;AACnC,IAAA,SAAS,EAAE;AACT,QAAA,gBAAgB,EAAE,IAAI;AACtB,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,UAAU,EAAE;AACV,YAAA,YAAY,EAAE,MAAM;AACrB,SAAA;AACF,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,iBAAiB,EAAE,IAAI;AACxB,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,MAAM,EAAE,IAAI;AACb,KAAA;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popmenu/ordering-ui",
-  "version": "0.145.0",
+  "version": "0.148.0",
   "license": "MIT",
   "author": "Popmenu Design System Team",
   "description": "React components specifically for the popmenu Online Ordering web app.",
@@ -32,5 +32,5 @@
     "react": "17.x"
   },
   "sideEffects": false,
-  "gitHead": "8d8e922ce43d25dc47bd3bfc30c2f20f14440a2c"
+  "gitHead": "61b27e51fc3bbc3763b38b69b27a75911702138e"
 }

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

@@ -1,6 +0,0 @@
-import { TabsProps } from '@material-ui/core';
-type SelectableChipGroupOnChange = (event: React.ChangeEvent<Record<string, unknown>>, value: number) => void;
-export type SelectableChipGroupProps = Omit<TabsProps, 'onChange'> & {
-    onChange?: SelectableChipGroupOnChange;
-};
-export {};

package/build/esm/components/SelectableChipGroup/SelectableChipGroupProps.d.ts

@@ -1,6 +0,0 @@
-import { TabsProps } from '@material-ui/core';
-type SelectableChipGroupOnChange = (event: React.ChangeEvent<Record<string, unknown>>, value: number) => void;
-export type SelectableChipGroupProps = Omit<TabsProps, 'onChange'> & {
-    onChange?: SelectableChipGroupOnChange;
-};
-export {};