@salesgenterp/ui-components 0.1.20 → 0.3.0

package/dist/index.modern.js

@@ -1,59 +1,13 @@
-import React__default, { useState, useRef, useContext, useEffect, createContext, forwardRef, createElement } from 'react';
-import { Input, Button, Card, Col, Image, Row } from 'antd';
-import styled, { ThemeProvider } from 'styled-components';
-import Card$1 from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import CardMedia from '@mui/material/CardMedia';
-import CardContent from '@mui/material/CardContent';
-import CardActions from '@mui/material/CardActions';
-import Collapse from '@mui/material/Collapse';
-import Avatar from '@mui/material/Avatar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import ShareIcon from '@mui/icons-material/Share';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { Stack, Tooltip } from '@mui/material';
+import React, { useState, useEffect } 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 } from 'react-icons/ai';
 import { PuffLoader } from 'react-spinners';
 
-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 _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 function _taggedTemplateLiteralLoose(strings, raw) {
   if (!raw) {
     raw = strings.slice(0);
@@ -63,2028 +17,35 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
-var buttonColor = function buttonColor(theme) {
-  var color = theme.colors.primary;
-  return "\n  border-color: " + color + " !important;\n  background: " + color + " !important;\n ";
-};
-
-var buttonSVGStyles = function buttonSVGStyles(theme) {
-  return "\n  svg {\n    fill: " + theme.colors.white + "\n  }  \n";
-};
-
-var primaryButtonStyle = function primaryButtonStyle(_ref) {
-  var theme = _ref.theme;
-  return "\n    " + buttonColor(theme) + "\n\n    &:hover,\n    &:focus,\n    &:active {\n      " + buttonColor(theme) + "\n    }\n    \n    " + buttonSVGStyles(theme) + "\n";
-};
-
-var labelPrimaryStyle = function labelPrimaryStyle(_ref) {
-  var theme = _ref.theme;
-  return " color: " + theme.colors.primary;
-};
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-var StyledOne = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  > div:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])));
-var StyledPrice = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-weight: bold;\n"])), labelPrimaryStyle);
-var StyledOutOfStock = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-weight: 500;\n"])), labelPrimaryStyle);
-var StyledStockBG = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  background-color: lightgray;\n  padding: 3px 5px;\n  min-width: 70px;\n  border-radius: 3px;\n  font-size: 10px;\n  font-weight: 500;\n"])));
-var StyledUpdateQty = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  column-gap: 5px;\n\n  input {\n    width: 50px;\n  }\n"])));
-var StyledNumberInput = styled(Input)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n"])));
-var StyledFlex = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
-var AddToCartContainer = styled(StyledFlex)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
-var StyledNotifyMe = styled(StyledFlex)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose([""])));
-var StyledNotifyButton = styled(Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n  color: white;\n  ", ";\n"])), primaryButtonStyle);
-var StyledProductCounter = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 30px;\n  width: 30px;\n\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  border-radius: 50%;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.primary;
-});
-var StyledLoginView = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n  button {\n    padding: 0;\n    margin-right: 5px;\n    text-transform: uppercase;\n  }\n"])));
-
-var preventOuterClick = function preventOuterClick(e) {
-  e.preventDefault();
-  e.stopPropagation();
-};
-
-var ProductCounter = function ProductCounter(_ref) {
-  var qty = _ref.qty;
-  var hasQty = qty > 0;
-  return hasQty && /*#__PURE__*/React__default.createElement(StyledProductCounter, null, qty);
-};
-
-var QtyMeter = function QtyMeter(_ref2) {
-  var updatedQty = _ref2.updatedQty;
-
-  var _useState = useState(0),
-      qtyToBuy = _useState[0],
-      setQtyToBuy = _useState[1];
-
-  var _useState2 = useState(true),
-      showInput = _useState2[0],
-      setShowInput = _useState2[1];
-
-  var containerRef = useRef(null);
-
-  var _useContext = useContext(ProductContext),
-      totalQty = _useContext.item.qty;
-
-  useEffect(function () {
-    var onResize = function onResize() {
-      var _containerRef$current = containerRef.current.closest('.ant-card').getBoundingClientRect(),
-          width = _containerRef$current.width;
-
-      setShowInput(width > 200);
-    };
-
-    window.addEventListener('resize', onResize);
-    onResize();
-    return function () {
-      window.removeEventListener('resize', onResize);
-    };
-  });
-
-  var updateQty = function updateQty(value) {
-    setQtyToBuy(value);
-    updatedQty(value);
-  };
-
-  var increaseQty = function increaseQty(e) {
-    preventOuterClick(e);
-
-    if (qtyToBuy >= 0 && qtyToBuy < totalQty) {
-      updateQty(qtyToBuy + 1);
-    }
-  };
-
-  var decreaseQty = function decreaseQty(e) {
-    preventOuterClick(e);
-
-    if (qtyToBuy > 0) {
-      updateQty(qtyToBuy - 1);
-    }
-  };
-
-  var onInputChange = function onInputChange(e) {
-    var value = e.target.value;
-    var regex = /^[0-9]+$/;
-
-    if (value.match(regex)) {
-      updateQty(+value);
-    }
-  };
-
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProductCounter, {
-    qty: qtyToBuy
-  }), /*#__PURE__*/React__default.createElement(StyledUpdateQty, {
-    ref: containerRef,
-    className: "qty-container"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    onClick: increaseQty,
-    className: "increment"
-  }, "+"), showInput && /*#__PURE__*/React__default.createElement(StyledNumberInput, {
-    value: qtyToBuy,
-    onChange: onInputChange,
-    onClick: preventOuterClick
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    onClick: decreaseQty,
-    className: "decrement"
-  }, "-")));
-};
-
-var IconContext = /*#__PURE__*/createContext({});
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$1(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var classnames = createCommonjsModule(function (module) {
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString === Object.prototype.toString) {
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				} else {
-					classes.push(arg.toString());
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if ( module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-});
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-/**
- * Take input from [0, n] and return it as [0, 1]
- * @hidden
- */
-function bound01(n, max) {
-    if (isOnePointZero(n)) {
-        n = '100%';
-    }
-    var isPercent = isPercentage(n);
-    n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
-    // Automatically convert percentage into number
-    if (isPercent) {
-        n = parseInt(String(n * max), 10) / 100;
-    }
-    // Handle floating point rounding errors
-    if (Math.abs(n - max) < 0.000001) {
-        return 1;
-    }
-    // Convert into [0, 1] range if it isn't already
-    if (max === 360) {
-        // If n is a hue given in degrees,
-        // wrap around out-of-range values into [0, 360] range
-        // then convert into [0, 1].
-        n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
-    }
-    else {
-        // If n not a hue given in degrees
-        // Convert into [0, 1] range if it isn't already.
-        n = (n % max) / parseFloat(String(max));
-    }
-    return n;
-}
-/**
- * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
- * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
- * @hidden
- */
-function isOnePointZero(n) {
-    return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
-}
-/**
- * Check to see if string passed in is a percentage
- * @hidden
- */
-function isPercentage(n) {
-    return typeof n === 'string' && n.indexOf('%') !== -1;
-}
-/**
- * Return a valid alpha value [0,1] with all invalid values being set to 1
- * @hidden
- */
-function boundAlpha(a) {
-    a = parseFloat(a);
-    if (isNaN(a) || a < 0 || a > 1) {
-        a = 1;
-    }
-    return a;
-}
-/**
- * Replace a decimal with it's percentage value
- * @hidden
- */
-function convertToPercentage(n) {
-    if (n <= 1) {
-        return "".concat(Number(n) * 100, "%");
-    }
-    return n;
-}
-/**
- * Force a hex value to have 2 characters
- * @hidden
- */
-function pad2(c) {
-    return c.length === 1 ? '0' + c : String(c);
-}
-
-// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
-// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
-/**
- * Handle bounds / percentage checking to conform to CSS color spec
- * <http://www.w3.org/TR/css3-color/>
- * *Assumes:* r, g, b in [0, 255] or [0, 1]
- * *Returns:* { r, g, b } in [0, 255]
- */
-function rgbToRgb(r, g, b) {
-    return {
-        r: bound01(r, 255) * 255,
-        g: bound01(g, 255) * 255,
-        b: bound01(b, 255) * 255,
-    };
-}
-function hue2rgb(p, q, t) {
-    if (t < 0) {
-        t += 1;
-    }
-    if (t > 1) {
-        t -= 1;
-    }
-    if (t < 1 / 6) {
-        return p + (q - p) * (6 * t);
-    }
-    if (t < 1 / 2) {
-        return q;
-    }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
-    }
-    return p;
-}
-/**
- * Converts an HSL color value to RGB.
- *
- * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
- * *Returns:* { r, g, b } in the set [0, 255]
- */
-function hslToRgb(h, s, l) {
-    var r;
-    var g;
-    var b;
-    h = bound01(h, 360);
-    s = bound01(s, 100);
-    l = bound01(l, 100);
-    if (s === 0) {
-        // achromatic
-        g = l;
-        b = l;
-        r = l;
-    }
-    else {
-        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        var p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1 / 3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1 / 3);
-    }
-    return { r: r * 255, g: g * 255, b: b * 255 };
-}
-/**
- * Converts an RGB color value to HSV
- *
- * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
- * *Returns:* { h, s, v } in [0,1]
- */
-function rgbToHsv(r, g, b) {
-    r = bound01(r, 255);
-    g = bound01(g, 255);
-    b = bound01(b, 255);
-    var max = Math.max(r, g, b);
-    var min = Math.min(r, g, b);
-    var h = 0;
-    var v = max;
-    var d = max - min;
-    var s = max === 0 ? 0 : d / max;
-    if (max === min) {
-        h = 0; // achromatic
-    }
-    else {
-        switch (max) {
-            case r:
-                h = (g - b) / d + (g < b ? 6 : 0);
-                break;
-            case g:
-                h = (b - r) / d + 2;
-                break;
-            case b:
-                h = (r - g) / d + 4;
-                break;
-        }
-        h /= 6;
-    }
-    return { h: h, s: s, v: v };
-}
-/**
- * Converts an HSV color value to RGB.
- *
- * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
- * *Returns:* { r, g, b } in the set [0, 255]
- */
-function hsvToRgb(h, s, v) {
-    h = bound01(h, 360) * 6;
-    s = bound01(s, 100);
-    v = bound01(v, 100);
-    var i = Math.floor(h);
-    var f = h - i;
-    var p = v * (1 - s);
-    var q = v * (1 - f * s);
-    var t = v * (1 - (1 - f) * s);
-    var mod = i % 6;
-    var r = [v, q, p, p, t, v][mod];
-    var g = [t, v, v, q, p, p][mod];
-    var b = [p, p, t, v, v, q][mod];
-    return { r: r * 255, g: g * 255, b: b * 255 };
-}
-/**
- * Converts an RGB color to hex
- *
- * Assumes r, g, and b are contained in the set [0, 255]
- * Returns a 3 or 6 character hex
- */
-function rgbToHex(r, g, b, allow3Char) {
-    var hex = [
-        pad2(Math.round(r).toString(16)),
-        pad2(Math.round(g).toString(16)),
-        pad2(Math.round(b).toString(16)),
-    ];
-    // Return a 3 character hex if possible
-    if (allow3Char &&
-        hex[0].startsWith(hex[0].charAt(1)) &&
-        hex[1].startsWith(hex[1].charAt(1)) &&
-        hex[2].startsWith(hex[2].charAt(1))) {
-        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
-    }
-    return hex.join('');
-}
-/** Converts a hex value to a decimal */
-function convertHexToDecimal(h) {
-    return parseIntFromHex(h) / 255;
-}
-/** Parse a base-16 hex value into a base-10 integer */
-function parseIntFromHex(val) {
-    return parseInt(val, 16);
-}
-
-// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
-/**
- * @hidden
- */
-var names = {
-    aliceblue: '#f0f8ff',
-    antiquewhite: '#faebd7',
-    aqua: '#00ffff',
-    aquamarine: '#7fffd4',
-    azure: '#f0ffff',
-    beige: '#f5f5dc',
-    bisque: '#ffe4c4',
-    black: '#000000',
-    blanchedalmond: '#ffebcd',
-    blue: '#0000ff',
-    blueviolet: '#8a2be2',
-    brown: '#a52a2a',
-    burlywood: '#deb887',
-    cadetblue: '#5f9ea0',
-    chartreuse: '#7fff00',
-    chocolate: '#d2691e',
-    coral: '#ff7f50',
-    cornflowerblue: '#6495ed',
-    cornsilk: '#fff8dc',
-    crimson: '#dc143c',
-    cyan: '#00ffff',
-    darkblue: '#00008b',
-    darkcyan: '#008b8b',
-    darkgoldenrod: '#b8860b',
-    darkgray: '#a9a9a9',
-    darkgreen: '#006400',
-    darkgrey: '#a9a9a9',
-    darkkhaki: '#bdb76b',
-    darkmagenta: '#8b008b',
-    darkolivegreen: '#556b2f',
-    darkorange: '#ff8c00',
-    darkorchid: '#9932cc',
-    darkred: '#8b0000',
-    darksalmon: '#e9967a',
-    darkseagreen: '#8fbc8f',
-    darkslateblue: '#483d8b',
-    darkslategray: '#2f4f4f',
-    darkslategrey: '#2f4f4f',
-    darkturquoise: '#00ced1',
-    darkviolet: '#9400d3',
-    deeppink: '#ff1493',
-    deepskyblue: '#00bfff',
-    dimgray: '#696969',
-    dimgrey: '#696969',
-    dodgerblue: '#1e90ff',
-    firebrick: '#b22222',
-    floralwhite: '#fffaf0',
-    forestgreen: '#228b22',
-    fuchsia: '#ff00ff',
-    gainsboro: '#dcdcdc',
-    ghostwhite: '#f8f8ff',
-    goldenrod: '#daa520',
-    gold: '#ffd700',
-    gray: '#808080',
-    green: '#008000',
-    greenyellow: '#adff2f',
-    grey: '#808080',
-    honeydew: '#f0fff0',
-    hotpink: '#ff69b4',
-    indianred: '#cd5c5c',
-    indigo: '#4b0082',
-    ivory: '#fffff0',
-    khaki: '#f0e68c',
-    lavenderblush: '#fff0f5',
-    lavender: '#e6e6fa',
-    lawngreen: '#7cfc00',
-    lemonchiffon: '#fffacd',
-    lightblue: '#add8e6',
-    lightcoral: '#f08080',
-    lightcyan: '#e0ffff',
-    lightgoldenrodyellow: '#fafad2',
-    lightgray: '#d3d3d3',
-    lightgreen: '#90ee90',
-    lightgrey: '#d3d3d3',
-    lightpink: '#ffb6c1',
-    lightsalmon: '#ffa07a',
-    lightseagreen: '#20b2aa',
-    lightskyblue: '#87cefa',
-    lightslategray: '#778899',
-    lightslategrey: '#778899',
-    lightsteelblue: '#b0c4de',
-    lightyellow: '#ffffe0',
-    lime: '#00ff00',
-    limegreen: '#32cd32',
-    linen: '#faf0e6',
-    magenta: '#ff00ff',
-    maroon: '#800000',
-    mediumaquamarine: '#66cdaa',
-    mediumblue: '#0000cd',
-    mediumorchid: '#ba55d3',
-    mediumpurple: '#9370db',
-    mediumseagreen: '#3cb371',
-    mediumslateblue: '#7b68ee',
-    mediumspringgreen: '#00fa9a',
-    mediumturquoise: '#48d1cc',
-    mediumvioletred: '#c71585',
-    midnightblue: '#191970',
-    mintcream: '#f5fffa',
-    mistyrose: '#ffe4e1',
-    moccasin: '#ffe4b5',
-    navajowhite: '#ffdead',
-    navy: '#000080',
-    oldlace: '#fdf5e6',
-    olive: '#808000',
-    olivedrab: '#6b8e23',
-    orange: '#ffa500',
-    orangered: '#ff4500',
-    orchid: '#da70d6',
-    palegoldenrod: '#eee8aa',
-    palegreen: '#98fb98',
-    paleturquoise: '#afeeee',
-    palevioletred: '#db7093',
-    papayawhip: '#ffefd5',
-    peachpuff: '#ffdab9',
-    peru: '#cd853f',
-    pink: '#ffc0cb',
-    plum: '#dda0dd',
-    powderblue: '#b0e0e6',
-    purple: '#800080',
-    rebeccapurple: '#663399',
-    red: '#ff0000',
-    rosybrown: '#bc8f8f',
-    royalblue: '#4169e1',
-    saddlebrown: '#8b4513',
-    salmon: '#fa8072',
-    sandybrown: '#f4a460',
-    seagreen: '#2e8b57',
-    seashell: '#fff5ee',
-    sienna: '#a0522d',
-    silver: '#c0c0c0',
-    skyblue: '#87ceeb',
-    slateblue: '#6a5acd',
-    slategray: '#708090',
-    slategrey: '#708090',
-    snow: '#fffafa',
-    springgreen: '#00ff7f',
-    steelblue: '#4682b4',
-    tan: '#d2b48c',
-    teal: '#008080',
-    thistle: '#d8bfd8',
-    tomato: '#ff6347',
-    turquoise: '#40e0d0',
-    violet: '#ee82ee',
-    wheat: '#f5deb3',
-    white: '#ffffff',
-    whitesmoke: '#f5f5f5',
-    yellow: '#ffff00',
-    yellowgreen: '#9acd32',
-};
-
-/**
- * Given a string or object, convert that input to RGB
- *
- * Possible string inputs:
- * ```
- * "red"
- * "#f00" or "f00"
- * "#ff0000" or "ff0000"
- * "#ff000000" or "ff000000"
- * "rgb 255 0 0" or "rgb (255, 0, 0)"
- * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
- * "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
- * "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
- * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
- * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
- * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
- * ```
- */
-function inputToRGB(color) {
-    var rgb = { r: 0, g: 0, b: 0 };
-    var a = 1;
-    var s = null;
-    var v = null;
-    var l = null;
-    var ok = false;
-    var format = false;
-    if (typeof color === 'string') {
-        color = stringInputToObject(color);
-    }
-    if (typeof color === 'object') {
-        if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-            rgb = rgbToRgb(color.r, color.g, color.b);
-            ok = true;
-            format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';
-        }
-        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-            s = convertToPercentage(color.s);
-            v = convertToPercentage(color.v);
-            rgb = hsvToRgb(color.h, s, v);
-            ok = true;
-            format = 'hsv';
-        }
-        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-            s = convertToPercentage(color.s);
-            l = convertToPercentage(color.l);
-            rgb = hslToRgb(color.h, s, l);
-            ok = true;
-            format = 'hsl';
-        }
-        if (Object.prototype.hasOwnProperty.call(color, 'a')) {
-            a = color.a;
-        }
-    }
-    a = boundAlpha(a);
-    return {
-        ok: ok,
-        format: color.format || format,
-        r: Math.min(255, Math.max(rgb.r, 0)),
-        g: Math.min(255, Math.max(rgb.g, 0)),
-        b: Math.min(255, Math.max(rgb.b, 0)),
-        a: a,
-    };
-}
-// <http://www.w3.org/TR/css3-values/#integers>
-var CSS_INTEGER = '[-\\+]?\\d+%?';
-// <http://www.w3.org/TR/css3-values/#number-value>
-var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
-// Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
-// Actual matching.
-// Parentheses and commas are optional, but not required.
-// Whitespace can take the place of commas or opening paren
-var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
-var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
-var matchers = {
-    CSS_UNIT: new RegExp(CSS_UNIT),
-    rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
-    rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),
-    hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),
-    hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),
-    hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),
-    hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),
-    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-};
-/**
- * Permissive string parsing.  Take in a number of formats, and output an object
- * based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
- */
-function stringInputToObject(color) {
-    color = color.trim().toLowerCase();
-    if (color.length === 0) {
-        return false;
-    }
-    var named = false;
-    if (names[color]) {
-        color = names[color];
-        named = true;
-    }
-    else if (color === 'transparent') {
-        return { r: 0, g: 0, b: 0, a: 0, format: 'name' };
-    }
-    // Try to match string input using regular expressions.
-    // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
-    // Just return an object and let the conversion functions handle that.
-    // This way the result will be the same whether the tinycolor is initialized with string or object.
-    var match = matchers.rgb.exec(color);
-    if (match) {
-        return { r: match[1], g: match[2], b: match[3] };
-    }
-    match = matchers.rgba.exec(color);
-    if (match) {
-        return { r: match[1], g: match[2], b: match[3], a: match[4] };
-    }
-    match = matchers.hsl.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], l: match[3] };
-    }
-    match = matchers.hsla.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], l: match[3], a: match[4] };
-    }
-    match = matchers.hsv.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], v: match[3] };
-    }
-    match = matchers.hsva.exec(color);
-    if (match) {
-        return { h: match[1], s: match[2], v: match[3], a: match[4] };
-    }
-    match = matchers.hex8.exec(color);
-    if (match) {
-        return {
-            r: parseIntFromHex(match[1]),
-            g: parseIntFromHex(match[2]),
-            b: parseIntFromHex(match[3]),
-            a: convertHexToDecimal(match[4]),
-            format: named ? 'name' : 'hex8',
-        };
-    }
-    match = matchers.hex6.exec(color);
-    if (match) {
-        return {
-            r: parseIntFromHex(match[1]),
-            g: parseIntFromHex(match[2]),
-            b: parseIntFromHex(match[3]),
-            format: named ? 'name' : 'hex',
-        };
-    }
-    match = matchers.hex4.exec(color);
-    if (match) {
-        return {
-            r: parseIntFromHex(match[1] + match[1]),
-            g: parseIntFromHex(match[2] + match[2]),
-            b: parseIntFromHex(match[3] + match[3]),
-            a: convertHexToDecimal(match[4] + match[4]),
-            format: named ? 'name' : 'hex8',
-        };
-    }
-    match = matchers.hex3.exec(color);
-    if (match) {
-        return {
-            r: parseIntFromHex(match[1] + match[1]),
-            g: parseIntFromHex(match[2] + match[2]),
-            b: parseIntFromHex(match[3] + match[3]),
-            format: named ? 'name' : 'hex',
-        };
-    }
-    return false;
-}
-/**
- * Check to see if it looks like a CSS unit
- * (see `matchers` above for definition).
- */
-function isValidCSSUnit(color) {
-    return Boolean(matchers.CSS_UNIT.exec(String(color)));
-}
-
-var hueStep = 2; // 色相阶梯
-
-var saturationStep = 0.16; // 饱和度阶梯，浅色部分
-
-var saturationStep2 = 0.05; // 饱和度阶梯，深色部分
-
-var brightnessStep1 = 0.05; // 亮度阶梯，浅色部分
-
-var brightnessStep2 = 0.15; // 亮度阶梯，深色部分
-
-var lightColorCount = 5; // 浅色数量，主色上
-
-var darkColorCount = 4; // 深色数量，主色下
-// 暗色主题颜色映射关系表
-
-var darkColorMap = [{
-  index: 7,
-  opacity: 0.15
-}, {
-  index: 6,
-  opacity: 0.25
-}, {
-  index: 5,
-  opacity: 0.3
-}, {
-  index: 5,
-  opacity: 0.45
-}, {
-  index: 5,
-  opacity: 0.65
-}, {
-  index: 5,
-  opacity: 0.85
-}, {
-  index: 4,
-  opacity: 0.9
-}, {
-  index: 3,
-  opacity: 0.95
-}, {
-  index: 2,
-  opacity: 0.97
-}, {
-  index: 1,
-  opacity: 0.98
-}]; // Wrapper function ported from TinyColor.prototype.toHsv
-// Keep it here because of `hsv.h * 360`
-
-function toHsv(_ref) {
-  var r = _ref.r,
-      g = _ref.g,
-      b = _ref.b;
-  var hsv = rgbToHsv(r, g, b);
-  return {
-    h: hsv.h * 360,
-    s: hsv.s,
-    v: hsv.v
-  };
-} // Wrapper function ported from TinyColor.prototype.toHexString
-// Keep it here because of the prefix `#`
-
-
-function toHex(_ref2) {
-  var r = _ref2.r,
-      g = _ref2.g,
-      b = _ref2.b;
-  return "#".concat(rgbToHex(r, g, b, false));
-} // Wrapper function ported from TinyColor.prototype.mix, not treeshakable.
-// Amount in range [0, 1]
-// Assume color1 & color2 has no alpha, since the following src code did so.
-
-
-function mix(rgb1, rgb2, amount) {
-  var p = amount / 100;
-  var rgb = {
-    r: (rgb2.r - rgb1.r) * p + rgb1.r,
-    g: (rgb2.g - rgb1.g) * p + rgb1.g,
-    b: (rgb2.b - rgb1.b) * p + rgb1.b
-  };
-  return rgb;
-}
-
-function getHue(hsv, i, light) {
-  var hue; // 根据色相不同，色相转向不同
-
-  if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
-    hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
-  } else {
-    hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
-  }
-
-  if (hue < 0) {
-    hue += 360;
-  } else if (hue >= 360) {
-    hue -= 360;
-  }
-
-  return hue;
-}
-
-function getSaturation(hsv, i, light) {
-  // grey color don't change saturation
-  if (hsv.h === 0 && hsv.s === 0) {
-    return hsv.s;
-  }
-
-  var saturation;
-
-  if (light) {
-    saturation = hsv.s - saturationStep * i;
-  } else if (i === darkColorCount) {
-    saturation = hsv.s + saturationStep;
-  } else {
-    saturation = hsv.s + saturationStep2 * i;
-  } // 边界值修正
-
-
-  if (saturation > 1) {
-    saturation = 1;
-  } // 第一格的 s 限制在 0.06-0.1 之间
-
-
-  if (light && i === lightColorCount && saturation > 0.1) {
-    saturation = 0.1;
-  }
-
-  if (saturation < 0.06) {
-    saturation = 0.06;
-  }
-
-  return Number(saturation.toFixed(2));
-}
-
-function getValue(hsv, i, light) {
-  var value;
-
-  if (light) {
-    value = hsv.v + brightnessStep1 * i;
-  } else {
-    value = hsv.v - brightnessStep2 * i;
-  }
-
-  if (value > 1) {
-    value = 1;
-  }
-
-  return Number(value.toFixed(2));
-}
-
-function generate(color) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var patterns = [];
-  var pColor = inputToRGB(color);
-
-  for (var i = lightColorCount; i > 0; i -= 1) {
-    var hsv = toHsv(pColor);
-    var colorString = toHex(inputToRGB({
-      h: getHue(hsv, i, true),
-      s: getSaturation(hsv, i, true),
-      v: getValue(hsv, i, true)
-    }));
-    patterns.push(colorString);
-  }
-
-  patterns.push(toHex(pColor));
-
-  for (var _i = 1; _i <= darkColorCount; _i += 1) {
-    var _hsv = toHsv(pColor);
-
-    var _colorString = toHex(inputToRGB({
-      h: getHue(_hsv, _i),
-      s: getSaturation(_hsv, _i),
-      v: getValue(_hsv, _i)
-    }));
-
-    patterns.push(_colorString);
-  } // dark theme patterns
-
-
-  if (opts.theme === 'dark') {
-    return darkColorMap.map(function (_ref3) {
-      var index = _ref3.index,
-          opacity = _ref3.opacity;
-      var darkColorString = toHex(mix(inputToRGB(opts.backgroundColor || '#141414'), inputToRGB(patterns[index]), opacity * 100));
-      return darkColorString;
-    });
-  }
-
-  return patterns;
-}
-
-var presetPrimaryColors = {
-  red: '#F5222D',
-  volcano: '#FA541C',
-  orange: '#FA8C16',
-  gold: '#FAAD14',
-  yellow: '#FADB14',
-  lime: '#A0D911',
-  green: '#52C41A',
-  cyan: '#13C2C2',
-  blue: '#1890FF',
-  geekblue: '#2F54EB',
-  purple: '#722ED1',
-  magenta: '#EB2F96',
-  grey: '#666666'
-};
-var presetPalettes = {};
-var presetDarkPalettes = {};
-Object.keys(presetPrimaryColors).forEach(function (key) {
-  presetPalettes[key] = generate(presetPrimaryColors[key]);
-  presetPalettes[key].primary = presetPalettes[key][5]; // dark presetPalettes
-
-  presetDarkPalettes[key] = generate(presetPrimaryColors[key], {
-    theme: 'dark',
-    backgroundColor: '#141414'
-  });
-  presetDarkPalettes[key].primary = presetDarkPalettes[key][5];
-});
-
-/* eslint-disable no-console */
-var warned = {};
-function warning(valid, message) {
-  // Support uglify
-  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
-    console.error("Warning: ".concat(message));
-  }
-}
-function call(method, valid, message) {
-  if (!valid && !warned[message]) {
-    method(false, message);
-    warned[message] = true;
-  }
-}
-function warningOnce(valid, message) {
-  call(warning, valid, message);
-}
-/* eslint-enable */
-
-function canUseDom() {
-  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-}
-
-var MARK_KEY = "rc-util-key";
-
-function getMark() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      mark = _ref.mark;
-
-  if (mark) {
-    return mark.startsWith('data-') ? mark : "data-".concat(mark);
-  }
-
-  return MARK_KEY;
-}
-
-function getContainer(option) {
-  if (option.attachTo) {
-    return option.attachTo;
-  }
-
-  var head = document.querySelector('head');
-  return head || document.body;
-}
-
-function injectCSS(css) {
-  var _option$csp;
-
-  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  if (!canUseDom()) {
-    return null;
-  }
-
-  var styleNode = document.createElement('style');
-
-  if ((_option$csp = option.csp) === null || _option$csp === void 0 ? void 0 : _option$csp.nonce) {
-    var _option$csp2;
-
-    styleNode.nonce = (_option$csp2 = option.csp) === null || _option$csp2 === void 0 ? void 0 : _option$csp2.nonce;
-  }
-
-  styleNode.innerHTML = css;
-  var container = getContainer(option);
-  var firstChild = container.firstChild;
-
-  if (option.prepend && container.prepend) {
-    // Use `prepend` first
-    container.prepend(styleNode);
-  } else if (option.prepend && firstChild) {
-    // Fallback to `insertBefore` like IE not support `prepend`
-    container.insertBefore(styleNode, firstChild);
-  } else {
-    container.appendChild(styleNode);
-  }
-
-  return styleNode;
-}
-var containerCache = new Map();
-
-function findExistNode(key) {
-  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var container = getContainer(option);
-  return Array.from(containerCache.get(container).children).find(function (node) {
-    return node.tagName === 'STYLE' && node.getAttribute(getMark(option)) === key;
-  });
-}
-function updateCSS(css, key) {
-  var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var container = getContainer(option); // Get real parent
-
-  if (!containerCache.has(container)) {
-    var placeholderStyle = injectCSS('', option);
-    var parentNode = placeholderStyle.parentNode;
-    containerCache.set(container, parentNode);
-    parentNode.removeChild(placeholderStyle);
-  }
-
-  var existNode = findExistNode(key, option);
-
-  if (existNode) {
-    var _option$csp3, _option$csp4;
-
-    if (((_option$csp3 = option.csp) === null || _option$csp3 === void 0 ? void 0 : _option$csp3.nonce) && existNode.nonce !== ((_option$csp4 = option.csp) === null || _option$csp4 === void 0 ? void 0 : _option$csp4.nonce)) {
-      var _option$csp5;
-
-      existNode.nonce = (_option$csp5 = option.csp) === null || _option$csp5 === void 0 ? void 0 : _option$csp5.nonce;
-    }
-
-    if (existNode.innerHTML !== css) {
-      existNode.innerHTML = css;
-    }
-
-    return existNode;
-  }
-
-  var newNode = injectCSS(css, option);
-  newNode.setAttribute(getMark(option), key);
-  return newNode;
-}
-
-function warning$1(valid, message) {
-  warningOnce(valid, "[@ant-design/icons] ".concat(message));
-}
-function isIconDefinition(target) {
-  return _typeof(target) === 'object' && typeof target.name === 'string' && typeof target.theme === 'string' && (_typeof(target.icon) === 'object' || typeof target.icon === 'function');
-}
-function normalizeAttrs() {
-  var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return Object.keys(attrs).reduce(function (acc, key) {
-    var val = attrs[key];
-
-    switch (key) {
-      case 'class':
-        acc.className = val;
-        delete acc.class;
-        break;
-
-      default:
-        acc[key] = val;
-    }
-
-    return acc;
-  }, {});
-}
-function generate$1(node, key, rootProps) {
-  if (!rootProps) {
-    return /*#__PURE__*/React__default.createElement(node.tag, _objectSpread2({
-      key: key
-    }, normalizeAttrs(node.attrs)), (node.children || []).map(function (child, index) {
-      return generate$1(child, "".concat(key, "-").concat(node.tag, "-").concat(index));
-    }));
-  }
-
-  return /*#__PURE__*/React__default.createElement(node.tag, _objectSpread2(_objectSpread2({
-    key: key
-  }, normalizeAttrs(node.attrs)), rootProps), (node.children || []).map(function (child, index) {
-    return generate$1(child, "".concat(key, "-").concat(node.tag, "-").concat(index));
-  }));
-}
-function getSecondaryColor(primaryColor) {
-  // choose the second color
-  return generate(primaryColor)[0];
-}
-function normalizeTwoToneColors(twoToneColor) {
-  if (!twoToneColor) {
-    return [];
-  }
-
-  return Array.isArray(twoToneColor) ? twoToneColor : [twoToneColor];
-} // These props make sure that the SVG behaviours like general text.
-var iconStyles = "\n.anticon {\n  display: inline-block;\n  color: inherit;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.anticon > * {\n  line-height: 1;\n}\n\n.anticon svg {\n  display: inline-block;\n}\n\n.anticon::before {\n  display: none;\n}\n\n.anticon .anticon-icon {\n  display: block;\n}\n\n.anticon[tabindex] {\n  cursor: pointer;\n}\n\n.anticon-spin::before,\n.anticon-spin {\n  display: inline-block;\n  -webkit-animation: loadingCircle 1s infinite linear;\n  animation: loadingCircle 1s infinite linear;\n}\n\n@-webkit-keyframes loadingCircle {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes loadingCircle {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n";
-var useInsertStyles = function useInsertStyles() {
-  var styleStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : iconStyles;
-
-  var _useContext = useContext(IconContext),
-      csp = _useContext.csp;
-
-  useEffect(function () {
-    updateCSS(styleStr, '@ant-design-icons', {
-      prepend: true,
-      csp: csp
-    });
-  }, []);
-};
-
-var _excluded = ["icon", "className", "onClick", "style", "primaryColor", "secondaryColor"];
-var twoToneColorPalette = {
-  primaryColor: '#333',
-  secondaryColor: '#E6E6E6',
-  calculated: false
-};
-
-function setTwoToneColors(_ref) {
-  var primaryColor = _ref.primaryColor,
-      secondaryColor = _ref.secondaryColor;
-  twoToneColorPalette.primaryColor = primaryColor;
-  twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor);
-  twoToneColorPalette.calculated = !!secondaryColor;
-}
-
-function getTwoToneColors() {
-  return _objectSpread2({}, twoToneColorPalette);
-}
-
-var IconBase = function IconBase(props) {
-  var icon = props.icon,
-      className = props.className,
-      onClick = props.onClick,
-      style = props.style,
-      primaryColor = props.primaryColor,
-      secondaryColor = props.secondaryColor,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  var colors = twoToneColorPalette;
-
-  if (primaryColor) {
-    colors = {
-      primaryColor: primaryColor,
-      secondaryColor: secondaryColor || getSecondaryColor(primaryColor)
-    };
-  }
-
-  useInsertStyles();
-  warning$1(isIconDefinition(icon), "icon should be icon definiton, but got ".concat(icon));
-
-  if (!isIconDefinition(icon)) {
-    return null;
-  }
-
-  var target = icon;
-
-  if (target && typeof target.icon === 'function') {
-    target = _objectSpread2(_objectSpread2({}, target), {}, {
-      icon: target.icon(colors.primaryColor, colors.secondaryColor)
-    });
-  }
-
-  return generate$1(target.icon, "svg-".concat(target.name), _objectSpread2({
-    className: className,
-    onClick: onClick,
-    style: style,
-    'data-icon': target.name,
-    width: '1em',
-    height: '1em',
-    fill: 'currentColor',
-    'aria-hidden': 'true'
-  }, restProps));
-};
-
-IconBase.displayName = 'IconReact';
-IconBase.getTwoToneColors = getTwoToneColors;
-IconBase.setTwoToneColors = setTwoToneColors;
-
-function setTwoToneColor(twoToneColor) {
-  var _normalizeTwoToneColo = normalizeTwoToneColors(twoToneColor),
-      _normalizeTwoToneColo2 = _slicedToArray(_normalizeTwoToneColo, 2),
-      primaryColor = _normalizeTwoToneColo2[0],
-      secondaryColor = _normalizeTwoToneColo2[1];
-
-  return IconBase.setTwoToneColors({
-    primaryColor: primaryColor,
-    secondaryColor: secondaryColor
-  });
-}
-function getTwoToneColor() {
-  var colors = IconBase.getTwoToneColors();
-
-  if (!colors.calculated) {
-    return colors.primaryColor;
-  }
-
-  return [colors.primaryColor, colors.secondaryColor];
-}
-
-var _excluded$1 = ["className", "icon", "spin", "rotate", "tabIndex", "onClick", "twoToneColor"];
-// should move it to antd main repo?
-
-setTwoToneColor('#1890ff');
-var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _classNames;
-
-  var className = props.className,
-      icon = props.icon,
-      spin = props.spin,
-      rotate = props.rotate,
-      tabIndex = props.tabIndex,
-      onClick = props.onClick,
-      twoToneColor = props.twoToneColor,
-      restProps = _objectWithoutProperties(props, _excluded$1);
-
-  var _React$useContext = useContext(IconContext),
-      _React$useContext$pre = _React$useContext.prefixCls,
-      prefixCls = _React$useContext$pre === void 0 ? 'anticon' : _React$useContext$pre;
-
-  var classString = classnames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(icon.name), !!icon.name), _defineProperty(_classNames, "".concat(prefixCls, "-spin"), !!spin || icon.name === 'loading'), _classNames), className);
-  var iconTabIndex = tabIndex;
-
-  if (iconTabIndex === undefined && onClick) {
-    iconTabIndex = -1;
-  }
-
-  var svgStyle = rotate ? {
-    msTransform: "rotate(".concat(rotate, "deg)"),
-    transform: "rotate(".concat(rotate, "deg)")
-  } : undefined;
-
-  var _normalizeTwoToneColo = normalizeTwoToneColors(twoToneColor),
-      _normalizeTwoToneColo2 = _slicedToArray(_normalizeTwoToneColo, 2),
-      primaryColor = _normalizeTwoToneColo2[0],
-      secondaryColor = _normalizeTwoToneColo2[1];
-
-  return /*#__PURE__*/createElement("span", _objectSpread2(_objectSpread2({
-    role: "img",
-    "aria-label": icon.name
-  }, restProps), {}, {
-    ref: ref,
-    tabIndex: iconTabIndex,
-    onClick: onClick,
-    className: classString
-  }), /*#__PURE__*/createElement(IconBase, {
-    icon: icon,
-    primaryColor: primaryColor,
-    secondaryColor: secondaryColor,
-    style: svgStyle
-  }));
-});
-Icon.displayName = 'AntdIcon';
-Icon.getTwoToneColor = getTwoToneColor;
-Icon.setTwoToneColor = setTwoToneColor;
-
-// This icon file is generated automatically.
-var BellOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M816 768h-24V428c0-141.1-104.3-257.7-240-277.1V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.9c-135.7 19.4-240 136-240 277.1v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48zM304 768V428c0-55.6 21.6-107.8 60.9-147.1S456.4 220 512 220c55.6 0 107.8 21.6 147.1 60.9S720 372.4 720 428v340H304z" } }] }, "name": "bell", "theme": "outlined" };
-
-var BellOutlined$1 = function BellOutlined$1(props, ref) {
-  return /*#__PURE__*/createElement(Icon, _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: ref,
-    icon: BellOutlined
-  }));
-};
-
-BellOutlined$1.displayName = 'BellOutlined';
-var BellOutlined$2 = /*#__PURE__*/forwardRef(BellOutlined$1);
-
-// This icon file is generated automatically.
-var ShoppingCartOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M922.9 701.9H327.4l29.9-60.9 496.8-.9c16.8 0 31.2-12 34.2-28.6l68.8-385.1c1.8-10.1-.9-20.5-7.5-28.4a34.99 34.99 0 00-26.6-12.5l-632-2.1-5.4-25.4c-3.4-16.2-18-28-34.6-28H96.5a35.3 35.3 0 100 70.6h125.9L246 312.8l58.1 281.3-74.8 122.1a34.96 34.96 0 00-3 36.8c6 11.9 18.1 19.4 31.5 19.4h62.8a102.43 102.43 0 00-20.6 61.7c0 56.6 46 102.6 102.6 102.6s102.6-46 102.6-102.6c0-22.3-7.4-44-20.6-61.7h161.1a102.43 102.43 0 00-20.6 61.7c0 56.6 46 102.6 102.6 102.6s102.6-46 102.6-102.6c0-22.3-7.4-44-20.6-61.7H923c19.4 0 35.3-15.8 35.3-35.3a35.42 35.42 0 00-35.4-35.2zM305.7 253l575.8 1.9-56.4 315.8-452.3.8L305.7 253zm96.9 612.7c-17.4 0-31.6-14.2-31.6-31.6 0-17.4 14.2-31.6 31.6-31.6s31.6 14.2 31.6 31.6a31.6 31.6 0 01-31.6 31.6zm325.1 0c-17.4 0-31.6-14.2-31.6-31.6 0-17.4 14.2-31.6 31.6-31.6s31.6 14.2 31.6 31.6a31.6 31.6 0 01-31.6 31.6z" } }] }, "name": "shopping-cart", "theme": "outlined" };
-
-var ShoppingCartOutlined$1 = function ShoppingCartOutlined$1(props, ref) {
-  return /*#__PURE__*/createElement(Icon, _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: ref,
-    icon: ShoppingCartOutlined
-  }));
-};
-
-ShoppingCartOutlined$1.displayName = 'ShoppingCartOutlined';
-var ShoppingCartOutlined$2 = /*#__PURE__*/forwardRef(ShoppingCartOutlined$1);
-
-var NotifyMeButton = function NotifyMeButton(_ref) {
-  var onClick = _ref.onClick;
-  return /*#__PURE__*/React__default.createElement(StyledNotifyButton, {
-    onClick: onClick
-  }, /*#__PURE__*/React__default.createElement(BellOutlined$2, null));
-};
-
-var NotifyMe = function NotifyMe() {
-  var _useState = useState(''),
-      email = _useState[0],
-      setEmail = _useState[1];
-
-  var _useContext = useContext(ProductContext),
-      id = _useContext.item.id,
-      onNotifyClick = _useContext.onNotifyClick;
-
-  var onInputChange = function onInputChange(_ref2) {
-    var value = _ref2.target.value;
-    setEmail(value);
-  };
-
-  var onNotifyPressed = function onNotifyPressed(e) {
-    preventOuterClick(e);
-    onNotifyClick({
-      email: email,
-      id: id
-    });
-  };
-
-  return /*#__PURE__*/React__default.createElement(StyledNotifyMe, null, /*#__PURE__*/React__default.createElement(Input, {
-    onChange: onInputChange,
-    onClick: preventOuterClick
-  }), /*#__PURE__*/React__default.createElement(NotifyMeButton, {
-    onClick: onNotifyPressed
-  }));
-};
-
-var _templateObject$1;
-var StyledAddToCartIconButton = styled(Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), primaryButtonStyle);
-var AddToCartButton = function AddToCartButton(_ref) {
-  var onClick = _ref.onClick;
-  return /*#__PURE__*/React__default.createElement(StyledAddToCartIconButton, {
-    onClick: onClick
-  }, /*#__PURE__*/React__default.createElement(ShoppingCartOutlined$2, null));
-};
-
-var LoginView = function LoginView(_ref) {
-  var onClick = _ref.onClick;
-  return /*#__PURE__*/React__default.createElement(StyledLoginView, null, /*#__PURE__*/React__default.createElement(Button, {
-    type: "link",
-    danger: true,
-    onClick: onClick
-  }, "Login"), "to view price.");
-};
-
-var One = function One() {
-  var _useContext = useContext(ProductContext),
-      _useContext$item = _useContext.item,
-      price = _useContext$item.price,
-      currency = _useContext$item.currency,
-      qty = _useContext$item.qty,
-      id = _useContext$item.id,
-      addToCart = _useContext.addToCart,
-      showLogin = _useContext.showLogin,
-      onLoginClick = _useContext.onLoginClick;
-
-  var _useState = useState(0),
-      newUpdatedQty = _useState[0],
-      setNewUpdatedQty = _useState[1];
-
-  var amount = currency + " " + price;
-  var productCount = qty > 50 ? '50+' : qty;
-  var inStockMessage = "In-stock: " + productCount;
-  var outOfStock = /*#__PURE__*/React__default.createElement(StyledOutOfStock, null, "Out Of Stock");
-  var isProductOutOfStock = qty === 0;
-  var stockTitle = isProductOutOfStock ? outOfStock : inStockMessage;
-
-  var handleAddToCart = function handleAddToCart(e) {
-    preventOuterClick(e);
-    addToCart({
-      id: id,
-      qty: newUpdatedQty
-    });
-  };
-
-  var renderSubModules = function renderSubModules() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledPrice, null, amount), /*#__PURE__*/React__default.createElement(StyledStockBG, null, stockTitle), isProductOutOfStock && /*#__PURE__*/React__default.createElement(NotifyMe, null), !isProductOutOfStock && /*#__PURE__*/React__default.createElement(AddToCartContainer, null, /*#__PURE__*/React__default.createElement(QtyMeter, {
-      updatedQty: setNewUpdatedQty
-    }), /*#__PURE__*/React__default.createElement(AddToCartButton, {
-      onClick: handleAddToCart
-    })));
-  };
-
-  return /*#__PURE__*/React__default.createElement(StyledOne, null, showLogin ? /*#__PURE__*/React__default.createElement(LoginView, {
-    onClick: function onClick(e) {
-      preventOuterClick(e);
-      onLoginClick(e);
-    }
-  }) : renderSubModules());
-};
-
-var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4$1;
-var StyledTwo = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  min-height: 60px;\n"])));
-var StyledPrice$1 = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  font-size: 20px;\n  margin-bottom: 10px;\n"])));
-var StyledOutOfStock$1 = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  height: 35px;\n  text-transform: uppercase;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var StyledAddToCartButton = styled(Button)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  height: 35px;\n\n  ", "\n"])), primaryButtonStyle);
-
-function Two() {
-  var _useContext = useContext(ProductContext),
-      _useContext$item = _useContext.item,
-      price = _useContext$item.price,
-      currency = _useContext$item.currency,
-      qty = _useContext$item.qty,
-      id = _useContext$item.id,
-      addToCart = _useContext.addToCart;
-
-  var amount = currency + " " + price;
-  var isProductOutOfStock = qty === 0;
-
-  var onAddToCartClick = function onAddToCartClick(e) {
-    preventOuterClick(e);
-    addToCart({
-      id: id,
-      qty: 1
-    });
-  };
-
-  return /*#__PURE__*/React__default.createElement(StyledTwo, null, /*#__PURE__*/React__default.createElement(StyledPrice$1, null, amount), isProductOutOfStock ? /*#__PURE__*/React__default.createElement(StyledOutOfStock$1, null, "out of stock") : /*#__PURE__*/React__default.createElement(StyledAddToCartButton, {
-    type: "primary",
-    icon: /*#__PURE__*/React__default.createElement(ShoppingCartOutlined$2, null),
-    onClick: onAddToCartClick
-  }, "Add to Cart"));
-}
-
-var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$1;
-var StyledThree = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose([""])));
-var StyledPrice$2 = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  ", ";\n"])), labelPrimaryStyle);
-var StyledAddToCartButton$1 = styled(Button)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  ", ";\n"])), primaryButtonStyle);
-var StyledPriceQtyContainer = styled(StyledFlex)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  margin-bottom: 10px;\n\n  .qty-container {\n    position: relative;\n    width: 70px;\n    height: 35px;\n\n    input {\n      width: inherit;\n      text-align: left;\n    }\n\n    .increment,\n    .decrement {\n      position: absolute;\n      right: 8px;\n      height: 14px;\n      width: 14px;\n      font-size: 12px;\n      z-index: 1;\n      padding: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .increment {\n      top: 3px;\n    }\n    .decrement {\n      bottom: 3px;\n    }\n  }\n"])));
-var StyledQty = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose([""])));
-
-function Three() {
-  var _useContext = useContext(ProductContext),
-      _useContext$item = _useContext.item,
-      price = _useContext$item.price,
-      currency = _useContext$item.currency,
-      qty = _useContext$item.qty,
-      id = _useContext$item.id,
-      addToCart = _useContext.addToCart;
-
-  var _useState = useState(0),
-      newUpdatedQty = _useState[0],
-      setNewUpdatedQty = _useState[1];
-
-  var amount = currency + " " + price;
-  var isProductOutOfStock = qty === 0;
-
-  var onAddToCartClick = function onAddToCartClick(e) {
-    preventOuterClick(e);
-    addToCart({
-      id: id,
-      qty: newUpdatedQty
-    });
-  };
-
-  return /*#__PURE__*/React__default.createElement(StyledThree, null, !isProductOutOfStock && /*#__PURE__*/React__default.createElement(StyledPriceQtyContainer, null, /*#__PURE__*/React__default.createElement(StyledPrice$2, null, amount), /*#__PURE__*/React__default.createElement(StyledQty, null, /*#__PURE__*/React__default.createElement(QtyMeter, {
-    updatedQty: setNewUpdatedQty
-  }))), isProductOutOfStock ? /*#__PURE__*/React__default.createElement(NotifyMe, null) : /*#__PURE__*/React__default.createElement(StyledAddToCartButton$1, {
-    type: "primary",
-    icon: /*#__PURE__*/React__default.createElement(ShoppingCartOutlined$2, null),
-    onClick: onAddToCartClick
-  }, "Add to Cart"));
-}
-
-var _templateObject$4;
-
-var imageLayout = function imageLayout(_ref) {
-  var image = _ref.layout.image;
-  return "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  img {\n    width: " + image.size + "%;\n  }\n  margin-bottom: " + image.mb + "px;\n";
-};
-
-var titleLayout = function titleLayout(_ref2) {
-  var title = _ref2.layout.title;
-  return "\n  margin-bottom: " + title.mb + "px;\n  \n  display: -webkit-box;\n  -webkit-line-clamp: " + title.lineCamp + ";\n  -webkit-box-orient: vertical;\n  \n  height: " + title.lineCamp * 22 + "px;\n";
-};
-
-var descriptionLayout = function descriptionLayout(_ref3) {
-  var detail = _ref3.layout.detail;
-  return "\n  margin-bottom: " + detail.mb + "px;\n";
-};
-
-var StyledCardProductContainer = styled(Card)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n\n  :hover {\n    cursor: pointer;\n\n    .quick-action {\n      display: flex;\n    }\n  }\n\n  .ant-card-cover .ant-image {\n    ", "\n  }\n\n  .ant-card-body {\n    padding: 15px;\n    padding-top: 0px;\n  }\n\n  .ant-card-meta {\n    margin-bottom: 6px;\n\n    .ant-card-meta-title {\n      white-space: initial;\n      font-size: 14px;\n      ", "\n    }\n\n    .ant-card-meta-description {\n      ", ";\n    }\n  }\n"])), imageLayout, titleLayout, descriptionLayout);
-
-var OneQuickAction = function OneQuickAction() {
-  var _useContext = useContext(ProductContext),
-      id = _useContext.item.id,
-      addToCart = _useContext.addToCart;
-
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(AddToCartButton, {
-    onClick: function onClick(e) {
-      preventOuterClick(e);
-      addToCart({
-        id: id,
-        qty: 1
-      });
-    }
-  }));
-};
-
-var _templateObject$5;
-var StyledQuickActions = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  display: none;\n  z-index: 1;\n"])));
-var QuickAction = function QuickAction(props) {
-  return /*#__PURE__*/React__default.createElement(StyledQuickActions, _extends({}, props, {
-    className: "quick-action"
-  }), props.children);
-};
-
-var Breakpoint = function Breakpoint() {};
-
-Breakpoint.xs = 'xs';
-Breakpoint.sm = 'sm';
-Breakpoint.md = 'md';
-Breakpoint.lg = 'lg';
-Breakpoint.xl = 'xl';
-Breakpoint.xxl = 'xxl';
-
-var Variant = function Variant() {};
-
-Variant.ONE = 'one';
-Variant.TWO = 'two';
-Variant.THREE = 'three';
-
-var Meta = Card.Meta;
-
-var noop = function noop() {};
-
-var defaultProps = {
-  addToCart: noop,
-  onNotifyClick: noop,
-  onLoginClick: noop,
-  item: {},
-  variant: '',
-  showLogin: false
-};
-var ProductContext = React__default.createContext(defaultProps);
-
-var getComponent = function getComponent(variant) {
-  switch (variant) {
-    case Variant.ONE:
-      return {
-        quickAction: /*#__PURE__*/React__default.createElement(OneQuickAction, null),
-        subComponent: /*#__PURE__*/React__default.createElement(One, null)
-      };
-
-    case Variant.TWO:
-      return {
-        quickAction: /*#__PURE__*/React__default.createElement(OneQuickAction, null),
-        subComponent: /*#__PURE__*/React__default.createElement(Two, null)
-      };
-
-    case Variant.THREE:
-      return {
-        quickAction: /*#__PURE__*/React__default.createElement(OneQuickAction, null),
-        subComponent: /*#__PURE__*/React__default.createElement(Three, null)
-      };
-
-    default:
-      return {
-        quickAction: '',
-        subComponent: ''
-      };
-  }
-};
-
-var defaultFallbackImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==';
-
-var Product = function Product(props) {
-  var _props$item = props.item,
-      imgUrl = _props$item.imgUrl,
-      title = _props$item.title,
-      description = _props$item.description,
-      qty = _props$item.qty,
-      item = props.item,
-      colValues = props.colValues,
-      layoutModel = props.layoutModel,
-      showBoxShadow = props.showBoxShadow,
-      showLogin = props.showLogin,
-      onImageClick = props.onImageClick,
-      onProductClick = props.onProductClick;
-  var c = getComponent(props.variant);
-  var showQuickAction = layoutModel.showQuickActions && !showLogin && qty > 0;
-  return /*#__PURE__*/React__default.createElement(Col, {
-    span: colValues
-  }, /*#__PURE__*/React__default.createElement(ProductContext.Provider, {
-    value: _extends({}, props)
-  }, /*#__PURE__*/React__default.createElement(StyledCardProductContainer, {
-    onClick: function onClick(e) {
-      return onProductClick(item, e);
-    },
-    layout: layoutModel,
-    hoverable: showBoxShadow,
-    cover: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showQuickAction && /*#__PURE__*/React__default.createElement(QuickAction, null, c.quickAction), /*#__PURE__*/React__default.createElement(Image, {
-      onClick: function onClick(e) {
-        preventOuterClick(e);
-        onImageClick(item, e);
-      },
-      preview: false,
-      alt: "example",
-      src: imgUrl ? imgUrl : '',
-      fallback: defaultFallbackImageUrl
-    }))
-  }, /*#__PURE__*/React__default.createElement(Meta, {
-    title: title,
-    description: description
-  }), c.subComponent)));
-};
-
-var theme = {
-  colors: {
-    primary: 'red',
-    white: 'white'
-  }
-};
-
-var _excluded$2 = ["colCount", "items", "theme"];
-
-var noop$1 = function noop() {};
-
-var getLayoutModel = function getLayoutModel(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$rowSpace = _ref.rowSpace,
-      rowSpace = _ref$rowSpace === void 0 ? 8 : _ref$rowSpace,
-      _ref$colSpace = _ref.colSpace,
-      colSpace = _ref$colSpace === void 0 ? 8 : _ref$colSpace,
-      _ref$imageSize = _ref.imageSize,
-      imageSize = _ref$imageSize === void 0 ? 100 : _ref$imageSize,
-      _ref$imageBottomSpace = _ref.imageBottomSpace,
-      imageBottomSpace = _ref$imageBottomSpace === void 0 ? 15 : _ref$imageBottomSpace,
-      _ref$titleBottomSpace = _ref.titleBottomSpace,
-      titleBottomSpace = _ref$titleBottomSpace === void 0 ? 10 : _ref$titleBottomSpace,
-      _ref$titleLineClamp = _ref.titleLineClamp,
-      titleLineClamp = _ref$titleLineClamp === void 0 ? 2 : _ref$titleLineClamp,
-      _ref$detailBottomSpac = _ref.detailBottomSpace,
-      detailBottomSpace = _ref$detailBottomSpac === void 0 ? 0 : _ref$detailBottomSpac,
-      _ref$showBoxShadow = _ref.showBoxShadow,
-      showBoxShadow = _ref$showBoxShadow === void 0 ? true : _ref$showBoxShadow,
-      _ref$showQuickActions = _ref.showQuickActions,
-      showQuickActions = _ref$showQuickActions === void 0 ? false : _ref$showQuickActions,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? 'white' : _ref$backgroundColor,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'one' : _ref$variant;
-
-  return {
-    rowSpace: rowSpace,
-    colSpace: colSpace,
-    showBoxShadow: showBoxShadow,
-    backgroundColor: backgroundColor,
-    showQuickActions: showQuickActions,
-    variant: variant,
-    image: {
-      size: imageSize,
-      mb: imageBottomSpace
-    },
-    title: {
-      lineCamp: titleLineClamp,
-      mb: titleBottomSpace
-    },
-    detail: {
-      mb: detailBottomSpace
-    }
-  };
-};
-var defaultProps$1 = {
-  items: [],
-  layoutModel: getLayoutModel(),
-  colCount: 3,
-  onLoginClick: noop$1,
-  onNotifyClick: noop$1,
-  addToCart: noop$1,
-  onImageClick: noop$1,
-  onProductClick: noop$1
-};
-
-var ProductSlider = function ProductSlider(props) {
-  if (props === void 0) {
-    props = {};
-  }
-
-  var newProps = _extends({}, defaultProps$1, props);
-
-  var colCount = newProps.colCount,
-      items = newProps.items,
-      theme$1 = newProps.theme,
-      restProps = _objectWithoutPropertiesLoose(newProps, _excluded$2);
-
-  var _restProps$layoutMode = restProps.layoutModel,
-      colSpace = _restProps$layoutMode.colSpace,
-      rowSpace = _restProps$layoutMode.rowSpace,
-      showBoxShadow = _restProps$layoutMode.showBoxShadow,
-      backgroundColor = _restProps$layoutMode.backgroundColor,
-      variant = _restProps$layoutMode.variant;
-
-  var commonProps = _extends({
-    variant: variant,
-    colValues: 24 / colCount,
-    showBoxShadow: showBoxShadow
-  }, restProps);
-
-  var products = items.map(function (item) {
-    return /*#__PURE__*/React__default.createElement(Product, _extends({
-      item: item
-    }, commonProps, {
-      key: item.id
-    }));
-  });
-
-  var newTheme = _extends({}, theme, {
-    colors: _extends({}, theme.colors, theme$1.colors)
-  });
-
-  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: newTheme
-  }, /*#__PURE__*/React__default.createElement(Row, {
-    gutter: [colSpace, rowSpace],
-    style: {
-      background: backgroundColor
-    }
-  }, products));
-};
-
-var ProductHelper = /*#__PURE__*/function () {
-  function ProductHelper() {
-    this.setupMap();
-  }
-
-  var _proto = ProductHelper.prototype;
-
-  _proto.setupMap = function setupMap() {
-    this.map = new Map();
-    this.map.set(Breakpoint.xs, 1);
-    this.map.set(Breakpoint.sm, 2);
-    this.map.set(Breakpoint.md, 3);
-    this.map.set(Breakpoint.lg, 4);
-    this.map.set(Breakpoint.xl, 4);
-    this.map.set(Breakpoint.xxl, 6);
-  };
-
-  _proto.productListToShow = function productListToShow(breakpoint) {
-    return this.map.get(breakpoint);
-  };
-
-  return ProductHelper;
-}();
-
-var _templateObject$6;
-
-var newTheme = _extends({}, theme, {
-  colors: _extends({}, theme.colors)
-});
-
-var ExpandMore = styled(IconButton)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  transform: ", ";\n  margin-left: 'auto';\n"])), function (props) {
-  return props.expand ? 'rotate(180deg)' : 'rotate(0deg)';
-});
-
-var TestCard = function TestCard(props) {
-  var _React$useState = React__default.useState(false),
-      expanded = _React$useState[0],
-      setExpanded = _React$useState[1];
-
-  var handleExpandClick = function handleExpandClick() {
-    setExpanded(!expanded);
-  };
-
-  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: newTheme
-  }, /*#__PURE__*/React__default.createElement(Card$1, {
-    sx: {
-      maxWidth: 345
-    }
-  }, /*#__PURE__*/React__default.createElement(CardHeader, {
-    avatar: /*#__PURE__*/React__default.createElement(Avatar, {
-      sx: {
-        bgcolor: 'red'
-      },
-      "aria-label": "recipe"
-    }, "R"),
-    action: /*#__PURE__*/React__default.createElement(IconButton, {
-      "aria-label": "settings"
-    }, /*#__PURE__*/React__default.createElement(MoreVertIcon, null)),
-    title: "Shrimp and Chorizo Paella",
-    subheader: "September 14, 2016"
-  }), /*#__PURE__*/React__default.createElement(CardMedia, {
-    component: "img",
-    height: "194",
-    image: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
-    alt: "Paella dish"
-  }), /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "body2",
-    color: "text.secondary"
-  }, "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.")), /*#__PURE__*/React__default.createElement(CardActions, {
-    disableSpacing: true
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "add to favorites"
-  }, /*#__PURE__*/React__default.createElement(FavoriteIcon, null)), /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "share"
-  }, /*#__PURE__*/React__default.createElement(ShareIcon, null)), /*#__PURE__*/React__default.createElement(ExpandMore, {
-    expand: expanded,
-    onClick: handleExpandClick,
-    "aria-expanded": expanded,
-    "aria-label": "show more"
-  }, /*#__PURE__*/React__default.createElement(ExpandMoreIcon, null))), /*#__PURE__*/React__default.createElement(Collapse, {
-    "in": expanded,
-    timeout: "auto",
-    unmountOnExit: true
-  }, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(Typography, {
-    paragraph: true
-  }, "Method:"), /*#__PURE__*/React__default.createElement(Typography, {
-    paragraph: true
-  }, "Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 minutes."), /*#__PURE__*/React__default.createElement(Typography, {
-    paragraph: true
-  }, "Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken and chorizo in the pan. Add piment\xF3n, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil."), /*#__PURE__*/React__default.createElement(Typography, {
-    paragraph: true
-  }, "Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook again without stirring, until mussels have opened and rice is just tender, 5 to 7 minutes more. (Discard any mussels that don't open.)"), /*#__PURE__*/React__default.createElement(Typography, null, "Set aside off of the heat to let rest for 10 minutes, and then serve.")))));
-};
-
-var _templateObject$7, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1;
-var CartDrawerContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  height: 100%;\n  font-family: ", ";\n  /* padding: 1em;\n  padding-top: 0rem; */\n  position: relative;\n  /* min-width: 100%; */\n  min-height: 100vh;\n  max-height: 100vh;\n  overflow-y: auto;\n  /* background-color: grey; */\n  /* border: 1px solid; */\n"])), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var CartDrawerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  height: 100%;\n  font-family: ", ";\n  /* padding: 1em;\n  padding-top: 0rem; */\n  position: relative;\n  /* min-width: 100%; */\n  min-height: 100vh;\n  max-height: 100vh;\n  overflow-y: auto;\n  /* background-color: grey; */\n  /* border: 1px solid; */\n"])), function (props) {
   return props.maxWidth || '650px';
 }, function (props) {
   return props.fontFamily;
 });
