@salesgenterp/ui-components 0.3.1 → 0.3.52

package/dist/index.modern.js

@@ -1,12 +1,35 @@
-import { Stack, Tooltip } from '@mui/material';
-import React, { useState, useEffect } from 'react';
+import { Stack, Tooltip, TableCell, TableContainer, TableRow, Checkbox } from '@mui/material';
+import React__default, { useState, useEffect, createElement } from 'react';
 import { GrClose } from 'react-icons/gr';
 import 'react-icons/gi';
 import { BsCartX } from 'react-icons/bs';
 import styled from 'styled-components';
 import { RiDeleteBin5Line } from 'react-icons/ri';
 import { AiOutlineMinus, AiOutlinePlus, AiOutlineClose } from 'react-icons/ai';
-import { PuffLoader } from 'react-spinners';
+import { PuffLoader, BounceLoader } from 'react-spinners';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableHead from '@mui/material/TableHead';
+import TableRow$1 from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments);
+}
 
 function _taggedTemplateLiteralLoose(strings, raw) {
   if (!raw) {
@@ -59,49 +82,49 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
       loading = _ref.loading;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
-  return /*#__PURE__*/React.createElement(CartDrawerProduct, {
+  return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
     color: color
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : imgnotfoundUrlcommon,
     alt: 'no product image available'
-  }), /*#__PURE__*/React.createElement(Stack, {
+  }), /*#__PURE__*/React__default.createElement(Stack, {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "flex-start",
     className: "middleSection"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: product === null || product === void 0 ? void 0 : product.productName,
     placement: "top",
     arrow: true
-  }, /*#__PURE__*/React.createElement("h6", {
+  }, /*#__PURE__*/React__default.createElement("h6", {
     className: "name",
     onClick: function onClick() {
       return handleRedirect(product);
     }
-  }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$cartStandard = product.cartStandardPrice) === null || _product$cartStandard === void 0 ? void 0 : _product$cartStandard.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)))), /*#__PURE__*/React.createElement(Stack, {
+  }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$cartStandard = product.cartStandardPrice) === null || _product$cartStandard === void 0 ? void 0 : _product$cartStandard.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)))), /*#__PURE__*/React__default.createElement(Stack, {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "flex-end",
     className: "endSection"
-  }, /*#__PURE__*/React.createElement(RiDeleteBin5Line, {
+  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
       handleRemoveProduct(product);
     }
-  }), /*#__PURE__*/React.createElement(CartDrawerQtBox, null, /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('decrement', product);
     }
-  }, ' ', /*#__PURE__*/React.createElement(AiOutlineMinus, null)), ' ', /*#__PURE__*/React.createElement("span", {
+  }, ' ', /*#__PURE__*/React__default.createElement(AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
     className: 'qt'
-  }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React.createElement("span", {
+  }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('increment', product);
     }
-  }, /*#__PURE__*/React.createElement(AiOutlinePlus, null)))));
+  }, /*#__PURE__*/React__default.createElement(AiOutlinePlus, null)))));
 };
 
 var CartDrawer = function CartDrawer(_ref) {
@@ -116,19 +139,19 @@ var CartDrawer = function CartDrawer(_ref) {
       handleClose = _ref.handleClose,
       loading = _ref.loading,
       imgnotfoundUrl = _ref.imgnotfoundUrl;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CartDrawerContainer, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
     maxWidth: maxWidth
-  }, /*#__PURE__*/React.createElement(CartDrawerBar, null, /*#__PURE__*/React.createElement("h2", null, "Your Cart"), /*#__PURE__*/React.createElement(GrClose, {
+  }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(GrClose, {
     className: "icon",
     onClick: function onClick() {
       handleClose();
     }
-  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React.createElement(CartDrawerProductContainer, {
+  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
     opacity: loading ? '.4' : '1'
   }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(CartDrawerLoader, null, /*#__PURE__*/React.createElement(PuffLoader, {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(PuffLoader, {
       color: "black"
-    })), /*#__PURE__*/React.createElement(CartDrawerProductCard, {
+    })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
       product: product,
       handleRedirect: handleRedirect,
       handleIncrementDecrement: handleIncrementDecrement,
@@ -138,21 +161,21 @@ var CartDrawer = function CartDrawer(_ref) {
       imgnotfoundUrl: imgnotfoundUrl,
       loading: loading
     }));
-  })) : /*#__PURE__*/React.createElement(CartDrawerEmptyCart, {
+  })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
     color: color
-  }, /*#__PURE__*/React.createElement(BsCartX, {
+  }, /*#__PURE__*/React__default.createElement(BsCartX, {
     className: "icon"
-  }), /*#__PURE__*/React.createElement("h6", null, "OOps!"), /*#__PURE__*/React.createElement("p", null, "your cart is empty")), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React.createElement(Stack, {
+  }), /*#__PURE__*/React__default.createElement("h6", null, "OOps!"), /*#__PURE__*/React__default.createElement("p", null, "your cart is empty")), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React__default.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React__default.createElement(Stack, {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
     className: "row"
-  }, /*#__PURE__*/React.createElement("h5", null, "Subtotal", /*#__PURE__*/React.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React.createElement(CartDrawerOutlinedButton, {
+  }, /*#__PURE__*/React__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React__default.createElement(CartDrawerOutlinedButton, {
     color: color,
     onClick: function onClick() {
       return handleRedirect('cart');
     }
-  }, "view cart"), /*#__PURE__*/React.createElement(CartDrawerFilledButton, {
+  }, "view cart"), /*#__PURE__*/React__default.createElement(CartDrawerFilledButton, {
     color: color,
     onClick: function onClick() {
       return handleRedirect('checkout');
@@ -160,128 +183,1501 @@ var CartDrawer = function CartDrawer(_ref) {
   }, "continue to checkout"))));
 };
 
-var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1;
-var CartSummaryContainer = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width: min(95%, 24.75em);\n  max-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 25px;\n  padding: 2em 1em;\n  align-items: center;\n  p {\n    font-size: 0.89em;\n    font-weight: 300;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    font-weight: 300;\n    cursor: pointer;\n  }\n"])), function (props) {
-  return props.maxWidth || '24.75em';
+var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8;
+var CartPageSection = styled.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  max-width: 100%;\n  width: fit-content;\n  background: ", ";\n  overflow: hidden;\n"])), function (props) {
+  return props.bg;
 }, function (props) {
-  return props.background || '#667080';
+  return props.bg || '#FAE8E5';
+});
+var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  border-radius: 28px 28px 28px 14px;\n\n  padding-right: max(5vw, 1em);\n  padding-left: max(5vw, 1em);\n  padding-top: max(5vw, 1em);\n  padding-bottom: max(5vw, 1em);\n  border-radius: 28px;\n  opacity: ", ";\n  .scrollDiv {\n    width: 68%;\n    height: 630px;\n    max-height: 630px;\n    /* background-color: white; */\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    margin-right: 0.3em;\n    &::-webkit-scrollbar {\n      width: ", ";\n    }\n\n    /* Track */\n    &::-webkit-scrollbar-track {\n      background: ", ";\n      border-radius: 16px;\n    }\n\n    /* Handle */\n    &::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 16px;\n      margin: 5px 2px;\n      border: 3px solid;\n      border-color: ", ";\n    }\n    box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  }\n  @media only screen and (max-width: 1340px) {\n    flex-direction: column;\n    align-items: center;\n    padding: 0.5em 0;\n    .scrollDiv {\n      width: 100%;\n      margin: 0;\n      margin-bottom: 2em;\n      padding: 0 0.4em;\n    }\n  }\n"])), function (props) {
+  return props.maxWidth || '1450px';
 }, function (props) {
-  return props.color || 'white';
+  return props.loading ? '0.7' : 1;
 }, function (props) {
-  return props.color || 'white';
-});
-var CartSummaryRow = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
-  return props.justify || 'space-between';
+  return props.retail ? '12px' : '8px';
 }, function (props) {
-  return props.h5 || '1.31em';
+  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
+}, function (props) {
+  return props.retail ? '#BFC3CA' : '#EDEDED';
+}, function (props) {
+  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
 });
