@popmenu/ordering-ui 0.90.0 → 0.92.0

package/build/index.js

@@ -50,7 +50,6 @@ var MuiToggleButton = require('@material-ui/lab/ToggleButton');
 var MuiToggleButtonGroup = require('@material-ui/lab/ToggleButtonGroup');
 var MuiTooltip = require('@material-ui/core/Tooltip');
 var lab = require('@material-ui/lab');
-var MuiRadioGroup = require('@material-ui/core/RadioGroup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -89,7 +88,6 @@ var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab);
 var MuiToggleButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButton);
 var MuiToggleButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButtonGroup);
 var MuiTooltip__default = /*#__PURE__*/_interopDefaultLegacy(MuiTooltip);
-var MuiRadioGroup__default = /*#__PURE__*/_interopDefaultLegacy(MuiRadioGroup);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -127,6 +125,16 @@ function __rest$1(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || from);
 }
 
 var Button = React.forwardRef(function (props, ref) {
@@ -223,80 +231,80 @@ var MenuItemInfo = function (props) {
     return (React__default['default'].createElement(core.Box, { display: "flex", flexGrow: 1, flexDirection: "column", height: "100%" }, props.children));
 };
 
-var _path$1g;
+var _path$2o;
 
-function _extends$2O() { _extends$2O = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2O.apply(this, arguments); }
+function _extends$5o() { _extends$5o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5o.apply(this, arguments); }
 
 function SvgChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2O({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5o({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$1g || (_path$1g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2o || (_path$2o = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M4 6l4 4 4-4",
     stroke: "currentColor"
   })));
 }
 
-var _path$1f;
+var _path$2n;
 
-function _extends$2N() { _extends$2N = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2N.apply(this, arguments); }
+function _extends$5n() { _extends$5n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5n.apply(this, arguments); }
 
 function SvgChevronUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2N({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5n({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$1f || (_path$1f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2n || (_path$2n = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 10L8 6l-4 4",
     stroke: "currentColor"
   })));
 }
 
-var _path$14;
+var _path$27;
 
-function _extends$2u() { _extends$2u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2u.apply(this, arguments); }
+function _extends$4K() { _extends$4K = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4K.apply(this, arguments); }
 
 function SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4K({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$14 || (_path$14 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$27 || (_path$27 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.333 4L6 11.333 2.667 8",
     stroke: "currentColor"
   })));
 }
 
-var _g$1n, _defs$K;
+var _g$2z, _defs$1D;
 
-function _extends$2s() { _extends$2s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2s.apply(this, arguments); }
+function _extends$4H() { _extends$4H = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4H.apply(this, arguments); }
 
 function SvgClock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4H({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1n || (_g$1n = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2z || (_g$2z = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#clock_svg__clip0_8_5092)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
   }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 4v4l2.667 1.333"
-  }))), _defs$K || (_defs$K = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$1D || (_defs$1D = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "clock_svg__clip0_8_5092"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -304,42 +312,42 @@ function SvgClock(props) {
   })))));
 }
 
-var _path$13;
+var _path$26;
 
-function _extends$2r() { _extends$2r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2r.apply(this, arguments); }
+function _extends$4G() { _extends$4G = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4G.apply(this, arguments); }
 
 function SvgX(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4G({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$13 || (_path$13 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$26 || (_path$26 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 4l-8 8m0-8l8 8",
     stroke: "currentColor"
   })));
 }
 
-var _g$1m, _defs$J;
+var _g$2y, _defs$1C;
 
-function _extends$2q() { _extends$2q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2q.apply(this, arguments); }
+function _extends$4F() { _extends$4F = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4F.apply(this, arguments); }
 
 function SvgXCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4F({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1m || (_g$1m = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2y || (_g$2y = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#x-circle_svg__clip0_8_6136)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
-  }))), _defs$J || (_defs$J = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$1C || (_defs$1C = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "x-circle_svg__clip0_8_6136"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -347,37 +355,37 @@ function SvgXCircle(props) {
   })))));
 }
 
-var _path$10;
+var _path$1$;
 
-function _extends$2i() { _extends$2i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2i.apply(this, arguments); }
+function _extends$4p() { _extends$4p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4p.apply(this, arguments); }
 
 function SvgHeart(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4p({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1$ || (_path$1$ = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.893 3.074a3.667 3.667 0 00-5.186 0L8 3.78l-.707-.706A3.668 3.668 0 002.107 8.26l.706.707L8 14.154l5.187-5.187.706-.707a3.667 3.667 0 000-5.186v0z",
     stroke: "currentColor"
   })));
 }
 