-var CartDrawerBar = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: sticky;\n  box-sizing: border-box;\n  top: 0;\n  left: -1em;\n  padding: 1em;\n  height: 4.6rem;\n  font-size: 1.6rem;\n  background-color: white;\n  font-weight: bold;\n  padding-left: 1rem;\n  .icon {\n    cursor: pointer;\n    font-size: 22px;\n  }\n  @media only screen and (max-width: 640px) {\n    font-size: 1.2rem;\n    height: 4rem;\n  }\n"])));
-var CartDrawerProductContainer = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: max-content;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  /* height: 900px; */\n  padding: 1rem;\n  min-height: 74vh;\n  opacity: ", ";\n  @media only screen and (max-width: 748px) {\n    min-height: 75vh;\n  }\n  /* background-color: red; */\n"])), function (props) {
+var CartDrawerBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: sticky;\n  box-sizing: border-box;\n  top: 0;\n  left: -1em;\n  padding: 1em;\n  height: 4.6rem;\n  font-size: 1.6rem;\n  background-color: white;\n  font-weight: bold;\n  padding-left: 1rem;\n  z-index: 2;\n  .icon {\n    cursor: pointer;\n    font-size: 22px;\n  }\n  @media only screen and (max-width: 640px) {\n    font-size: 1.2rem;\n    height: 4rem;\n  }\n"])));
+var CartDrawerProductContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: max-content;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  /* height: 900px; */\n  padding: 1rem;\n  min-height: 74vh;\n  opacity: ", ";\n  @media only screen and (max-width: 748px) {\n    min-height: 75vh;\n  }\n  /* background-color: red; */\n"])), function (props) {
   return props.opacity;
 });