-var CartSummaryHr = styled.hr(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 1em 0;\n"])), function (props) {
-  return props.color || 'rgba(255, 255, 255, 0.5)';
+var CardsBox = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* min-height: 1000px; */\n  position: relative;\n  max-width: 860px;\n  margin-right: auto;\n  padding: 1em 2em;\n  display: ", ";\n  grid-template-columns: 1fr 1fr;\n  flex-direction: column;\n  align-items: flex-start;\n  grid-gap: 1em;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 20px;\n  @media only screen and (max-width: 960px) {\n    display: flex;\n  }\n  @media only screen and (max-width: 640px) {\n    padding: 1em 0.2em;\n  }\n"])), function (props) {
+  return props.retail ? 'grid' : 'flex';
 });
-var CartSummaryInputBox = styled.form(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n  input {\n    width: 10.81rem;\n    height: 2.44rem;\n    padding: 0.2em 0.8em;\n    text-transform: capitalize;\n    font-size: 0.89em;\n    border-radius: 1.19rem;\n    margin-right: 1em;\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 7.75rem;\n    height: 2.44rem;\n    background: ", ";\n    border-radius: 1.19rem;\n    display: grid;\n    color: inherit;\n    place-items: center;\n    border: none;\n    outline: none;\n    text-transform: uppercase;\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n    }\n  }\n"])), function (props) {
-  return props.paddingBottom ? '2em' : '0';
-}, function (props) {
-  return props.background || '#bfc3ca';
+var Loader = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 40%;\n  left: 47%;\n  display: grid;\n  place-items: center;\n  z-index: 1;\n"])));
+var CartTableCell = styled(TableCell)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  padding-bottom: 1em !important;\n  border: none !important;\n  background: ", ";\n"])), function (props) {
+  return props.bg + " !important";
+});
+var CartTableContainer = styled(TableContainer)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  max-height: 580px;\n  padding-right: 2em;\n\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    border-radius: 16px;\n    margin: 5px 2px;\n    background: ", ";\n  }\n  @media screen and (max-width: 750px) {\n    padding: 0;\n  }\n"])), function (props) {
+  return props.retail ? '12px' : '8px';
 }, function (props) {
-  return props.color || '#667080';
+  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
 }, function (props) {
-  return props.color || '#667080';
+  return props.bg || '#fdccc480';
 }, function (props) {
-  return props.btn || '#393f48';
+  return props.color || '#ef9687';
 });
-var CartSummaryCheckoutBtn = styled.button(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 700;\n  background: #393f48;\n  cursor: pointer;\n  text-transform: uppercase;\n  color: inherit;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.75em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  border-radius: 2.64em;\n  padding: 0;\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 2em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])));
-var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n  }\n"])), function (props) {
-  return props.background || 'white';
+var CartButtonsRow = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  button {\n    background: ", ";\n    color: ", ";\n    padding: 0.5em 1em;\n    margin-right: 1.5em;\n    font-size: 0.85em;\n    text-transform: uppercase;\n    border: none;\n    cursor: pointer;\n    transition: 0.4s;\n    &:hover {\n      transform: scale(0.9);\n    }\n  }\n"])), function (props) {
+  return props.bg || 'rgba(253, 0, 21, 1)';
 }, function (props) {
-  return props.selected ? props.background : 'transparent';
+  return props.color || 'white';
 });
+var CartPageBox = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  width: 1000px;\n  max-width: 100%;\n  margin-right: 2em;\n  position: relative;\n  @media only screen and (max-width: 740px) {\n    margin-right: 0;\n    .CartnoBelowSm {\n      display: none;\n    }\n  }\n"])));
 