-var _g$1c;
+var _g$2k;
 
-function _extends$2d() { _extends$2d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2d.apply(this, arguments); }
+function _extends$4k() { _extends$4k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4k.apply(this, arguments); }
 
 function SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4k({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1c || (_g$1c = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2k || (_g$2k = /*#__PURE__*/React__namespace.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.667 7.333H3.333C2.597 7.333 2 7.93 2 8.668v4.667c0 .736.597 1.333 1.333 1.333h9.334c.736 0 1.333-.597 1.333-1.333V8.667c0-.737-.597-1.333-1.333-1.333z"
@@ -386,24 +394,24 @@ function SvgLock(props) {
   }))));
 }
 
-var _g$19, _defs$C;
+var _g$2g, _defs$1q;
 
-function _extends$24() { _extends$24 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$24.apply(this, arguments); }
+function _extends$46() { _extends$46 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$46.apply(this, arguments); }
 
 function SvgMinusCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$24({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$46({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$19 || (_g$19 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2g || (_g$2g = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#minus-circle_svg__clip0_8_5970)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
-  }))), _defs$C || (_defs$C = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$1q || (_defs$1q = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "minus-circle_svg__clip0_8_5970"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -411,42 +419,42 @@ function SvgMinusCircle(props) {
   })))));
 }
 
-var _path$S;
+var _path$1M;
 
-function _extends$20() { _extends$20 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$20.apply(this, arguments); }
+function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
 
 function SvgPlus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$20({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1M || (_path$1M = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 3.333v9.334M3.333 8h9.334",
     stroke: "currentColor"
   })));
 }
 
-var _g$18, _defs$B;
+var _g$2d, _defs$1n;
 
-function _extends$1$() { _extends$1$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1$.apply(this, arguments); }
+function _extends$3_() { _extends$3_ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3_.apply(this, arguments); }
 
 function SvgPlusCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1$({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3_({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$18 || (_g$18 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2d || (_g$2d = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#plus-circle_svg__clip0_8_5870)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-9.334v5.334M5.333 8h5.334"
-  }))), _defs$B || (_defs$B = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$1n || (_defs$1n = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "plus-circle_svg__clip0_8_5870"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -454,76 +462,76 @@ function SvgPlusCircle(props) {
   })))));
 }
 
-var _path$O;
+var _path$1E;
 