-var CartDrawerBottomSection = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* height: 8rem; */\n  background-color: white;\n  box-shadow: 3px -2px 10px #b1b1b1;\n  display: flex;\n  flex-direction: column;\n  min-height: 7rem;\n  position: sticky;\n  bottom: 0;\n  /* padding-bottom: 0.5rem; */\n\n  /* left: 0; */\n  align-items: center;\n  .row {\n    width: 100%;\n    padding: 0rem 1rem;\n    padding-top: 0.3rem;\n    /* padding-left: 1rem; */\n    h5 {\n      font-weight: bold;\n      font-size: 1.1rem;\n      span {\n        font-weight: 400;\n        padding-left: 0.5rem;\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    min-height: 6rem;\n    .row h5 {\n      font-size: 0.8rem;\n    }\n  }\n"])));
-var CartDrawerOutlinedButton = styled.button(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  height: 3.55rem;\n  border: 2px solid;\n  border-radius: 1rem;\n  display: grid;\n  place-items: center;\n  font-weight: 500;\n  font-size: 1rem;\n  transition: 0.5s;\n  outline: none;\n  text-transform: capitalize;\n  border-color: ", ";\n  color: ", ";\n  text-transform: capitalize;\n  margin: 0.6rem 0;\n  cursor: pointer;\n  background: white;\n  &:hover,\n  &:focus {\n    opacity: 0.8;\n    letter-spacing: 1px;\n    outline: none;\n  }\n  @media only screen and (max-width: 640px) {\n    height: 2.9rem;\n  }\n  @media only screen and (max-width: 340px) {\n    height: 2.2rem;\n    margin: 0.3rem 0;\n  }\n"])), function (props) {
+var CartDrawerBottomSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* height: 8rem; */\n  background-color: white;\n  box-shadow: 3px -2px 10px #b1b1b1;\n  display: flex;\n  flex-direction: column;\n  min-height: 7rem;\n  position: sticky;\n  bottom: 0;\n  /* padding-bottom: 0.5rem; */\n\n  /* left: 0; */\n  align-items: center;\n  .row {\n    width: 100%;\n    padding: 0rem 1rem;\n    padding-top: 1rem;\n    /* padding-left: 1rem; */\n    h5 {\n      font-weight: bold;\n      font-size: 1.1rem;\n      span {\n        font-weight: 400;\n        padding-left: 0.5rem;\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    min-height: 6rem;\n    .row h5 {\n      font-size: 0.8rem;\n    }\n  }\n"])));
+var CartDrawerOutlinedButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  height: 3.55rem;\n  border: 2px solid;\n  border-radius: 1rem;\n  display: grid;\n  place-items: center;\n  font-weight: 500;\n  font-size: 1rem;\n  transition: 0.5s;\n  outline: none;\n  text-transform: capitalize;\n  border-color: ", ";\n  color: ", ";\n  text-transform: capitalize;\n  margin: 0.6rem 0;\n  cursor: pointer;\n  background: white;\n  &:hover,\n  &:focus {\n    opacity: 0.8;\n    letter-spacing: 1px;\n    outline: none;\n  }\n  @media only screen and (max-width: 640px) {\n    height: 2.9rem;\n  }\n  @media only screen and (max-width: 340px) {\n    height: 2.2rem;\n    margin: 0.3rem 0;\n  }\n"])), function (props) {
   return props.color || 'black';
 }, function (props) {
   return props.color || 'black';
 });