-var CartSummary = function CartSummary(_ref) {
-  var _styles$input, _styles$input2, _ref2;
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
 
-  var _ref$retail = _ref.retail,
-      retail = _ref$retail === void 0 ? true : _ref$retail,
-      shippingData = _ref.shippingData,
-      selectedShipping = _ref.selectedShipping,
-      setShipping = _ref.setShipping,
-      clickRedirect = _ref.clickRedirect,
-      subtotal = _ref.subtotal,
-      styles = _ref.styles;
-  console.log(selectedShipping);
-  return /*#__PURE__*/React.createElement(CartSummaryContainer, {
-    background: styles === null || styles === void 0 ? void 0 : styles.bg,
-    color: styles === null || styles === void 0 ? void 0 : styles.color
-  }, /*#__PURE__*/React.createElement("p", null, "Cart summary"), /*#__PURE__*/React.createElement(CartSummaryHr, {
-    color: styles === null || styles === void 0 ? void 0 : styles.hr
-  }), /*#__PURE__*/React.createElement(CartSummaryRow, null, /*#__PURE__*/React.createElement("h6", null, "subtotal"), /*#__PURE__*/React.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React.createElement(CartSummaryHr, {
-    color: styles === null || styles === void 0 ? void 0 : styles.hr
-  }), /*#__PURE__*/React.createElement(CartSummaryRow, null, /*#__PURE__*/React.createElement("h6", null, "Discount"), /*#__PURE__*/React.createElement("h5", null, "$0.00")), /*#__PURE__*/React.createElement(CartSummaryHr, {
-    color: styles === null || styles === void 0 ? void 0 : styles.hr
-  }), retail && /*#__PURE__*/React.createElement(Stack, {
-    flexDirection: "column",
-    justifyContent: "flexStart",
-    sx: {
-      width: '100%'
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
+var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
+var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
+var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
+
+var reactIs_production_min = {
+	AsyncMode: AsyncMode,
+	ConcurrentMode: ConcurrentMode,
+	ContextConsumer: ContextConsumer,
+	ContextProvider: ContextProvider,
+	Element: Element,
+	ForwardRef: ForwardRef,
+	Fragment: Fragment,
+	Lazy: Lazy,
+	Memo: Memo,
+	Portal: Portal,
+	Profiler: Profiler,
+	StrictMode: StrictMode,
+	Suspense: Suspense,
+	isAsyncMode: isAsyncMode,
+	isConcurrentMode: isConcurrentMode,
+	isContextConsumer: isContextConsumer,
+	isContextProvider: isContextProvider,
+	isElement: isElement,
+	isForwardRef: isForwardRef,
+	isFragment: isFragment,
+	isLazy: isLazy,
+	isMemo: isMemo,
+	isPortal: isPortal,
+	isProfiler: isProfiler,
+	isStrictMode: isStrictMode,
+	isSuspense: isSuspense,
+	isValidElementType: isValidElementType,
+	typeOf: typeOf
+};
+
+var reactIs_development = createCommonjsModule(function (module, exports) {
+
+
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+}
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
     }
-  }, /*#__PURE__*/React.createElement(CartSummaryRow, {
-    justify: "flex-start"
-  }, /*#__PURE__*/React.createElement("h6", null, "shipping")), shippingData.map(function (li, i) {
-    var _li$amount;
+  }
 
-    return /*#__PURE__*/React.createElement(CartSummaryCheckBoxRow, {
-      key: i,
-      selected: li.id === selectedShipping.id,
-      onClick: function onClick() {
-        setShipping(li);
-      },
-      background: styles.color
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "checkBox"
-    }), /*#__PURE__*/React.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
-  }), /*#__PURE__*/React.createElement(CartSummaryHr, {
-    color: styles === null || styles === void 0 ? void 0 : styles.hr
-  })), /*#__PURE__*/React.createElement(CartSummaryInputBox, {
-    paddingBottom: !retail,
-    background: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
-    color: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.color,
-    btn: styles === null || styles === void 0 ? void 0 : styles.btnColor
-  }, /*#__PURE__*/React.createElement("input", {
-    placeholder: "Coupon code",
-    type: "email",
-    required: true
-  }), /*#__PURE__*/React.createElement("button", null, "apply coupon")), /*#__PURE__*/React.createElement(CartSummaryHr, {
-    color: styles === null || styles === void 0 ? void 0 : styles.hr
-  }), /*#__PURE__*/React.createElement(CartSummaryRow, {
-    h5: "1.64em"
-  }, /*#__PURE__*/React.createElement("h6", null, "total"), /*#__PURE__*/React.createElement("h5", null, "$", (_ref2 = subtotal + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))), /*#__PURE__*/React.createElement(CartSummaryRow, {
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(CartSummaryCheckoutBtn, {
-    onClick: function onClick() {
-      return clickRedirect('/checkout');
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+exports.AsyncMode = AsyncMode;
+exports.ConcurrentMode = ConcurrentMode;
+exports.ContextConsumer = ContextConsumer;
+exports.ContextProvider = ContextProvider;
+exports.Element = Element;
+exports.ForwardRef = ForwardRef;
+exports.Fragment = Fragment;
+exports.Lazy = Lazy;
+exports.Memo = Memo;
+exports.Portal = Portal;
+exports.Profiler = Profiler;
+exports.StrictMode = StrictMode;
+exports.Suspense = Suspense;
+exports.isAsyncMode = isAsyncMode;
+exports.isConcurrentMode = isConcurrentMode;
+exports.isContextConsumer = isContextConsumer;
+exports.isContextProvider = isContextProvider;
+exports.isElement = isElement;
+exports.isForwardRef = isForwardRef;
+exports.isFragment = isFragment;
+exports.isLazy = isLazy;
+exports.isMemo = isMemo;
+exports.isPortal = isPortal;
+exports.isProfiler = isProfiler;
+exports.isStrictMode = isStrictMode;
+exports.isSuspense = isSuspense;
+exports.isValidElementType = isValidElementType;
+exports.typeOf = typeOf;
+  })();
+}
+});
+
+var reactIs = createCommonjsModule(function (module) {
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = reactIs_production_min;
+} else {
+  module.exports = reactIs_development;
+}
+});
+
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+/* eslint-disable no-unused-vars */
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+	if (val === null || val === undefined) {
+		throw new TypeError('Object.assign cannot be called with null or undefined');
+	}
+
+	return Object(val);
+}
+
+function shouldUseNative() {
+	try {
+		if (!Object.assign) {
+			return false;
+		}
+
+		// Detect buggy property enumeration order in older V8 versions.
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+		test1[5] = 'de';
+		if (Object.getOwnPropertyNames(test1)[0] === '5') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test2 = {};
+		for (var i = 0; i < 10; i++) {
+			test2['_' + String.fromCharCode(i)] = i;
+		}
+		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+			return test2[n];
+		});
+		if (order2.join('') !== '0123456789') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test3 = {};
+		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+			test3[letter] = letter;
+		});
+		if (Object.keys(Object.assign({}, test3)).join('') !==
+				'abcdefghijklmnopqrst') {
+			return false;
+		}
+
+		return true;
+	} catch (err) {
+		// We don't expect any of the above to throw, but better to be safe.
+		return false;
+	}
+}
+
+var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+	var from;
+	var to = toObject(target);
+	var symbols;
+
+	for (var s = 1; s < arguments.length; s++) {
+		from = Object(arguments[s]);
+
+		for (var key in from) {
+			if (hasOwnProperty.call(from, key)) {
+				to[key] = from[key];
+			}
+		}
+
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					to[symbols[i]] = from[symbols[i]];
+				}
+			}
+		}
+	}
+
+	return to;
+};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+var ReactPropTypesSecret_1 = ReactPropTypesSecret;
+
+var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+var printWarning = function() {};
+
+if (process.env.NODE_ENV !== 'production') {
+  var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+  var loggedTypeFailures = {};
+  var has$1 = has;
+
+  printWarning = function(text) {
+    var message = 'Warning: ' + text;
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) { /**/ }
+  };
+}
+
+/**
+ * Assert that the values match with the type specs.
+ * Error messages are memorized and will only be shown once.
+ *
+ * @param {object} typeSpecs Map of name to a ReactPropType
+ * @param {object} values Runtime values that need to be type-checked
+ * @param {string} location e.g. "prop", "context", "child context"
+ * @param {string} componentName Name of the component for error messages.
+ * @param {?Function} getStack Returns the component stack.
+ * @private
+ */
+function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+  if (process.env.NODE_ENV !== 'production') {
+    for (var typeSpecName in typeSpecs) {
+      if (has$1(typeSpecs, typeSpecName)) {
+        var error;
+        // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error(
+              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
+              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
+              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
+            );
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
+        } catch (ex) {
+          error = ex;
+        }
+        if (error && !(error instanceof Error)) {
+          printWarning(
+            (componentName || 'React class') + ': type specification of ' +
+            location + ' `' + typeSpecName + '` is invalid; the type checker ' +
+            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
+            'You may have forgotten to pass an argument to the type checker ' +
+            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
+            'shape all require an argument).'
+          );
+        }
+        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error.message] = true;
+
+          var stack = getStack ? getStack() : '';
+
+          printWarning(
+            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
+          );
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Resets warning cache when testing.
+ *
+ * @private
+ */
+checkPropTypes.resetWarningCache = function() {
+  if (process.env.NODE_ENV !== 'production') {
+    loggedTypeFailures = {};
+  }
+};
+
+var checkPropTypes_1 = checkPropTypes;
+
+var printWarning$1 = function() {};
+
+if (process.env.NODE_ENV !== 'production') {
+  printWarning$1 = function(text) {
+    var message = 'Warning: ' + text;
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) {}
+  };
+}
+
+function emptyFunctionThatReturnsNull() {
+  return null;
+}
+
+var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
+  /* global Symbol */
+  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+  /**
+   * Returns the iterator method function contained on the iterable object.
+   *
+   * Be sure to invoke the function with the iterable as context:
+   *
+   *     var iteratorFn = getIteratorFn(myIterable);
+   *     if (iteratorFn) {
+   *       var iterator = iteratorFn.call(myIterable);
+   *       ...
+   *     }
+   *
+   * @param {?object} maybeIterable
+   * @return {?function}
+   */
+  function getIteratorFn(maybeIterable) {
+    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+    if (typeof iteratorFn === 'function') {
+      return iteratorFn;
+    }
+  }
+
+  /**
+   * Collection of methods that allow declaration and validation of props that are
+   * supplied to React components. Example usage:
+   *
+   *   var Props = require('ReactPropTypes');
+   *   var MyArticle = React.createClass({
+   *     propTypes: {
+   *       // An optional string prop named "description".
+   *       description: Props.string,
+   *
+   *       // A required enum prop named "category".
+   *       category: Props.oneOf(['News','Photos']).isRequired,
+   *
+   *       // A prop named "dialog" that requires an instance of Dialog.
+   *       dialog: Props.instanceOf(Dialog).isRequired
+   *     },
+   *     render: function() { ... }
+   *   });
+   *
+   * A more formal specification of how these methods are used:
+   *
+   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+   *   decl := ReactPropTypes.{type}(.isRequired)?
+   *
+   * Each and every declaration produces a function with the same signature. This
+   * allows the creation of custom validation functions. For example:
+   *
+   *  var MyLink = React.createClass({
+   *    propTypes: {
+   *      // An optional string or URI prop named "href".
+   *      href: function(props, propName, componentName) {
+   *        var propValue = props[propName];
+   *        if (propValue != null && typeof propValue !== 'string' &&
+   *            !(propValue instanceof URI)) {
+   *          return new Error(
+   *            'Expected a string or an URI for ' + propName + ' in ' +
+   *            componentName
+   *          );
+   *        }
+   *      }
+   *    },
+   *    render: function() {...}
+   *  });
+   *
+   * @internal
+   */
+
+  var ANONYMOUS = '<<anonymous>>';
+
+  // Important!
+  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
+  var ReactPropTypes = {
+    array: createPrimitiveTypeChecker('array'),
+    bigint: createPrimitiveTypeChecker('bigint'),
+    bool: createPrimitiveTypeChecker('boolean'),
+    func: createPrimitiveTypeChecker('function'),
+    number: createPrimitiveTypeChecker('number'),
+    object: createPrimitiveTypeChecker('object'),
+    string: createPrimitiveTypeChecker('string'),
+    symbol: createPrimitiveTypeChecker('symbol'),
+
+    any: createAnyTypeChecker(),
+    arrayOf: createArrayOfTypeChecker,
+    element: createElementTypeChecker(),
+    elementType: createElementTypeTypeChecker(),
+    instanceOf: createInstanceTypeChecker,
+    node: createNodeChecker(),
+    objectOf: createObjectOfTypeChecker,
+    oneOf: createEnumTypeChecker,
+    oneOfType: createUnionTypeChecker,
+    shape: createShapeTypeChecker,
+    exact: createStrictShapeTypeChecker,
+  };
+
+  /**
+   * inlined Object.is polyfill to avoid requiring consumers ship their own
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+   */
+  /*eslint-disable no-self-compare*/
+  function is(x, y) {
+    // SameValue algorithm
+    if (x === y) {
+      // Steps 1-5, 7-10
+      // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // Step 6.a: NaN == NaN
+      return x !== x && y !== y;
+    }
+  }
+  /*eslint-enable no-self-compare*/
+
+  /**
+   * We use an Error-like object for backward compatibility as people may call
+   * PropTypes directly and inspect their output. However, we don't use real
+   * Errors anymore. We don't inspect their stack anyway, and creating them
+   * is prohibitively expensive if they are created too often, such as what
+   * happens in oneOfType() for any type before the one that matched.
+   */
+  function PropTypeError(message, data) {
+    this.message = message;
+    this.data = data && typeof data === 'object' ? data: {};
+    this.stack = '';
+  }
+  // Make `instanceof Error` still work for returned errors.
+  PropTypeError.prototype = Error.prototype;
+
+  function createChainableTypeChecker(validate) {
+    if (process.env.NODE_ENV !== 'production') {
+      var manualPropTypeCallCache = {};
+      var manualPropTypeWarningCount = 0;
+    }
+    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+      componentName = componentName || ANONYMOUS;
+      propFullName = propFullName || propName;
+
+      if (secret !== ReactPropTypesSecret_1) {
+        if (throwOnDirectAccess) {
+          // New behavior only for users of `prop-types` package
+          var err = new Error(
+            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+            'Use `PropTypes.checkPropTypes()` to call them. ' +
+            'Read more at http://fb.me/use-check-prop-types'
+          );
+          err.name = 'Invariant Violation';
+          throw err;
+        } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+          // Old behavior for people using React.PropTypes
+          var cacheKey = componentName + ':' + propName;
+          if (
+            !manualPropTypeCallCache[cacheKey] &&
+            // Avoid spamming the console because they are often not actionable except for lib authors
+            manualPropTypeWarningCount < 3
+          ) {
+            printWarning$1(
+              'You are manually calling a React.PropTypes validation ' +
+              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
+              'and will throw in the standalone `prop-types` package. ' +
+              'You may be seeing this warning due to a third-party PropTypes ' +
+              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
+            );
+            manualPropTypeCallCache[cacheKey] = true;
+            manualPropTypeWarningCount++;
+          }
+        }
+      }
+      if (props[propName] == null) {
+        if (isRequired) {
+          if (props[propName] === null) {
+            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+          }
+          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+        }
+        return null;
+      } else {
+        return validate(props, propName, componentName, location, propFullName);
+      }
+    }
+
+    var chainedCheckType = checkType.bind(null, false);
+    chainedCheckType.isRequired = checkType.bind(null, true);
+
+    return chainedCheckType;
+  }
+
+  function createPrimitiveTypeChecker(expectedType) {
+    function validate(props, propName, componentName, location, propFullName, secret) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== expectedType) {
+        // `propValue` being instance of, say, date/regexp, pass the 'object'
+        // check, but we can offer a more precise error message here rather than
+        // 'of type `object`'.
+        var preciseType = getPreciseType(propValue);
+
+        return new PropTypeError(
+          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
+          {expectedType: expectedType}
+        );
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createAnyTypeChecker() {
+    return createChainableTypeChecker(emptyFunctionThatReturnsNull);
+  }
+
+  function createArrayOfTypeChecker(typeChecker) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (typeof typeChecker !== 'function') {
+        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+      }
+      var propValue = props[propName];
+      if (!Array.isArray(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+      }
+      for (var i = 0; i < propValue.length; i++) {
+        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
+        if (error instanceof Error) {
+          return error;
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createElementTypeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      if (!isValidElement(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createElementTypeTypeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      if (!reactIs.isValidElementType(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createInstanceTypeChecker(expectedClass) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (!(props[propName] instanceof expectedClass)) {
+        var expectedClassName = expectedClass.name || ANONYMOUS;
+        var actualClassName = getClassName(props[propName]);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createEnumTypeChecker(expectedValues) {
+    if (!Array.isArray(expectedValues)) {
+      if (process.env.NODE_ENV !== 'production') {
+        if (arguments.length > 1) {
+          printWarning$1(
+            'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
+            'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
+          );
+        } else {
+          printWarning$1('Invalid argument supplied to oneOf, expected an array.');
+        }
+      }
+      return emptyFunctionThatReturnsNull;
+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      for (var i = 0; i < expectedValues.length; i++) {
+        if (is(propValue, expectedValues[i])) {
+          return null;
+        }
+      }
+
+      var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
+        var type = getPreciseType(value);
+        if (type === 'symbol') {
+          return String(value);
+        }
+        return value;
+      });
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createObjectOfTypeChecker(typeChecker) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (typeof typeChecker !== 'function') {
+        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+      }
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+      }
+      for (var key in propValue) {
+        if (has(propValue, key)) {
+          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+          if (error instanceof Error) {
+            return error;
+          }
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createUnionTypeChecker(arrayOfTypeCheckers) {
+    if (!Array.isArray(arrayOfTypeCheckers)) {
+      process.env.NODE_ENV !== 'production' ? printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
+      return emptyFunctionThatReturnsNull;
+    }
+
+    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+      var checker = arrayOfTypeCheckers[i];
+      if (typeof checker !== 'function') {
+        printWarning$1(
+          'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
+          'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
+        );
+        return emptyFunctionThatReturnsNull;
+      }
+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      var expectedTypes = [];
+      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+        var checker = arrayOfTypeCheckers[i];
+        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1);
+        if (checkerResult == null) {
+          return null;
+        }
+        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+          expectedTypes.push(checkerResult.data.expectedType);
+        }
+      }
+      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createNodeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (!isNode(props[propName])) {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function invalidValidatorError(componentName, location, propFullName, key, type) {
+    return new PropTypeError(
+      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
+      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
+    );
+  }
+
+  function createShapeTypeChecker(shapeTypes) {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+      }
+      for (var key in shapeTypes) {
+        var checker = shapeTypes[key];
+        if (typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+        if (error) {
+          return error;
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createStrictShapeTypeChecker(shapeTypes) {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+      }
+      // We need to check all keys in case some are required but missing from props.
+      var allKeys = objectAssign({}, props[propName], shapeTypes);
+      for (var key in allKeys) {
+        var checker = shapeTypes[key];
+        if (has(shapeTypes, key) && typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
+        if (!checker) {
+          return new PropTypeError(
+            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
+            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
+            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
+          );
+        }
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+        if (error) {
+          return error;
+        }
+      }
+      return null;
+    }
+
+    return createChainableTypeChecker(validate);
+  }
+
+  function isNode(propValue) {
+    switch (typeof propValue) {
+      case 'number':
+      case 'string':
+      case 'undefined':
+        return true;
+      case 'boolean':
+        return !propValue;
+      case 'object':
+        if (Array.isArray(propValue)) {
+          return propValue.every(isNode);
+        }
+        if (propValue === null || isValidElement(propValue)) {
+          return true;
+        }
+
+        var iteratorFn = getIteratorFn(propValue);
+        if (iteratorFn) {
+          var iterator = iteratorFn.call(propValue);
+          var step;
+          if (iteratorFn !== propValue.entries) {
+            while (!(step = iterator.next()).done) {
+              if (!isNode(step.value)) {
+                return false;
+              }
+            }
+          } else {
+            // Iterator will provide entry [k,v] tuples rather than values.
+            while (!(step = iterator.next()).done) {
+              var entry = step.value;
+              if (entry) {
+                if (!isNode(entry[1])) {
+                  return false;
+                }
+              }
+            }
+          }
+        } else {
+          return false;
+        }
+
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  function isSymbol(propType, propValue) {
+    // Native Symbol.
+    if (propType === 'symbol') {
+      return true;
+    }
+
+    // falsy value can't be a Symbol
+    if (!propValue) {
+      return false;
+    }
+
+    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+    if (propValue['@@toStringTag'] === 'Symbol') {
+      return true;
+    }
+
+    // Fallback for non-spec compliant Symbols which are polyfilled.
+    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // Equivalent of `typeof` but with special handling for array and regexp.
+  function getPropType(propValue) {
+    var propType = typeof propValue;
+    if (Array.isArray(propValue)) {
+      return 'array';
+    }
+    if (propValue instanceof RegExp) {
+      // Old webkits (at least until Android 4.0) return 'function' rather than
+      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+      // passes PropTypes.object.
+      return 'object';
+    }
+    if (isSymbol(propType, propValue)) {
+      return 'symbol';
+    }
+    return propType;
+  }
+
+  // This handles more types than `getPropType`. Only used for error messages.
+  // See `createPrimitiveTypeChecker`.
+  function getPreciseType(propValue) {
+    if (typeof propValue === 'undefined' || propValue === null) {
+      return '' + propValue;
+    }
+    var propType = getPropType(propValue);
+    if (propType === 'object') {
+      if (propValue instanceof Date) {
+        return 'date';
+      } else if (propValue instanceof RegExp) {
+        return 'regexp';
+      }
+    }
+    return propType;
+  }
+
+  // Returns a string that is postfixed to a warning about an invalid type.
+  // For example, "undefined" or "of type array"
+  function getPostfixForTypeWarning(value) {
+    var type = getPreciseType(value);
+    switch (type) {
+      case 'array':
+      case 'object':
+        return 'an ' + type;
+      case 'boolean':
+      case 'date':
+      case 'regexp':
+        return 'a ' + type;
+      default:
+        return type;
+    }
+  }
+
+  // Returns class name of the object, if any.
+  function getClassName(propValue) {
+    if (!propValue.constructor || !propValue.constructor.name) {
+      return ANONYMOUS;
+    }
+    return propValue.constructor.name;
+  }
+
+  ReactPropTypes.checkPropTypes = checkPropTypes_1;
+  ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
+
+function emptyFunction() {}
+function emptyFunctionWithReset() {}
+emptyFunctionWithReset.resetWarningCache = emptyFunction;
+
+var factoryWithThrowingShims = function() {
+  function shim(props, propName, componentName, location, propFullName, secret) {
+    if (secret === ReactPropTypesSecret_1) {
+      // It is still safe when called from React.
+      return;
+    }
+    var err = new Error(
+      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+      'Use PropTypes.checkPropTypes() to call them. ' +
+      'Read more at http://fb.me/use-check-prop-types'
+    );
+    err.name = 'Invariant Violation';
+    throw err;
+  }  shim.isRequired = shim;
+  function getShim() {
+    return shim;
+  }  // Important!
+  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+  var ReactPropTypes = {
+    array: shim,
+    bigint: shim,
+    bool: shim,
+    func: shim,
+    number: shim,
+    object: shim,
+    string: shim,
+    symbol: shim,
+
+    any: shim,
+    arrayOf: getShim,
+    element: shim,
+    elementType: shim,
+    instanceOf: getShim,
+    node: shim,
+    objectOf: getShim,
+    oneOf: getShim,
+    oneOfType: getShim,
+    shape: getShim,
+    exact: getShim,
+
+    checkPropTypes: emptyFunctionWithReset,
+    resetWarningCache: emptyFunction
+  };
+
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
+
+var propTypes = createCommonjsModule(function (module) {
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+if (process.env.NODE_ENV !== 'production') {
+  var ReactIs = reactIs;
+
+  // By explicitly using `prop-types` you are opting into new development behavior.
+  // http://fb.me/prop-types-in-prod
+  var throwOnDirectAccess = true;
+  module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
+} else {
+  // By explicitly using `prop-types` you are opting into new production behavior.
+  // http://fb.me/prop-types-in-prod
+  module.exports = factoryWithThrowingShims();
+}
+});
+
+var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
+var ProductImage = styled.img(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  min-width: 50px;\n  min-height: 58px;\n  @media only screen and (max-width: 640px) {\n    margin: 0.5em 0;\n    padding-right: 0.5em;\n  }\n"])));
+var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  font-size: 1em;\n  line-height: 1.6em;\n  max-height: 1.6em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: auto;\n  @media only screen and (max-width: 740px) {\n    max-height: 3.8em;\n    line-height: 1.25em;\n    /* font-size: 0.75rem; */\n  }\n"])));
+var CartTableRow = styled(TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: 0.3s;\n  background: white;\n  .outOfStock {\n    font-size: 0.75em;\n    color: red;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  .price {\n    font-size: 1.19em;\n    font-weight: bold;\n    color: #323232;\n  }\n  .borderLeft {\n    height: 100%;\n    width: 0;\n    background: #fd0015;\n    transition: 0.2s;\n    width: 0px;\n    position: absolute;\n    left: 0;\n    top: 0;\n    border-top-left-radius: 10px;\n    display: none;\n    border-bottom-left-radius: 10px;\n  }\n  &:hover {\n    background: white !important;\n    opacity: 1;\n    box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2);\n    z-index: 2;\n    border-radius: 20px;\n    .borderLeft {\n      width: 13px;\n      display: inline-block;\n    }\n  }\n  @media only screen and (max-width: 640px) {\n    .CartnoPaddingSm {\n      padding: 0 !important;\n    }\n    .price {\n      font-size: 0.8rem;\n    }\n    margin: 0.5em 0;\n    .cartCheckBox {\n      .css-i4bv87-MuiSvgIcon-root {\n        font-size: 10px !important;\n      }\n    }\n  }\n"])));
+var CartTableCell$1 = styled(TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  border: none !important;\n"])));
+var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  height: 1.75em;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  div {\n    /* width:30px; */\n    height: 100%;\n    aspect-ratio: 1.1/1;\n    display: grid;\n    place-items: center;\n    font-size: 0.75em;\n    color: white;\n    background-color: #323232;\n    cursor: pointer;\n  }\n  .price {\n    background: transparent;\n    cursor: auto;\n    p {\n      color: #5e5c5c;\n      font-size: 0.685em;\n      font-weight: 500;\n    }\n  }\n  .add {\n    background-color: #ebebeb;\n    color: #323232;\n  }\n"])));
+var DeleteBtn = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: #393f48;\n  font-size: 0.75em;\n  transition: 0.4s;\n  &:hover {\n    background: red;\n    color: white;\n  }\n"])));
+
+var CardRow = function CardRow(_ref) {
+  var _styles$Btn, _row$standardPrice, _row$subtotal;
+
+  var row = _ref.row,
+      isItemSelected = _ref.isItemSelected,
+      handleClick = _ref.handleClick,
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      loading = _ref.loading,
+      imgSize = _ref.imgSize,
+      styles = _ref.styles;
+  var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
+  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
+  return /*#__PURE__*/React__default.createElement(CartTableRow, {
+    hover: true,
+    onClick: function onClick(event) {
+      return handleClick(event, row.productId);
     },
-    background: styles === null || styles === void 0 ? void 0 : styles.btnColor
-  }, "proceed to checkokut")), /*#__PURE__*/React.createElement(CartSummaryRow, {
-    justify: "center"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "continueShopping",
-    onClick: function onClick() {
-      return clickRedirect('/');
+    role: "checkbox",
+    "aria-checked": isItemSelected,
+    tabIndex: -1,
+    key: row.ProductId,
+    selected: isItemSelected
+  }, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
+    padding: "checkbox"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "borderLeft",
+    style: {
+      background: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background
     }
-  }, "Continue to shopping")));
+  }), /*#__PURE__*/React__default.createElement(Checkbox, {
+    color: "primary",
+    checked: isItemSelected,
+    inputProps: {
+      'aria-labelledby': 'product'
+    },
+    className: "cartCheckBox"
+  })), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
+    className: "CartnoPaddingSm"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    src: row.imageUrl && row.imageUrl !== 'null' ? row.imageUrl : imgnotfoundUrlcommon,
+    alt: 'no product image available',
+    width: (imgSize === null || imgSize === void 0 ? void 0 : imgSize.width) || 50,
+    height: (imgSize === null || imgSize === void 0 ? void 0 : imgSize.height) || 58
+  })), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
+    component: "th",
+    id: row === null || row === void 0 ? void 0 : row.labelId,
+    scope: "row",
+    padding: "none"
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: row === null || row === void 0 ? void 0 : row.productName,
+    placement: "top",
+    arrow: true
+  }, /*#__PURE__*/React__default.createElement(ProductName, null, row.productName)), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
+    className: "outOfStock"
+  }, "out of stock")), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
+    align: "center",
+    className: "CartnoBelowSm"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "price"
+  }, "$", row === null || row === void 0 ? void 0 : (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(QuantityBox, null, /*#__PURE__*/React__default.createElement("div", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (loading) return;
+      handleIncrementDecrement('decrement', row);
+    }
+  }, "-"), /*#__PURE__*/React__default.createElement("div", {
+    className: "price"
+  }, /*#__PURE__*/React__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React__default.createElement("div", {
+    className: "add",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (loading) return;
+      handleIncrementDecrement('increment', row);
+    }
+  }, "+"))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
+    alig: "center",
+    className: "CartnoPaddingSm"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "price"
+  }, "$", (_row$subtotal = row.subtotal) === null || _row$subtotal === void 0 ? void 0 : _row$subtotal.toFixed(2))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
+    alig: "center",
+    className: "CartnoBelowSm"
+  }, /*#__PURE__*/React__default.createElement(DeleteBtn, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (loading) return;
+      handleRemoveProduct(row);
+    }
+  }, "x")));
+};
+
+var headCells = [{
+  id: 'image',
+  numeric: false,
+  disablePadding: true,
+  label: 'product',
+  filter: false
+}, {
+  id: 'name',
+  numeric: false,
+  disablePadding: true,
+  label: 'description',
+  filter: false
+}, {
+  id: 'standardPrice',
+  numeric: true,
+  disablePadding: false,
+  label: 'price',
+  filter: true,
+  noBelowSm: true
+}, {
+  id: 'quantity',
+  numeric: true,
+  disablePadding: false,
+  label: 'qty',
+  filter: true
+}, {
+  id: 'subtotal',
+  numeric: true,
+  disablePadding: false,
+  label: 'subtotal',
+  filter: true
+}, {
+  id: 'delete',
+  numeric: false,
+  disablePadding: true,
+  label: ' ',
+  filter: false,
+  noBelowSm: true
+}];
+
+function EnhancedTableHead(props) {
+  var onSelectAllClick = props.onSelectAllClick,
+      order = props.order,
+      orderBy = props.orderBy,
+      numSelected = props.numSelected,
+      rowCount = props.rowCount,
+      onRequestSort = props.onRequestSort,
+      styles = props.styles;
+
+  var createSortHandler = function createSortHandler(property) {
+    return function (event) {
+      onRequestSort(event, property);
+    };
+  };
+
+  return /*#__PURE__*/createElement(TableHead, {
+    className: "CartnoBelowSm",
+    sx: {
+      zIndex: '2'
+    }
+  }, /*#__PURE__*/createElement(TableRow$1, null, /*#__PURE__*/createElement(CartTableCell, {
+    padding: "checkbox",
+    bg: styles.bg
+  }, /*#__PURE__*/createElement(Checkbox, {
+    color: "primary",
+    indeterminate: numSelected > 0 && numSelected < rowCount,
+    checked: rowCount > 0 && numSelected === rowCount,
+    onChange: onSelectAllClick,
+    inputProps: {
+      'aria-label': 'select all products'
+    }
+  })), headCells.map(function (headCell) {
+    return /*#__PURE__*/createElement(CartTableCell, {
+      key: headCell.id,
+      align: headCell.numeric ? 'center' : 'left',
+      padding: headCell.disablePadding ? 'none' : 'normal',
+      sortDirection: orderBy === headCell.id ? order : false,
+      sx: {
+        textTransform: 'uppercase'
+      },
+      className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
+      bg: styles.bg
+    }, headCell.filter ? /*#__PURE__*/createElement(TableSortLabel, {
+      active: orderBy === headCell.id,
+      direction: orderBy === headCell.id ? order : 'asc',
+      onClick: createSortHandler(headCell.id)
+    }, headCell.label) : headCell.label);
+  })));
+}
+
+EnhancedTableHead.propTypes = {
+  numSelected: propTypes.number.isRequired,
+  onRequestSort: propTypes.func.isRequired,
+  onSelectAllClick: propTypes.func.isRequired,
+  order: propTypes.oneOf(['asc', 'desc']).isRequired,
+  orderBy: propTypes.string.isRequired,
+  rowCount: propTypes.number.isRequired
 };
