@salesgenterp/ui-components 0.1.10 → 0.2.21

package/dist/index.js

@@ -1,3008 +1,54 @@
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = require('react');
-var React__default = _interopDefault(React);
-var antd = require('antd');
-var styled = require('styled-components');
-var styled__default = _interopDefault(styled);
-var Card = _interopDefault(require('@mui/material/Card'));
-var CardHeader = _interopDefault(require('@mui/material/CardHeader'));
-var CardMedia = _interopDefault(require('@mui/material/CardMedia'));
-var CardContent = _interopDefault(require('@mui/material/CardContent'));
-var CardActions = _interopDefault(require('@mui/material/CardActions'));
-var Collapse = _interopDefault(require('@mui/material/Collapse'));
-var Avatar = _interopDefault(require('@mui/material/Avatar'));
-var IconButton = _interopDefault(require('@mui/material/IconButton'));
-var Typography = _interopDefault(require('@mui/material/Typography'));
-var FavoriteIcon = _interopDefault(require('@mui/icons-material/Favorite'));
-var ShareIcon = _interopDefault(require('@mui/icons-material/Share'));
-var ExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
-var MoreVertIcon = _interopDefault(require('@mui/icons-material/MoreVert'));
-var material = require('@mui/material');
-var reactSpinners = require('react-spinners');
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.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);
-  }
-
-  strings.raw = 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;
-};
-
-function _templateObject12() {
-  var data = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n  button {\n    padding: 0;\n    margin-right: 5px;\n    text-transform: uppercase;\n  }\n"]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = _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"]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n  color: white;\n  ", ";\n"]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n  text-align: center;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  column-gap: 5px;\n\n  input {\n    width: 50px;\n  }\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _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"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-weight: 500;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-weight: bold;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  > div:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var StyledOne = styled__default.div(_templateObject());
-var StyledPrice = styled__default.div(_templateObject2(), labelPrimaryStyle);
-var StyledOutOfStock = styled__default.div(_templateObject3(), labelPrimaryStyle);
-var StyledStockBG = styled__default.div(_templateObject4());
-var StyledUpdateQty = styled__default.div(_templateObject5());
-var StyledNumberInput = styled__default(antd.Input)(_templateObject6());
-var StyledFlex = styled__default.div(_templateObject7());
-var AddToCartContainer = styled__default(StyledFlex)(_templateObject8());
-var StyledNotifyMe = styled__default(StyledFlex)(_templateObject9());
-var StyledNotifyButton = styled__default(antd.Button)(_templateObject10(), primaryButtonStyle);
-var StyledProductCounter = styled__default.div(_templateObject11(), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.primary;
-});
-var StyledLoginView = styled__default.div(_templateObject12());
-
-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 = React.useState(0),
-      qtyToBuy = _useState[0],
-      setQtyToBuy = _useState[1];
-
-  var _useState2 = React.useState(true),
-      showInput = _useState2[0],
-      setShowInput = _useState2[1];
-
-  var containerRef = React.useRef(null);
-
-  var _useContext = React.useContext(ProductContext),
-      totalQty = _useContext.item.qty;
-
-  React.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(antd.Button, {
-    onClick: increaseQty,
-    className: "increment"
-  }, "+"), showInput && /*#__PURE__*/React__default.createElement(StyledNumberInput, {
-    value: qtyToBuy,
-    onChange: onInputChange,
-    onClick: preventOuterClick
-  }), /*#__PURE__*/React__default.createElement(antd.Button, {
-    onClick: decreaseQty,
-    className: "decrement"
-  }, "-")));
-};
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_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 _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 _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) 2017 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) && arg.length) {
-				var inner = classNames.apply(null, arg);
-				if (inner) {
-					classes.push(inner);
-				}
-			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if ( module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-});
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (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 = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _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;
-}
-/**
- * Force a number between 0 and 1
- * @hidden
- */
-function clamp01(val) {
-    return Math.min(1, Math.max(0, val));
-}
-/**
- * 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.includes('.') && parseFloat(n) === 1;
-}
-/**
- * Check to see if string passed in is a percentage
- * @hidden
- */
-function isPercentage(n) {
-    return typeof n === 'string' && n.includes('%');
-}
-/**
- * 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 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,
-    };
-}
-/**
- * Converts an RGB color value to HSL.
- * *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
- * *Returns:* { h, s, l } in [0,1]
- */
-function rgbToHsl(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 s = 0;
-    var l = (max + min) / 2;
-    if (max === min) {
-        s = 0;
-        h = 0; // achromatic
-    }
-    else {
-        var d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        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, l: l };
-}
-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 an RGBA color plus alpha transparency to hex
- *
- * Assumes r, g, b are contained in the set [0, 255] and
- * a in [0, 1]. Returns a 4 or 8 character rgba hex
- */
-// eslint-disable-next-line max-params
-function rgbaToHex(r, g, b, a, allow4Char) {
-    var hex = [
-        pad2(Math.round(r).toString(16)),
-        pad2(Math.round(g).toString(16)),
-        pad2(Math.round(b).toString(16)),
-        pad2(convertDecimalToHex(a)),
-    ];
-    // Return a 4 character hex if possible
-    if (allow4Char &&
-        hex[0].startsWith(hex[0].charAt(1)) &&
-        hex[1].startsWith(hex[1].charAt(1)) &&
-        hex[2].startsWith(hex[2].charAt(1)) &&
-        hex[3].startsWith(hex[3].charAt(1))) {
-        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
-    }
-    return hex.join('');
-}
-/** Converts a decimal to a hex value */
-function convertDecimalToHex(d) {
-    return Math.round(parseFloat(d) * 255).toString(16);
-}
-/** 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);
-}
-function numberInputToObject(color) {
-    return {
-        r: color >> 16,
-        g: (color & 0xff00) >> 8,
-        b: color & 0xff,
-    };
-}
-
-// 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 = "(?:" + CSS_NUMBER + ")|(?:" + 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|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + 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 TinyColor = /** @class */ (function () {
-    function TinyColor(color, opts) {
-        if (color === void 0) { color = ''; }
-        if (opts === void 0) { opts = {}; }
-        var _a;
-        // If input is already a tinycolor, return itself
-        if (color instanceof TinyColor) {
-            // eslint-disable-next-line no-constructor-return
-            return color;
-        }
-        if (typeof color === 'number') {
-            color = numberInputToObject(color);
-        }
-        this.originalInput = color;
-        var rgb = inputToRGB(color);
-        this.originalInput = color;
-        this.r = rgb.r;
-        this.g = rgb.g;
-        this.b = rgb.b;
-        this.a = rgb.a;
-        this.roundA = Math.round(100 * this.a) / 100;
-        this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
-        this.gradientType = opts.gradientType;
-        // Don't let the range of [0,255] come back in [0,1].
-        // Potentially lose a little bit of precision here, but will fix issues where
-        // .5 gets interpreted as half of the total, instead of half of 1
-        // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-        if (this.r < 1) {
-            this.r = Math.round(this.r);
-        }
-        if (this.g < 1) {
-            this.g = Math.round(this.g);
-        }
-        if (this.b < 1) {
-            this.b = Math.round(this.b);
-        }
-        this.isValid = rgb.ok;
-    }
-    TinyColor.prototype.isDark = function () {
-        return this.getBrightness() < 128;
-    };
-    TinyColor.prototype.isLight = function () {
-        return !this.isDark();
-    };
-    /**
-     * Returns the perceived brightness of the color, from 0-255.
-     */
-    TinyColor.prototype.getBrightness = function () {
-        // http://www.w3.org/TR/AERT#color-contrast
-        var rgb = this.toRgb();
-        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
-    };
-    /**
-     * Returns the perceived luminance of a color, from 0-1.
-     */
-    TinyColor.prototype.getLuminance = function () {
-        // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-        var rgb = this.toRgb();
-        var R;
-        var G;
-        var B;
-        var RsRGB = rgb.r / 255;
-        var GsRGB = rgb.g / 255;
-        var BsRGB = rgb.b / 255;
-        if (RsRGB <= 0.03928) {
-            R = RsRGB / 12.92;
-        }
-        else {
-            // eslint-disable-next-line prefer-exponentiation-operator
-            R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-        }
-        if (GsRGB <= 0.03928) {
-            G = GsRGB / 12.92;
-        }
-        else {
-            // eslint-disable-next-line prefer-exponentiation-operator
-            G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-        }
-        if (BsRGB <= 0.03928) {
-            B = BsRGB / 12.92;
-        }
-        else {
-            // eslint-disable-next-line prefer-exponentiation-operator
-            B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
-        }
-        return 0.2126 * R + 0.7152 * G + 0.0722 * B;
-    };
-    /**
-     * Returns the alpha value of a color, from 0-1.
-     */
-    TinyColor.prototype.getAlpha = function () {
-        return this.a;
-    };
-    /**
-     * Sets the alpha value on the current color.
-     *
-     * @param alpha - The new alpha value. The accepted range is 0-1.
-     */
-    TinyColor.prototype.setAlpha = function (alpha) {
-        this.a = boundAlpha(alpha);
-        this.roundA = Math.round(100 * this.a) / 100;
-        return this;
-    };
-    /**
-     * Returns the object as a HSVA object.
-     */
-    TinyColor.prototype.toHsv = function () {
-        var hsv = rgbToHsv(this.r, this.g, this.b);
-        return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
-    };
-    /**
-     * Returns the hsva values interpolated into a string with the following format:
-     * "hsva(xxx, xxx, xxx, xx)".
-     */
-    TinyColor.prototype.toHsvString = function () {
-        var hsv = rgbToHsv(this.r, this.g, this.b);
-        var h = Math.round(hsv.h * 360);
-        var s = Math.round(hsv.s * 100);
-        var v = Math.round(hsv.v * 100);
-        return this.a === 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this.roundA + ")";
-    };
-    /**
-     * Returns the object as a HSLA object.
-     */
-    TinyColor.prototype.toHsl = function () {
-        var hsl = rgbToHsl(this.r, this.g, this.b);
-        return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
-    };
-    /**
-     * Returns the hsla values interpolated into a string with the following format:
-     * "hsla(xxx, xxx, xxx, xx)".
-     */
-    TinyColor.prototype.toHslString = function () {
-        var hsl = rgbToHsl(this.r, this.g, this.b);
-        var h = Math.round(hsl.h * 360);
-        var s = Math.round(hsl.s * 100);
-        var l = Math.round(hsl.l * 100);
-        return this.a === 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this.roundA + ")";
-    };
-    /**
-     * Returns the hex value of the color.
-     * @param allow3Char will shorten hex value to 3 char if possible
-     */
-    TinyColor.prototype.toHex = function (allow3Char) {
-        if (allow3Char === void 0) { allow3Char = false; }
-        return rgbToHex(this.r, this.g, this.b, allow3Char);
-    };
-    /**
-     * Returns the hex value of the color -with a # appened.
-     * @param allow3Char will shorten hex value to 3 char if possible
-     */
-    TinyColor.prototype.toHexString = function (allow3Char) {
-        if (allow3Char === void 0) { allow3Char = false; }
-        return '#' + this.toHex(allow3Char);
-    };
-    /**
-     * Returns the hex 8 value of the color.
-     * @param allow4Char will shorten hex value to 4 char if possible
-     */
-    TinyColor.prototype.toHex8 = function (allow4Char) {
-        if (allow4Char === void 0) { allow4Char = false; }
-        return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
-    };
-    /**
-     * Returns the hex 8 value of the color -with a # appened.
-     * @param allow4Char will shorten hex value to 4 char if possible
-     */
-    TinyColor.prototype.toHex8String = function (allow4Char) {
-        if (allow4Char === void 0) { allow4Char = false; }
-        return '#' + this.toHex8(allow4Char);
-    };
-    /**
-     * Returns the object as a RGBA object.
-     */
-    TinyColor.prototype.toRgb = function () {
-        return {
-            r: Math.round(this.r),
-            g: Math.round(this.g),
-            b: Math.round(this.b),
-            a: this.a,
-        };
-    };
-    /**
-     * Returns the RGBA values interpolated into a string with the following format:
-     * "RGBA(xxx, xxx, xxx, xx)".
-     */
-    TinyColor.prototype.toRgbString = function () {
-        var r = Math.round(this.r);
-        var g = Math.round(this.g);
-        var b = Math.round(this.b);
-        return this.a === 1 ? "rgb(" + r + ", " + g + ", " + b + ")" : "rgba(" + r + ", " + g + ", " + b + ", " + this.roundA + ")";
-    };
-    /**
-     * Returns the object as a RGBA object.
-     */
-    TinyColor.prototype.toPercentageRgb = function () {
-        var fmt = function (x) { return Math.round(bound01(x, 255) * 100) + "%"; };
-        return {
-            r: fmt(this.r),
-            g: fmt(this.g),
-            b: fmt(this.b),
-            a: this.a,
-        };
-    };
-    /**
-     * Returns the RGBA relative values interpolated into a string
-     */
-    TinyColor.prototype.toPercentageRgbString = function () {
-        var rnd = function (x) { return Math.round(bound01(x, 255) * 100); };
-        return this.a === 1
-            ? "rgb(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%)"
-            : "rgba(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%, " + this.roundA + ")";
-    };
-    /**
-     * The 'real' name of the color -if there is one.
-     */
-    TinyColor.prototype.toName = function () {
-        if (this.a === 0) {
-            return 'transparent';
-        }
-        if (this.a < 1) {
-            return false;
-        }
-        var hex = '#' + rgbToHex(this.r, this.g, this.b, false);
-        for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], value = _b[1];
-            if (hex === value) {
-                return key;
-            }
-        }
-        return false;
-    };
-    /**
-     * String representation of the color.
-     *
-     * @param format - The format to be used when displaying the string representation.
-     */
-    TinyColor.prototype.toString = function (format) {
-        var formatSet = Boolean(format);
-        format = format !== null && format !== void 0 ? format : this.format;
-        var formattedString = false;
-        var hasAlpha = this.a < 1 && this.a >= 0;
-        var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');
-        if (needsAlphaFormat) {
-            // Special case for "transparent", all other non-alpha formats
-            // will return rgba when there is transparency.
-            if (format === 'name' && this.a === 0) {
-                return this.toName();
-            }
-            return this.toRgbString();
-        }
-        if (format === 'rgb') {
-            formattedString = this.toRgbString();
-        }
-        if (format === 'prgb') {
-            formattedString = this.toPercentageRgbString();
-        }
-        if (format === 'hex' || format === 'hex6') {
-            formattedString = this.toHexString();
-        }
-        if (format === 'hex3') {
-            formattedString = this.toHexString(true);
-        }
-        if (format === 'hex4') {
-            formattedString = this.toHex8String(true);
-        }
-        if (format === 'hex8') {
-            formattedString = this.toHex8String();
-        }
-        if (format === 'name') {
-            formattedString = this.toName();
-        }
-        if (format === 'hsl') {
-            formattedString = this.toHslString();
-        }
-        if (format === 'hsv') {
-            formattedString = this.toHsvString();
-        }
-        return formattedString || this.toHexString();
-    };
-    TinyColor.prototype.toNumber = function () {
-        return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
-    };
-    TinyColor.prototype.clone = function () {
-        return new TinyColor(this.toString());
-    };
-    /**
-     * Lighten the color a given amount. Providing 100 will always return white.
-     * @param amount - valid between 1-100
-     */
-    TinyColor.prototype.lighten = function (amount) {
-        if (amount === void 0) { amount = 10; }
-        var hsl = this.toHsl();
-        hsl.l += amount / 100;
-        hsl.l = clamp01(hsl.l);
-        return new TinyColor(hsl);
-    };
-    /**
-     * Brighten the color a given amount, from 0 to 100.
-     * @param amount - valid between 1-100
-     */
-    TinyColor.prototype.brighten = function (amount) {
-        if (amount === void 0) { amount = 10; }
-        var rgb = this.toRgb();
-        rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
-        rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
-        rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
-        return new TinyColor(rgb);
-    };
-    /**
-     * Darken the color a given amount, from 0 to 100.
-     * Providing 100 will always return black.
-     * @param amount - valid between 1-100
-     */
-    TinyColor.prototype.darken = function (amount) {
-        if (amount === void 0) { amount = 10; }
-        var hsl = this.toHsl();
-        hsl.l -= amount / 100;
-        hsl.l = clamp01(hsl.l);
-        return new TinyColor(hsl);
-    };
-    /**
-     * Mix the color with pure white, from 0 to 100.
-     * Providing 0 will do nothing, providing 100 will always return white.
-     * @param amount - valid between 1-100
-     */
-    TinyColor.prototype.tint = function (amount) {
-        if (amount === void 0) { amount = 10; }
-        return this.mix('white', amount);
-    };
-    /**
-     * Mix the color with pure black, from 0 to 100.
-     * Providing 0 will do nothing, providing 100 will always return black.
-     * @param amount - valid between 1-100
-     */
-    TinyColor.prototype.shade = function (amount) {
-        if (amount === void 0) { amount = 10; }
-        return this.mix('black', amount);
-    };
-    /**
-     * Desaturate the color a given amount, from 0 to 100.
-     * Providing 100 will is the same as calling greyscale
-     * @param amount - valid between 1-100
-     */
-    TinyColor.prototype.desaturate = function (amount) {
-        if (amount === void 0) { amount = 10; }
-        var hsl = this.toHsl();
-        hsl.s -= amount / 100;
-        hsl.s = clamp01(hsl.s);
-        return new TinyColor(hsl);
-    };
-    /**
-     * Saturate the color a given amount, from 0 to 100.
-     * @param amount - valid between 1-100
-     */
-    TinyColor.prototype.saturate = function (amount) {
-        if (amount === void 0) { amount = 10; }
-        var hsl = this.toHsl();
-        hsl.s += amount / 100;
-        hsl.s = clamp01(hsl.s);
-        return new TinyColor(hsl);
-    };
-    /**
-     * Completely desaturates a color into greyscale.
-     * Same as calling `desaturate(100)`
-     */
-    TinyColor.prototype.greyscale = function () {
-        return this.desaturate(100);
-    };
-    /**
-     * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
-     * Values outside of this range will be wrapped into this range.
-     */
-    TinyColor.prototype.spin = function (amount) {
-        var hsl = this.toHsl();
-        var hue = (hsl.h + amount) % 360;
-        hsl.h = hue < 0 ? 360 + hue : hue;
-        return new TinyColor(hsl);
-    };
-    /**
-     * Mix the current color a given amount with another color, from 0 to 100.
-     * 0 means no mixing (return current color).
-     */
-    TinyColor.prototype.mix = function (color, amount) {
-        if (amount === void 0) { amount = 50; }
-        var rgb1 = this.toRgb();
-        var rgb2 = new TinyColor(color).toRgb();
-        var p = amount / 100;
-        var rgba = {
-            r: (rgb2.r - rgb1.r) * p + rgb1.r,
-            g: (rgb2.g - rgb1.g) * p + rgb1.g,
-            b: (rgb2.b - rgb1.b) * p + rgb1.b,
-            a: (rgb2.a - rgb1.a) * p + rgb1.a,
-        };
-        return new TinyColor(rgba);
-    };
-    TinyColor.prototype.analogous = function (results, slices) {
-        if (results === void 0) { results = 6; }
-        if (slices === void 0) { slices = 30; }
-        var hsl = this.toHsl();
-        var part = 360 / slices;
-        var ret = [this];
-        for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results;) {
-            hsl.h = (hsl.h + part) % 360;
-            ret.push(new TinyColor(hsl));
-        }
-        return ret;
-    };
-    /**
-     * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
-     */
-    TinyColor.prototype.complement = function () {
-        var hsl = this.toHsl();
-        hsl.h = (hsl.h + 180) % 360;
-        return new TinyColor(hsl);
-    };
-    TinyColor.prototype.monochromatic = function (results) {
-        if (results === void 0) { results = 6; }
-        var hsv = this.toHsv();
-        var h = hsv.h;
-        var s = hsv.s;
-        var v = hsv.v;
-        var res = [];
-        var modification = 1 / results;
-        while (results--) {
-            res.push(new TinyColor({ h: h, s: s, v: v }));
-            v = (v + modification) % 1;
-        }
-        return res;
-    };
-    TinyColor.prototype.splitcomplement = function () {
-        var hsl = this.toHsl();
-        var h = hsl.h;
-        return [
-            this,
-            new TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
-            new TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }),
-        ];
-    };
-    /**
-     * Compute how the color would appear on a background
-     */
-    TinyColor.prototype.onBackground = function (background) {
-        var fg = this.toRgb();
-        var bg = new TinyColor(background).toRgb();
-        return new TinyColor({
-            r: bg.r + (fg.r - bg.r) * fg.a,
-            g: bg.g + (fg.g - bg.g) * fg.a,
-            b: bg.b + (fg.b - bg.b) * fg.a,
-        });
-    };
-    /**
-     * Alias for `polyad(3)`
-     */
-    TinyColor.prototype.triad = function () {
-        return this.polyad(3);
-    };
-    /**
-     * Alias for `polyad(4)`
-     */
-    TinyColor.prototype.tetrad = function () {
-        return this.polyad(4);
-    };
-    /**
-     * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
-     * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
-     */
-    TinyColor.prototype.polyad = function (n) {
-        var hsl = this.toHsl();
-        var h = hsl.h;
-        var result = [this];
-        var increment = 360 / n;
-        for (var i = 1; i < n; i++) {
-            result.push(new TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
-        }
-        return result;
-    };
-    /**
-     * compare color vs current color
-     */
-    TinyColor.prototype.equals = function (color) {
-        return this.toRgbString() === new TinyColor(color).toRgbString();
-    };
-    return TinyColor;
-}());
-
-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
-}];
-
-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 = new TinyColor(color);
-
-  for (var i = lightColorCount; i > 0; i -= 1) {
-    var hsv = pColor.toHsv();
-    var colorString = new TinyColor({
-      h: getHue(hsv, i, true),
-      s: getSaturation(hsv, i, true),
-      v: getValue(hsv, i, true)
-    }).toHexString();
-    patterns.push(colorString);
-  }
-
-  patterns.push(pColor.toHexString());
-
-  for (var _i = 1; _i <= darkColorCount; _i += 1) {
-    var _hsv = pColor.toHsv();
-
-    var _colorString = new TinyColor({
-      h: getHue(_hsv, _i),
-      s: getSaturation(_hsv, _i),
-      v: getValue(_hsv, _i)
-    }).toHexString();
-
-    patterns.push(_colorString);
-  } // dark theme patterns
-
-
-  if (opts.theme === 'dark') {
-    return darkColorMap.map(function (_ref) {
-      var index = _ref.index,
-          opacity = _ref.opacity;
-      var darkColorString = new TinyColor(opts.backgroundColor || '#141414').mix(patterns[index], opacity * 100).toHexString();
-      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 */
-
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
-    }
-
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
-
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
-
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
-    }
-
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
-    } else {
-        styleElement.textContent += css;
-    }
-
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
-
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
-
-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 cssInjectedFlag = false;
-var useInsertStyles = function useInsertStyles() {
-  var styleStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : iconStyles;
-  React.useEffect(function () {
-    if (!cssInjectedFlag) {
-      insertCss_2(styleStr, {
-        prepend: true
-      });
-      cssInjectedFlag = true;
-    }
-  }, []);
-};
-
-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, ["icon", "className", "onClick", "style", "primaryColor", "secondaryColor"]);
-
-  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];
-}
-
-// should move it to antd main repo?
-
-setTwoToneColor('#1890ff');
-var Icon = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  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, ["className", "icon", "spin", "rotate", "tabIndex", "onClick", "twoToneColor"]);
-
-  var classString = classnames('anticon', _defineProperty({}, "anticon-".concat(icon.name), Boolean(icon.name)), {
-    'anticon-spin': !!spin || icon.name === 'loading'
-  }, 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__*/React.createElement("span", Object.assign({
-    role: "img",
-    "aria-label": icon.name
-  }, restProps, {
-    ref: ref,
-    tabIndex: iconTabIndex,
-    onClick: onClick,
-    className: classString
-  }), /*#__PURE__*/React.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" };
-
-// GENERATE BY ./scripts/generate.ts
-
-var BellOutlined$1 = function BellOutlined$1(props, ref) {
-  return /*#__PURE__*/React.createElement(Icon, Object.assign({}, props, {
-    ref: ref,
-    icon: BellOutlined
-  }));
-};
-
-BellOutlined$1.displayName = 'BellOutlined';
-var BellOutlined$2 = /*#__PURE__*/React.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" };
-
-// GENERATE BY ./scripts/generate.ts
-
-var ShoppingCartOutlined$1 = function ShoppingCartOutlined$1(props, ref) {
-  return /*#__PURE__*/React.createElement(Icon, Object.assign({}, props, {
-    ref: ref,
-    icon: ShoppingCartOutlined
-  }));
-};
-
-ShoppingCartOutlined$1.displayName = 'ShoppingCartOutlined';
-var ShoppingCartOutlined$2 = /*#__PURE__*/React.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 = React.useState(''),
-      email = _useState[0],
-      setEmail = _useState[1];
-
-  var _useContext = React.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(antd.Input, {
-    onChange: onInputChange,
-    onClick: preventOuterClick
-  }), /*#__PURE__*/React__default.createElement(NotifyMeButton, {
-    onClick: onNotifyPressed
-  }));
-};
-
-function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var StyledAddToCartIconButton = styled__default(antd.Button)(_templateObject$1(), 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(antd.Button, {
-    type: "link",
-    danger: true,
-    onClick: onClick
-  }, "Login"), "to view price.");
-};
-
-var One = function One() {
-  var _useContext = React.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 = React.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());
-};
-
-function _templateObject4$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  height: 35px;\n\n  ", "\n"]);
-
-  _templateObject4$1 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  height: 35px;\n  text-transform: uppercase;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);
-
-  _templateObject3$1 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  font-size: 20px;\n  margin-bottom: 10px;\n"]);
-
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$2() {
-  var data = _taggedTemplateLiteralLoose(["\n  min-height: 60px;\n"]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var StyledTwo = styled__default.div(_templateObject$2());
-var StyledPrice$1 = styled__default.div(_templateObject2$1());
-var StyledOutOfStock$1 = styled__default.div(_templateObject3$1());
-var StyledAddToCartButton = styled__default(antd.Button)(_templateObject4$1(), primaryButtonStyle);
-
-function Two() {
-  var _useContext = React.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"));
-}
-
-function _templateObject5$1() {
-  var data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject5$1 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$2() {
-  var data = _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"]);
-
-  _templateObject4$2 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$2() {
-  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  ", ";\n"]);
-
-  _templateObject3$2 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$2() {
-  var data = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  ", ";\n"]);
-
-  _templateObject2$2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$3() {
-  var data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var StyledThree = styled__default.div(_templateObject$3());
-var StyledPrice$2 = styled__default.div(_templateObject2$2(), labelPrimaryStyle);
-var StyledAddToCartButton$1 = styled__default(antd.Button)(_templateObject3$2(), primaryButtonStyle);
-var StyledPriceQtyContainer = styled__default(StyledFlex)(_templateObject4$2());
-var StyledQty = styled__default.div(_templateObject5$1());
-
-function Three() {
-  var _useContext = React.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 = React.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"));
-}
-
-function _templateObject$4() {
-  var data = _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"]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-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__default(antd.Card)(_templateObject$4(), imageLayout, titleLayout, descriptionLayout);
-
-var OneQuickAction = function OneQuickAction() {
-  var _useContext = React.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
-      });
-    }
-  }));
-};
-
-function _templateObject$5() {
-  var data = _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"]);
-
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var StyledQuickActions = styled__default.div(_templateObject$5());
-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 = antd.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(antd.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(antd.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 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, ["colCount", "items", "theme"]);
-
-  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(styled.ThemeProvider, {
-    theme: newTheme
-  }, /*#__PURE__*/React__default.createElement(antd.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;
-}();
-
-function _templateObject$6() {
-  var data = _taggedTemplateLiteralLoose(["\n  transform: ", ";\n  margin-left: 'auto';\n"]);
-
-  _templateObject$6 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var newTheme = _extends({}, theme, {
-  colors: _extends({}, theme.colors)
-});
-
-var ExpandMore = styled__default(IconButton)(_templateObject$6(), 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(styled.ThemeProvider, {
-    theme: newTheme
-  }, /*#__PURE__*/React__default.createElement(Card, {
-    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 DefaultContext = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
-};
-var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
-
-var __assign = undefined && undefined.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
-var __rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+var material = require('@mui/material');
+var React = require('react');
+var React__default = _interopDefault(React);
+var gr = require('react-icons/gr');
+require('react-icons/gi');
+var bs = require('react-icons/bs');
+var styled = _interopDefault(require('styled-components'));
+var ri = require('react-icons/ri');
+var ai = require('react-icons/ai');
+var reactSpinners = require('react-spinners');
 
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
-  return t;
-};
-
-function Tree2Element(tree) {
-  return tree && tree.map(function (node, i) {
-    return React__default.createElement(node.tag, __assign({
-      key: i
-    }, node.attr), Tree2Element(node.child));
-  });
-}
-
-function GenIcon(data) {
-  return function (props) {
-    return React__default.createElement(IconBase$1, __assign({
-      attr: __assign({}, data.attr)
-    }, props), Tree2Element(data.child));
-  };
-}
-function IconBase$1(props) {
-  var elem = function (conf) {
-    var attr = props.attr,
-        size = props.size,
-        title = props.title,
-        svgProps = __rest(props, ["attr", "size", "title"]);
-
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + ' ' : '') + props.className;
-    return React__default.createElement("svg", __assign({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className: className,
-      style: __assign(__assign({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && React__default.createElement("title", null, title), props.children);
-  };
-
-  return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
-    return elem(conf);
-  }) : elem(DefaultContext);
-}
-
-// THIS FILE IS AUTO GENERATED
-function GrClose (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","stroke":"#000","strokeWidth":"2","d":"M3,3 L21,21 M3,21 L21,3"}}]})(props);
-}
-
-// THIS FILE IS AUTO GENERATED
-function BsCartX (props) {
-  return GenIcon({"tag":"svg","attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M7.354 5.646a.5.5 0 1 0-.708.708L7.793 7.5 6.646 8.646a.5.5 0 1 0 .708.708L8.5 8.207l1.146 1.147a.5.5 0 0 0 .708-.708L9.207 7.5l1.147-1.146a.5.5 0 0 0-.708-.708L8.5 6.793 7.354 5.646z"}},{"tag":"path","attr":{"d":"M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"}}]})(props);
-}
-
-function _templateObject7$1() {
-  var data = _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"]);
-
-  _templateObject7$1 = function _templateObject7() {
-    return data;
-  };
 
-  return data;
-}
-
-function _templateObject6$1() {
-  var data = _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"]);
-
-  _templateObject6$1 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5$2() {
-  var data = _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"]);
-
-  _templateObject5$2 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$3() {
-  var data = _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"]);
-
-  _templateObject4$3 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$3() {
-  var data = _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"]);
-
-  _templateObject3$3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$3() {
-  var data = _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"]);
-
-  _templateObject2$3 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
+  strings.raw = raw;
+  return strings;
 }
 
-function _templateObject$7() {
-  var data = _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"]);
-
-  _templateObject$7 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var CartDrawerContainer = styled__default.div(_templateObject$7(), 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__default.div(_templateObject2$3());
-var CartDrawerProductContainer = styled__default.div(_templateObject3$3(), 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__default.div(_templateObject4$3());
-var CartDrawerOutlinedButton = styled__default.button(_templateObject5$2(), 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__default(CartDrawerOutlinedButton)(_templateObject6$1(), 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__default.div(_templateObject7$1(), 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';
 });
 
-// THIS FILE IS AUTO GENERATED
-function RiDeleteBin5Line (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"g","attr":{},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M4 8h16v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8zm2 2v10h12V10H6zm3 2h2v6H9v-6zm4 0h2v6h-2v-6zM7 5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v2h5v2H2V5h5zm2-1v1h6V4H9z"}}]}]})(props);
-}
-
-// THIS FILE IS AUTO GENERATED
-function AiOutlineMinus (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 1024 1024"},"child":[{"tag":"path","attr":{"d":"M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"}}]})(props);
-}function AiOutlinePlus (props) {
-  return GenIcon({"tag":"svg","attr":{"t":"1551322312294","style":"","viewBox":"0 0 1024 1024","version":"1.1"},"child":[{"tag":"defs","attr":{},"child":[]},{"tag":"path","attr":{"d":"M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"}},{"tag":"path","attr":{"d":"M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z"}}]})(props);
-}
-
-function _templateObject3$4() {
-  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 30%;\n  width: 100px;\n  height: 100px;\n  display: grid;\n  place-items: center;\n"]);
-
-  _templateObject3$4 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$4() {
-  var data = _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"]);
-
-  _templateObject2$4 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$8() {
-  var data = _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"]);
-
-  _templateObject$8 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var CartDrawerProduct = styled__default.div(_templateObject$8(), 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__default.div(_templateObject2$4());
-var CartDrawerLoader = styled__default.div(_templateObject3$4());
+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;
@@ -3039,7 +85,7 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
     justifyContent: "space-between",
     alignItems: "flex-end",
     className: "endSection"
-  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, {
+  }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, {
     className: "icon",
     onClick: function onClick() {
       handleRemoveProduct(product);
@@ -3048,13 +94,13 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
     onClick: function onClick() {
       handleIncrementDecrement('decrement', product);
     }
-  }, ' ', /*#__PURE__*/React__default.createElement(AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
+  }, ' ', /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
     className: 'qt'
   }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
       handleIncrementDecrement('increment', product);
     }
-  }, /*#__PURE__*/React__default.createElement(AiOutlinePlus, null)))));
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))));
 };
 
 var CartDrawer = function CartDrawer(_ref) {
@@ -3071,7 +117,7 @@ var CartDrawer = function CartDrawer(_ref) {
       imgnotfoundUrl = _ref.imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.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__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(gr.GrClose, {
     className: "icon",
     onClick: function onClick() {
       handleClose();
@@ -3092,7 +138,7 @@ var CartDrawer = function CartDrawer(_ref) {
     }));
   })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
     color: color
-  }, /*#__PURE__*/React__default.createElement(BsCartX, {
+  }, /*#__PURE__*/React__default.createElement(bs.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(material.Stack, {
     flexDirection: "row",
@@ -3112,6 +158,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 () {
@@ -3204,10 +265,6 @@ function useGridSize() {
 
 exports.Breakpoint = Breakpoint;
 exports.CartDrawer = CartDrawer;
-exports.Product = Product;
-exports.ProductHelper = ProductHelper;
-exports.ProductSlider = ProductSlider;
-exports.TestCard = TestCard;
 exports.Variant = Variant;
 exports.useGridSize = useGridSize;
 exports.useWindowSize = useWindowSize;