-var CartDrawerFilledButton = styled(CartDrawerOutlinedButton)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: white;\n  position: relative;\n  margin-bottom: 1rem;\n  .icon {\n    position: absolute;\n    right: 2rem;\n    margin: auto 0;\n  }\n"])), function (props) {
+var CartDrawerFilledButton = styled(CartDrawerOutlinedButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: white;\n  position: relative;\n  margin-bottom: 1rem;\n  .icon {\n    position: absolute;\n    right: 2rem;\n    margin: auto 0;\n  }\n"])), function (props) {
   return props.color || 'black';
 });
-var CartDrawerEmptyCart = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: calc(100vh - 4.6rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  h6 {\n    font-size: 1.8rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    margin: 0;\n    margin-top: 1rem;\n    color: ", ";\n  }\n  p {\n    font-size: 1.1rem;\n    text-transform: capitalize;\n    font-weight: 500;\n    /* color: darkgrey; */\n    /* color: orange; */\n  }\n  .icon {\n    font-size: 9.5rem;\n    color: darkgrey;\n    /* color: orange; */\n  }\n"])), function (props) {
+var CartDrawerEmptyCart = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: calc(100vh - 4.6rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  h6 {\n    font-size: 1.8rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    margin: 0;\n    margin-top: 1rem;\n    color: ", ";\n  }\n  p {\n    font-size: 1.1rem;\n    text-transform: capitalize;\n    font-weight: 500;\n    /* color: darkgrey; */\n    /* color: orange; */\n  }\n  .icon {\n    font-size: 9.5rem;\n    color: darkgrey;\n    /* color: orange; */\n  }\n"])), function (props) {
   return props.color || 'red';
 });
 