+function EnhancedTable(_ref) {
+  var _styles$scroll, _styles$scroll2;
+
+  var cartData = _ref.cartData,
+      loading = _ref.loading,
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      styles = _ref.styles;
+  var cartList = cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList.map(function (li) {
+    return _extends({}, li, {
+      subtotal: li.standardPrice * li.quantity
+    });
+  });
+
+  var _React$useState = useState('asc'),
+      order = _React$useState[0],
+      setOrder = _React$useState[1];
+
+  var _React$useState2 = useState('calories'),
+      orderBy = _React$useState2[0],
+      setOrderBy = _React$useState2[1];
+
+  var _React$useState3 = useState([]),
+      selected = _React$useState3[0],
+      setSelected = _React$useState3[1];
+
+  var _React$useState4 = useState(cartList),
+      cartArray = _React$useState4[0],
+      setCartArray = _React$useState4[1];
+
+  var Sort = function Sort() {
+    console.log(orderBy, order);
+    var newArray = cartArray || [];
+    var li = orderBy;
+
+    if (order === 'asc') {
+      newArray.sort(function (a, b) {
+        return a[li] - b[li];
+      });
+      return setCartArray(newArray);
+    }
+
+    newArray.sort(function (a, b) {
+      return b[li] - a[li];
+    });
+    return setCartArray(newArray);
+  };
+
+  useEffect(function () {
+    Sort();
+  }, [order, orderBy]);
+
+  var handleRequestSort = function handleRequestSort(event, property) {
+    var isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  var handleSelectAllClick = function handleSelectAllClick(event) {
+    console.log(event.target.checked, 'checked');
+
+    if (selected.length < (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length)) {
+      var newSelected = [];
+      cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (n) {
+        return newSelected.push(n.productId);
+      });
+      console.log({
+        newSelected: newSelected
+      });
+      setSelected(newSelected);
+      return;
+    }
+
+    setSelected([]);
+  };
+
+  var handleClick = function handleClick(event, id) {
+    console.log(id, 'id');
+    var includes = selected.includes(id);
+
+    if (includes) {
+      var removedId = selected.filter(function (product) {
+        return product !== id;
+      });
+      console.log({
+        removedId: removedId
+      });
+      setSelected(removedId);
+    } else {
+      setSelected([].concat(selected, [id]));
+    }
+  };
+
+  var isSelected = function isSelected(name) {
+    return selected.includes(name);
+  };
+
+  useEffect(function () {
+    setCartArray(cartList);
+  }, [cartData]);
+  return /*#__PURE__*/createElement(CartPageBox, null, loading && /*#__PURE__*/createElement(Loader, null, /*#__PURE__*/createElement(BounceLoader, {
+    size: 40,
+    color: styles.Btn.background,
+    loading: true
+  })), /*#__PURE__*/createElement(Box, {
+    sx: {
+      width: '100%',
+      mb: 2
+    }
+  }, /*#__PURE__*/createElement(CartTableContainer, {
+    bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
+    color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.background
+  }, /*#__PURE__*/createElement(Table, {
+    "aria-labelledby": "tableTitle",
+    size: 'small',
+    stickyHeader: true
+  }, /*#__PURE__*/createElement(EnhancedTableHead, {
+    numSelected: selected.length,
+    order: order,
+    orderBy: orderBy,
+    onSelectAllClick: handleSelectAllClick,
+    onRequestSort: handleRequestSort,
+    rowCount: cartArray === null || cartArray === void 0 ? void 0 : cartArray.length,
+    styles: styles
+  }), /*#__PURE__*/createElement(TableBody, null, cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (row, index) {
+    var isItemSelected = isSelected(row.productId);
+    return /*#__PURE__*/createElement(CardRow, {
+      row: row,
+      isItemSelected: isItemSelected,
+      handleClick: handleClick,
+      imgnotfoundUrl: imgnotfoundUrl,
+      cartData: cartData,
+      loading: loading,
+      styles: styles,
+      handleIncrementDecrement: handleIncrementDecrement,
+      handleRemoveProduct: handleRemoveProduct
+    });
+  }))))), /*#__PURE__*/createElement(CartButtonsRow, null, /*#__PURE__*/createElement("button", null, "remove selected"), /*#__PURE__*/createElement("button", null, "updated cart")));
+}
 