-function _extends$1T() { _extends$1T = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1T.apply(this, arguments); }
+function _extends$3N() { _extends$3N = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3N.apply(this, arguments); }
 
 function SvgTag(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1T({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3N({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$O || (_path$O = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1E || (_path$1E = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.727 8.94l-4.78 4.78a1.334 1.334 0 01-1.887 0L1.333 8V1.333H8l5.727 5.727a1.333 1.333 0 010 1.88v0zm-9.06-4.273h.007",
     stroke: "currentColor"
   })));
 }
 
-var _path$K;
+var _path$1u;
 
-function _extends$1I() { _extends$1I = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1I.apply(this, arguments); }
+function _extends$3u() { _extends$3u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3u.apply(this, arguments); }
 
 function SvgWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1I({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3u({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$K || (_path$K = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1u || (_path$1u = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
     stroke: "currentColor"
   })));
 }
 
-var _path$z;
+var _path$18;
 
-function _extends$1o() { _extends$1o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1o.apply(this, arguments); }
+function _extends$2U() { _extends$2U = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2U.apply(this, arguments); }
 
 function SvgTrash(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2U({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$18 || (_path$18 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M2 4h12M5.333 4V2.667a1.333 1.333 0 011.334-1.333h2.666a1.333 1.333 0 011.334 1.333V4m2 0v9.334a1.333 1.333 0 01-1.334 1.333H4.667a1.333 1.333 0 01-1.334-1.333V4h9.334zm-6 3.333v4m2.666-4v4",
     stroke: "currentColor"
   })));
 }
 
-var _path$e, _path2$2;
+var _path$h, _path2$3;
 
-function _extends$y() { _extends$y = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+function _extends$C() { _extends$C = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 
 function SvgReviews(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M14 7.667a5.587 5.587 0 01-.6 2.533 5.666 5.666 0 01-5.067 3.133 5.588 5.588 0 01-2.533-.6L2 14l1.267-3.8a5.586 5.586 0 01-.6-2.533A5.667 5.667 0 015.8 2.6 5.587 5.587 0 018.333 2h.334A5.654 5.654 0 0114 7.333v.334z",
     stroke: "currentColor"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.375 5.363a.2.2 0 01.358 0l.578 1.17a.2.2 0 00.15.11l1.292.189a.2.2 0 01.11.34l-.934.911a.2.2 0 00-.057.177l.22 1.286a.2.2 0 01-.29.21L8.647 9.15a.2.2 0 00-.186 0l-1.155.608a.2.2 0 01-.29-.211l.22-1.286a.2.2 0 00-.058-.177l-.934-.91a.2.2 0 01.11-.341l1.293-.19a.2.2 0 00.15-.109l.578-1.17z",
     fill: "currentColor"
   })));
@@ -567,19 +575,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$N;
+var _path$1D;
 
-function _extends$1N() { _extends$1N = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1N.apply(this, arguments); }
+function _extends$3G() { _extends$3G = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3G.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1N({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3G({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$N || (_path$N = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1D || (_path$1D = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
@@ -972,10 +980,10 @@ var useTypographyStyles = styles.makeStyles(function (theme) {
 });
 
 var Typography = function (props) {
-    props.weight; props.color; var restProps = __rest(props, ["weight", "color"]);
+    props.weight; props.color; var TypographyRef = props.TypographyRef, restProps = __rest(props, ["weight", "color", "TypographyRef"]);
     var classes = useTypographyStyles(__assign({}, props));
     var variantMapping = { subtitle1: 'p' };
-    return React__default['default'].createElement(core.Typography, __assign({ classes: classes, variantMapping: variantMapping }, restProps));
+    return React__default['default'].createElement(core.Typography, __assign({ classes: classes, variantMapping: variantMapping, ref: TypographyRef }, restProps));
 };
 Typography.displayName = 'Typography';
 Typography.defaultProps = defaultTypographyProps;
@@ -1636,98 +1644,190 @@ var useLabelStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
+var useQuantityPickerStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        height: theme.spacing(7),
+        backgroundColor: 'none',
+    },
+}); });
+var useQuantityInputStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(12.5),
+        background: function (props) { return (props.variation === 'modifierCount' ? 'unset' : theme.palette.grey[100]); },
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        fontWeight: 600,
+        padding: 0,
+        textAlign: 'center',
+        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+        backgroundColor: function (props) { return (props.variation === 'modifierCount' ? theme.palette.grey[100] : 'unset'); },
+        alignSelf: function (props) { return (props.variation === 'modifierCount' ? 'stretch' : 'unset'); },
+        height: function (props) { return (props.variation === 'modifierCount' ? 'auto' : 'unset'); },
+        minWidth: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(5) : theme.spacing(2.75)); },
+        borderRadius: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(1) : 'unset'); },
+        margin: function (props) { return (props.variation === 'modifierCount' ? theme.spacing(0.5, 0) : 0); },
+    },
+}); });
+var useStartAdornmentStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        zIndex: function (props) { return (props.value === 0 && props.variation === 'modifierCount' ? -1 : 1); },
+    },
+}); });
+var useEndAdornmentStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+    },
+}); });
+
+var QuantityPicker = function (props) {
+    var value = props.value, onChange = props.onChange, disabled = props.disabled, disableIncrement = props.disableIncrement, preventManualChange = props.preventManualChange, variation = props.variation;
+    var fieldClasses = useQuantityPickerStyles();
+    var inputClasses = useQuantityInputStyles(props);
+    var startAdornmentClasses = useStartAdornmentStyles(props);
+    var endAdornmentClasses = useEndAdornmentStyles(props);
+    var onIncrement = function (event) {
+        onChange(event, { quantity: value + 1, reason: 'increment' });
+    };
+    var onDecrement = function (event) {
+        onChange(event, { quantity: value - 1, reason: 'decrement' });
+    };
+    var handleChange = function (event) {
+        if (preventManualChange) {
+            event.preventDefault();
+        }
+        if (!preventManualChange) {
+            onChange(event, { quantity: parseInt(event.target.value), reason: 'change' });
+        }
+    };
+    return (React__default['default'].createElement(core.TextField, { classes: fieldClasses, type: "number", variant: variation === 'itemCount' ? 'filled' : 'standard', defaultValue: value, value: value, disabled: disabled, onChange: handleChange, InputProps: {
+            classes: inputClasses,
+            disableUnderline: true,
+            endAdornment: (React__default['default'].createElement(IconButton, { "aria-label": "plus one", className: endAdornmentClasses.root, color: "default", onClick: onIncrement, disabled: disabled || disableIncrement },
+                React__default['default'].createElement(Icon, { icon: SvgPlusCircle }))),
+            startAdornment: (React__default['default'].createElement(IconButton, { "aria-label": "minus one", className: startAdornmentClasses.root, color: "default", onClick: onDecrement, disabled: disabled || value <= 0 },
+                React__default['default'].createElement(Icon, { icon: SvgMinusCircle }))),
+        } }));
+};
+
 var Label = function (props) {
-    var name = props.name, price = props.price, disabled = props.disabled, isOutOfStock = props.isOutOfStock;
+    var name = props.name, price = props.price, outOfStock = props.outOfStock, messages = props.messages;
     var classes = useLabelStyles();
     return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", className: classes.label },
         React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: 8 },
             React__default['default'].createElement(core.Typography, null, name),
