@trafilea/afrodita-components 2.3.0 → 2.3.4

package/build/index.esm.js

@@ -1319,8 +1319,8 @@ var createCache = function createCache(options) {
   return cache;
 };
 
-function _extends$4() {
-  _extends$4 = Object.assign || function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1334,30 +1334,11 @@ function _extends$4() {
     return target;
   };
 
-  return _extends$4.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 var reactIs$1 = {exports: {}};
 
 var reactIs_production_min = {};
@@ -2045,7 +2026,7 @@ var serializeStyles$1 = function serializeStyles(args, registered, mergedProps)
 };
 
 var isBrowser$4 = typeof document !== 'undefined';
-var hasOwnProperty = Object.prototype.hasOwnProperty;
+var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 
 var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
@@ -2111,7 +2092,7 @@ var getTheme = function getTheme(outerTheme, theme) {
     throw new Error('[ThemeProvider] Please make your theme prop a plain object');
   }
 
-  return _extends$4({}, outerTheme, theme);
+  return _extends$1({}, outerTheme, theme);
 };
 
 var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
@@ -2148,7 +2129,7 @@ var createEmotionProps = function createEmotionProps(type, props) {
   var newProps = {};
 
   for (var key in props) {
-    if (hasOwnProperty.call(props, key)) {
+    if (hasOwnProperty$1.call(props, key)) {
       newProps[key] = props[key];
     }
   }
@@ -2209,7 +2190,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   var newProps = {};
 
   for (var key in props) {
-    if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
+    if (hasOwnProperty$1.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
       newProps[key] = props[key];
     }
   }
@@ -2434,7 +2415,7 @@ function css() {
   return serializeStyles$1(args);
 }
 
-var classnames$1 = function classnames(args) {
+var classnames$2 = function classnames(args) {
   var len = args.length;
   var i = 0;
   var cls = '';
@@ -2538,7 +2519,7 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
       args[_key2] = arguments[_key2];
     }
 
-    return merge(cache.registered, css, classnames$1(args));
+    return merge(cache.registered, css, classnames$2(args));
   };
 
   var content = {
@@ -2626,13 +2607,25 @@ var Question = function (_a) {
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 22, viewBoxY: 22, title: "Question" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22ZM9.75807 15.9678C9.75807 15.2819 10.3141 14.7258 11 14.7258C11.6859 14.7258 12.2419 15.2819 12.2419 15.9678C12.2419 16.6537 11.6859 17.2097 11 17.2097C10.3141 17.2097 9.75807 16.6537 9.75807 15.9678ZM10.6305 13.6613H11.3402C11.6341 13.6613 11.8725 13.423 11.8725 13.1291V13.1122C11.8725 12.2512 12.5546 11.8053 13.3108 11.3109C14.2517 10.6958 15.3073 10.0058 15.3073 8.34809C15.3073 6.10995 13.306 4.79034 10.9854 4.79034C8.99703 4.79034 7.88 5.56717 6.93852 6.77482C6.75157 7.01461 6.80634 7.36288 7.05584 7.53671L7.6384 7.94255C7.86878 8.10307 8.18573 8.05805 8.35907 7.83717C9.022 6.99252 9.69269 6.56454 10.9854 6.56454C12.7453 6.56454 13.5331 7.46028 13.5331 8.34809C13.5331 9.20467 12.865 9.62547 12.1181 10.0959C11.1715 10.6922 10.0983 11.3681 10.0983 13.1122V13.1291C10.0983 13.423 10.3366 13.6613 10.6305 13.6613Z", fill: fill }, void 0) }), void 0));
 };
 
+var Close = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 9, viewBoxY: 8, title: "close" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.2123 0.287701C0.919406 0.580594 0.919406 1.05547 1.2123 1.34836L3.86397 4.00003L1.21233 6.65167C0.919437 6.94456 0.919437 7.41944 1.21233 7.71233C1.50522 8.00522 1.9801 8.00522 2.27299 7.71233L4.92463 5.06069L7.57626 7.71232C7.86915 8.00522 8.34403 8.00522 8.63692 7.71232C8.92981 7.41943 8.92981 6.94456 8.63692 6.65166L5.98529 4.00003L8.63695 1.34837C8.92984 1.05548 8.92984 0.580602 8.63695 0.287709C8.34406 -0.00518426 7.86918 -0.00518393 7.57629 0.287709L4.92463 2.93937L2.27296 0.287701C1.98007 -0.00519271 1.50519 -0.00519269 1.2123 0.287701Z", fill: fill }, void 0) }), void 0));
+};
+
+var Trash = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 20, title: "trash" }, { children: jsx$1("path", { d: "M10.5714 16.875H11.1429C11.2186 16.875 11.2913 16.8421 11.3449 16.7835C11.3985 16.7249 11.4286 16.6454 11.4286 16.5625V5.9375C11.4286 5.85462 11.3985 5.77513 11.3449 5.71653C11.2913 5.65792 11.2186 5.625 11.1429 5.625H10.5714C10.4957 5.625 10.423 5.65792 10.3694 5.71653C10.3158 5.77513 10.2857 5.85462 10.2857 5.9375V16.5625C10.2857 16.6454 10.3158 16.7249 10.3694 16.7835C10.423 16.8421 10.4957 16.875 10.5714 16.875ZM4.85714 16.875H5.42857C5.50435 16.875 5.57702 16.8421 5.6306 16.7835C5.68418 16.7249 5.71429 16.6454 5.71429 16.5625V5.9375C5.71429 5.85462 5.68418 5.77513 5.6306 5.71653C5.57702 5.65792 5.50435 5.625 5.42857 5.625H4.85714C4.78137 5.625 4.70869 5.65792 4.65511 5.71653C4.60153 5.77513 4.57143 5.85462 4.57143 5.9375V16.5625C4.57143 16.6454 4.60153 16.7249 4.65511 16.7835C4.70869 16.8421 4.78137 16.875 4.85714 16.875ZM15.7143 2.5H12L10.8 0.75C10.6403 0.517132 10.4333 0.328126 10.1952 0.197949C9.95719 0.067772 9.69471 0 9.42857 0L6.57143 0C6.30529 0 6.04282 0.067772 5.80478 0.197949C5.56674 0.328126 5.35968 0.517132 5.2 0.75L4 2.5H0.285714C0.209938 2.5 0.137266 2.53292 0.0836838 2.59153C0.030102 2.65013 0 2.72962 0 2.8125L0 3.4375C0 3.52038 0.030102 3.59987 0.0836838 3.65847C0.137266 3.71708 0.209938 3.75 0.285714 3.75H1.14286V18.125C1.14286 18.6223 1.32347 19.0992 1.64496 19.4508C1.96645 19.8025 2.40249 20 2.85714 20H13.1429C13.5975 20 14.0336 19.8025 14.355 19.4508C14.6765 19.0992 14.8571 18.6223 14.8571 18.125V3.75H15.7143C15.7901 3.75 15.8627 3.71708 15.9163 3.65847C15.9699 3.59987 16 3.52038 16 3.4375V2.8125C16 2.72962 15.9699 2.65013 15.9163 2.59153C15.8627 2.53292 15.7901 2.5 15.7143 2.5ZM6.11429 1.5C6.1677 1.4226 6.23676 1.35976 6.31607 1.31639C6.39537 1.27302 6.48277 1.2503 6.57143 1.25H9.42857C9.51723 1.2503 9.60463 1.27302 9.68394 1.31639C9.76324 1.35976 9.8323 1.4226 9.88571 1.5L10.5714 2.5H5.42857L6.11429 1.5ZM13.7143 18.125C13.7143 18.2908 13.6541 18.4497 13.5469 18.5669C13.4398 18.6842 13.2944 18.75 13.1429 18.75H2.85714C2.70559 18.75 2.56025 18.6842 2.45308 18.5669C2.34592 18.4497 2.28571 18.2908 2.28571 18.125V3.75H13.7143V18.125ZM7.71429 16.875H8.28572C8.36149 16.875 8.43416 16.8421 8.48775 16.7835C8.54133 16.7249 8.57143 16.6454 8.57143 16.5625V5.9375C8.57143 5.85462 8.54133 5.77513 8.48775 5.71653C8.43416 5.65792 8.36149 5.625 8.28572 5.625H7.71429C7.63851 5.625 7.56584 5.65792 7.51226 5.71653C7.45867 5.77513 7.42857 5.85462 7.42857 5.9375V16.5625C7.42857 16.6454 7.45867 16.7249 7.51226 16.7835C7.56584 16.8421 7.63851 16.875 7.71429 16.875Z", fill: fill }, void 0) }), void 0));
+};
+
 var Actions = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Check: Check,
     ClearLight: ClearLight,
     LightExclamation: LightExclamation,
     LightCheck: LightCheck,