-var _templateObject$8, _templateObject2$4, _templateObject3$4;
-var CartDrawerProduct = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 100px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 2rem;\n  img {\n    width: 20%;\n    /* aspect-ratio: 1; */\n    object-fit: cover;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 100%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n\n      span {\n        font-size: 0.8rem;\n        color: grey;\n        text-decoration: line-through;\n        margin-right: 0.5rem;\n      }\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      max-height: 2.45rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    width: 20%;\n    height: 100%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n        /* opacity: 0.7; */\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    height: 80px;\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n      .name {\n        font-size: 0.7rem;\n        height: 1.45rem;\n      }\n    }\n  }\n"])), function (props) {
+var _templateObject$1, _templateObject2$1, _templateObject3$1;
+var CartDrawerProduct = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 100px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 2rem;\n  img {\n    width: 20%;\n    max-height: 100%;\n    /* aspect-ratio: 1; */\n    object-fit: cover;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 100%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n\n      span {\n        font-size: 0.8rem;\n        color: grey;\n        text-decoration: line-through;\n        margin-right: 0.5rem;\n      }\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      max-height: 2.45rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    width: 20%;\n    height: 100%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n        /* opacity: 0.7; */\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    height: 80px;\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n      .name {\n        font-size: 0.7rem;\n        height: 1.45rem;\n      }\n    }\n  }\n"])), function (props) {
   return props.color || 'grey';
 });