-            !isOutOfStock && disabled && (React__default['default'].createElement(core.Typography, { variant: "caption", className: classes.outOfStock }, "Out of stock"))),
-        price && React__default['default'].createElement(core.Typography, { className: !disabled ? classes.price : '' },
+            outOfStock && (React__default['default'].createElement(core.Typography, { variant: "caption", className: classes.outOfStock }, messages.outOfStockText))),
+        price && React__default['default'].createElement(core.Typography, null,
             "+ ",
             price)));
 };
-var CheckboxGroup = function (props) {
-    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, disableNewSelections = props.disableNewSelections, isOutOfStock = props.isOutOfStock;
-    var classes = useCheckboxModifierFormStyles();
-    var appContext = useOrderingAppContext()[0];
-    var handleChange = function (event) {
-        var _a;
-        var price = (_a = modifiers.find(function (modifier) { return modifier.id === parseInt(event.target.value); })) === null || _a === void 0 ? void 0 : _a.price;
+var SingleSelectModifierControl = function (props) {
+    var modifiers = props.modifiers, isOutOfStock = props.isOutOfStock, onChange = props.onChange, value = props.value, messages = props.messages;
+    var radioClasses = useRadioModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function (e) {
         onChange([
             {
-                id: parseInt(event.target.value),
-                price: (price && parseInt(price)) || 0,
-                quantity: 1,
-            },
-        ], event.target.checked);
-    };
-    return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column" }, modifiers.map(function (modifier, index) {
-        var targetValue = value === null || value === void 0 ? void 0 : value.find(function (v) { return v.id == modifier.id; });
-        return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: (!targetValue && disableNewSelections) || isOutOfStock || modifier.outOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price
-                    ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2)
-                    : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }), className: classes.root, checked: !!targetValue, onChange: handleChange }));
-    })));
-};
-var RadioGroup = function (props) {
-    var value = props.value, modifiers = props.modifiers, onChange = props.onChange, isOutOfStock = props.isOutOfStock;
-    var classes = useRadioModifierFormStyles();
-    var appContext = useOrderingAppContext()[0];
-    var handleChange = function (event) {
-        var _a;
-        var price = (_a = modifiers.find(function (modifier) { return modifier.id === parseInt(event.target.value); })) === null || _a === void 0 ? void 0 : _a.price;
-        onChange([
-            {
-                id: parseInt(event.target.value),
-                price: (price && parseInt(price)) || 0,
+                id: Number(e.target.value),
+                price: modifier.price,
                 quantity: 1,
             },
         ]);
-    };
-    return (React__default['default'].createElement(MuiRadioGroup__default['default'], { name: "selectedModifiers", value: value ? value[0].id : '', onChange: handleChange }, modifiers.map(function (modifier, index) { return (React__default['default'].createElement(core.FormControlLabel, { key: index, value: modifier.id, control: React__default['default'].createElement(core.Radio, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock }), label: React__default['default'].createElement(Label, { name: modifier.name, price: modifier.price ? "" + (appContext && appContext.currencySymbol) + Number(modifier.price).toFixed(2) : null, disabled: isOutOfStock || modifier.outOfStock, isOutOfStock: isOutOfStock }) })); })));
-};
-
-var ModifierOptionsControl = function (props) {
-    var type = props.type, modifiers = props.modifiers, value = props.value, onChange = props.onChange, disableNewSelections = props.disableNewSelections, isOutOfStock = props.isOutOfStock;
-    switch (type) {
+    }; };
+    return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
+        React__default['default'].createElement(core.RadioGroup, null, modifiers.map(function (modifier) {
+            var _a;
+            return (React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, control: React__default['default'].createElement(core.Radio, { checked: ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.id) === modifier.id, className: radioClasses.radio, disabled: isOutOfStock || modifier.outOfStock, onChange: makeHandleChange(modifier) }), label: React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) }));
+        }))));
+};
+var MultipleSelectControl = function (props) {
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
+    var classes = useCheckboxModifierFormStyles();
+    var makeHandleChange = function (modifier) { return function () {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.id === modifier.id; }));
+        if (isModifierInValue) {
+            onChange(value.filter(function (v) { return v.id !== modifier.id; }));
+        }
+        else {
+            onChange(__spreadArray(__spreadArray([], value), [{ id: modifier.id, price: modifier.price || 0, quantity: 1 }]));
+        }
+    }; };
+    return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
+        React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React__default['default'].createElement(core.FormControlLabel, { key: modifier.id, value: modifier.id, className: classes.root, checked: value.some(function (v) { return v.id === modifier.id; }), onChange: makeHandleChange(modifier), control: React__default['default'].createElement(core.Checkbox, { className: classes.radio, disabled: isOutOfStock || modifier.outOfStock || (!modifier.quantity && disableNewSelections) }), label: React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }) })); }))));
+};
+var MultipleQuantitySelectControl = function (props) {
+    var modifiers = props.modifiers, value = props.value, isOutOfStock = props.isOutOfStock, onChange = props.onChange, messages = props.messages, disableNewSelections = props.disableNewSelections;
+    var makeHandleChange = function (modifier) { return function (_e, customEvent) {
+        var isModifierInValue = Boolean(value.find(function (v) { return v.id === modifier.id; }));
+        var isQuantityZero = customEvent.quantity === 0;
+        var shouldRemoveModifierFromValue = isModifierInValue && isQuantityZero;
+        var shouldAddModifierToValue = !isModifierInValue && !isQuantityZero;
+        var shouldUpdateModifierInValue = isModifierInValue && !isQuantityZero;
+        if (shouldRemoveModifierFromValue) {
+            onChange(value.filter(function (v) { return v.id !== modifier.id; }));
+        }
+        if (shouldAddModifierToValue) {
+            onChange(__spreadArray(__spreadArray([], value), [{ id: modifier.id, price: modifier.price, quantity: customEvent.quantity }]));
+        }
+        if (shouldUpdateModifierInValue) {
+            onChange(value.map(function (val) { return (val.id === modifier.id ? __assign$1(__assign$1({}, val), { quantity: customEvent.quantity }) : val); }));
+        }
+    }; };
+    return (React__default['default'].createElement(core.FormControl, { fullWidth: true },
+        React__default['default'].createElement(core.FormGroup, null, modifiers.map(function (modifier) { return (React__default['default'].createElement(core.Box, { key: modifier.id, style: { justifyContent: 'space-between' }, display: "flex" },
+            React__default['default'].createElement(Label, { messages: messages, name: modifier.name, price: modifier.formattedPrice, disabled: isOutOfStock || modifier.outOfStock, outOfStock: isOutOfStock }),
+            React__default['default'].createElement(QuantityPicker, { variation: "modifierCount", value: modifier.quantity, disableIncrement: disableNewSelections, preventManualChange: true, onChange: makeHandleChange(modifier) }))); }))));
+};
+var ModifierControls = function (props) {
+    switch (props.type) {
         case 'singleSelect':
-            return React__default['default'].createElement(RadioGroup, { modifiers: modifiers, value: value, onChange: onChange, isOutOfStock: isOutOfStock });
+            return React__default['default'].createElement(SingleSelectModifierControl, __assign$1({}, props));
         case 'multipleSelect':
-            return (React__default['default'].createElement(CheckboxGroup, { modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isOutOfStock }));
+            return React__default['default'].createElement(MultipleSelectControl, __assign$1({}, props));
+        case 'multipleQuantitySelect':
+            return React__default['default'].createElement(MultipleQuantitySelectControl, __assign$1({}, props));
         default:
             return null;
     }
 };
 