-var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1;
-var CartPageCard = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: min(97%, 485px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 20px;\n  position: relative;\n"])));
-var CartPageImg = styled.img(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  /* width: 95px; */\n  width: ", ";\n  height: ", ";\n  position: relative;\n  margin-right: 1em;\n"])), function (props) {
+var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2;
+var CartPageCard = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  width: min(97%, 485px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 20px;\n  position: relative;\n"])));
+var CartPageImg = styled.img(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  /* width: 95px; */\n  width: ", ";\n  height: ", ";\n  position: relative;\n  margin-right: 1em;\n"])), function (props) {
   return props.width || 'auto';
 }, function (props) {
   return props.height || '81px';
 });
-var NameAndQtBox = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  position: relative;\n"])));
-var CartPageCardName = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 90%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 0.6em;\n  h6 {\n    color: #323232;\n    font-size: 0.9em;\n    margin-bottom: 0.6em;\n    line-height: 1.3rem;\n    max-height: 1.4rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  p {\n    font-size: 1.1em;\n    color: #c3c6c9;\n  }\n"])));
-var QtAndPriceBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  .subtotal {\n    color: #323232;\n    text-transform: capitalize;\n    font-weight: bold;\n    font-size: 0.85em;\n  }\n"])));
-var CartPageQtBox = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 80px;\n  min-width: 80px;\n  height: 22px;\n  .icon {\n    width: 20.5px;\n    height: 20.5px;\n    display: grid;\n    place-items: center;\n    font-size: 10px;\n    background: #eef1f4;\n    cursor: pointer;\n  }\n  .qt {\n    font-size: 18px;\n    font-weight: 500;\n    display: grid;\n    place-items: center;\n    color: #c3c6c9;\n  }\n"])));
-var CloseBtn = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  width: 25px;\n  height: 25px;\n  display: grid;\n  place-items: center;\n  position: absolute;\n  top: 1em;\n  right: 1em;\n  cursor: pointer;\n  border-radius: 50%;\n  background: #eef1f4;\n  font-size: 12px;\n"])));
+var NameAndQtBox = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  position: relative;\n"])));
+var CartPageCardName = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 90%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 0.6em;\n  h6 {\n    color: #323232;\n    font-size: 0.9em;\n    margin-bottom: 0.6em;\n    line-height: 1.3rem;\n    max-height: 1.4rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  p {\n    font-size: 1.1em;\n    color: #c3c6c9;\n  }\n"])));
+var QtAndPriceBox = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  .subtotal {\n    color: #323232;\n    text-transform: capitalize;\n    font-weight: bold;\n    font-size: 0.85em;\n  }\n"])));
+var CartPageQtBox = styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 80px;\n  min-width: 80px;\n  height: 22px;\n  .icon {\n    width: 20.5px;\n    height: 20.5px;\n    display: grid;\n    place-items: center;\n    font-size: 10px;\n    background: #eef1f4;\n    cursor: pointer;\n  }\n  .qt {\n    font-size: 18px;\n    font-weight: 500;\n    display: grid;\n    place-items: center;\n    color: #c3c6c9;\n  }\n"])));
+var CloseBtn = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  width: 25px;\n  height: 25px;\n  display: grid;\n  place-items: center;\n  position: absolute;\n  top: 1em;\n  right: 1em;\n  cursor: pointer;\n  border-radius: 50%;\n  background: #eef1f4;\n  font-size: 12px;\n"])));
 
 var CartPageProductCard = function CartPageProductCard(_ref) {
   var _item$standardPrice;
@@ -294,58 +1690,204 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
       imgSize = _ref.imgSize;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
-  return /*#__PURE__*/React.createElement(CartPageCard, null, /*#__PURE__*/React.createElement(CartPageImg, {
+  return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
     src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
     alt: 'no product image available',
     width: imgSize === null || imgSize === void 0 ? void 0 : imgSize.width,
     height: imgSize === null || imgSize === void 0 ? void 0 : imgSize.height
-  }), /*#__PURE__*/React.createElement(NameAndQtBox, null, /*#__PURE__*/React.createElement(CartPageCardName, null, /*#__PURE__*/React.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(NameAndQtBox, null, /*#__PURE__*/React__default.createElement(CartPageCardName, null, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: item.productName,
     placement: "top",
     arrow: true
-  }, /*#__PURE__*/React.createElement("h6", null, item.productName)), /*#__PURE__*/React.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React.createElement(QtAndPriceBox, null, /*#__PURE__*/React.createElement(CartPageQtBox, null, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("h6", null, item.productName)), /*#__PURE__*/React__default.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('decrement', item);
     }
-  }, /*#__PURE__*/React.createElement(AiOutlineMinus, null)), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement(AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("span", {
     className: "qt"
-  }, item.quantity), /*#__PURE__*/React.createElement("span", {
+  }, item.quantity), /*#__PURE__*/React__default.createElement("span", {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('increment', item);
     }
-  }, /*#__PURE__*/React.createElement(AiOutlinePlus, null))), /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement(AiOutlinePlus, null))), /*#__PURE__*/React__default.createElement("p", {
     className: "subtotal"
-  }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React.createElement(CloseBtn, {
+  }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React__default.createElement(CloseBtn, {
     onClick: function onClick() {
       if (loading) return;
       handleRemoveProduct(item);
     }
-  }, /*#__PURE__*/React.createElement(AiOutlineClose, null)));
+  }, /*#__PURE__*/React__default.createElement(AiOutlineClose, null)));
 };
 
-var _templateObject$4, _templateObject2$4;
-var CartPageContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n\n  .scrollDiv {\n    width: 68%;\n    height: 630px;\n    max-height: 630px;\n    background-color: white;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    margin-right: 0.3em;\n    &::-webkit-scrollbar {\n      width: ", ";\n    }\n\n    /* Track */\n    &::-webkit-scrollbar-track {\n      background: ", ";\n      border-radius: 16px;\n    }\n\n    /* Handle */\n    &::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 16px;\n      margin: 5px 2px;\n      border: 3px solid;\n      border-color: ", ";\n    }\n    box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  }\n  @media only screen and (max-width: 840px) {\n    flex-direction: column;\n    .scrollDiv {\n      width: 100%;\n      margin: 0;\n      margin-bottom: 2em;\n      padding: 0 0.4em;\n    }\n  }\n"])), function (props) {
-  return props.maxWidth || '1350px';
+var CartPageMainRetail = function CartPageMainRetail(_ref) {
+  var _cartData$cartLineIte;
+
+  var retail = _ref.retail,
+      cartData = _ref.cartData,
+      loading = _ref.loading,
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      styles = _ref.styles;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "scrollDiv"
+  }, /*#__PURE__*/React__default.createElement(CardsBox, {
+    retail: retail
+  }, loading && /*#__PURE__*/React__default.createElement(Loader, null, /*#__PURE__*/React__default.createElement(BounceLoader, {
+    size: 40,
+    color: styles.Btn.background,
+    loading: true
+  })), cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
+    return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
+      item: item,
+      loading: loading,
+      imgnotfoundUrl: imgnotfoundUrl,
+      handleIncrementDecrement: handleIncrementDecrement,
+      handleRemoveProduct: handleRemoveProduct,
+      imgSize: styles === null || styles === void 0 ? void 0 : styles.imgSize
+    });
+  })));
+};
+
+var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
+var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width: min(95%, 28.75em);\n  max-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: 2em 1em;\n  align-items: center;\n  margin-top: 3em;\n  p {\n    font-size: 0.89em;\n    font-weight: 300;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    font-weight: 300;\n    cursor: pointer;\n  }\n"])), function (props) {
+  return props.maxWidth || '24.75em';
 }, function (props) {
-  return props.retail ? '12px' : '8px';
+  return props.background || '#667080';
 }, function (props) {
-  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
+  return props.color || 'white';
 }, function (props) {
-  return props.retail ? '#BFC3CA' : '#EDEDED';
+  return props.color || 'white';
+});
+var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
+  return props.justify || 'space-between';
 }, function (props) {
-  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
+  return props.h5 || '1.31em';
 });