-var CartDrawerQtBox = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  height: 34px;\n  width: 82px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #333;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n\n  span {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n  }\n  @media only screen and (max-width: 640px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    /* min-height: 28px; */\n    font-size: 10px;\n  }\n  @media only screen and (max-width: 340px) {\n    min-width: 50px;\n    aspect-ratio: 1/2;\n    height: 22px;\n    font-size: 8px;\n  }\n"])));
-var CartDrawerLoader = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 30%;\n  width: 100px;\n  height: 100px;\n  display: grid;\n  place-items: center;\n"])));
+var CartDrawerQtBox = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  height: 34px;\n  width: 82px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #333;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n\n  span {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n  }\n  @media only screen and (max-width: 640px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    /* min-height: 28px; */\n    font-size: 10px;\n  }\n  @media only screen and (max-width: 340px) {\n    min-width: 50px;\n    aspect-ratio: 1/2;\n    height: 22px;\n    font-size: 8px;\n  }\n"])));
+var CartDrawerLoader = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 30%;\n  width: 100px;\n  height: 100px;\n  display: grid;\n  place-items: center;\n"])));
 
 var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   var _product$cartStandard, _product$standardPric;
@@ -2094,49 +55,53 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
       handleIncrementDecrement = _ref.handleIncrementDecrement,
       handleRemoveProduct = _ref.handleRemoveProduct,
       handleRedirect = _ref.handleRedirect,