-    Question: Question
+    Question: Question,
+    Close: Close,
+    Trash: Trash
 });
 
 var FitPredictor$1 = function (_a) {
@@ -2672,6 +2665,11 @@ var ChevronRight = function (_a) {
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right" }, { children: jsx$1("g", __assign({ opacity: opacity }, { children: jsx$1("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
 };
 
+var ChevronRightVariant = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: "chevron right variant" }, { children: jsx$1("path", { d: "M17.635 6.24942C17.3066 5.91686 16.8139 5.91686 16.4854 6.24942C16.1569 6.58199 16.1569 7.08083 16.4854 7.41339L20.208 11.127H1.82117C1.38321 11.1824 1 11.5704 1 12.0139C1 12.4573 1.38321 12.8453 1.82117 12.8453H20.208L16.4854 16.6143C16.1569 16.9469 16.1569 17.4457 16.4854 17.7783C16.6496 17.9446 16.8686 18 17.0876 18C17.3066 18 17.5255 17.9446 17.6898 17.7783L22.781 12.6236C22.9453 12.4573 23 12.2356 23 12.0139C23 11.7921 22.8905 11.5704 22.781 11.4042L17.635 6.24942Z", fill: fill }, void 0) }), void 0));
+};
+
 var ChevronUp = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill;
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 36, viewBoxY: 20, title: "chevron up" }, { children: jsx$1("path", { d: "M0.285774 18.1586L1.89534 19.7224C2.2763 20.0925 2.89398 20.0925 3.27501 19.7224L18 5.44992L32.7251 19.7223C33.106 20.0924 33.7237 20.0924 34.1047 19.7223L35.7143 18.1585C36.0952 17.7884 36.0952 17.1883 35.7143 16.8181L18.6898 0.277592C18.3088 -0.0925308 17.6911 -0.0925308 17.3101 0.277592L0.285774 16.8181C-0.095258 17.1883 -0.095258 17.7885 0.285774 18.1586Z", fill: fill }, void 0) }), void 0));
@@ -2692,6 +2690,7 @@ var Arrows = /*#__PURE__*/Object.freeze({
     ChevronDown: ChevronDown,
     ChevronLeft: ChevronLeft,
     ChevronRight: ChevronRight,
+    ChevronRightVariant: ChevronRightVariant,
     ChevronUp: ChevronUp,
     ChevronUpSolid: ChevronUpSolid,
     CircleUp: CircleUp
@@ -3475,7 +3474,7 @@ var createStyled = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$4({}, options, nextOptions, {
+      return createStyled(nextTag, _extends$1({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -3519,7 +3518,7 @@ var InputValidationType;
     InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
 })(InputValidationType || (InputValidationType = {}));
 
-var Section = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
+var Section = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
     return props.type === CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
 });
 var CardHeader = function (_a) {
@@ -3530,16 +3529,16 @@ var CardFooter = function (_a) {
     var children = _a.children;
     return (jsx$1(Section, __assign({ type: CardSectionType.Footer }, { children: children }), void 0));
 };
-var templateObject_1$K;
+var templateObject_1$M;
 
-var Body = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
+var Body = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
 var CardBody = function (_a) {
     var children = _a.children;
     return jsx$1(Body, { children: children }, void 0);
 };
-var templateObject_1$J;
+var templateObject_1$L;
 
-var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"])), function (_a) {
+var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"])), function (_a) {
     var flex = _a.flex;
     return flex &&
         "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
@@ -3551,24 +3550,24 @@ var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
 });
 var Card = function (_a) {
     var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
-    return (jsx$1(Container$r, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
+    return (jsx$1(Container$t, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
 };
 var Card$1 = Object.assign(Card, {
     Header: CardHeader,
     Footer: CardFooter,
     Body: CardBody,
 });
-var templateObject_1$I;
+var templateObject_1$K;
 
 function jsx(type, props, key) {
-  if (!hasOwnProperty.call(props, 'css')) {
+  if (!hasOwnProperty$1.call(props, 'css')) {
     return jsx$1(type, props, key);
   }
 
   return jsx$1(Emotion, createEmotionProps(type, props), key);
 }
 function jsxs(type, props, key) {
-  if (!hasOwnProperty.call(props, 'css')) {
+  if (!hasOwnProperty$1.call(props, 'css')) {
     return jsxs$1(type, props, key);
   }
 
@@ -3588,7 +3587,7 @@ var BaseButton = function (_a) {
         } }, { children: [renderLeading, children, renderTrailing] }), void 0));
 };
 
-var getStylesBySize$c = function (size) {
+var getStylesBySize$d = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -3615,7 +3614,7 @@ var getStylesBySize$c = function (size) {
 var BaseCTA = function (_a) {
     var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, type = _a.type, className = _a.className;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$c(size);
+    var stylesBySize = getStylesBySize$d(size);
     return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: 600, '&:hover': {
                 color: theme.shades.white,
                 cursor: 'pointer',
@@ -3678,8 +3677,8 @@ var ButtonSecondaryOutline = function (_a) {
         }, text: text }, void 0));
 };
 
-function _extends$3() {
-  _extends$3 = Object.assign || function (target) {
+function _extends() {
+  _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -3693,7 +3692,7 @@ function _extends$3() {
     return target;
   };
 
-  return _extends$3.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$1(source, excluded) {
@@ -3832,7 +3831,7 @@ function render(_ref) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$3({}, _rest, {
+      return _render(_extends({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -4304,12 +4303,12 @@ function Description(props) {
   }, [id, context.register]);
   var passThroughProps = props;
 
-  var propsWeControl = _extends$3({}, context.props, {
+  var propsWeControl = _extends({}, context.props, {
     id: id
   });
 
   return render({
-    props: _extends$3({}, passThroughProps, propsWeControl),
+    props: _extends({}, passThroughProps, propsWeControl),
     slot: context.slot || {},
     defaultTag: DEFAULT_DESCRIPTION_TAG,
     name: context.name || 'Description'
@@ -4358,32 +4357,32 @@ var ActionTypes$2;
 var reducers$2 = (_reducers$2 = {}, _reducers$2[ActionTypes$2.ToggleDisclosure] = function (state) {
   var _match;
 
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     disclosureState: match(state.disclosureState, (_match = {}, _match[DisclosureStates.Open] = DisclosureStates.Closed, _match[DisclosureStates.Closed] = DisclosureStates.Open, _match))
   });
 }, _reducers$2[ActionTypes$2.CloseDisclosure] = function (state) {
   if (state.disclosureState === DisclosureStates.Closed) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     disclosureState: DisclosureStates.Closed
   });
 }, _reducers$2[ActionTypes$2.LinkPanel] = function (state) {
   if (state.linkedPanel === true) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     linkedPanel: true
   });
 }, _reducers$2[ActionTypes$2.UnlinkPanel] = function (state) {
   if (state.linkedPanel === false) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     linkedPanel: false
   });
 }, _reducers$2[ActionTypes$2.SetButtonId] = function (state, action) {
   if (state.buttonId === action.buttonId) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     buttonId: action.buttonId
   });
 }, _reducers$2[ActionTypes$2.SetPanelId] = function (state, action) {
   if (state.panelId === action.panelId) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     panelId: action.panelId
   });
 }, _reducers$2);
@@ -4585,7 +4584,7 @@ var Button$5 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
     onClick: handleClick
   };
   return render({
-    props: _extends$3({}, passthroughProps, propsWeControl),
+    props: _extends({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_BUTTON_TAG$1,
     name: 'Disclosure.Button'
@@ -4650,7 +4649,7 @@ var Panel$2 = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
   return React.createElement(DisclosurePanelContext.Provider, {
     value: state.panelId
   }, render({
-    props: _extends$3({}, passthroughProps, propsWeControl),
+    props: _extends({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_PANEL_TAG,
     features: PanelRenderFeatures,
@@ -4853,24 +4852,24 @@ var ActionTypes$1;
 var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.SetOrientation] = function (state, action) {
   if (state.orientation === action.orientation) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     orientation: action.orientation
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -4891,7 +4890,7 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -4904,10 +4903,10 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$3({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -4915,11 +4914,11 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -4932,7 +4931,7 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -5153,7 +5152,7 @@ var Button$4 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
     onClick: handleClick
   };
   return render({
-    props: _extends$3({}, passthroughProps, propsWeControl),
+    props: _extends({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_BUTTON_TAG,
     name: 'Listbox.Button'
@@ -5186,7 +5185,7 @@ function Label$3(props) {
     onClick: handleClick
   };
   return render({
-    props: _extends$3({}, props, propsWeControl),
+    props: _extends({}, props, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_LABEL_TAG$1,
     name: 'Listbox.Label'
@@ -5362,7 +5361,7 @@ var Options = /*#__PURE__*/forwardRefWithAs(function Options(props, ref) {
   };
   var passthroughProps = props;
   return render({
-    props: _extends$3({}, passthroughProps, propsWeControl),
+    props: _extends({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_OPTIONS_TAG,
     features: OptionsRenderFeatures,
@@ -5506,7 +5505,7 @@ function Option$2(props) {
     onMouseLeave: handleLeave
   };
   return render({
-    props: _extends$3({}, passthroughProps, propsWeControl),
+    props: _extends({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_OPTION_TAG$1,
     name: 'Listbox.Option'
@@ -5647,11 +5646,11 @@ function Label$2(props) {
     return context.register(id);
   }, [id, context.register]);
 
-  var propsWeControl = _extends$3({}, context.props, {
+  var propsWeControl = _extends({}, context.props, {
     id: id
   });
 
-  var allProps = _extends$3({}, passThroughProps, propsWeControl); // @ts-expect-error props are dynamic via context, some components will
+  var allProps = _extends({}, passThroughProps, propsWeControl); // @ts-expect-error props are dynamic via context, some components will
   //                  provide an onClick then we can delete it.
 
 
@@ -5673,7 +5672,7 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 var reducers = (_reducers = {}, _reducers[ActionTypes.RegisterOption] = function (state, action) {
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       element: action.element,
@@ -5687,7 +5686,7 @@ var reducers = (_reducers = {}, _reducers[ActionTypes.RegisterOption] = function
   });
   if (idx === -1) return state;
   options.splice(idx, 1);
-  return _extends$3({}, state, {
+  return _extends({}, state, {
     options: options
   });
 }, _reducers);
@@ -5828,7 +5827,7 @@ function RadioGroup(props) {
     }
   }, [radioGroupRef, options, triggerChange]);
   var registerOption = useCallback(function (option) {
-    dispatch(_extends$3({
+    dispatch(_extends({
       type: ActionTypes.RegisterOption
     }, option));
     return function () {
@@ -5863,7 +5862,7 @@ function RadioGroup(props) {
   }, React.createElement(RadioGroupContext.Provider, {
     value: api
   }, render({
-    props: _extends$3({}, passThroughProps, propsWeControl),
+    props: _extends({}, passThroughProps, propsWeControl),
     defaultTag: DEFAULT_RADIO_GROUP_TAG,
     name: 'RadioGroup'
   }))));
@@ -5972,7 +5971,7 @@ function Option$1(props) {
   }, React.createElement(LabelProvider, {
     name: "RadioGroup.Label"
   }, render({
-    props: _extends$3({}, passThroughProps, propsWeControl),
+    props: _extends({}, passThroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_OPTION_TAG,
     name: 'RadioGroup.Option'
@@ -5999,7 +5998,7 @@ function BaseSelectOption(_a) {
     return (jsx$1(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
 }
 
-var CustomListBox = newStyled(Listbox)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var CustomListBox = newStyled(Listbox)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function BaseSelect(_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
     return (jsx$1(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -6009,7 +6008,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
     Options: BaseSelectOptions,
     Option: BaseSelectOption,
 });
-var templateObject_1$H;
+var templateObject_1$J;
 
 var CustomButton = newStyled.button(function (_a) {
     var theme = _a.theme, wide = _a.wide;
@@ -6146,7 +6145,7 @@ function SimpleDropdown(_a) {
     return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide }, { children: selectedOptionLabel() }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
 }
 
-var getStylesBySize$b = function (size) {
+var getStylesBySize$c = function (size) {
     switch (size) {
         case ComponentSize.Medium:
             return {
@@ -6162,7 +6161,7 @@ var getStylesBySize$b = function (size) {
 var SimpleSelector = function (_a) {
     var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$b(size);
+    var stylesBySize = getStylesBySize$c(size);
     var activeStyles = active ? { fontWeight: 600 } : { fontWeight: 0 };
     return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: '0.75rem', cursor: 'pointer', '&:hover': {
                 fontWeight: 600,
@@ -6188,8 +6187,8 @@ var SelectorSecondary = function (_a) {
             } }) }, void 0));
 };
 
-var ButtonsContainer = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
-var SizeParagraph = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"], ["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"])));
+var ButtonsContainer = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
+var SizeParagraph = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"], ["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"])));
 var getInitialValue$2 = function (options, selectedValue) {
     if (selectedValue && selectedValue.disabled !== true && options.includes(selectedValue))
         return selectedValue;
@@ -6214,9 +6213,9 @@ var SizeSelector = function (_a) {
                         }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChangeHandler(size); } }, size.label));
                 }) }, void 0)] }, void 0));
 };
-var templateObject_1$G, templateObject_2$u;
+var templateObject_1$I, templateObject_2$v;
 
-var getStylesBySize$a = function (size) {
+var getStylesBySize$b = function (size) {
     switch (size) {
         case ComponentSize.Large:
         case ComponentSize.Medium:
@@ -6234,7 +6233,7 @@ var getStylesBySize$a = function (size) {
     }
 };
 var textButtonStyles$1 = function (theme, size) {
-    var stylesBySize = getStylesBySize$a(size);
+    var stylesBySize = getStylesBySize$b(size);
     return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.shades.gray550, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
             textDecorationLine: 'underline',
         }, '&:disabled': {
@@ -6243,7 +6242,7 @@ var textButtonStyles$1 = function (theme, size) {
         } });
 };
 var withContainer = function (iconFill, isLeading, Icon) {
-    return Icon && (jsx("span", __assign({ css: css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
+    return Icon && (jsx("span", __assign({ css: css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
 };
 var getIconFill = function (theme, disabled, iconColor) {
     if (disabled)
@@ -6259,18 +6258,18 @@ var TextButton = function (_a) {
     var iconFill = getIconFill(theme, disabled, iconColor);
     return (jsx(BaseButton, __assign({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
 };
-var templateObject_1$F;
+var templateObject_1$H;
 
-var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
-var P$2 = newStyled.p(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var Container$s = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
+var P$2 = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
-    return (jsxs$1(Container$q, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
+    return (jsxs$1(Container$s, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
 };
-var templateObject_1$E, templateObject_2$t, templateObject_3$j;
+var templateObject_1$G, templateObject_2$u, templateObject_3$j;
 
-var getStylesBySize$9 = function (size) {
+var getStylesBySize$a = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6298,7 +6297,7 @@ var getStylesBySize$9 = function (size) {
             };
     }
 };
-var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
+var Container$r = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -6307,39 +6306,39 @@ var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.padding;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.padding;
 }, function (_a) {
     var size = _a.size;
     return (size === ComponentSize.Small ? '2rem' : 'unset');
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.height;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.height;
 });
-var H3$2 = newStyled.h3(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+var H3$2 = newStyled.h3(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var textColor = _a.textColor;
     return textColor;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
 });
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
     var theme = useTheme();
-    return (jsx$1(Container$p, __assign({ backgroundColor: disabled ? theme.shades.gray050 : backgroundColor, borderColor: disabled ? theme.shades.gray050 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.shades.gray250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
+    return (jsx$1(Container$r, __assign({ backgroundColor: disabled ? theme.shades.gray050 : backgroundColor, borderColor: disabled ? theme.shades.gray050 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.shades.gray250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
 };
-var templateObject_1$D, templateObject_2$s;
+var templateObject_1$F, templateObject_2$t;
 
-var getStylesBySize$8 = function (size) {
+var getStylesBySize$9 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6361,18 +6360,18 @@ var getStylesBySize$8 = function (size) {
             };
     }
 };
-var Container$o = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Price = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
+var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Price = newStyled.h1(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
     var weight = _a.weight;
     return (weight ? weight : '400');
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
+    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -6382,19 +6381,19 @@ var Price = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTempl
 }, function (_a) {
     var _b;
     var margin = _a.margin, size = _a.size;
-    return (margin ? (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
+    return (margin ? (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
 });
 var TagContainer = newStyled.h1(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.margin;
+    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin;
 });
 var PriceLabel = function (_a) {
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
     var theme = useTheme();
-    return (jsxs$1(Container$o, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.palette.secondary.default, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.shades.gray400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
+    return (jsxs$1(Container$q, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.palette.secondary.default, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.shades.gray400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
 };
-var templateObject_1$C, templateObject_2$r, templateObject_3$i;
+var templateObject_1$E, templateObject_2$s, templateObject_3$i;
 
 var OneColorSelector = function (_a) {
     var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
@@ -6433,8 +6432,8 @@ var OutOfStock = function (_a) {
     return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.shades.gray300 }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.shades.gray300, strokeWidth: "0.5" }, void 0)] }), void 0));
 };
 
-var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
+var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
 var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
 var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
 var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n"])));
@@ -6455,20 +6454,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
     Option: Option,
     OptionsContainer: OptionsContainer,
 });
-var templateObject_1$B, templateObject_2$q, templateObject_3$h, templateObject_4$d, templateObject_5$7;
+var templateObject_1$D, templateObject_2$r, templateObject_3$h, templateObject_4$d, templateObject_5$7;
 
-var Container$n = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
+var Container$p = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 });
-var Image$3 = newStyled.img(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
+var Image$3 = newStyled.img(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
 var PatternSelector = function (_a) {
     var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
     var theme = useTheme();
     var outerBorder = selected ? theme.shades.gray550 : 'transparent';
-    return (jsx$1(Container$n, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
+    return (jsx$1(Container$p, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
 };
-var templateObject_1$A, templateObject_2$p;
+var templateObject_1$C, templateObject_2$q;
 
 var renderOptions$1 = function (options) {
     if (options.length)
@@ -6534,7 +6533,7 @@ var MultiColorPicker = function (_a) {
     return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
 };
 
-var Image$2 = newStyled.img(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
+var Image$2 = newStyled.img(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
     var selected = _a.selected, theme = _a.theme;
     return selected ? "0.063rem solid " + theme.shades.gray700 : 'inherit';
 });
@@ -6543,29 +6542,29 @@ var ImageSmallPreview = function (_a) {
     var theme = useTheme();
     return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
 };
-var templateObject_1$z;
+var templateObject_1$B;
 
-var Container$m = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"])));
-var Button$3 = newStyled.button(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
+var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"])));
+var Button$3 = newStyled.button(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
-    return (jsx(Container$m, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
+    return (jsx(Container$o, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
             return (jsx(Button$3, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
         }) }), void 0));
 };
-var templateObject_1$y, templateObject_2$o;
+var templateObject_1$A, templateObject_2$p;
 
-var Container$l = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"], ["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"])));
-var Image$1 = newStyled.img(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var Container$n = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"], ["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"])));
+var Image$1 = newStyled.img(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
 var TopTagContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
 var BottomTagContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ImageProductWithTags = function (_a) {
     var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
-    return (jsxs$1(Container$l, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
+    return (jsxs$1(Container$n, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
 };
-var templateObject_1$x, templateObject_2$n, templateObject_3$g, templateObject_4$c;
+var templateObject_1$z, templateObject_2$o, templateObject_3$g, templateObject_4$c;
 
-var Container$k = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"])));
+var Container$m = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"])));
 var ProductGallery = function (_a) {
     var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
@@ -6573,13 +6572,13 @@ var ProductGallery = function (_a) {
     useEffect(function () {
         setSelectedImage(initialValue);
     }, [initialValue]);
-    return (jsxs$1(Container$k, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
+    return (jsxs$1(Container$m, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
                     setSelectedImage(value);
                 } }, void 0), jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
 };
-var templateObject_1$w;
+var templateObject_1$y;
 
-var getStylesBySize$7 = function (size) {
+var getStylesBySize$8 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6611,13 +6610,13 @@ var StarList = function (_a) {
     var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
     return (jsx("div", __assign({ style: { display: 'flex' } }, { children: __spreadArray([], new Array(starsNumber)).map(function (_, index) {
             return (jsx("div", __assign({ "data-testid": "star-container", css: {
-                    marginRight: getStylesBySize$7(size).marginRight,
+                    marginRight: getStylesBySize$8(size).marginRight,
                     display: 'flex',
-                } }, { children: index < Math.floor(rating) ? (jsx(Icon.PDP.Star, __assign({}, getStylesBySize$7(size), { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx(Icon.PDP.StarHalf, __assign({}, getStylesBySize$7(size), { fill: fill }), void 0)) : (jsx(Icon.PDP.StarEmpty, __assign({}, getStylesBySize$7(size), { fill: fill }), void 0)) }), index));
+                } }, { children: index < Math.floor(rating) ? (jsx(Icon.PDP.Star, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx(Icon.PDP.StarHalf, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) : (jsx(Icon.PDP.StarEmpty, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) }), index));
         }) }), void 0));
 };
 
-var getStylesBySize$6 = function (size) {
+var getStylesBySize$7 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6657,14 +6656,14 @@ var Rating = function (_a) {
                     fontStyle: 'normal',
                     fontWeight: 'normal',
                     color: theme.palette.secondary.default,
-                    fontSize: getStylesBySize$6(size).fontSize,
-                    lineHeight: getStylesBySize$6(size).lineHeight,
-                    marginLeft: getStylesBySize$6(size).marginLeft,
+                    fontSize: getStylesBySize$7(size).fontSize,
+                    lineHeight: getStylesBySize$7(size).lineHeight,
+                    marginLeft: getStylesBySize$7(size).marginLeft,
                 } }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
 };
 
-var Container$j = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
-var P$1 = newStyled.p(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"])), function (props) { return props.theme.shades.gray550; });
+var Container$l = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
+var P$1 = newStyled.p(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"])), function (props) { return props.theme.shades.gray550; });
 var textButtonStyles = function (theme) { return ({
     border: 'none',
     background: 'transparent',
@@ -6677,9 +6676,9 @@ var textButtonStyles = function (theme) { return ({
 var FitPredictor = function (_a) {
     var onClick = _a.onClick;
     var theme = useTheme();
-    return (jsxs(Container$j, __assign({ theme: theme }, { children: [jsx(Container$j, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.shades.gray550 }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
+    return (jsxs(Container$l, __assign({ theme: theme }, { children: [jsx(Container$l, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.shades.gray550 }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
 };
-var templateObject_1$v, templateObject_2$m;
+var templateObject_1$x, templateObject_2$n;
 
 var H2$1 = newStyled.h2(function (_a) {
     var color = _a.color;
@@ -6693,7 +6692,7 @@ var H2$1 = newStyled.h2(function (_a) {
         margin: '0.938rem 4.188rem',
     });
 });
-var Bar = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+var Bar = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -6716,7 +6715,7 @@ var Background = newStyled.div(function (_a) {
         position: 'absolute',
     });
 });
-var Container$i = newStyled.div(function (_a) {
+var Container$k = newStyled.div(function (_a) {
     var widthAuto = _a.widthAuto;
     return ({
         width: widthAuto ? 'auto' : 'fit-content',
@@ -6730,11 +6729,11 @@ var getBarWithBasedOnPercent = function (percent) {
 var ProgressBar = function (_a) {
     var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
     var theme = useTheme();
-    return (jsxs$1(Container$i, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.shades.gray100 }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.palette.secondary.default }, { children: description }), void 0)] }), void 0));
+    return (jsxs$1(Container$k, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.shades.gray100 }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.palette.secondary.default }, { children: description }), void 0)] }), void 0));
 };
-var templateObject_1$u;
+var templateObject_1$w;
 
-var getStylesBySize$5 = function (size) {
+var getStylesBySize$6 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6753,21 +6752,21 @@ var getStylesBySize$5 = function (size) {
             };
     }
 };
-var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+var Container$j = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
 }, function (_a) {
     var hoverBackgroundColor = _a.hoverBackgroundColor;
     return hoverBackgroundColor;
@@ -6781,9 +6780,9 @@ var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
 var IconButton = function (_a) {
     var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsx$1(Container$h, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.palette.primary.default, hoverBackgroundColor: theme.palette.secondary.default, disabledColor: theme.shades.gray050, disabledIconColor: theme.shades.gray200, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
+    return (jsx$1(Container$j, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.palette.primary.default, hoverBackgroundColor: theme.palette.secondary.default, disabledColor: theme.shades.gray050, disabledIconColor: theme.shades.gray200, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
 };
-var templateObject_1$t;
+var templateObject_1$v;
 
 var TooltipArrow = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
@@ -6863,7 +6862,7 @@ var getTooltipAlignItems = function (position, align) {
     }
 };
 
-var Wrapper$5 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"])), function (_a) {
+var Wrapper$5 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"])), function (_a) {
     var position = _a.position;
     return getWrapperFlexDirection(position);
 });
@@ -6887,7 +6886,7 @@ var TooltipContainer = newStyled.div(function (_a) {
 var getTooltipMargin = function (actual, expected, margin) {
     return actual === expected ? margin : '0';
 };
-var ContentWrapper = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
+var ContentWrapper = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 });
@@ -6911,7 +6910,7 @@ var Title$3 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
     return color;
 });
 var IconContainer$3 = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
-var templateObject_1$s, templateObject_2$l, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
+var templateObject_1$u, templateObject_2$m, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
 
 var Tooltip = function (_a) {
     var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
@@ -6976,7 +6975,7 @@ var AccordionControlButton = function (_a) {
         }, disabled: disabled, className: className }, { children: [children, controlIcon] }), void 0));
 };
 
-var Container$g = newStyled(Accordion$1)(function (props) { return ({
+var Container$i = newStyled(Accordion$1)(function (props) { return ({
     border: "1px solid " + props.theme.shades.gray100,
     padding: '1.25rem 2rem',
 }); });
@@ -6998,14 +6997,14 @@ var Panel$1 = newStyled(Accordion$1.Panel)(function () { return ({
 var AccordionBox = function (_a) {
     var title = _a.title, text = _a.text, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var theme = useTheme();
-    return (jsx$1(Container$g, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
+    return (jsx$1(Container$i, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
             var open = _a.open;
             var showPanel = open && !disabled;
             return (jsxs$1(Fragment$1, { children: [jsx$1(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1.5, height: 1.5, title: "minus icon", fill: theme.shades.gray700 }, void 0) }, { children: title }), void 0), showPanel && jsx$1(Panel$1, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
         } }), void 0));
 };
 
-var Container$f = newStyled(Accordion$1)(function (props) { return ({
+var Container$h = newStyled(Accordion$1)(function (props) { return ({
     borderTop: "1px solid " + props.theme.shades.gray100,
     padding: '0.625rem 0',
 }); });
@@ -7022,14 +7021,14 @@ var Panel = newStyled(Accordion$1.Panel)(function () { return ({
 var AccordionIcon = function (_a) {
     var title = _a.title, text = _a.text, leadingIcon = _a.leadingIcon, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var theme = useTheme();
-    return (jsx$1(Container$f, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
+    return (jsx$1(Container$h, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
             var open = _a.open;
             var showPanel = open && !disabled;
             return (jsxs$1(Fragment$1, { children: [jsx$1(Button$1, __assign({ open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1, height: 1, title: "minus icon", fill: theme.shades.gray700 }, void 0), disabled: disabled }, { children: jsxs$1("span", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [leadingIcon, title] }), void 0) }), void 0), showPanel && jsx$1(Panel, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
         } }), void 0));
 };
 
-var getStylesBySize$4 = function (size) {
+var getStylesBySize$5 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7084,37 +7083,37 @@ var getStylesBySize$4 = function (size) {
             };
     }
 };
-var Container$e = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
-var CustomCheckbox = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_a) {
+var Container$g = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
+var CustomCheckbox = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.width;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.width;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.height;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.height;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.borderRadius;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.borderRadius;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.marginRight;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.marginRight;
 }, function (_a) {
     var isChecked = _a.isChecked, color = _a.color;
     return (isChecked ? color : '#fff');
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.width;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.width;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.height;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.height;
 });
 var Input$2 = newStyled.input(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
@@ -7123,11 +7122,11 @@ var Input$2 = newStyled.input(templateObject_3$e || (templateObject_3$e = __make
 var Text$4 = newStyled.label(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.fontSize;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.fontSize;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.lineHeight;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.lineHeight;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -7145,11 +7144,11 @@ var Checkbox = function (_a) {
             return !checked;
         });
     };
-    return (jsxs$1(Container$e, __assign({ disabled: disabled }, { children: [jsx$1(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox" }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Text$4, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox-text", htmlFor: id }, { children: text }), void 0)] }), void 0));
+    return (jsxs$1(Container$g, __assign({ disabled: disabled }, { children: [jsx$1(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox" }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Text$4, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox-text", htmlFor: id }, { children: text }), void 0)] }), void 0));
 };
-var templateObject_1$r, templateObject_2$k, templateObject_3$e, templateObject_4$a;
+var templateObject_1$t, templateObject_2$l, templateObject_3$e, templateObject_4$a;
 
-var getStylesBySize$3 = function (size) {
+var getStylesBySize$4 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7192,15 +7191,15 @@ var getStylesBySize$3 = function (size) {
             };
     }
 };
-var Wrapper$4 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Container$d = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
+var Wrapper$4 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container$f = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.container;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.container;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
 });
 var Input$1 = newStyled.input(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  cursor: ", ";\n  height: 100%;\n  width: 100%;\n  margin: 0;\n"], ["\n  position: absolute;\n  opacity: 0;\n  cursor: ", ";\n  height: 100%;\n  width: 100%;\n  margin: 0;\n"])), function (_a) {
     var disabled = _a.disabled;
@@ -7209,7 +7208,7 @@ var Input$1 = newStyled.input(templateObject_3$d || (templateObject_3$d = __make
 var CustomRadio = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  border: ", " solid\n    ", ";\n  border-radius: 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  border: ", " solid\n    ", ";\n  border-radius: 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.input.borderSize;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input.borderSize;
 }, function (_a) {
     var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
     return (disabled ? disabledColor : color);
@@ -7220,24 +7219,24 @@ var CustomRadio = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __ma
 var CustomRadioCheck = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  border-radius: 50%;\n  height: ", ";\n  width: ", ";\n  background-color: #fff;\n"], ["\n  border-radius: 50%;\n  height: ", ";\n  width: ", ";\n  background-color: #fff;\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.check;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.check;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
 });
 var Text$3 = newStyled.label(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  margin-left: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n"], ["\n  margin-left: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.text.marginLeft;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.marginLeft;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.text.fontSize;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.text.lineHeight;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.lineHeight;
 }, function (_a) {
     var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
     return (disabled ? disabledColor : color);
@@ -7249,9 +7248,9 @@ var RadioInput = function (_a) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$d, __assign({ size: size, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: name + "-" + id, type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "custom-radio" }, { children: checked && jsx$1(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsx$1(Text$3, __assign({ size: size, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "label", htmlFor: name + "-" + id }, { children: label }), void 0)] }, void 0));
+    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$f, __assign({ size: size, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: name + "-" + id, type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "custom-radio" }, { children: checked && jsx$1(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsx$1(Text$3, __assign({ size: size, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "label", htmlFor: name + "-" + id }, { children: label }), void 0)] }, void 0));
 };
-var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
+var templateObject_1$s, templateObject_2$k, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
 
 var RadioGroupInput = function (_a) {
     var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
@@ -7265,8 +7264,8 @@ var RadioGroupInput = function (_a) {
         }) }), void 0));
 };
 
-var Wrapper$3 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
-var Container$c = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Wrapper$3 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Container$e = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
@@ -7280,34 +7279,34 @@ var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemp
 var Minimalistic = function (_a) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
     var theme = useTheme();
-    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$c, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.palette.secondary.default, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$c, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.palette.secondary.default }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
+    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$e, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.palette.secondary.default, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$e, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.palette.secondary.default }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$p, templateObject_2$i, templateObject_3$c;
+var templateObject_1$r, templateObject_2$j, templateObject_3$c;
 
-var Container$b = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
-var Title$2 = newStyled.h1(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"], ["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"])), function (props) { return props.color; });
+var Container$d = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Title$2 = newStyled.h1(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"], ["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"])), function (props) { return props.color; });
 var Details$1 = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"])), function (props) { return props.color; });
 var PriceContainer$1 = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"])));
 var Simple = function (_a) {
     var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
     var theme = useTheme();
-    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$b, { children: [jsx$1(Title$2, __assign({ color: theme.palette.secondary.default, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.palette.secondary.default, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
+    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$d, { children: [jsx$1(Title$2, __assign({ color: theme.palette.secondary.default, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.palette.secondary.default, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$o, templateObject_2$h, templateObject_3$b, templateObject_4$8;
+var templateObject_1$q, templateObject_2$i, templateObject_3$b, templateObject_4$8;
 
 var Bundle = {
     Minimalistic: Minimalistic,
     Simple: Simple,
 };
 
-var Container$a = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"])));
+var Container$c = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"])));
 var Tag = function (_a) {
     var text = _a.text, className = _a.className;
-    return jsx$1(Container$a, __assign({ className: className }, { children: text }), void 0);
+    return jsx$1(Container$c, __assign({ className: className }, { children: text }), void 0);
 };
-var templateObject_1$n;
+var templateObject_1$p;
 
-var getStylesBySize$2 = function (size) {
+var getStylesBySize$3 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7338,11 +7337,11 @@ var getStylesBySize$2 = function (size) {
 var CategoryTag = function (_a) {
     var text = _a.text, size = _a.size, className = _a.className;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$2(size);
+    var stylesBySize = getStylesBySize$3(size);
     return (jsx(Tag, { css: __assign({ backgroundColor: theme.shades.white, fontWeight: 600, color: theme.shades.gray700 }, stylesBySize), text: text, className: className }, void 0));
 };
 
-var getStylesBySize$1 = function (size) {
+var getStylesBySize$2 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7372,7 +7371,7 @@ var getStylesBySize$1 = function (size) {
 };
 var SeasonOfferTag = function (_a) {
     var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className;
-    var stylesBySize = getStylesBySize$1(size);
+    var stylesBySize = getStylesBySize$2(size);
     return (jsx(Tag, { css: __assign({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
 };
 
@@ -7406,11 +7405,11 @@ var Timer = function (_a) {
     return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
 };
 
-var Label = newStyled.span(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"], ["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"])), function (_a) {
+var Label = newStyled.span(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"], ["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var MandatoryIcon = newStyled.span(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 0.25rem;\n"], ["\n  color: ", ";\n  margin-left: 0.25rem;\n"])), function (_a) {
+var MandatoryIcon = newStyled.span(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 0.25rem;\n"], ["\n  color: ", ";\n  margin-left: 0.25rem;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
@@ -7419,26 +7418,26 @@ var InputLabel = function (_a) {
     var theme = useTheme();
     return (jsxs$1(Label, __assign({ color: isDisabled ? theme.shades.gray250 : theme.shades.gray700 }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.semantic.alert }, { children: "*" }), void 0)] }), void 0));
 };
-var templateObject_1$m, templateObject_2$g;
+var templateObject_1$o, templateObject_2$h;
 
 var isEmpty = function (value) {
     return value.length === 0;
 };
 
-var ErrorText = newStyled.h3(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
-var ErrorContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"])));
+var ErrorText = newStyled.h3(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
+var ErrorContainer = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"])));
 var Error$1 = function (_a) {
     var error = _a.error;
     var theme = useTheme();
     return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.semantic.alert, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.semantic.alert }, { children: error }), void 0)] }, void 0));
 };
-var templateObject_1$l, templateObject_2$f;
+var templateObject_1$n, templateObject_2$g;
 
-var Container$9 = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var Container$b = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var StyledInput = newStyled.input(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  padding: 0.875rem 1rem 0.625rem;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  line-height: 1.5rem;\n  color: ", ";\n  font-weight: 400;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: 0.875rem 1rem 0.625rem;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  line-height: 1.5rem;\n  color: ", ";\n  font-weight: 400;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var StyledInput = newStyled.input(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  padding: 0.875rem 1rem 0.625rem;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  line-height: 1.5rem;\n  color: ", ";\n  font-weight: 400;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: 0.875rem 1rem 0.625rem;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  line-height: 1.5rem;\n  color: ", ";\n  font-weight: 400;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 }, function (_a) {
@@ -7464,7 +7463,7 @@ var StyledInput = newStyled.input(templateObject_2$e || (templateObject_2$e = __
     return disabledColor;
 });
 var InputWrapper = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  height: 100%;\n"])));
-var templateObject_1$k, templateObject_2$e, templateObject_3$a;
+var templateObject_1$m, templateObject_2$f, templateObject_3$a;
 
 var BaseInput = function (_a) {
     var onChange = _a.onChange, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, rest = __rest(_a, ["onChange", "defaultValue", "label", "children", "required", "onValidation"]);
@@ -7498,15 +7497,15 @@ var BaseInput = function (_a) {
         disabledBackgroundColor: theme.shades.gray010,
         disabledColor: theme.shades.gray250,
     };
-    return (jsxs$1(Container$9, __assign({ color: status === InputValidationType.Valid
+    return (jsxs$1(Container$b, __assign({ color: status === InputValidationType.Valid
             ? theme.shades.gray700
             : status === InputValidationType.Error
                 ? theme.semantic.alert
                 : '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsx$1(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
 };
 
-var Container$8 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  input {\n    border-radius: 0.5rem 1rem 1rem 0.5rem;\n  }\n"], ["\n  input {\n    border-radius: 0.5rem 1rem 1rem 0.5rem;\n  }\n"])));
-var ButtonContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0 0.5rem 0.5rem 0;\n  }\n"], ["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0 0.5rem 0.5rem 0;\n  }\n"])));
+var Container$a = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  input {\n    border-radius: 0.5rem 1rem 1rem 0.5rem;\n  }\n"], ["\n  input {\n    border-radius: 0.5rem 1rem 1rem 0.5rem;\n  }\n"])));
+var ButtonContainer$1 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0 0.5rem 0.5rem 0;\n  }\n"], ["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0 0.5rem 0.5rem 0;\n  }\n"])));
 var Custom = function (_a) {
     var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
     var props = {
@@ -7514,20 +7513,20 @@ var Custom = function (_a) {
         text: text,
         disabled: rest.disabled,
     };
-    return (jsx$1(Container$8, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }, void 0) }), void 0) }, void 0));
+    return (jsx$1(Container$a, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }, void 0) }), void 0) }, void 0));
 };
-var templateObject_1$j, templateObject_2$d;
+var templateObject_1$l, templateObject_2$e;
 
-var SuccessContainer = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  height: 3rem;\n  display: flex;\n"], ["\n  height: 3rem;\n  display: flex;\n"])));
-var SuccessMessage = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
+var SuccessContainer = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  height: 3rem;\n  display: flex;\n"], ["\n  height: 3rem;\n  display: flex;\n"])));
+var SuccessMessage = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
 var SuccessText = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"])));
 var Success = function (_a) {
     var children = _a.children, successText = _a.successText;
     return (jsxs$1(SuccessContainer, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
 };
-var templateObject_1$i, templateObject_2$c, templateObject_3$9;
+var templateObject_1$k, templateObject_2$d, templateObject_3$9;
 
-var ButtonContainer = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0.5rem;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0.5rem;\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0.5rem;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0.5rem;\n    background-color: ", ";\n  }\n"])), function (_a) {
     var status = _a.status, type = _a.type;
     return status === InputValidationType.Empty && type === 'primary' ? '#808080' : '';
 });
@@ -7538,21 +7537,21 @@ var BasePlusButton = function (_a) {
     var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary" }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
     return success ? SuccessComponent : Input;
 };
-var templateObject_1$h;
+var templateObject_1$j;
 
-var Container$7 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
-var IconContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
+var Container$9 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
+var IconContainer$2 = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
 var BasePlusIcon = function (_a) {
     var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
     var theme = useTheme();
     var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
-    return (jsx$1(Container$7, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$2, __assign({ color: status === InputValidationType.Valid
+    return (jsx$1(Container$9, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$2, __assign({ color: status === InputValidationType.Valid
                     ? theme.shades.gray700
                     : status === InputValidationType.Error
                         ? theme.semantic.alert
                         : '' }, { children: createElement(Icon, { fill: theme.shades.gray250 }) }), void 0) }), void 0) }, void 0));
 };
-var templateObject_1$g, templateObject_2$b;
+var templateObject_1$i, templateObject_2$c;
 
 var Input = {
     Simple: BaseInput,
@@ -7566,7 +7565,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
     Input: Input
 });
 
-var Container$6 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"])), function (_a) {
+var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -7582,11 +7581,11 @@ var Container$6 = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
 var PaymentMethod = function (_a) {
     var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsx$1(Container$6, __assign({ width: width, height: height, borderColor: theme.shades.gray100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
+    return (jsx$1(Container$8, __assign({ width: width, height: height, borderColor: theme.shades.gray100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
 };
-var templateObject_1$f;
+var templateObject_1$h;
 
-var Text$1 = newStyled.h3(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
+var Text$1 = newStyled.h3(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -7598,25 +7597,25 @@ var OfferBanner = function (_a) {
     var theme = useTheme();
     return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.shades.gray700, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
 };
-var templateObject_1$e;
+var templateObject_1$g;
 
-var Wrapper$2 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"])));
-var GrandTotal = newStyled.h1(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.color; });
+var Wrapper$2 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"])));
+var GrandTotal = newStyled.h1(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.color; });
 var Currency = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
-var Container$5 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
+var Container$7 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
 var Discount = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"])));
 var Total = function (_a) {
     var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
     var theme = useTheme();
-    return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.shades.gray550 }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$5, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
+    return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.shades.gray550 }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$7, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
 };
-var templateObject_1$d, templateObject_2$a, templateObject_3$8, templateObject_4$7, templateObject_5$4;
+var templateObject_1$f, templateObject_2$b, templateObject_3$8, templateObject_4$7, templateObject_5$4;
 
-var Wrapper$1 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var ItemContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
+var ItemContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
 var Item$1 = newStyled.h4(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
 var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
@@ -7630,22 +7629,22 @@ var Subtotal = function (_a) {
                     return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
                 })] }), void 0));
 };
-var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$6;
+var templateObject_1$e, templateObject_2$a, templateObject_3$7, templateObject_4$6;
 
 var Totals = {
     Total: Total,
     Subtotal: Subtotal,
 };
 
-var Container$4 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
-var IconContainer$1 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"], ["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"])));
+var Container$6 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
+var IconContainer$1 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"], ["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"])));
 var Text = newStyled.p(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
 var Details = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (props) { return props.color; });
 var Note = function (_a) {
     var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
-    return (jsxs$1(Container$4, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$1, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
+    return (jsxs$1(Container$6, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$1, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
 };
-var templateObject_1$b, templateObject_2$8, templateObject_3$6, templateObject_4$5;
+var templateObject_1$d, templateObject_2$9, templateObject_3$6, templateObject_4$5;
 
 var Breakpoints = {
     desktop: 1200,
@@ -7675,8 +7674,8 @@ var useWindowDimensions = function () {
     };
 };
 
-var Title$1 = newStyled.h1(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
-var Line = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
+var Title$1 = newStyled.h1(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
+var Line = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
 var Row$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: flex-start;\n"])), function (props) { return (props.isMobile ? 'column' : 'row'); });
 var Col$1 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  flex: 1;\n  margin: 0 1.25rem;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  flex: 1;\n  margin: 0 1.25rem;\n\n  ", "\n"])), function (props) {
     return props.isMobile &&
@@ -7695,28 +7694,28 @@ var DeliveryDetails = function (_a) {
     var isMobile = useWindowDimensions().isMobile;
     return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.palette.secondary.default }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.shades.gray100 }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ isMobile: isMobile, "data-testid": "DD-row" }, { children: [jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.shades.gray150 }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$a, templateObject_2$7, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
+var templateObject_1$c, templateObject_2$8, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
 
-var Container$3 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
-var H1$1 = newStyled.h1(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"])), function (props) { return props.color; });
+var Container$5 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
+var H1$2 = newStyled.h1(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"])), function (props) { return props.color; });
 var ScrollToTop = function (_a) {
     var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsxs$1(Container$3, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$1, __assign({ color: theme.shades.gray700 }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.palette.primary.default }, void 0)] }), void 0));
+    return (jsxs$1(Container$5, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.shades.gray700 }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.palette.primary.default }, void 0)] }), void 0));
 };
-var templateObject_1$9, templateObject_2$6;
+var templateObject_1$b, templateObject_2$7;
 
-var Container$2 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"])));
-var H1 = newStyled.h1(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
+var Container$4 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"])));
+var H1$1 = newStyled.h1(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
 var OrderBar = function (_a) {
     var message = _a.message;
     var theme = useTheme();
-    return (jsxs$1(Container$2, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign({ color: theme.shades.gray700 }, { children: message }), void 0)] }, void 0));
+    return (jsxs$1(Container$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.shades.gray700 }, { children: message }), void 0)] }, void 0));
 };
-var templateObject_1$8, templateObject_2$5;
+var templateObject_1$a, templateObject_2$6;
 
-var TableElement = newStyled.table(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
-var TableCell = newStyled.td(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
+var TableElement = newStyled.table(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
+var TableCell = newStyled.td(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableHead = newStyled.th(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableRow = newStyled.tr(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"], ["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; });
 var SizeTable = function (_a) {
@@ -7724,7 +7723,7 @@ var SizeTable = function (_a) {
     var theme = useTheme();
     return (jsxs$1(TableElement, __assign({ color: theme.shades.gray700, borderColor: theme.shades.gray100 }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.shades.gray010 }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.shades.gray100 }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.shades.gray010 }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.shades.gray100 }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
 };
-var templateObject_1$7, templateObject_2$4, templateObject_3$4, templateObject_4$3;
+var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$3;
 
 /* eslint-disable no-param-reassign */
 var index$2 = function (breakpoints) {
@@ -7812,15 +7811,15 @@ var breakpoints = {
 };
 var mediaQueries = index$2(Object.values(breakpoints).map(function (bp) { return "@media (min-width: " + bp + "px)"; }));
 
-var Img = newStyled.img(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
+var Img = newStyled.img(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
 var Image = function (_a) {
     var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
     return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
 };
-var templateObject_1$6;
+var templateObject_1$8;
 
-var Container$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
-var DescriptionContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), mediaQueries({
+var Container$3 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
+var DescriptionContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), mediaQueries({
     marginLeft: ['0.938rem', '1.875rem'],
 }));
 var Title = newStyled.h2(function (_a) {
@@ -7854,9 +7853,9 @@ var PriceContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = _
 var SimpleOrderItem = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
     var theme = useTheme();
-    return (jsxs$1(Container$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsx$1(Title, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.shades.gray700 }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.shades.gray700, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$3, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsx$1(Title, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.shades.gray700 }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.shades.gray700, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
 };
-var templateObject_1$5, templateObject_2$3, templateObject_3$3;
+var templateObject_1$7, templateObject_2$4, templateObject_3$3;
 
 function formatDate(date) {
     var day = date.getDate();
@@ -7865,8 +7864,8 @@ function formatDate(date) {
     return month < 10 ? day + "/0" + month + "/" + year : day + "/" + month + "/" + year;
 }
 
-var Container = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"])));
-var Heading = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), mediaQueries({
+var Container$2 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"])));
+var Heading = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), mediaQueries({
     fontSize: ['14px', '16px'],
     lineHeight: ['22px', '24px'],
 }));
@@ -7889,9 +7888,9 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
 var P = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"], ["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"])));
 var Review = function (_a) {
     var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
-    return (jsxs$1(Container, { children: [jsxs$1(Heading, { children: [jsx$1(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(H3$1, { children: title }, void 0), jsx$1(P, { children: description }, void 0)] }, void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$2, { children: [jsxs$1(Heading, { children: [jsx$1(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(H3$1, { children: title }, void 0), jsx$1(P, { children: description }, void 0)] }, void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
 };
-var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
+var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
 
 var Button = newStyled.button(function () { return ({
     background: 'transparent',
@@ -7908,20 +7907,208 @@ var ArrowButton = function (_a) {
     return (jsx$1(Button, __assign({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-" + direction }, { children: direction === 'left' ? (jsx$1(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsx$1(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
 };
 
-var lib = {};
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
 
-var slider = {};
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
 
-var innerSlider = {};
+    keys.push.apply(keys, symbols);
+  }
 
-var initialState = {};
+  return keys;
+}
 
-(function (exports) {
+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 _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+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);
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+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 _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(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;
+}
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
 var initialState = {
   animating: false,
   autoplaying: null,
@@ -7953,65 +8140,57 @@ var initialState = {
   trackWidth: 0,
   targetSlide: 0
 };
-var _default = initialState;
-exports["default"] = _default;
-}(initialState));
 
 /**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
  */
 
-/** Used as the `TypeError` message for "Functions" methods. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/** Used to match leading and trailing whitespace. */
-var reTrim = /^\s+|\s+$/g;
+function isObject$2(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
 
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+var isObject_1 = isObject$2;
 
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
+/** Detect free variable `global` from Node.js. */
 
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
 
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
+var _freeGlobal = freeGlobal$1;
 
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+var freeGlobal = _freeGlobal;
 
 /** Detect free variable `self`. */
 var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
 /** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
+var root$2 = freeGlobal || freeSelf || Function('return this')();
 
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
+var _root = root$2;
 
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
+var root$1 = _root;
 
 /**
  * Gets the timestamp of the number of milliseconds that have elapsed since
@@ -8029,30 +8208,317 @@ var nativeMax = Math.max,
  * }, _.now());
  * // => Logs the number of milliseconds it took for the deferred invocation.
  */
-var now = function() {
-  return root.Date.now();
+var now$1 = function() {
+  return root$1.Date.now();
 };
 
+var now_1 = now$1;
+
+/** Used to match a single whitespace character. */
+
+var reWhitespace = /\s/;
+
 /**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
  *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+var _trimmedEndIndex = trimmedEndIndex$1;
+
+var trimmedEndIndex = _trimmedEndIndex;
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
  *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim$1(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+var _baseTrim = baseTrim$1;
+
+var root = _root;
+
+/** Built-in value references. */
+var Symbol$3 = root.Symbol;
+
+var _Symbol = Symbol$3;
+
+var Symbol$2 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag$1;
+
+/** Used for built-in method references. */
+
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString$1;
+
+var Symbol$1 = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+var _baseGetTag = baseGetTag$1;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+
+function isObjectLike$1(value) {
+  return value != null && typeof value == 'object';
+}
+
+var isObjectLike_1 = isObjectLike$1;
+
+var baseGetTag = _baseGetTag,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+var isSymbol_1 = isSymbol$1;
+
+var baseTrim = _baseTrim,
+    isObject$1 = isObject_1,
+    isSymbol = isSymbol_1;
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber$1(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject$1(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$1(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+var toNumber_1 = toNumber$1;
+
+var isObject = isObject_1,
+    now = now_1,
+    toNumber = toNumber_1;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
  *
  * @static
  * @memberOf _
@@ -8132,9 +8598,11 @@ function debounce(func, wait, options) {
   function remainingWait(time) {
     var timeSinceLastCall = time - lastCallTime,
         timeSinceLastInvoke = time - lastInvokeTime,
-        result = wait - timeSinceLastCall;
+        timeWaiting = wait - timeSinceLastCall;
 
-    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
   }
 
   function shouldInvoke(time) {
@@ -8195,6 +8663,7 @@ function debounce(func, wait, options) {
       }
       if (maxing) {
         // Handle invocations in a tight loop.
+        clearTimeout(timerId);
         timerId = setTimeout(timerExpired, wait);
         return invokeFunc(lastCallTime);
       }
@@ -8209,133 +8678,9 @@ function debounce(func, wait, options) {
   return debounced;
 }
 
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && objectToString.call(value) == symbolTag);
-}
+var debounce_1 = debounce;
 
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = value.replace(reTrim, '');
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-var lodash_debounce = debounce;
-
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -8391,30 +8736,13 @@ var classnames = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames));
+}(classnames$1));
 
-var innerSliderUtils = {};
-
-Object.defineProperty(innerSliderUtils, "__esModule", {
-  value: true
-});
-innerSliderUtils.clamp = clamp;
-innerSliderUtils.canUseDOM = innerSliderUtils.slidesOnLeft = innerSliderUtils.slidesOnRight = innerSliderUtils.siblingDirection = innerSliderUtils.getTotalSlides = innerSliderUtils.getPostClones = innerSliderUtils.getPreClones = innerSliderUtils.getTrackLeft = innerSliderUtils.getTrackAnimateCSS = innerSliderUtils.getTrackCSS = innerSliderUtils.checkSpecKeys = innerSliderUtils.getSlideCount = innerSliderUtils.checkNavigable = innerSliderUtils.getNavigableIndexes = innerSliderUtils.swipeEnd = innerSliderUtils.swipeMove = innerSliderUtils.swipeStart = innerSliderUtils.keyHandler = innerSliderUtils.changeSlide = innerSliderUtils.slideHandler = innerSliderUtils.initializedState = innerSliderUtils.extractObject = innerSliderUtils.canGoNext = innerSliderUtils.getSwipeDirection = innerSliderUtils.getHeight = innerSliderUtils.getWidth = innerSliderUtils.lazySlidesOnRight = innerSliderUtils.lazySlidesOnLeft = innerSliderUtils.lazyEndIndex = innerSliderUtils.lazyStartIndex = innerSliderUtils.getRequiredLazySlides = innerSliderUtils.getOnDemandLazySlides = innerSliderUtils.safePreventDefault = void 0;
-
-var _react$4 = _interopRequireDefault$4(React);
-
-function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys$4(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 _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty$4(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; }
+var classnames = classnames$1.exports;
 
 function clamp(number, lowerBound, upperBound) {
   return Math.max(lowerBound, Math.min(number, upperBound));
 }
-
 var safePreventDefault = function safePreventDefault(event) {
   var passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"];
 
@@ -8422,9 +8750,6 @@ var safePreventDefault = function safePreventDefault(event) {
     event.preventDefault();
   }
 };
-
-innerSliderUtils.safePreventDefault = safePreventDefault;
-
 var getOnDemandLazySlides = function getOnDemandLazySlides(spec) {
   var onDemandSlides = [];
   var startIndex = lazyStartIndex(spec);
@@ -8439,61 +8764,25 @@ var getOnDemandLazySlides = function getOnDemandLazySlides(spec) {
   return onDemandSlides;
 }; // return list of slides that need to be present
 
-
-innerSliderUtils.getOnDemandLazySlides = getOnDemandLazySlides;
-
-var getRequiredLazySlides = function getRequiredLazySlides(spec) {
-  var requiredSlides = [];
-  var startIndex = lazyStartIndex(spec);
-  var endIndex = lazyEndIndex(spec);
-
-  for (var slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {
-    requiredSlides.push(slideIndex);
-  }
-
-  return requiredSlides;
-}; // startIndex that needs to be present
-
-
-innerSliderUtils.getRequiredLazySlides = getRequiredLazySlides;
-
 var lazyStartIndex = function lazyStartIndex(spec) {
   return spec.currentSlide - lazySlidesOnLeft(spec);
 };
-
-innerSliderUtils.lazyStartIndex = lazyStartIndex;
-
 var lazyEndIndex = function lazyEndIndex(spec) {
   return spec.currentSlide + lazySlidesOnRight(spec);
 };
-
-innerSliderUtils.lazyEndIndex = lazyEndIndex;
-
 var lazySlidesOnLeft = function lazySlidesOnLeft(spec) {
   return spec.centerMode ? Math.floor(spec.slidesToShow / 2) + (parseInt(spec.centerPadding) > 0 ? 1 : 0) : 0;
 };
-
-innerSliderUtils.lazySlidesOnLeft = lazySlidesOnLeft;
-
 var lazySlidesOnRight = function lazySlidesOnRight(spec) {
   return spec.centerMode ? Math.floor((spec.slidesToShow - 1) / 2) + 1 + (parseInt(spec.centerPadding) > 0 ? 1 : 0) : spec.slidesToShow;
 }; // get width of an element
 
-
-innerSliderUtils.lazySlidesOnRight = lazySlidesOnRight;
-
 var getWidth = function getWidth(elem) {
   return elem && elem.offsetWidth || 0;
 };
-
-innerSliderUtils.getWidth = getWidth;
-
 var getHeight = function getHeight(elem) {
   return elem && elem.offsetHeight || 0;
 };
-
-innerSliderUtils.getHeight = getHeight;
-
 var getSwipeDirection = function getSwipeDirection(touchObject) {
   var verticalSwiping = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var xDist, yDist, r, swipeAngle;
@@ -8525,9 +8814,6 @@ var getSwipeDirection = function getSwipeDirection(touchObject) {
   return "vertical";
 }; // whether or not we can go next
 
-
-innerSliderUtils.getSwipeDirection = getSwipeDirection;
-
 var canGoNext = function canGoNext(spec) {
   var canGo = true;
 
@@ -8542,9 +8828,6 @@ var canGoNext = function canGoNext(spec) {
   return canGo;
 }; // given an object and a list of keys, return new object with given keys
 
-
-innerSliderUtils.canGoNext = canGoNext;
-
 var extractObject = function extractObject(spec, keys) {
   var newObject = {};
   keys.forEach(function (key) {
@@ -8553,13 +8836,9 @@ var extractObject = function extractObject(spec, keys) {
   return newObject;
 }; // get initialized state
 
-
-innerSliderUtils.extractObject = extractObject;
-
 var initializedState = function initializedState(spec) {
   // spec also contains listRef, trackRef
-  var slideCount = _react$4["default"].Children.count(spec.children);
-
+  var slideCount = React.Children.count(spec.children);
   var listNode = spec.listRef;
   var listWidth = Math.ceil(getWidth(listNode));
   var trackNode = spec.trackRef && spec.trackRef.node;
@@ -8587,7 +8866,7 @@ var initializedState = function initializedState(spec) {
   }
 
   var lazyLoadedList = spec.lazyLoadedList || [];
-  var slidesToLoad = getOnDemandLazySlides(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+  var slidesToLoad = getOnDemandLazySlides(_objectSpread2(_objectSpread2({}, spec), {}, {
     currentSlide: currentSlide,
     lazyLoadedList: lazyLoadedList
   }));
@@ -8609,9 +8888,6 @@ var initializedState = function initializedState(spec) {
 
   return state;
 };
-
-innerSliderUtils.initializedState = initializedState;
-
 var slideHandler = function slideHandler(spec) {
   var waitForAnimate = spec.waitForAnimate,
       animating = spec.animating,
@@ -8678,10 +8954,10 @@ var slideHandler = function slideHandler(spec) {
       finalSlide = slideCount - slidesToShow;
     }
 
-    animationLeft = getTrackLeft(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+    animationLeft = getTrackLeft(_objectSpread2(_objectSpread2({}, spec), {}, {
       slideIndex: animationSlide
     }));
-    finalLeft = getTrackLeft(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+    finalLeft = getTrackLeft(_objectSpread2(_objectSpread2({}, spec), {}, {
       slideIndex: finalSlide
     }));
 
@@ -8691,7 +8967,7 @@ var slideHandler = function slideHandler(spec) {
     }
 
     if (lazyLoad) {
-      lazyLoadedList = lazyLoadedList.concat(getOnDemandLazySlides(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+      lazyLoadedList = lazyLoadedList.concat(getOnDemandLazySlides(_objectSpread2(_objectSpread2({}, spec), {}, {
         currentSlide: animationSlide
       })));
     }
@@ -8699,7 +8975,7 @@ var slideHandler = function slideHandler(spec) {
     if (!useCSS) {
       state = {
         currentSlide: finalSlide,
-        trackStyle: getTrackCSS(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+        trackStyle: getTrackCSS(_objectSpread2(_objectSpread2({}, spec), {}, {
           left: finalLeft
         })),
         lazyLoadedList: lazyLoadedList,
@@ -8709,7 +8985,7 @@ var slideHandler = function slideHandler(spec) {
       state = {
         animating: true,
         currentSlide: finalSlide,
-        trackStyle: getTrackAnimateCSS(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+        trackStyle: getTrackAnimateCSS(_objectSpread2(_objectSpread2({}, spec), {}, {
           left: animationLeft
         })),
         lazyLoadedList: lazyLoadedList,
@@ -8718,7 +8994,7 @@ var slideHandler = function slideHandler(spec) {
       nextState = {
         animating: false,
         currentSlide: finalSlide,
-        trackStyle: getTrackCSS(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+        trackStyle: getTrackCSS(_objectSpread2(_objectSpread2({}, spec), {}, {
           left: finalLeft
         })),
         swipeLeft: null,
@@ -8732,9 +9008,6 @@ var slideHandler = function slideHandler(spec) {
     nextState: nextState
   };
 };
-
-innerSliderUtils.slideHandler = slideHandler;
-
 var changeSlide = function changeSlide(spec, options) {
   var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
   var slidesToScroll = spec.slidesToScroll,
@@ -8778,7 +9051,7 @@ var changeSlide = function changeSlide(spec, options) {
     targetSlide = options.index;
 
     if (infinite) {
-      var direction = siblingDirection(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+      var direction = siblingDirection(_objectSpread2(_objectSpread2({}, spec), {}, {
         targetSlide: targetSlide
       }));
 
@@ -8794,18 +9067,12 @@ var changeSlide = function changeSlide(spec, options) {
 
   return targetSlide;
 };
-
-innerSliderUtils.changeSlide = changeSlide;
-
 var keyHandler = function keyHandler(e, accessibility, rtl) {
   if (e.target.tagName.match("TEXTAREA|INPUT|SELECT") || !accessibility) return "";
   if (e.keyCode === 37) return rtl ? "next" : "previous";
   if (e.keyCode === 39) return rtl ? "previous" : "next";
   return "";
 };
-
-innerSliderUtils.keyHandler = keyHandler;
-
 var swipeStart = function swipeStart(e, swipe, draggable) {
   e.target.tagName === "IMG" && safePreventDefault(e);
   if (!swipe || !draggable && e.type.indexOf("mouse") !== -1) return "";
@@ -8819,9 +9086,6 @@ var swipeStart = function swipeStart(e, swipe, draggable) {
     }
   };
 };
-
-innerSliderUtils.swipeStart = swipeStart;
-
 var swipeMove = function swipeMove(e, spec) {
   // spec also contains, trackRef and slideIndex
   var scrolling = spec.scrolling,
@@ -8897,10 +9161,10 @@ var swipeMove = function swipeMove(e, spec) {
     swipeLeft = curLeft + touchSwipeLength * positionOffset;
   }
 
-  state = _objectSpread$4(_objectSpread$4({}, state), {}, {
+  state = _objectSpread2(_objectSpread2({}, state), {}, {
     touchObject: touchObject,
     swipeLeft: swipeLeft,
-    trackStyle: getTrackCSS(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+    trackStyle: getTrackCSS(_objectSpread2(_objectSpread2({}, spec), {}, {
       left: swipeLeft
     }))
   });
@@ -8916,9 +9180,6 @@ var swipeMove = function swipeMove(e, spec) {
 
   return state;
 };
-
-innerSliderUtils.swipeMove = swipeMove;
-
 var swipeEnd = function swipeEnd(e, spec) {
   var dragging = spec.dragging,
       swipe = spec.swipe,
@@ -8993,16 +9254,13 @@ var swipeEnd = function swipeEnd(e, spec) {
   } else {
     // Adjust the track back to it's original position.
     var currentLeft = getTrackLeft(spec);
-    state["trackStyle"] = getTrackAnimateCSS(_objectSpread$4(_objectSpread$4({}, spec), {}, {
+    state["trackStyle"] = getTrackAnimateCSS(_objectSpread2(_objectSpread2({}, spec), {}, {
       left: currentLeft
     }));
   }
 
   return state;
 };
-
-innerSliderUtils.swipeEnd = swipeEnd;
-
 var getNavigableIndexes = function getNavigableIndexes(spec) {
   var max = spec.infinite ? spec.slideCount * 2 : spec.slideCount;
   var breakpoint = spec.infinite ? spec.slidesToShow * -1 : 0;
@@ -9017,9 +9275,6 @@ var getNavigableIndexes = function getNavigableIndexes(spec) {
 
   return indexes;
 };
-
-innerSliderUtils.getNavigableIndexes = getNavigableIndexes;
-
 var checkNavigable = function checkNavigable(spec, index) {
   var navigables = getNavigableIndexes(spec);
   var prevNavigable = 0;
@@ -9039,9 +9294,6 @@ var checkNavigable = function checkNavigable(spec, index) {
 
   return index;
 };
-
-innerSliderUtils.checkNavigable = checkNavigable;
-
 var getSlideCount = function getSlideCount(spec) {
   var centerOffset = spec.centerMode ? spec.slideWidth * Math.floor(spec.slidesToShow / 2) : 0;
 
@@ -9076,17 +9328,13 @@ var getSlideCount = function getSlideCount(spec) {
     return spec.slidesToScroll;
   }
 };
-
-innerSliderUtils.getSlideCount = getSlideCount;
-
 var checkSpecKeys = function checkSpecKeys(spec, keysArray) {
-  return keysArray.reduce(function (value, key) {
-    return value && spec.hasOwnProperty(key);
-  }, true) ? null : console.error("Keys Missing:", spec);
+  return (// eslint-disable-next-line no-prototype-builtins
+    keysArray.reduce(function (value, key) {
+      return value && spec.hasOwnProperty(key);
+    }, true) ? null : console.error("Keys Missing:", spec)
+  );
 };
-
-innerSliderUtils.checkSpecKeys = checkSpecKeys;
-
 var getTrackCSS = function getTrackCSS(spec) {
   checkSpecKeys(spec, ["left", "variableWidth", "slideCount", "slidesToShow", "slideWidth"]);
   var trackWidth, trackHeight;
@@ -9108,7 +9356,7 @@ var getTrackCSS = function getTrackCSS(spec) {
     var WebkitTransform = !spec.vertical ? "translate3d(" + spec.left + "px, 0px, 0px)" : "translate3d(0px, " + spec.left + "px, 0px)";
     var transform = !spec.vertical ? "translate3d(" + spec.left + "px, 0px, 0px)" : "translate3d(0px, " + spec.left + "px, 0px)";
     var msTransform = !spec.vertical ? "translateX(" + spec.left + "px)" : "translateY(" + spec.left + "px)";
-    style = _objectSpread$4(_objectSpread$4({}, style), {}, {
+    style = _objectSpread2(_objectSpread2({}, style), {}, {
       WebkitTransform: WebkitTransform,
       transform: transform,
       msTransform: msTransform
@@ -9137,9 +9385,6 @@ var getTrackCSS = function getTrackCSS(spec) {
 
   return style;
 };
-
-innerSliderUtils.getTrackCSS = getTrackCSS;
-
 var getTrackAnimateCSS = function getTrackAnimateCSS(spec) {
   checkSpecKeys(spec, ["left", "variableWidth", "slideCount", "slidesToShow", "slideWidth", "speed", "cssEase"]);
   var style = getTrackCSS(spec); // useCSS is true by default so it can be undefined
@@ -9157,9 +9402,6 @@ var getTrackAnimateCSS = function getTrackAnimateCSS(spec) {
 
   return style;
 };
-
-innerSliderUtils.getTrackAnimateCSS = getTrackAnimateCSS;
-
 var getTrackLeft = function getTrackLeft(spec) {
   if (spec.unslick) {
     return 0;
@@ -9244,9 +9486,6 @@ var getTrackLeft = function getTrackLeft(spec) {
 
   return targetLeft;
 };
-
-innerSliderUtils.getTrackLeft = getTrackLeft;
-
 var getPreClones = function getPreClones(spec) {
   if (spec.unslick || !spec.infinite) {
     return 0;
@@ -9258,9 +9497,6 @@ var getPreClones = function getPreClones(spec) {
 
   return spec.slidesToShow + (spec.centerMode ? 1 : 0);
 };
-
-innerSliderUtils.getPreClones = getPreClones;
-
 var getPostClones = function getPostClones(spec) {
   if (spec.unslick || !spec.infinite) {
     return 0;
@@ -9268,15 +9504,9 @@ var getPostClones = function getPostClones(spec) {
 
   return spec.slideCount;
 };
-
-innerSliderUtils.getPostClones = getPostClones;
-
 var getTotalSlides = function getTotalSlides(spec) {
   return spec.slideCount === 1 ? 1 : getPreClones(spec) + spec.slideCount + getPostClones(spec);
 };
-
-innerSliderUtils.getTotalSlides = getTotalSlides;
-
 var siblingDirection = function siblingDirection(spec) {
   if (spec.targetSlide > spec.currentSlide) {
     if (spec.targetSlide > spec.currentSlide + slidesOnRight(spec)) {
@@ -9292,9 +9522,6 @@ var siblingDirection = function siblingDirection(spec) {
     return "left";
   }
 };
-
-innerSliderUtils.siblingDirection = siblingDirection;
-
 var slidesOnRight = function slidesOnRight(_ref) {
   var slidesToShow = _ref.slidesToShow,
       centerMode = _ref.centerMode,
@@ -9315,9 +9542,6 @@ var slidesOnRight = function slidesOnRight(_ref) {
 
   return slidesToShow - 1;
 };
-
-innerSliderUtils.slidesOnRight = slidesOnRight;
-
 var slidesOnLeft = function slidesOnLeft(_ref2) {
   var slidesToShow = _ref2.slidesToShow,
       centerMode = _ref2.centerMode,
@@ -9338,61 +9562,10 @@ var slidesOnLeft = function slidesOnLeft(_ref2) {
 
   return 0;
 };
-
-innerSliderUtils.slidesOnLeft = slidesOnLeft;
-
 var canUseDOM = function canUseDOM() {
   return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 };
 
-innerSliderUtils.canUseDOM = canUseDOM;
-
-var track = {};
-
-Object.defineProperty(track, "__esModule", {
-  value: true
-});
-track.Track = void 0;
-
-var _react$3 = _interopRequireDefault$3(React);
-
-var _classnames$3 = _interopRequireDefault$3(classnames.exports);
-
-var _innerSliderUtils$3 = innerSliderUtils;
-
-function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _typeof$3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$3 = function _typeof(obj) { return typeof obj; }; } else { _typeof$3 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$3(obj); }
-
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-
-function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties$3(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass$3(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$3(Constructor.prototype, protoProps); if (staticProps) _defineProperties$3(Constructor, staticProps); return Constructor; }
-
-function _inherits$3(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$3(subClass, superClass); }
-
-function _setPrototypeOf$3(o, p) { _setPrototypeOf$3 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$3(o, p); }
-
-function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf$3(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf$3(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn$3(this, result); }; }
-
-function _possibleConstructorReturn$3(self, call) { if (call && (_typeof$3(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$3(self); }
-
-function _assertThisInitialized$3(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf$3(o) { _getPrototypeOf$3 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$3(o); }
-
-function ownKeys$3(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 _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty$3(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; }
-
-// given specifications/props for a slide, fetch all the classes that need to be applied to the slide
 var getSlideClasses = function getSlideClasses(spec) {
   var slickActive, slickCenter, slickCloned;
   var centerOffset, index;
@@ -9464,7 +9637,7 @@ var getSlideStyle = function getSlideStyle(spec) {
 };
 
 var getKey = function getKey(child, fallbackKey) {
-  return child.key || fallbackKey;
+  return child.key + "-" + fallbackKey;
 };
 
 var renderSlides = function renderSlides(spec) {
@@ -9472,13 +9645,10 @@ var renderSlides = function renderSlides(spec) {
   var slides = [];
   var preCloneSlides = [];
   var postCloneSlides = [];
-
-  var childrenCount = _react$3["default"].Children.count(spec.children);
-
-  var startIndex = (0, _innerSliderUtils$3.lazyStartIndex)(spec);
-  var endIndex = (0, _innerSliderUtils$3.lazyEndIndex)(spec);
-
-  _react$3["default"].Children.forEach(spec.children, function (elem, index) {
+  var childrenCount = React.Children.count(spec.children);
+  var startIndex = lazyStartIndex(spec);
+  var endIndex = lazyEndIndex(spec);
+  React.Children.forEach(spec.children, function (elem, index) {
     var child;
     var childOnClickOptions = {
       message: "children",
@@ -9490,24 +9660,24 @@ var renderSlides = function renderSlides(spec) {
     if (!spec.lazyLoad || spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0) {
       child = elem;
     } else {
-      child = /*#__PURE__*/_react$3["default"].createElement("div", null);
+      child = /*#__PURE__*/React.createElement("div", null);
     }
 
-    var childStyle = getSlideStyle(_objectSpread$3(_objectSpread$3({}, spec), {}, {
+    var childStyle = getSlideStyle(_objectSpread2(_objectSpread2({}, spec), {}, {
       index: index
     }));
     var slideClass = child.props.className || "";
-    var slideClasses = getSlideClasses(_objectSpread$3(_objectSpread$3({}, spec), {}, {
+    var slideClasses = getSlideClasses(_objectSpread2(_objectSpread2({}, spec), {}, {
       index: index
     })); // push a cloned element of the desired slide
 
-    slides.push( /*#__PURE__*/_react$3["default"].cloneElement(child, {
+    slides.push( /*#__PURE__*/React.cloneElement(child, {
       key: "original" + getKey(child, index),
       "data-index": index,
-      className: (0, _classnames$3["default"])(slideClasses, slideClass),
+      className: classnames(slideClasses, slideClass),
       tabIndex: "-1",
       "aria-hidden": !slideClasses["slick-active"],
-      style: _objectSpread$3(_objectSpread$3({
+      style: _objectSpread2(_objectSpread2({
         outline: "none"
       }, child.props.style || {}), childStyle),
       onClick: function onClick(e) {
@@ -9522,23 +9692,23 @@ var renderSlides = function renderSlides(spec) {
     if (spec.infinite && spec.fade === false) {
       var preCloneNo = childrenCount - index;
 
-      if (preCloneNo <= (0, _innerSliderUtils$3.getPreClones)(spec) && childrenCount !== spec.slidesToShow) {
+      if (preCloneNo <= getPreClones(spec) && childrenCount !== spec.slidesToShow) {
         key = -preCloneNo;
 
         if (key >= startIndex) {
           child = elem;
         }
 
-        slideClasses = getSlideClasses(_objectSpread$3(_objectSpread$3({}, spec), {}, {
+        slideClasses = getSlideClasses(_objectSpread2(_objectSpread2({}, spec), {}, {
           index: key
         }));
-        preCloneSlides.push( /*#__PURE__*/_react$3["default"].cloneElement(child, {
+        preCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
           key: "precloned" + getKey(child, key),
           "data-index": key,
           tabIndex: "-1",
-          className: (0, _classnames$3["default"])(slideClasses, slideClass),
+          className: classnames(slideClasses, slideClass),
           "aria-hidden": !slideClasses["slick-active"],
-          style: _objectSpread$3(_objectSpread$3({}, child.props.style || {}), childStyle),
+          style: _objectSpread2(_objectSpread2({}, child.props.style || {}), childStyle),
           onClick: function onClick(e) {
             child.props && child.props.onClick && child.props.onClick(e);
 
@@ -9556,16 +9726,16 @@ var renderSlides = function renderSlides(spec) {
           child = elem;
         }
 
-        slideClasses = getSlideClasses(_objectSpread$3(_objectSpread$3({}, spec), {}, {
+        slideClasses = getSlideClasses(_objectSpread2(_objectSpread2({}, spec), {}, {
           index: key
         }));
-        postCloneSlides.push( /*#__PURE__*/_react$3["default"].cloneElement(child, {
+        postCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
           key: "postcloned" + getKey(child, key),
           "data-index": key,
           tabIndex: "-1",
-          className: (0, _classnames$3["default"])(slideClasses, slideClass),
+          className: classnames(slideClasses, slideClass),
           "aria-hidden": !slideClasses["slick-active"],
-          style: _objectSpread$3(_objectSpread$3({}, child.props.style || {}), childStyle),
+          style: _objectSpread2(_objectSpread2({}, child.props.style || {}), childStyle),
           onClick: function onClick(e) {
             child.props && child.props.onClick && child.props.onClick(e);
 
@@ -9586,14 +9756,14 @@ var renderSlides = function renderSlides(spec) {
 };
 
 var Track = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits$3(Track, _React$PureComponent);
+  _inherits(Track, _React$PureComponent);
 
-  var _super = _createSuper$3(Track);
+  var _super = _createSuper(Track);
 
   function Track() {
     var _this;
 
-    _classCallCheck$3(this, Track);
+    _classCallCheck(this, Track);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -9601,83 +9771,38 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty$3(_assertThisInitialized$3(_this), "node", null);
+    _defineProperty(_assertThisInitialized(_this), "node", null);
 
-    _defineProperty$3(_assertThisInitialized$3(_this), "handleRef", function (ref) {
+    _defineProperty(_assertThisInitialized(_this), "handleRef", function (ref) {
       _this.node = ref;
     });
 
     return _this;
   }
 
-  _createClass$3(Track, [{
+  _createClass(Track, [{
     key: "render",
-    value: function render() {
-      var slides = renderSlides(this.props);
-      var _this$props = this.props,
-          onMouseEnter = _this$props.onMouseEnter,
-          onMouseOver = _this$props.onMouseOver,
-          onMouseLeave = _this$props.onMouseLeave;
-      var mouseEvents = {
-        onMouseEnter: onMouseEnter,
-        onMouseOver: onMouseOver,
-        onMouseLeave: onMouseLeave
-      };
-      return /*#__PURE__*/_react$3["default"].createElement("div", _extends$2({
-        ref: this.handleRef,
-        className: "slick-track",
-        style: this.props.trackStyle
-      }, mouseEvents), slides);
-    }
-  }]);
-
-  return Track;
-}(_react$3["default"].PureComponent);
-
-track.Track = Track;
-
-var dots = {};
-
-Object.defineProperty(dots, "__esModule", {
-  value: true
-});
-dots.Dots = void 0;
-
-var _react$2 = _interopRequireDefault$2(React);
-
-var _classnames$2 = _interopRequireDefault$2(classnames.exports);
-
-var _innerSliderUtils$2 = innerSliderUtils;
-
-function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _typeof$2(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
-
-function ownKeys$2(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 _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty$2(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 _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
-
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
-
-function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
-
-function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf$2(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf$2(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn$2(this, result); }; }
-
-function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$2(self); }
-
-function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+    value: function render() {
+      var slides = renderSlides(this.props);
+      var _this$props = this.props,
+          onMouseEnter = _this$props.onMouseEnter,
+          onMouseOver = _this$props.onMouseOver,
+          onMouseLeave = _this$props.onMouseLeave;
+      var mouseEvents = {
+        onMouseEnter: onMouseEnter,
+        onMouseOver: onMouseOver,
+        onMouseLeave: onMouseLeave
+      };
+      return /*#__PURE__*/React.createElement("div", _extends$1({
+        ref: this.handleRef,
+        className: "slick-track",
+        style: this.props.trackStyle
+      }, mouseEvents), slides);
+    }
+  }]);
 
-function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
+  return Track;
+}(React.PureComponent);
 
 var getDotCount = function getDotCount(spec) {
   var dots;
@@ -9692,17 +9817,17 @@ var getDotCount = function getDotCount(spec) {
 };
 
 var Dots = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits$2(Dots, _React$PureComponent);
+  _inherits(Dots, _React$PureComponent);
 
-  var _super = _createSuper$2(Dots);
+  var _super = _createSuper(Dots);
 
   function Dots() {
-    _classCallCheck$2(this, Dots);
+    _classCallCheck(this, Dots);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass$2(Dots, [{
+  _createClass(Dots, [{
     key: "clickHandler",
     value: function clickHandler(options, e) {
       // In Autoplay the focus stays on clicked button even after transition
@@ -9738,12 +9863,12 @@ var Dots = /*#__PURE__*/function (_React$PureComponent) {
       for (var i = 0; i < dotCount; i++) {
         var _rightBound = (i + 1) * slidesToScroll - 1;
 
-        var rightBound = infinite ? _rightBound : (0, _innerSliderUtils$2.clamp)(_rightBound, 0, slideCount - 1);
+        var rightBound = infinite ? _rightBound : clamp(_rightBound, 0, slideCount - 1);
 
         var _leftBound = rightBound - (slidesToScroll - 1);
 
-        var leftBound = infinite ? _leftBound : (0, _innerSliderUtils$2.clamp)(_leftBound, 0, slideCount - 1);
-        var className = (0, _classnames$2["default"])({
+        var leftBound = infinite ? _leftBound : clamp(_leftBound, 0, slideCount - 1);
+        var className = classnames({
           "slick-active": infinite ? currentSlide >= leftBound && currentSlide <= rightBound : currentSlide === leftBound
         });
         var dotOptions = {
@@ -9753,82 +9878,35 @@ var Dots = /*#__PURE__*/function (_React$PureComponent) {
           currentSlide: currentSlide
         };
         var onClick = this.clickHandler.bind(this, dotOptions);
-        dots = dots.concat( /*#__PURE__*/_react$2["default"].createElement("li", {
+        dots = dots.concat( /*#__PURE__*/React.createElement("li", {
           key: i,
           className: className
-        }, /*#__PURE__*/_react$2["default"].cloneElement(this.props.customPaging(i), {
+        }, /*#__PURE__*/React.cloneElement(this.props.customPaging(i), {
           onClick: onClick
         })));
       }
 
-      return /*#__PURE__*/_react$2["default"].cloneElement(this.props.appendDots(dots), _objectSpread$2({
+      return /*#__PURE__*/React.cloneElement(this.props.appendDots(dots), _objectSpread2({
         className: this.props.dotsClass
       }, mouseEvents));
     }
   }]);
 
   return Dots;
-}(_react$2["default"].PureComponent);
-
-dots.Dots = Dots;
-
-var arrows = {};
-
-Object.defineProperty(arrows, "__esModule", {
-  value: true
-});
-arrows.NextArrow = arrows.PrevArrow = void 0;
-
-var _react$1 = _interopRequireDefault$1(React);
-
-var _classnames$1 = _interopRequireDefault$1(classnames.exports);
-
-var _innerSliderUtils$1 = innerSliderUtils;
-
-function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _typeof$1(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
-
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
-function ownKeys$1(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 _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty$1(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 _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
-
-function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
-
-function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn$1(this, result); }; }
-
-function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
-
-function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
+}(React.PureComponent);
 
 var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits$1(PrevArrow, _React$PureComponent);
+  _inherits(PrevArrow, _React$PureComponent);
 
-  var _super = _createSuper$1(PrevArrow);
+  var _super = _createSuper(PrevArrow);
 
   function PrevArrow() {
-    _classCallCheck$1(this, PrevArrow);
+    _classCallCheck(this, PrevArrow);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass$1(PrevArrow, [{
+  _createClass(PrevArrow, [{
     key: "clickHandler",
     value: function clickHandler(options, e) {
       if (e) {
@@ -9856,7 +9934,7 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
       var prevArrowProps = {
         key: "0",
         "data-role": "none",
-        className: (0, _classnames$1["default"])(prevClasses),
+        className: classnames(prevClasses),
         style: {
           display: "block"
         },
@@ -9869,9 +9947,9 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
       var prevArrow;
 
       if (this.props.prevArrow) {
-        prevArrow = /*#__PURE__*/_react$1["default"].cloneElement(this.props.prevArrow, _objectSpread$1(_objectSpread$1({}, prevArrowProps), customProps));
+        prevArrow = /*#__PURE__*/React.cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
       } else {
-        prevArrow = /*#__PURE__*/_react$1["default"].createElement("button", _extends$1({
+        prevArrow = /*#__PURE__*/React.createElement("button", _extends$1({
           key: "0",
           type: "button"
         }, prevArrowProps), " ", "Previous");
@@ -9882,22 +9960,19 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return PrevArrow;
-}(_react$1["default"].PureComponent);
-
-arrows.PrevArrow = PrevArrow;
-
+}(React.PureComponent);
 var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
-  _inherits$1(NextArrow, _React$PureComponent2);
+  _inherits(NextArrow, _React$PureComponent2);
 
-  var _super2 = _createSuper$1(NextArrow);
+  var _super2 = _createSuper(NextArrow);
 
   function NextArrow() {
-    _classCallCheck$1(this, NextArrow);
+    _classCallCheck(this, NextArrow);
 
     return _super2.apply(this, arguments);
   }
 
-  _createClass$1(NextArrow, [{
+  _createClass(NextArrow, [{
     key: "clickHandler",
     value: function clickHandler(options, e) {
       if (e) {
@@ -9917,7 +9992,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
         message: "next"
       });
 
-      if (!(0, _innerSliderUtils$1.canGoNext)(this.props)) {
+      if (!canGoNext(this.props)) {
         nextClasses["slick-disabled"] = true;
         nextHandler = null;
       }
@@ -9925,7 +10000,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
       var nextArrowProps = {
         key: "1",
         "data-role": "none",
-        className: (0, _classnames$1["default"])(nextClasses),
+        className: classnames(nextClasses),
         style: {
           display: "block"
         },
@@ -9938,9 +10013,9 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
       var nextArrow;
 
       if (this.props.nextArrow) {
-        nextArrow = /*#__PURE__*/_react$1["default"].cloneElement(this.props.nextArrow, _objectSpread$1(_objectSpread$1({}, nextArrowProps), customProps));
+        nextArrow = /*#__PURE__*/React.cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
       } else {
-        nextArrow = /*#__PURE__*/_react$1["default"].createElement("button", _extends$1({
+        nextArrow = /*#__PURE__*/React.createElement("button", _extends$1({
           key: "1",
           type: "button"
         }, nextArrowProps), " ", "Next");
@@ -9951,9 +10026,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
   }]);
 
   return NextArrow;
-}(_react$1["default"].PureComponent);
-
-arrows.NextArrow = NextArrow;
+}(React.PureComponent);
 
 /**
  * A collection of shims that provide minimal functionality of the ES6 collections.
@@ -10882,72 +10955,6 @@ var index$1 = (function () {
     return ResizeObserver;
 })();
 
-var ResizeObserver_es = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': index$1
-});
-
-var require$$8 = /*@__PURE__*/getAugmentedNamespace(ResizeObserver_es);
-
-Object.defineProperty(innerSlider, "__esModule", {
-  value: true
-});
-innerSlider.InnerSlider = void 0;
-
-var _react = _interopRequireDefault(React);
-
-var _initialState = _interopRequireDefault(initialState);
-
-var _lodash = _interopRequireDefault(lodash_debounce);
-
-var _classnames = _interopRequireDefault(classnames.exports);
-
-var _innerSliderUtils = innerSliderUtils;
-
-var _track = track;
-
-var _dots = dots;
-
-var _arrows = arrows;
-
-var _resizeObserverPolyfill = _interopRequireDefault(require$$8);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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); }
-
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(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 _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 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 _objectSpread(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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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; }
-
 var InnerSlider = /*#__PURE__*/function (_React$Component) {
   _inherits(InnerSlider, _React$Component);
 
@@ -10972,7 +10979,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       if (_this.props.adaptiveHeight && _this.list) {
         var elem = _this.list.querySelector("[data-index=\"".concat(_this.state.currentSlide, "\"]"));
 
-        _this.list.style.height = (0, _innerSliderUtils.getHeight)(elem) + "px";
+        _this.list.style.height = getHeight(elem) + "px";
       }
     });
 
@@ -10980,7 +10987,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       _this.props.onInit && _this.props.onInit();
 
       if (_this.props.lazyLoad) {
-        var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)(_objectSpread(_objectSpread({}, _this.props), _this.state));
+        var slidesToLoad = getOnDemandLazySlides(_objectSpread2(_objectSpread2({}, _this.props), _this.state));
 
         if (slidesToLoad.length > 0) {
           _this.setState(function (prevState) {
@@ -10995,7 +11002,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      var spec = _objectSpread({
+      var spec = _objectSpread2({
         listRef: _this.list,
         trackRef: _this.track
       }, _this.props);
@@ -11003,14 +11010,14 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       _this.updateState(spec, true, function () {
         _this.adaptHeight();
 
-        _this.props.autoplay && _this.autoPlay("update");
+        _this.props.autoplay && _this.autoPlay("playing");
       });
 
       if (_this.props.lazyLoad === "progressive") {
         _this.lazyLoadTimer = setInterval(_this.progressiveLazyLoad, 1000);
       }
 
-      _this.ro = new _resizeObserverPolyfill["default"](function () {
+      _this.ro = new index$1(function () {
         if (_this.state.animating) {
           _this.onWindowResized(false); // don't set trackStyle hence don't break animation
 
@@ -11073,7 +11080,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       _this.props.onReInit && _this.props.onReInit();
 
       if (_this.props.lazyLoad) {
-        var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)(_objectSpread(_objectSpread({}, _this.props), _this.state));
+        var slidesToLoad = getOnDemandLazySlides(_objectSpread2(_objectSpread2({}, _this.props), _this.state));
 
         if (slidesToLoad.length > 0) {
           _this.setState(function (prevState) {
@@ -11093,7 +11100,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
 
       _this.adaptHeight();
 
-      var spec = _objectSpread(_objectSpread({
+      var spec = _objectSpread2(_objectSpread2({
         listRef: _this.list,
         trackRef: _this.track
       }, _this.props), _this.state);
@@ -11101,25 +11108,29 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       var setTrackStyle = _this.didPropsChange(prevProps);
 
       setTrackStyle && _this.updateState(spec, setTrackStyle, function () {
-        if (_this.state.currentSlide >= _react["default"].Children.count(_this.props.children)) {
+        if (_this.state.currentSlide >= React.Children.count(_this.props.children)) {
           _this.changeSlide({
             message: "index",
-            index: _react["default"].Children.count(_this.props.children) - _this.props.slidesToShow,
+            index: React.Children.count(_this.props.children) - _this.props.slidesToShow,
             currentSlide: _this.state.currentSlide
           });
         }
 
-        if (_this.props.autoplay) {
-          _this.autoPlay("update");
-        } else {
-          _this.pause("paused");
+        if (prevProps.autoplay !== _this.props.autoplay || prevProps.autoplaySpeed !== _this.props.autoplaySpeed) {
+          if (!prevProps.autoplay && _this.props.autoplay) {
+            _this.autoPlay("playing");
+          } else if (_this.props.autoplay) {
+            _this.autoPlay("update");
+          } else {
+            _this.pause("paused");
+          }
         }
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "onWindowResized", function (setTrackStyle) {
       if (_this.debouncedResize) _this.debouncedResize.cancel();
-      _this.debouncedResize = (0, _lodash["default"])(function () {
+      _this.debouncedResize = debounce_1(function () {
         return _this.resizeWindow(setTrackStyle);
       }, 50);
 
@@ -11132,7 +11143,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
 
       if (!isTrackMounted) return;
 
-      var spec = _objectSpread(_objectSpread({
+      var spec = _objectSpread2(_objectSpread2({
         listRef: _this.list,
         trackRef: _this.track
       }, _this.props), _this.state);
@@ -11151,17 +11162,17 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "updateState", function (spec, setTrackStyle, callback) {
-      var updatedState = (0, _innerSliderUtils.initializedState)(spec);
-      spec = _objectSpread(_objectSpread(_objectSpread({}, spec), updatedState), {}, {
+      var updatedState = initializedState(spec);
+      spec = _objectSpread2(_objectSpread2(_objectSpread2({}, spec), updatedState), {}, {
         slideIndex: updatedState.currentSlide
       });
-      var targetLeft = (0, _innerSliderUtils.getTrackLeft)(spec);
-      spec = _objectSpread(_objectSpread({}, spec), {}, {
+      var targetLeft = getTrackLeft(spec);
+      spec = _objectSpread2(_objectSpread2({}, spec), {}, {
         left: targetLeft
       });
-      var trackStyle = (0, _innerSliderUtils.getTrackCSS)(spec);
+      var trackStyle = getTrackCSS(spec);
 
-      if (setTrackStyle || _react["default"].Children.count(_this.props.children) !== _react["default"].Children.count(spec.children)) {
+      if (setTrackStyle || React.Children.count(_this.props.children) !== React.Children.count(spec.children)) {
         updatedState["trackStyle"] = trackStyle;
       }
 
@@ -11173,10 +11184,10 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         var _trackWidth = 0,
             _trackLeft = 0;
         var childrenWidths = [];
-        var preClones = (0, _innerSliderUtils.getPreClones)(_objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
+        var preClones = getPreClones(_objectSpread2(_objectSpread2(_objectSpread2({}, _this.props), _this.state), {}, {
           slideCount: _this.props.children.length
         }));
-        var postClones = (0, _innerSliderUtils.getPostClones)(_objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
+        var postClones = getPostClones(_objectSpread2(_objectSpread2(_objectSpread2({}, _this.props), _this.state), {}, {
           slideCount: _this.props.children.length
         }));
 
@@ -11213,16 +11224,16 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      var childrenCount = _react["default"].Children.count(_this.props.children);
+      var childrenCount = React.Children.count(_this.props.children);
 
-      var spec = _objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
+      var spec = _objectSpread2(_objectSpread2(_objectSpread2({}, _this.props), _this.state), {}, {
         slideCount: childrenCount
       });
 
-      var slideCount = (0, _innerSliderUtils.getPreClones)(spec) + (0, _innerSliderUtils.getPostClones)(spec) + childrenCount;
+      var slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount;
       var trackWidth = 100 / _this.props.slidesToShow * slideCount;
       var slideWidth = 100 / slideCount;
-      var trackLeft = -slideWidth * ((0, _innerSliderUtils.getPreClones)(spec) + _this.state.currentSlide) * trackWidth / 100;
+      var trackLeft = -slideWidth * (getPreClones(spec) + _this.state.currentSlide) * trackWidth / 100;
 
       if (_this.props.centerMode) {
         trackLeft += (100 - slideWidth * trackWidth / 100) / 2;
@@ -11282,16 +11293,16 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "progressiveLazyLoad", function () {
       var slidesToLoad = [];
 
-      var spec = _objectSpread(_objectSpread({}, _this.props), _this.state);
+      var spec = _objectSpread2(_objectSpread2({}, _this.props), _this.state);
 
-      for (var index = _this.state.currentSlide; index < _this.state.slideCount + (0, _innerSliderUtils.getPostClones)(spec); index++) {
+      for (var index = _this.state.currentSlide; index < _this.state.slideCount + getPostClones(spec); index++) {
         if (_this.state.lazyLoadedList.indexOf(index) < 0) {
           slidesToLoad.push(index);
           break;
         }
       }
 
-      for (var _index = _this.state.currentSlide - 1; _index >= -(0, _innerSliderUtils.getPreClones)(spec); _index--) {
+      for (var _index = _this.state.currentSlide - 1; _index >= -getPreClones(spec); _index--) {
         if (_this.state.lazyLoadedList.indexOf(_index) < 0) {
           slidesToLoad.push(_index);
           break;
@@ -11327,7 +11338,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
 
       var currentSlide = _this.state.currentSlide;
 
-      var _slideHandler = (0, _innerSliderUtils.slideHandler)(_objectSpread(_objectSpread(_objectSpread({
+      var _slideHandler = slideHandler(_objectSpread2(_objectSpread2(_objectSpread2({
         index: index
       }, _this.props), _this.state), {}, {
         trackRef: _this.track,
@@ -11378,9 +11389,9 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "changeSlide", function (options) {
       var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-      var spec = _objectSpread(_objectSpread({}, _this.props), _this.state);
+      var spec = _objectSpread2(_objectSpread2({}, _this.props), _this.state);
 
-      var targetSlide = (0, _innerSliderUtils.changeSlide)(spec, options);
+      var targetSlide = changeSlide(spec, options);
       if (targetSlide !== 0 && !targetSlide) return;
 
       if (dontAnimate === true) {
@@ -11408,7 +11419,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "keyHandler", function (e) {
-      var dir = (0, _innerSliderUtils.keyHandler)(e, _this.props.accessibility, _this.props.rtl);
+      var dir = keyHandler(e, _this.props.accessibility, _this.props.rtl);
       dir !== "" && _this.changeSlide({
         message: dir
       });
@@ -11437,12 +11448,12 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         _this.disableBodyScroll();
       }
 
-      var state = (0, _innerSliderUtils.swipeStart)(e, _this.props.swipe, _this.props.draggable);
+      var state = swipeStart(e, _this.props.swipe, _this.props.draggable);
       state !== "" && _this.setState(state);
     });
 
     _defineProperty(_assertThisInitialized(_this), "swipeMove", function (e) {
-      var state = (0, _innerSliderUtils.swipeMove)(e, _objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
+      var state = swipeMove(e, _objectSpread2(_objectSpread2(_objectSpread2({}, _this.props), _this.state), {}, {
         trackRef: _this.track,
         listRef: _this.list,
         slideIndex: _this.state.currentSlide
@@ -11457,7 +11468,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "swipeEnd", function (e) {
-      var state = (0, _innerSliderUtils.swipeEnd)(e, _objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
+      var state = swipeEnd(e, _objectSpread2(_objectSpread2(_objectSpread2({}, _this.props), _this.state), {}, {
         trackRef: _this.track,
         listRef: _this.list,
         slideIndex: _this.state.currentSlide
@@ -11522,7 +11533,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       if (_this.props.rtl) {
         nextIndex = _this.state.currentSlide - _this.props.slidesToScroll;
       } else {
-        if ((0, _innerSliderUtils.canGoNext)(_objectSpread(_objectSpread({}, _this.props), _this.state))) {
+        if (canGoNext(_objectSpread2(_objectSpread2({}, _this.props), _this.state))) {
           nextIndex = _this.state.currentSlide + _this.props.slidesToScroll;
         } else {
           return false;
@@ -11613,16 +11624,16 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "render", function () {
-      var className = (0, _classnames["default"])("slick-slider", _this.props.className, {
+      var className = classnames("slick-slider", _this.props.className, {
         "slick-vertical": _this.props.vertical,
         "slick-initialized": true
       });
 
-      var spec = _objectSpread(_objectSpread({}, _this.props), _this.state);
+      var spec = _objectSpread2(_objectSpread2({}, _this.props), _this.state);
 
-      var trackProps = (0, _innerSliderUtils.extractObject)(spec, ["fade", "cssEase", "speed", "infinite", "centerMode", "focusOnSelect", "currentSlide", "lazyLoad", "lazyLoadedList", "rtl", "slideWidth", "slideHeight", "listHeight", "vertical", "slidesToShow", "slidesToScroll", "slideCount", "trackStyle", "variableWidth", "unslick", "centerPadding", "targetSlide", "useCSS"]);
+      var trackProps = extractObject(spec, ["fade", "cssEase", "speed", "infinite", "centerMode", "focusOnSelect", "currentSlide", "lazyLoad", "lazyLoadedList", "rtl", "slideWidth", "slideHeight", "listHeight", "vertical", "slidesToShow", "slidesToScroll", "slideCount", "trackStyle", "variableWidth", "unslick", "centerPadding", "targetSlide", "useCSS"]);
       var pauseOnHover = _this.props.pauseOnHover;
-      trackProps = _objectSpread(_objectSpread({}, trackProps), {}, {
+      trackProps = _objectSpread2(_objectSpread2({}, trackProps), {}, {
         onMouseEnter: pauseOnHover ? _this.onTrackOver : null,
         onMouseLeave: pauseOnHover ? _this.onTrackLeave : null,
         onMouseOver: pauseOnHover ? _this.onTrackOver : null,
@@ -11631,24 +11642,24 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       var dots;
 
       if (_this.props.dots === true && _this.state.slideCount >= _this.props.slidesToShow) {
-        var dotProps = (0, _innerSliderUtils.extractObject)(spec, ["dotsClass", "slideCount", "slidesToShow", "currentSlide", "slidesToScroll", "clickHandler", "children", "customPaging", "infinite", "appendDots"]);
+        var dotProps = extractObject(spec, ["dotsClass", "slideCount", "slidesToShow", "currentSlide", "slidesToScroll", "clickHandler", "children", "customPaging", "infinite", "appendDots"]);
         var pauseOnDotsHover = _this.props.pauseOnDotsHover;
-        dotProps = _objectSpread(_objectSpread({}, dotProps), {}, {
+        dotProps = _objectSpread2(_objectSpread2({}, dotProps), {}, {
           clickHandler: _this.changeSlide,
           onMouseEnter: pauseOnDotsHover ? _this.onDotsLeave : null,
           onMouseOver: pauseOnDotsHover ? _this.onDotsOver : null,
           onMouseLeave: pauseOnDotsHover ? _this.onDotsLeave : null
         });
-        dots = /*#__PURE__*/_react["default"].createElement(_dots.Dots, dotProps);
+        dots = /*#__PURE__*/React.createElement(Dots, dotProps);
       }
 
       var prevArrow, nextArrow;
-      var arrowProps = (0, _innerSliderUtils.extractObject)(spec, ["infinite", "centerMode", "currentSlide", "slideCount", "slidesToShow", "prevArrow", "nextArrow"]);
+      var arrowProps = extractObject(spec, ["infinite", "centerMode", "currentSlide", "slideCount", "slidesToShow", "prevArrow", "nextArrow"]);
       arrowProps.clickHandler = _this.changeSlide;
 
       if (_this.props.arrows) {
-        prevArrow = /*#__PURE__*/_react["default"].createElement(_arrows.PrevArrow, arrowProps);
-        nextArrow = /*#__PURE__*/_react["default"].createElement(_arrows.NextArrow, arrowProps);
+        prevArrow = /*#__PURE__*/React.createElement(PrevArrow, arrowProps);
+        nextArrow = /*#__PURE__*/React.createElement(NextArrow, arrowProps);
       }
 
       var verticalHeightStyle = null;
@@ -11675,7 +11686,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      var listStyle = _objectSpread(_objectSpread({}, verticalHeightStyle), centerPaddingStyle);
+      var listStyle = _objectSpread2(_objectSpread2({}, verticalHeightStyle), centerPaddingStyle);
 
       var touchMove = _this.props.touchMove;
       var listProps = {
@@ -11707,18 +11718,18 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      return /*#__PURE__*/_react["default"].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/_react["default"].createElement("div", _extends({
+      return /*#__PURE__*/React.createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React.createElement("div", _extends$1({
         ref: _this.listRefHandler
-      }, listProps), /*#__PURE__*/_react["default"].createElement(_track.Track, _extends({
+      }, listProps), /*#__PURE__*/React.createElement(Track, _extends$1({
         ref: _this.trackRefHandler
       }, trackProps), _this.props.children)), !_this.props.unslick ? nextArrow : "", !_this.props.unslick ? dots : "");
     });
 
     _this.list = null;
     _this.track = null;
-    _this.state = _objectSpread(_objectSpread({}, _initialState["default"]), {}, {
+    _this.state = _objectSpread2(_objectSpread2({}, initialState), {}, {
       currentSlide: _this.props.initialSlide,
-      slideCount: _react["default"].Children.count(_this.props.children)
+      slideCount: React.Children.count(_this.props.children)
     });
     _this.callbackTimers = [];
     _this.clickable = true;
@@ -11726,7 +11737,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
 
     var ssrState = _this.ssrInit();
 
-    _this.state = _objectSpread(_objectSpread({}, _this.state), ssrState);
+    _this.state = _objectSpread2(_objectSpread2({}, _this.state), ssrState);
     return _this;
   }
 
@@ -11738,6 +11749,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       for (var _i3 = 0, _Object$keys = Object.keys(this.props); _i3 < _Object$keys.length; _i3++) {
         var key = _Object$keys[_i3];
 
+        // eslint-disable-next-line no-prototype-builtins
         if (!prevProps.hasOwnProperty(key)) {
           setTrackStyle = true;
           break;
@@ -11753,14 +11765,12 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return setTrackStyle || _react["default"].Children.count(this.props.children) !== _react["default"].Children.count(prevProps.children);
+      return setTrackStyle || React.Children.count(this.props.children) !== React.Children.count(prevProps.children);
     }
   }]);
 
   return InnerSlider;
-}(_react["default"].Component);
-
-innerSlider.InnerSlider = InnerSlider;
+}(React.Component);
 
 var camel2hyphen$1 = function (str) {
   return str
@@ -11824,25 +11834,12 @@ var json2mq = function (query) {
 
 var json2mq_1 = json2mq;
 
-var defaultProps = {};
-
-(function (exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(React);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var defaultProps = {
   accessibility: true,
   adaptiveHeight: false,
   afterChange: null,
   appendDots: function appendDots(dots) {
-    return /*#__PURE__*/_react["default"].createElement("ul", {
+    return /*#__PURE__*/React.createElement("ul", {
       style: {
         display: "block"
       }
@@ -11857,7 +11854,7 @@ var defaultProps = {
   className: "",
   cssEase: "ease",
   customPaging: function customPaging(i) {
-    return /*#__PURE__*/_react["default"].createElement("button", null, i + 1);
+    return /*#__PURE__*/React.createElement("button", null, i + 1);
   },
   dots: false,
   dotsClass: "slick-dots",
@@ -11897,365 +11894,6 @@ var defaultProps = {
   vertical: false,
   waitForAnimate: true
 };
-var _default = defaultProps;
-exports["default"] = _default;
-}(defaultProps));
-
-/**
- * Delegate to handle a media query being matched and unmatched.
- *
- * @param {object} options
- * @param {function} options.match callback for when the media query is matched
- * @param {function} [options.unmatch] callback for when the media query is unmatched
- * @param {function} [options.setup] one-time callback triggered the first time a query is matched
- * @param {boolean} [options.deferSetup=false] should the setup callback be run immediately, rather than first time query is matched?
- * @constructor
- */
-
-function QueryHandler$1(options) {
-    this.options = options;
-    !options.deferSetup && this.setup();
-}
-
-QueryHandler$1.prototype = {
-
-    constructor : QueryHandler$1,
-
-    /**
-     * coordinates setup of the handler
-     *
-     * @function
-     */
-    setup : function() {
-        if(this.options.setup) {
-            this.options.setup();
-        }
-        this.initialised = true;
-    },
-
-    /**
-     * coordinates setup and triggering of the handler
-     *
-     * @function
-     */
-    on : function() {
-        !this.initialised && this.setup();
-        this.options.match && this.options.match();
-    },
-
-    /**
-     * coordinates the unmatch event for the handler
-     *
-     * @function
-     */
-    off : function() {
-        this.options.unmatch && this.options.unmatch();
-    },
-
-    /**
-     * called when a handler is to be destroyed.
-     * delegates to the destroy or unmatch callbacks, depending on availability.
-     *
-     * @function
-     */
-    destroy : function() {
-        this.options.destroy ? this.options.destroy() : this.off();
-    },
-
-    /**
-     * determines equality by reference.
-     * if object is supplied compare options, if function, compare match callback
-     *
-     * @function
-     * @param {object || function} [target] the target for comparison
-     */
-    equals : function(target) {
-        return this.options === target || this.options.match === target;
-    }
-
-};
-
-var QueryHandler_1 = QueryHandler$1;
-
-/**
- * Helper function for iterating over a collection
- *
- * @param collection
- * @param fn
- */
-
-function each$2(collection, fn) {
-    var i      = 0,
-        length = collection.length,
-        cont;
-
-    for(i; i < length; i++) {
-        cont = fn(collection[i], i);
-        if(cont === false) {
-            break; //allow early exit
-        }
-    }
-}
-
-/**
- * Helper function for determining whether target object is an array
- *
- * @param target the object under test
- * @return {Boolean} true if array, false otherwise
- */
-function isArray$1(target) {
-    return Object.prototype.toString.apply(target) === '[object Array]';
-}
-
-/**
- * Helper function for determining whether target object is a function
- *
- * @param target the object under test
- * @return {Boolean} true if function, false otherwise
- */
-function isFunction$1(target) {
-    return typeof target === 'function';
-}
-
-var Util$1 = {
-    isFunction : isFunction$1,
-    isArray : isArray$1,
-    each : each$2
-};
-
-var QueryHandler = QueryHandler_1;
-var each$1 = Util$1.each;
-
-/**
- * Represents a single media query, manages it's state and registered handlers for this query
- *
- * @constructor
- * @param {string} query the media query string
- * @param {boolean} [isUnconditional=false] whether the media query should run regardless of whether the conditions are met. Primarily for helping older browsers deal with mobile-first design
- */
-function MediaQuery$1(query, isUnconditional) {
-    this.query = query;
-    this.isUnconditional = isUnconditional;
-    this.handlers = [];
-    this.mql = window.matchMedia(query);
-
-    var self = this;
-    this.listener = function(mql) {
-        // Chrome passes an MediaQueryListEvent object, while other browsers pass MediaQueryList directly
-        self.mql = mql.currentTarget || mql;
-        self.assess();
-    };
-    this.mql.addListener(this.listener);
-}
-
-MediaQuery$1.prototype = {
-
-    constuctor : MediaQuery$1,
-
-    /**
-     * add a handler for this query, triggering if already active
-     *
-     * @param {object} handler
-     * @param {function} handler.match callback for when query is activated
-     * @param {function} [handler.unmatch] callback for when query is deactivated
-     * @param {function} [handler.setup] callback for immediate execution when a query handler is registered
-     * @param {boolean} [handler.deferSetup=false] should the setup callback be deferred until the first time the handler is matched?
-     */
-    addHandler : function(handler) {
-        var qh = new QueryHandler(handler);
-        this.handlers.push(qh);
-
-        this.matches() && qh.on();
-    },
-
-    /**
-     * removes the given handler from the collection, and calls it's destroy methods
-     *
-     * @param {object || function} handler the handler to remove
-     */
-    removeHandler : function(handler) {
-        var handlers = this.handlers;
-        each$1(handlers, function(h, i) {
-            if(h.equals(handler)) {
-                h.destroy();
-                return !handlers.splice(i,1); //remove from array and exit each early
-            }
-        });
-    },
-
-    /**
-     * Determine whether the media query should be considered a match
-     *
-     * @return {Boolean} true if media query can be considered a match, false otherwise
-     */
-    matches : function() {
-        return this.mql.matches || this.isUnconditional;
-    },
-
-    /**
-     * Clears all handlers and unbinds events
-     */
-    clear : function() {
-        each$1(this.handlers, function(handler) {
-            handler.destroy();
-        });
-        this.mql.removeListener(this.listener);
-        this.handlers.length = 0; //clear array
-    },
-
-    /*
-        * Assesses the query, turning on all handlers if it matches, turning them off if it doesn't match
-        */
-    assess : function() {
-        var action = this.matches() ? 'on' : 'off';
-
-        each$1(this.handlers, function(handler) {
-            handler[action]();
-        });
-    }
-};
-
-var MediaQuery_1 = MediaQuery$1;
-
-var MediaQuery = MediaQuery_1;
-var Util = Util$1;
-var each = Util.each;
-var isFunction = Util.isFunction;
-var isArray = Util.isArray;
-
-/**
- * Allows for registration of query handlers.
- * Manages the query handler's state and is responsible for wiring up browser events
- *
- * @constructor
- */
-function MediaQueryDispatch$1 () {
-    if(!window.matchMedia) {
-        throw new Error('matchMedia not present, legacy browsers require a polyfill');
-    }
-
-    this.queries = {};
-    this.browserIsIncapable = !window.matchMedia('only all').matches;
-}
-
-MediaQueryDispatch$1.prototype = {
-
-    constructor : MediaQueryDispatch$1,
-
-    /**
-     * Registers a handler for the given media query
-     *
-     * @param {string} q the media query
-     * @param {object || Array || Function} options either a single query handler object, a function, or an array of query handlers
-     * @param {function} options.match fired when query matched
-     * @param {function} [options.unmatch] fired when a query is no longer matched
-     * @param {function} [options.setup] fired when handler first triggered
-     * @param {boolean} [options.deferSetup=false] whether setup should be run immediately or deferred until query is first matched
-     * @param {boolean} [shouldDegrade=false] whether this particular media query should always run on incapable browsers
-     */
-    register : function(q, options, shouldDegrade) {
-        var queries         = this.queries,
-            isUnconditional = shouldDegrade && this.browserIsIncapable;
-
-        if(!queries[q]) {
-            queries[q] = new MediaQuery(q, isUnconditional);
-        }
-
-        //normalise to object in an array
-        if(isFunction(options)) {
-            options = { match : options };
-        }
-        if(!isArray(options)) {
-            options = [options];
-        }
-        each(options, function(handler) {
-            if (isFunction(handler)) {
-                handler = { match : handler };
-            }
-            queries[q].addHandler(handler);
-        });
-
-        return this;
-    },
-
-    /**
-     * unregisters a query and all it's handlers, or a specific handler for a query
-     *
-     * @param {string} q the media query to target
-     * @param {object || function} [handler] specific handler to unregister
-     */
-    unregister : function(q, handler) {
-        var query = this.queries[q];
-
-        if(query) {
-            if(handler) {
-                query.removeHandler(handler);
-            }
-            else {
-                query.clear();
-                delete this.queries[q];
-            }
-        }
-
-        return this;
-    }
-};
-
-var MediaQueryDispatch_1 = MediaQueryDispatch$1;
-
-var MediaQueryDispatch = MediaQueryDispatch_1;
-var src = new MediaQueryDispatch();
-
-(function (exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(React);
-
-var _innerSlider = innerSlider;
-
-var _json2mq = _interopRequireDefault(json2mq_1);
-
-var _defaultProps = _interopRequireDefault(defaultProps);
-
-var _innerSliderUtils = innerSliderUtils;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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); }
-
-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 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 _objectSpread(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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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; }
-
-var enquire = (0, _innerSliderUtils.canUseDOM)() && src;
 
 var Slider = /*#__PURE__*/function (_React$Component) {
   _inherits(Slider, _React$Component);
@@ -12305,11 +11943,23 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "media",
     value: function media(query, handler) {
       // javascript handler for  css media query
-      enquire.register(query, handler);
+      var mql = window.matchMedia(query);
+
+      var listener = function listener(_ref) {
+        var matches = _ref.matches;
+
+        if (matches) {
+          handler();
+        }
+      };
+
+      mql.addListener(listener);
+      listener(mql);
 
       this._responsiveMediaHandlers.push({
+        mql: mql,
         query: query,
-        handler: handler
+        listener: listener
       });
     } // handles responsive breakpoints
 
@@ -12336,19 +11986,19 @@ var Slider = /*#__PURE__*/function (_React$Component) {
           var bQuery;
 
           if (index === 0) {
-            bQuery = (0, _json2mq["default"])({
+            bQuery = json2mq_1({
               minWidth: 0,
               maxWidth: breakpoint
             });
           } else {
-            bQuery = (0, _json2mq["default"])({
+            bQuery = json2mq_1({
               minWidth: breakpoints[index - 1] + 1,
               maxWidth: breakpoint
             });
           } // when not using server side rendering
 
 
-          (0, _innerSliderUtils.canUseDOM)() && _this2.media(bQuery, function () {
+          canUseDOM() && _this2.media(bQuery, function () {
             _this2.setState({
               breakpoint: breakpoint
             });
@@ -12356,10 +12006,10 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         }); // Register media query for full screen. Need to support resize from small to large
         // convert javascript object to media query string
 
-        var query = (0, _json2mq["default"])({
+        var query = json2mq_1({
           minWidth: breakpoints.slice(-1)[0]
         });
-        (0, _innerSliderUtils.canUseDOM)() && this.media(query, function () {
+        canUseDOM() && this.media(query, function () {
           _this2.setState({
             breakpoint: null
           });
@@ -12370,7 +12020,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._responsiveMediaHandlers.forEach(function (obj) {
-        enquire.unregister(obj.query, obj.handler);
+        obj.mql.removeListener(obj.listener);
       });
     }
   }, {
@@ -12385,9 +12035,9 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         newProps = this.props.responsive.filter(function (resp) {
           return resp.breakpoint === _this3.state.breakpoint;
         });
-        settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread(_objectSpread(_objectSpread({}, _defaultProps["default"]), this.props), newProps[0].settings);
+        settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps), this.props), newProps[0].settings);
       } else {
-        settings = _objectSpread(_objectSpread({}, _defaultProps["default"]), this.props);
+        settings = _objectSpread2(_objectSpread2({}, defaultProps), this.props);
       } // force scrolling by one if centerMode is on
 
 
@@ -12414,10 +12064,9 @@ var Slider = /*#__PURE__*/function (_React$Component) {
       } // makes sure that children is an array, even when there is only 1 child
 
 
-      var children = _react["default"].Children.toArray(this.props.children); // Children may contain false or null, so we should filter them
+      var children = React.Children.toArray(this.props.children); // Children may contain false or null, so we should filter them
       // children may also contain string filled with spaces (in certain cases where we use jsx strings)
 
-
       children = children.filter(function (child) {
         if (typeof child === "string") {
           return !!child.trim();
@@ -12446,7 +12095,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
             }
 
             if (k >= children.length) break;
-            row.push( /*#__PURE__*/_react["default"].cloneElement(children[k], {
+            row.push( /*#__PURE__*/React.cloneElement(children[k], {
               key: 100 * i + 10 * j + k,
               tabIndex: -1,
               style: {
@@ -12456,20 +12105,20 @@ var Slider = /*#__PURE__*/function (_React$Component) {
             }));
           }
 
-          newSlide.push( /*#__PURE__*/_react["default"].createElement("div", {
+          newSlide.push( /*#__PURE__*/React.createElement("div", {
             key: 10 * i + j
           }, row));
         }
 
         if (settings.variableWidth) {
-          newChildren.push( /*#__PURE__*/_react["default"].createElement("div", {
+          newChildren.push( /*#__PURE__*/React.createElement("div", {
             key: i,
             style: {
               width: currentWidth
             }
           }, newSlide));
         } else {
-          newChildren.push( /*#__PURE__*/_react["default"].createElement("div", {
+          newChildren.push( /*#__PURE__*/React.createElement("div", {
             key: i
           }, newSlide));
         }
@@ -12477,14 +12126,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
 
       if (settings === "unslick") {
         var className = "regular slider " + (this.props.className || "");
-        return /*#__PURE__*/_react["default"].createElement("div", {
+        return /*#__PURE__*/React.createElement("div", {
           className: className
         }, children);
       } else if (newChildren.length <= settings.slidesToShow) {
         settings.unslick = true;
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_innerSlider.InnerSlider, _extends({
+      return /*#__PURE__*/React.createElement(InnerSlider, _extends$1({
         style: this.props.style,
         ref: this.innerSliderRefHandler
       }, settings), newChildren);
@@ -12492,38 +12141,18 @@ var Slider = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return Slider;
-}(_react["default"].Component);
-
-exports["default"] = Slider;
-}(slider));
-
-(function (exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slider = _interopRequireDefault(slider);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = _slider["default"];
-exports["default"] = _default;
-}(lib));
+}(React.Component);
 
-var Slider = /*@__PURE__*/getDefaultExportFromCjs(lib);
-
-var StyledSlider = newStyled(Slider)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"], ["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"])), function (props) { return props.dotsSpacing + "rem"; }, function (props) { return props.dotListMarginTop + "rem"; }, function (_a) {
+var StyledSlider = newStyled(Slider)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"], ["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"])), function (props) { return props.dotsSpacing + "rem"; }, function (props) { return props.dotListMarginTop + "rem"; }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
     return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
 }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
     return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
 });
-var templateObject_1$3;
+var templateObject_1$5;
 
-var getStylesBySize = function (size) {
+var getStylesBySize$1 = function (size) {
     // rem units
     switch (size) {
         case ComponentSize.Large:
@@ -12555,7 +12184,7 @@ var getStylesBySize = function (size) {
 var SliderNavigation = function (_a) {
     var children = _a.children, infinite = _a.infinite, arrows = _a.arrows, adaptiveHeight = _a.adaptiveHeight, dotsSize = _a.dotsSize, dotListMarginTop = _a.dotListMarginTop, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
     var _c = useState(0), activeIndex = _c[0], setActiveIndex = _c[1];
-    var styles = getStylesBySize(dotsSize);
+    var styles = getStylesBySize$1(dotsSize);
     var theme = useTheme();
     var nextArrow = arrows && (jsx(ArrowButton, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
     var prevArrow = arrows && (jsx(ArrowButton, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
@@ -12577,13 +12206,13 @@ var SliderNavigation = function (_a) {
     return (jsx("div", __assign({ css: { padding: arrows ? "0 " + (arrows.arrowWidth + arrows.arrowPadding) + "rem" : 0 } }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
 };
 
-var List = newStyled.ul(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
-var Item = newStyled.li(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"], ["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"])));
+var List = newStyled.ul(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
+var Item = newStyled.li(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"], ["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"])));
 var DropdownWrapper = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"], ["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"])));
 var ArrowContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"], ["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"])));
 var StyledDropdown = newStyled.ul(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"], ["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
 var DropdownItem = newStyled.li(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"], ["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
-var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
+var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
 
 var DropdownListIcons = function (_a) {
     var items = _a.items;
@@ -12596,7 +12225,7 @@ var Dropdown = function (_a) {
     return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.shades.gray200, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.shades.gray200 }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.shades.gray200, color: theme.shades.gray550, hoverColor: theme.shades.gray010 }, { children: item.description }), index)); }) }), void 0)] }), void 0));
 };
 
-var StyledButton = newStyled(BaseButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
+var StyledButton = newStyled(BaseButton)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
 var AmazonButton = function (_a) {
     var onClick = _a.onClick;
     return (jsx$1(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
@@ -12605,7 +12234,7 @@ var PaypalButton = function (_a) {
     var onClick = _a.onClick;
     return (jsx$1(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
 };
-var templateObject_1$1;
+var templateObject_1$3;
 
 var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -12613,8 +12242,8 @@ var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
     PaypalButton: PaypalButton
 });
 
-var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
-var Col = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Wrapper = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
+var Col = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var Row = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"])), function (props) {
     return props.rightToLeft &&
         "\n    flex-direction: row-reverse;\n    justify-content: space-between;\n  ";
@@ -12627,12 +12256,67 @@ var CrossSellCheckbox = function (_a) {
     var theme = useTheme();
     return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.shades.gray010, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.semantic.alert }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.shades.gray700 }, { children: [" + ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     CrossSellCheckbox: CrossSellCheckbox
 });
 
-export { Accordion$1 as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, FitPredictor, Icon, IconButton, Image, index$3 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, TextButton, ThemeProvider, Timer, Tooltip, Totals };
+var ImageContainer = newStyled.div(function (_a) {
+    var width = _a.width, height = _a.height;
+    return ({
+        position: 'relative',
+        width: width,
+        height: height,
+    });
+});
+var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"])));
+var H1 = newStyled.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.palette.secondary.default; }, function (props) { return props.align; });
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Medium:
+            return {
+                width: '10.75rem',
+                height: '14.375rem',
+            };
+        case ComponentSize.Small:
+            return {
+                width: '9.813rem',
+                height: '13.125rem',
+            };
+        /* istanbul ignore next */
+        default:
+            return {
+                width: '10.75rem',
+                height: '14.375rem',
+            };
+    }
+};
+var ProductItemMobile = function (_a) {
+    var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
+    var theme = useTheme();
+    var styles = getStylesBySize(size);
+    return (jsxs(Container$1, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
+};
+var templateObject_1$1, templateObject_2;
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"])));
+function withProductGrid(ProductItemComponent, data) {
+    function WithProductGrid(props) {
+        return (jsx$1(Container, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
+    }
+    /* istanbul ignore next */
+    var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
+    WithProductGrid.displayName = "withGrid(" + wrappedComponentName + ")";
+    return WithProductGrid;
+}
+var templateObject_1;
+
+var Collection = {
+    ProductItemMobile: ProductItemMobile,
+    withProductGrid: withProductGrid,
+};
+
+export { Accordion$1 as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, FitPredictor, Icon, IconButton, Image, index$3 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, StarList, TextButton, ThemeProvider, Timer, Tooltip, Totals };
 //# sourceMappingURL=index.esm.js.map