-var CardsBox = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* min-height: 1000px; */\n  position: relative;\n  max-width: 860px;\n  margin-right: auto;\n  padding: 1em 2em;\n  display: ", ";\n  grid-template-columns: 1fr 1fr;\n  flex-direction: column;\n  align-items: flex-start;\n  grid-gap: 1em;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 20px;\n  @media only screen and (max-width: 1220px) {\n    display: flex;\n  }\n  @media only screen and (max-width: 640px) {\n    padding: 1em 0.2em;\n  }\n"])), function (props) {
-  return props.retail ? 'grid' : 'flex';
+var CartSummaryHr = styled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 1em 0;\n"])), function (props) {
+  return props.color || 'rgba(255, 255, 255, 0.5)';
+});
+var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n  input {\n    width: 10.81rem;\n    height: 2.44rem;\n    padding: 0.2em 0.8em;\n    text-transform: capitalize;\n    font-size: 0.89em;\n    border-radius: ", ";\n    margin-right: ", ";\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 7.75rem;\n    height: 2.44rem;\n    background: ", ";\n    border-radius: ", ";\n    display: grid;\n    color: ", ";\n    place-items: center;\n    border: none;\n    outline: none;\n    text-transform: uppercase;\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n    }\n  }\n"])), function (props) {
+  return props.paddingBottom ? '2em' : '0';
+}, function (props) {
+  return props.retail ? '1.19rem' : '0';
+}, function (props) {
+  return props.retail ? '1em' : '0';
+}, function (props) {
+  return props.background || '#bfc3ca';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.btn || '#393f48';
+}, function (props) {
+  return props.retail ? '1.19rem' : 0;
+}, function (props) {
+  return props.Btncolor || 'inherit';
+});
+var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 700;\n  background: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-transform: uppercase;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.75em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  border-radius: ", ";\n  padding: 0;\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 2em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
+  return props.background || '#393f48';
+}, function (props) {
+  return props.color || 'inherit';
+}, function (props) {
+  return props.retail ? '2.64em' : '';
+});
+var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n    .underline {\n      font-weight: 400;\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  return props.background || 'white';
+}, function (props) {
+  return props.selected ? props.background : 'transparent';
 });
 