-      imgnotfoundUrl = _ref.imgnotfoundUrl;
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      loading = _ref.loading;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
-  return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
+  return /*#__PURE__*/React.createElement(CartDrawerProduct, {
     color: color
-  }, /*#__PURE__*/React__default.createElement("img", {
+  }, /*#__PURE__*/React.createElement("img", {
     src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : imgnotfoundUrlcommon,
     alt: 'no product image available'
-  }), /*#__PURE__*/React__default.createElement(Stack, {
+  }), /*#__PURE__*/React.createElement(Stack, {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "flex-start",
     className: "middleSection"
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     title: product === null || product === void 0 ? void 0 : product.productName,
     placement: "top",
     arrow: true
-  }, /*#__PURE__*/React__default.createElement("h6", {
+  }, /*#__PURE__*/React.createElement("h6", {
     className: "name",
     onClick: function onClick() {
       return handleRedirect(product);
     }
-  }, 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, {
+  }, 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, {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "flex-end",
     className: "endSection"
-  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, {
+  }, /*#__PURE__*/React.createElement(RiDeleteBin5Line, {
     className: "icon",
     onClick: function onClick() {
+      if (loading) return;
       handleRemoveProduct(product);
     }
-  }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React.createElement(CartDrawerQtBox, null, /*#__PURE__*/React.createElement("span", {
     onClick: function onClick() {
+      if (loading) return;
       handleIncrementDecrement('decrement', product);
     }
-  }, ' ', /*#__PURE__*/React__default.createElement(AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
+  }, ' ', /*#__PURE__*/React.createElement(AiOutlineMinus, null)), ' ', /*#__PURE__*/React.createElement("span", {
     className: 'qt'
-  }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React__default.createElement("span", {
+  }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React.createElement("span", {
     onClick: function onClick() {
+      if (loading) return;
       handleIncrementDecrement('increment', product);
     }
-  }, /*#__PURE__*/React__default.createElement(AiOutlinePlus, null)))));
+  }, /*#__PURE__*/React.createElement(AiOutlinePlus, null)))));
 };
 
 var CartDrawer = function CartDrawer(_ref) {
@@ -2151,42 +116,43 @@ var CartDrawer = function CartDrawer(_ref) {
       handleClose = _ref.handleClose,
       loading = _ref.loading,
       imgnotfoundUrl = _ref.imgnotfoundUrl;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CartDrawerContainer, {
     maxWidth: maxWidth
-  }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(GrClose, {
+  }, /*#__PURE__*/React.createElement(CartDrawerBar, null, /*#__PURE__*/React.createElement("h2", null, "Your Cart"), /*#__PURE__*/React.createElement(GrClose, {
     className: "icon",
     onClick: function onClick() {
       handleClose();
     }
-  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
+  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React.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__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(PuffLoader, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(CartDrawerLoader, null, /*#__PURE__*/React.createElement(PuffLoader, {
       color: "black"
-    })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
+    })), /*#__PURE__*/React.createElement(CartDrawerProductCard, {
       product: product,
       handleRedirect: handleRedirect,
       handleIncrementDecrement: handleIncrementDecrement,
       handleRemoveProduct: handleRemoveProduct,
       color: color,
       key: i,
-      imgnotfoundUrl: imgnotfoundUrl
+      imgnotfoundUrl: imgnotfoundUrl,
+      loading: loading
     }));
-  })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
+  })) : /*#__PURE__*/React.createElement(CartDrawerEmptyCart, {
     color: color
-  }, /*#__PURE__*/React__default.createElement(BsCartX, {
+  }, /*#__PURE__*/React.createElement(BsCartX, {
     className: "icon"
-  }), /*#__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, {
+  }), /*#__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, {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
     className: "row"
-  }, /*#__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, {
+  }, /*#__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, {
     color: color,
     onClick: function onClick() {
       return handleRedirect('cart');
     }
-  }, "view cart"), /*#__PURE__*/React__default.createElement(CartDrawerFilledButton, {
+  }, "view cart"), /*#__PURE__*/React.createElement(CartDrawerFilledButton, {
     color: color,
     onClick: function onClick() {
       return handleRedirect('checkout');
@@ -2194,6 +160,21 @@ var CartDrawer = function CartDrawer(_ref) {
   }, "continue to checkout"))));
 };
 
+var Breakpoint = function Breakpoint() {};
+
+Breakpoint.xs = 'xs';
+Breakpoint.sm = 'sm';
+Breakpoint.md = 'md';
+Breakpoint.lg = 'lg';
+Breakpoint.xl = 'xl';
+Breakpoint.xxl = 'xxl';
+
+var Variant = function Variant() {};
+
+Variant.ONE = 'one';
+Variant.TWO = 'two';
+Variant.THREE = 'three';
+
 function debounce(func, wait, immediate) {
   var timeout;
   return function () {
@@ -2284,5 +265,5 @@ function useGridSize() {
   return layout;
 }
 
-export { Breakpoint, CartDrawer, Product, ProductHelper, ProductSlider, TestCard, Variant, useGridSize, useWindowSize };
+export { Breakpoint, CartDrawer, Variant, useGridSize, useWindowSize };
 //# sourceMappingURL=index.modern.js.map