@popmenu/ordering-ui 0.72.0 → 0.74.0

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

@@ -15,4 +15,6 @@ export interface DishCheckoutCardProps {
     onDelete: () => void;
     /** Callback that runs when the select value is changed. Expects two arguments, the id of the selected dish and the new value that is being changed from the dropdown. Callback should update the dish */
     onChange: (id: number, value: number | string) => void;
+    /** Special instructions text */
+    specialInstructions?: string | undefined;
 }

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

@@ -1,5 +1,5 @@
 declare type ModifierValue = {
-    id: number;
+    id: number | string;
     quantity?: number;
 };
 declare type Modifier = {

package/build/components/MenuDropdown/MenuDropdownProps.d.ts

@@ -1,5 +1,5 @@
 export declare type MenuDropdownOption = {
-    id: number;
+    id: number | string;
     name: string;
 };
 export interface MenuDropdownProps {

package/build/index.es.js

@@ -124,19 +124,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _g$1i;
+var _g$1m;
 
-function _extends$2j() { _extends$2j = 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$2j.apply(this, arguments); }
+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 SvgCheckCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2j({
+  return /*#__PURE__*/React.createElement("svg", _extends$2r({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1i || (_g$1i = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1m || (_g$1m = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
@@ -145,24 +145,24 @@ function SvgCheckCircle(props) {
   }))));
 }
 
-var _g$1g$1, _defs$G$1;
+var _g$1k$1, _defs$I$1;
 
-function _extends$2g$1() { _extends$2g$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$2g$1.apply(this, arguments); }
+function _extends$2o$1() { _extends$2o$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$2o$1.apply(this, arguments); }
 
 function SvgXCircle$1(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2g$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$2o$1({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1g$1 || (_g$1g$1 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1k$1 || (_g$1k$1 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#x-circle_svg__clip0_8_6136)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.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$G$1 || (_defs$G$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$I$1 || (_defs$I$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "x-circle_svg__clip0_8_6136"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -170,24 +170,24 @@ function SvgXCircle$1(props) {
   })))));
 }
 
-var _g$17, _defs$A;
+var _g$1b, _defs$C;
 
-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$2c() { _extends$2c = 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$2c.apply(this, arguments); }
 
 function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$24({
+  return /*#__PURE__*/React.createElement("svg", _extends$2c({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$17 || (_g$17 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1b || (_g$1b = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#info_svg__clip0_8_5377)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
-  }))), _defs$A || (_defs$A = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$C || (_defs$C = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "info_svg__clip0_8_5377"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -195,42 +195,42 @@ function SvgInfo(props) {
   })))));
 }
 
-var _path$J;
+var _path$N;
 
-function _extends$1D() { _extends$1D = 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$1D.apply(this, arguments); }
+function _extends$1L() { _extends$1L = 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$1L.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1D({
+  return /*#__PURE__*/React.createElement("svg", _extends$1L({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$N || (_path$N = /*#__PURE__*/React.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"
   })));
 }
 
-var _g$T, _defs$r;
+var _g$X, _defs$t;
 
-function _extends$1z() { _extends$1z = 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$1z.apply(this, arguments); }
+function _extends$1H() { _extends$1H = 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$1H.apply(this, arguments); }
 
 function SvgError(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1z({
+  return /*#__PURE__*/React.createElement("svg", _extends$1H({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$T || (_g$T = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$X || (_g$X = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#error_svg__clip0_8_5411)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
-  }))), _defs$r || (_defs$r = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$t || (_defs$t = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "error_svg__clip0_8_5411"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -238,19 +238,19 @@ function SvgError(props) {
   })))));
 }
 
-var _path$G;
+var _path$K;
 
-function _extends$1y() { _extends$1y = 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$1y.apply(this, arguments); }
+function _extends$1G() { _extends$1G = 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$1G.apply(this, arguments); }
 
 function SvgWarning(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1y({
+  return /*#__PURE__*/React.createElement("svg", _extends$1G({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__PURE__*/React.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"
   })));
@@ -1029,80 +1029,80 @@ Button.defaultProps = {
 };
 Button.displayName = 'Button';
 
-var _path$1c;
+var _path$1g;
 
-function _extends$2E() { _extends$2E = 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$2E.apply(this, arguments); }
+function _extends$2M() { _extends$2M = 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$2M.apply(this, arguments); }
 
 function SvgChevronDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2E({
+  return /*#__PURE__*/React.createElement("svg", _extends$2M({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
     d: "M4 6l4 4 4-4",
     stroke: "currentColor"
   })));
 }
 
-var _path$1b;
+var _path$1f;
 
-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$2L() { _extends$2L = 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$2L.apply(this, arguments); }
 
 function SvgChevronUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2D({
+  return /*#__PURE__*/React.createElement("svg", _extends$2L({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
     d: "M12 10L8 6l-4 4",
     stroke: "currentColor"
   })));
 }
 
-var _path$10;
+var _path$14;
 
-function _extends$2k() { _extends$2k = 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$2k.apply(this, arguments); }
+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 SvgCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2k({
+  return /*#__PURE__*/React.createElement("svg", _extends$2s({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 4L6 11.333 2.667 8",
     stroke: "currentColor"
   })));
 }
 
-var _g$1h, _defs$H;
+var _g$1l, _defs$J;
 
-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$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 SvgClock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2i({
+  return /*#__PURE__*/React.createElement("svg", _extends$2q({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1h || (_g$1h = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1l || (_g$1l = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#clock_svg__clip0_8_5092)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M8 4v4l2.667 1.333"
-  }))), _defs$H || (_defs$H = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$J || (_defs$J = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "clock_svg__clip0_8_5092"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -1110,24 +1110,24 @@ function SvgClock(props) {
   })))));
 }
 
-var _g$1g, _defs$G;
+var _g$1k, _defs$I;
 
-function _extends$2g() { _extends$2g = 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$2g.apply(this, arguments); }
+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 SvgXCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2g({
+  return /*#__PURE__*/React.createElement("svg", _extends$2o({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1g || (_g$1g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1k || (_g$1k = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#x-circle_svg__clip0_8_6136)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.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$G || (_defs$G = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$I || (_defs$I = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "x-circle_svg__clip0_8_6136"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -1135,42 +1135,42 @@ function SvgXCircle(props) {
   })))));
 }
 
-var _path$Y;
+var _path$10;
 
-function _extends$28() { _extends$28 = 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$28.apply(this, arguments); }
+function _extends$2g() { _extends$2g = 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$2g.apply(this, arguments); }
 
 function SvgHeart(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$28({
+  return /*#__PURE__*/React.createElement("svg", _extends$2g({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.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$13, _defs$z;
+var _g$17, _defs$B;
 
-function _extends$1W() { _extends$1W = 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$1W.apply(this, arguments); }
+function _extends$22() { _extends$22 = 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$22.apply(this, arguments); }
 
 function SvgMinusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1W({
+  return /*#__PURE__*/React.createElement("svg", _extends$22({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$13 || (_g$13 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$17 || (_g$17 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#minus-circle_svg__clip0_8_5970)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
-  }))), _defs$z || (_defs$z = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$B || (_defs$B = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "minus-circle_svg__clip0_8_5970"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -1178,42 +1178,42 @@ function SvgMinusCircle(props) {
   })))));
 }
 
-var _path$O;
+var _path$S;
 
-function _extends$1S() { _extends$1S = 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$1S.apply(this, arguments); }
+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 SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1S({
+  return /*#__PURE__*/React.createElement("svg", _extends$1_({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
     d: "M8 3.333v9.334M3.333 8h9.334",
     stroke: "currentColor"
   })));
 }
 
-var _g$12, _defs$y;
+var _g$16, _defs$A;
 
-function _extends$1R() { _extends$1R = 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$1R.apply(this, arguments); }
+function _extends$1Z() { _extends$1Z = 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$1Z.apply(this, arguments); }
 
 function SvgPlusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1R({
+  return /*#__PURE__*/React.createElement("svg", _extends$1Z({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$12 || (_g$12 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$16 || (_g$16 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#plus-circle_svg__clip0_8_5870)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.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$y || (_defs$y = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$A || (_defs$A = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "plus-circle_svg__clip0_8_5870"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -1221,55 +1221,55 @@ function SvgPlusCircle(props) {
   })))));
 }
 
-var _path$K;
+var _path$O;
 
-function _extends$1J() { _extends$1J = 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$1J.apply(this, arguments); }
+function _extends$1R() { _extends$1R = 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$1R.apply(this, arguments); }
 
 function SvgTag(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1J({
+  return /*#__PURE__*/React.createElement("svg", _extends$1R({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$O || (_path$O = /*#__PURE__*/React.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$v;
+var _path$z;
 
-function _extends$1e() { _extends$1e = 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$1e.apply(this, arguments); }
+function _extends$1m() { _extends$1m = 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$1m.apply(this, arguments); }
 
 function SvgTrash(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1e({
+  return /*#__PURE__*/React.createElement("svg", _extends$1m({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.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$9, _path2$1;
+var _path$d, _path2$1;
 
-function _extends$o() { _extends$o = 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$o.apply(this, arguments); }
+function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
 
 function SvgReviews(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.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$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
@@ -1470,7 +1470,7 @@ var useDishCheckoutCardStyles = makeStyles$1(function (theme) { return ({
         padding: theme.spacing(2, 0),
         display: 'flex',
         flexDirection: 'column',
-        maxWidth: theme.spacing(44.5),
+        width: '100%',
         gridGap: theme.spacing(2),
         border: '1px',
     },
@@ -1510,7 +1510,7 @@ var useDishCheckoutCardStyles = makeStyles$1(function (theme) { return ({
 }); });
 
 var DishCheckoutCard = function (props) {
-    var id = props.id, name = props.name, quantity = props.quantity, modifiers = props.modifiers, onDelete = props.onDelete, onEdit = props.onEdit, onChange = props.onChange, price = props.price;
+    var id = props.id, name = props.name, quantity = props.quantity, modifiers = props.modifiers, onDelete = props.onDelete, onEdit = props.onEdit, onChange = props.onChange, price = props.price, specialInstructions = props.specialInstructions;
     var classes = useDishCheckoutCardStyles(props);
     var _a = useState(false), open = _a[0], setOpen = _a[1];
     return (React__default.createElement(Box, { className: classes.root },
@@ -1521,7 +1521,11 @@ var DishCheckoutCard = function (props) {
                     modifiers.map(function (modifier, i) { return (React__default.createElement(Typography, { key: i, variant: "body2" },
                         modifier[0],
                         ": ",
-                        modifier[1])); })),
+                        modifier[1])); }),
+                specialInstructions && React__default.createElement(Typography, { variant: "body2" },
+                    "\"",
+                    specialInstructions,
+                    "\"")),
             React__default.createElement(Box, { display: "flex", gridGap: 1, height: "100%" },
                 React__default.createElement(Button, { variant: "text", onClick: onEdit }, "Edit"),
                 React__default.createElement(IconButton, { onClick: onDelete },
@@ -1550,9 +1554,9 @@ var DishDetailsReview = forwardRef(function (props) {
     return (React__default.createElement(Box, { display: "flex" },
         React__default.createElement(Box, { mr: 1 },
             React__default.createElement(Avatar, { size: "small", src: userAvatarUrl })),
-        React__default.createElement(Box, null,
+        React__default.createElement(Box, { width: "100%" },
             React__default.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 1 },
-                React__default.createElement(Typography, { color: "grey.600" }, userName),
+                React__default.createElement(Typography, { color: "grey.600", style: { display: 'flex', alignItems: 'center' } }, userName),
                 React__default.createElement(Typography, { color: "grey.600", variant: "subtitle1", style: { display: 'flex', alignItems: 'center' } }, timeSinceCreated)),
             React__default.createElement(Typography, { color: "grey.900", weight: "regular" }, content))));
 });