-var CartPageComponent = function CartPageComponent(_ref) {
-  var _cartData$cartLineIte;
+var CartSummary = function CartSummary(_ref) {
+  var _cartSummary$input, _cartSummary$input2, _ref2;
 
+  var _ref$retail = _ref.retail,
+      retail = _ref$retail === void 0 ? true : _ref$retail,
+      shippingData = _ref.shippingData,
+      selectedShipping = _ref.selectedShipping,
+      setShipping = _ref.setShipping,
+      clickRedirect = _ref.clickRedirect,
+      subtotal = _ref.subtotal,
+      styles = _ref.styles,
+      totalCartPrice = _ref.totalCartPrice;
+  var cartSummary = styles.cartSummary,
+      Btn = styles.Btn;
+  return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
+    background: cartSummary.bg,
+    color: cartSummary.color
+  }, /*#__PURE__*/React__default.createElement("p", null, "Cart summary"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "subtotal"), /*#__PURE__*/React__default.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "Discount"), /*#__PURE__*/React__default.createElement("h5", null, "$0.00")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), retail && /*#__PURE__*/React__default.createElement(Stack, {
+    flexDirection: "column",
+    justifyContent: "flexStart",
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "flex-start"
+  }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
+    var _li$amount;
+
+    return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
+      key: i,
+      selected: li.id === selectedShipping.id,
+      onClick: function onClick() {
+        setShipping(li);
+      },
+      background: cartSummary.color
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "checkBox"
+    }), /*#__PURE__*/React__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React__default.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
+  }), /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, null, /*#__PURE__*/React__default.createElement("p", null, "Shipping options will be updated during checkout.", /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+    className: "underline"
+  }, "Calculate shipping"))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  })), /*#__PURE__*/React__default.createElement(CartSummaryInputBox, {
+    paddingBottom: !retail,
+    background: (_cartSummary$input = cartSummary.input) === null || _cartSummary$input === void 0 ? void 0 : _cartSummary$input.bg,
+    color: (_cartSummary$input2 = cartSummary.input) === null || _cartSummary$input2 === void 0 ? void 0 : _cartSummary$input2.color,
+    btn: Btn === null || Btn === void 0 ? void 0 : Btn.background,
+    Btncolor: Btn === null || Btn === void 0 ? void 0 : Btn.color,
+    retail: retail
+  }, /*#__PURE__*/React__default.createElement("input", {
+    placeholder: "Coupon code",
+    type: "email",
+    required: true
+  }), /*#__PURE__*/React__default.createElement("button", null, "apply coupon")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    h5: "1.64em"
+  }, /*#__PURE__*/React__default.createElement("h6", null, "total"), retail ? /*#__PURE__*/React__default.createElement("h5", null, "$", (_ref2 = totalCartPrice + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2)) : /*#__PURE__*/React__default.createElement("h5", null, "$", totalCartPrice === null || totalCartPrice === void 0 ? void 0 : totalCartPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement(CartSummaryCheckoutBtn, {
+    retail: retail,
+    onClick: function onClick() {
+      if (loading) return;
+      clickRedirect('/checkout');
+    },
+    background: Btn.background,
+    color: Btn.color
+  }, "proceed to checkokut")), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "continueShopping",
+    onClick: function onClick() {
+      if (loading) return;
+      clickRedirect('/');
+    }
+  }, "Continue to shopping")));
+};
+
+var CartPageComponent = function CartPageComponent(_ref) {
   var retail = _ref.retail,
       shippingData = _ref.shippingData,
       selectedShipping = _ref.selectedShipping,
@@ -357,30 +1899,38 @@ var CartPageComponent = function CartPageComponent(_ref) {
       loading = _ref.loading,
       imgnotfoundUrl = _ref.imgnotfoundUrl,
       styles = _ref.styles;
-  return /*#__PURE__*/React.createElement(CartPageContainer, {
-    retail: retail
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "scrollDiv"
-  }, /*#__PURE__*/React.createElement(CardsBox, {
+  return /*#__PURE__*/React__default.createElement(CartPageSection, {
+    bg: styles.bg,
     retail: retail
-  }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
-    return /*#__PURE__*/React.createElement(CartPageProductCard, {
-      item: item,
-      loading: loading,
-      imgnotfoundUrl: imgnotfoundUrl,
-      handleIncrementDecrement: handleIncrementDecrement,
-      handleRemoveProduct: handleRemoveProduct,
-      imgSize: styles === null || styles === void 0 ? void 0 : styles.imgSize
-    });
-  }))), /*#__PURE__*/React.createElement(CartSummary, {
+  }, /*#__PURE__*/React__default.createElement(CartPageContainer, {
+    retail: retail,
+    loading: loading
+  }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
+    retail: retail,
+    cartData: cartData,
+    loading: loading,
+    imgnotfoundUrl: imgnotfoundUrl,
+    styles: styles,
+    handleIncrementDecrement: handleIncrementDecrement,
+    handleRemoveProduct: handleRemoveProduct
+  }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
+    retail: retail,
+    cartData: cartData,
+    loading: loading,
+    imgnotfoundUrl: imgnotfoundUrl,
+    styles: styles,
+    handleIncrementDecrement: handleIncrementDecrement,
+    handleRemoveProduct: handleRemoveProduct
+  }), /*#__PURE__*/React__default.createElement(CartSummary, {
     retail: retail,
     shippingData: shippingData,
     selectedShipping: selectedShipping,
     setShipping: setShipping,
     clickRedirect: clickRedirect,
     subtotal: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
-    styles: styles === null || styles === void 0 ? void 0 : styles.cartSummary
-  }));
+    totalCartPrice: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
+    styles: styles
+  })));
 };
 
 var Breakpoint = function Breakpoint() {};
@@ -488,5 +2038,5 @@ function useGridSize() {
   return layout;
 }
 
-export { Breakpoint, CartDrawer, CartPageComponent as CartPage, Variant, useGridSize, useWindowSize };
+export { Breakpoint, CartDrawer, CartPageComponent, Variant, useGridSize, useWindowSize };
 //# sourceMappingURL=index.modern.js.map