-var DishModifierCard = function (props) {
-    var name = props.name, disableNewSelections = props.disableNewSelections, modifiers = props.modifiers, value = props.value, messages = props.messages, onChange = props.onChange, type = props.type, error = props.error, isRequired = props.isRequired, isOutOfStock = props.isOutOfStock;
-    var optionalText = messages.optionalText, outOfStockText = messages.outOfStockText, requiredText = messages.requiredText, helperText = messages.helperText;
-    var isFullyOutOfStock = isOutOfStock || !modifiers.some(function (modifier) { return !modifier.outOfStock; });
-    var classes = useDishModifierCardStyles();
+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';
     switch (true) {
         case error:
             color = 'error';
-        case isFullyOutOfStock:
+        case isOutOfStock:
             color = 'warning';
     }
     var label = optionalText;
     switch (true) {
-        case isFullyOutOfStock:
+        case isOutOfStock:
             label = outOfStockText;
             break;
         case isRequired:
             label = requiredText;
             break;
     }
+    var variant = isRequired || isOutOfStock ? 'outlined' : 'filled';
+    return { color: color, label: label, variant: variant };
+};
+var DishModifierCard = function (props) {
+    var 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;
+    var classes = useDishModifierCardStyles();
     return (React__default['default'].createElement(core.Box, { className: classes.root },
         React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", height: "fit-content", marginBottom: 2 },
-            React__default['default'].createElement(StatusTag, { variant: isRequired || isFullyOutOfStock ? 'outlined' : 'filled', label: label, color: color }),
-            !isFullyOutOfStock && (React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, helperText))),
+            React__default['default'].createElement(StatusTag, __assign$1({}, getStatusTagProps(props))),
+            !isOutOfStock && (React__default['default'].createElement(Typography, { variant: "subtitle1", className: error ? classes.error : undefined }, messages.helperText))),
         React__default['default'].createElement(Typography, { className: classes.name }, name),
         React__default['default'].createElement(core.Box, null,
-            React__default['default'].createElement(core.FormControl, null,
-                React__default['default'].createElement(ModifierOptionsControl, { type: type, modifiers: modifiers, value: value, onChange: onChange, disableNewSelections: disableNewSelections, isOutOfStock: isFullyOutOfStock })))));
+            React__default['default'].createElement(ModifierControls, { value: value, modifiers: modifiers, isOutOfStock: isOutOfStock, onChange: onChange, disableNewSelections: disableNewSelections, type: type, messages: messages }))));
 };
 DishModifierCard.displayName = 'DishModifierCard';
 
@@ -1947,61 +2047,6 @@ var MenuFilter = function (props) {
                     React__default['default'].createElement(Typography, { variant: "body1", color: "grey.500" }, noOptionsLabel)))))));
 };
 
-var useQuantityPickerStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        height: theme.spacing(7),
-    },
-}); });
-var useQuantityInputStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        height: '100%',
-        width: 'min-content',
-        borderRadius: theme.spacing(12.5),
-        background: theme.palette.grey[100],
-    },
-    input: {
-        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-            display: 'none',
-        },
-        '-moz-appearance': 'textfield',
-        fontWeight: 600,
-        minWidth: theme.spacing(2.75),
-        padding: 0,
-        textAlign: 'center',
-        position: 'relative',
-        left: 1,
-    },
-    adornedStart: {
-        padding: theme.spacing(0.25),
-    },
-    adornedEnd: {
-        padding: theme.spacing(0.5),
-    },
-}); });
-
-var QuantityPicker = function (props) {
-    var value = props.value, onChange = props.onChange, disabled = props.disabled;
-    var fieldClasses = useQuantityPickerStyles();
-    var inputClasses = useQuantityInputStyles();
-    var onIncrement = function () {
-        onChange({ target: { value: value + 1 } }, 'increment');
-    };
-    var onDecrement = function () {
-        onChange({ target: { value: value - 1 } }, 'decrement');
-    };
-    var handleChange = function (event) {
-        onChange({ target: { value: parseInt(event.target.value) } }, 'change');
-    };
-    return (React__default['default'].createElement(core.TextField, { classes: __assign$1({}, fieldClasses), variant: "filled", type: "number", defaultValue: value, value: value, disabled: disabled, onChange: handleChange, InputProps: {
-            classes: __assign$1({}, inputClasses),
-            disableUnderline: true,
-            endAdornment: (React__default['default'].createElement(IconButton, { color: "default", tabIndex: -1, onClick: onIncrement, disabled: disabled },
-                React__default['default'].createElement(Icon, { icon: SvgPlusCircle }))),
-            startAdornment: (React__default['default'].createElement(IconButton, { color: "default", tabIndex: -1, onClick: onDecrement, disabled: disabled },
-                React__default['default'].createElement(Icon, { icon: SvgMinusCircle }))),
-        } }));
-};
-
 var useSelectableChipStyles = styles.makeStyles(function (theme) { return ({
     root: {
         border: '2px solid',