@trafilea/afrodita-components 6.1.1 → 6.3.0

package/build/index.js

@@ -3093,22 +3093,21 @@ var inline = function (text) {
 };
 
 var ThemeProvider = function (_a) {
-    var theme = _a.theme, children = _a.children;
+    var theme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children;
+    //TODO Analyze why we are doing this and remove
     var parsedTheme = React$2.useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
-    return (jsxRuntime.jsx(ThemeProvider$1, __assign$1({ theme: parsedTheme }, { children: jsxRuntime.jsx(AssetsProvider, __assign$1({ assets: parsedTheme.assets }, { children: children }), void 0) }), void 0));
+    var themeWithOtherVariables = __assign$1(__assign$1({}, parsedTheme), { assets: __assign$1(__assign$1({}, parsedTheme.assets), { isSameOriginIcons: isSameOriginIcons }) });
+    return (jsxRuntime.jsx(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsxRuntime.jsx(AssetsProvider, __assign$1({ assets: themeWithOtherVariables.assets }, { children: children }), void 0) }), void 0));
 };
 var useTheme = function () { return useTheme$1(); };
 var DefaultContainer = function (props) { return jsxRuntime.jsx("div", __assign$1({}, props), void 0); };
 var ThemeVariables = function (_a) {
-    var _b;
-    var theme = _a.theme, _c = _a.Container, Container = _c === void 0 ? DefaultContainer : _c;
-    var _d = React$2.useState(function () { return transformThemeIntoVariables(theme); }), variables = _d[0], setVariables = _d[1];
-    React$2.useEffect(function () {
-        setVariables(transformThemeIntoVariables(theme));
-    }, [theme]);
-    return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("style", { "data-theme-name": ((_b = theme.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || 'unamed-theme', dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
+    var theme = _a.theme, _b = _a.Container, Container = _b === void 0 ? DefaultContainer : _b;
+    var variables = transformThemeIntoVariables(theme);
+    return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("style", { "data-theme-name": theme.name.toLowerCase(), dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
 };
 var AssetsContext = React$2.createContext({
+    isSameOriginIcons: false,
     cdn: '',
     images: {
         favicon: '',
@@ -3117,12 +3116,53 @@ var AssetsContext = React$2.createContext({
 });
 var AssetsProvider = function (_a) {
     var assets = _a.assets, children = _a.children;
-    var context = React$2.useMemo(function () { return assets; }, [assets]);
-    return jsxRuntime.jsx(AssetsContext.Provider, __assign$1({ value: context }, { children: children }), void 0);
+    return jsxRuntime.jsx(AssetsContext.Provider, __assign$1({ value: assets }, { children: children }), void 0);
 };
 var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
 
-var StyledSvgWrapper = newStyled.svg(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
+var formatPrice = function (value, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
+    var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
+    // this prevents `Intl.NumberFormat` from rounding the number
+    var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currency,
+        maximumFractionDigits: 3,
+    }).format(valueToFormat);
+};
+
+var Container$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"], ["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"])), function (_a) {
+    var height = _a.height;
+    return (height ? height : '1.5em');
+}, function (_a) {
+    var width = _a.width;
+    return (width ? width : '100%');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.background.disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.radius.regular;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.shades['10'].color;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.background.disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.shades['10'].color;
+});
+var SkeletonBox = function (_a) {
+    var width = _a.width, height = _a.height;
+    var theme = useTheme();
+    return jsxRuntime.jsx(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
+};
+var templateObject_1$1O;
+
+var StyledSvgWrapper = newStyled.svg(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -3151,7 +3191,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$
     var opacity = _a.opacity;
     return opacity && "opacity: ".concat(opacity, ";");
 });
-var templateObject_1$1O, templateObject_2$1a;
+var templateObject_1$1N, templateObject_2$1a;
 
 /* eslint-disable no-undef */
 var cache = new Map();
@@ -3187,19 +3227,26 @@ var fetchWithCache = function (request, saveToCacheFn) {
 var createIconImage = function (_a) {
     var src = _a.src;
     return __awaiter(void 0, void 0, void 0, function () {
-        var blob, localUrl_1, cleanup, error_1;
+        var localUrl, error_1;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     _b.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, fetchWithCache(src, function (response) { return response.blob(); })];
+                    return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
+                            var blob;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, response.blob()];
+                                    case 1:
+                                        blob = _a.sent();
+                                        return [2 /*return*/, URL.createObjectURL(blob)];
+                                }
+                            });
+                        }); })];
                 case 1:
-                    blob = _b.sent();
-                    localUrl_1 = URL.createObjectURL(blob);
-                    cleanup = function () { return URL.revokeObjectURL(localUrl_1); };
+                    localUrl = _b.sent();
                     return [2 /*return*/, {
-                            src: localUrl_1,
-                            cleanup: cleanup,
+                            src: localUrl,
                         }];
                 case 2:
                     error_1 = _b.sent();
@@ -3222,15 +3269,10 @@ var getIconDimension = function (dimension) {
     return "".concat(dimension, "rem");
 };
 
-/* eslint-disable react/forbid-component-props */
-var Icon$1 = function (_a) {
-    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
-    var assets = useTheme().assets;
-    var _c = React$2.useState(false), error = _c[0], setError = _c[1];
-    var _d = React$2.useState(), localSource = _d[0], setLocalSource = _d[1];
-    var newWidth = width && getIconDimension(width);
-    var newHeight = height ? getIconDimension(height) : getIconDimension(width);
-    var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
+var IconFromExtSource = function (_a) {
+    var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
+    var _b = React$2.useState(false), error = _b[0], setError = _b[1];
+    var _c = React$2.useState(), localSource = _c[0], setLocalSource = _c[1];
     React$2.useEffect(function () {
         var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
             var localSource;
@@ -3253,22 +3295,35 @@ var Icon$1 = function (_a) {
         if (!localSource) {
             fetchIcon();
         }
-        return localSource === null || localSource === void 0 ? void 0 : localSource.cleanup;
-    }, [iconURL, localSource === null || localSource === void 0 ? void 0 : localSource.cleanup]);
-    var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: newHeight, width: newWidth }, rest);
+    }, [iconURL]);
+    var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
     if (error) {
-        return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: iconURL }), void 0);
+        return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
     }
     if (!localSource) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
+        return jsxRuntime.jsx(SkeletonBox, { width: width, height: height }, void 0);
     }
     if (!fill && !svgProps) {
         return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
     }
+    return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
+};
+
+/* eslint-disable react/forbid-component-props */
+var UnmemoIcon = function (_a) {
+    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
+    var assets = useTheme().assets;
+    var newWidth = width && getIconDimension(width);
+    var newHeight = height ? getIconDimension(height) : getIconDimension(width);
+    var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
     var svgSplit = name.split('/');
     var svgId = svgSplit[svgSplit.length - 1];
-    return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [title ? jsxRuntime.jsx("title", { children: title }, void 0) : null, jsxRuntime.jsx("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
-};
+    if (assets.isSameOriginIcons) {
+        return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
+    }
+    return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
+};
+var Icon$1 = React__default["default"].memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
 
 var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
 
@@ -4011,7 +4066,7 @@ function jsxs(type, props, key) {
 // This defines which HTML tag to render for each `variant`, it also defines
 // `variants` styles that are consistent through all themes.
 var TAGS = {
-    hero1: newStyled.h1(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""]))),
+    hero1: newStyled.h1(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""]))),
     hero2: newStyled.h2(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject([""], [""]))),
     hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
     display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
@@ -4147,95 +4202,9 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1N, templateObject_2$19, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
-
-var TimerContainer$1 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var timerColor = _a.timerColor;
-    return timerColor || '';
-});
-var timeToSeconds = function (_a) {
-    var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
-    return hours * 3600 + minutes * 60 + seconds;
-};
-var secondsToTime = function (secs) {
-    var hours = Math.floor(secs / 3600);
-    var minutes = Math.floor((secs - hours * 3600) / 60);
-    var seconds = secs - hours * 3600 - minutes * 60;
-    return { hours: hours, minutes: minutes, seconds: seconds };
-};
-var Timer = function (_a) {
-    var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.timerColor, timerColor = _d === void 0 ? '#292929' : _d, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "timerColor"]);
-    var _e = React$2.useState(timeToSeconds(rest)), secs = _e[0], setSecs = _e[1];
-    React$2.useEffect(function () {
-        var timer = setInterval(function () {
-            setSecs(function (seconds) {
-                if (seconds === 1) {
-                    clearInterval(timer);
-                    onTimeUp();
-                    return 0;
-                }
-                return seconds - 1;
-            });
-        }, 1000);
-        if (secs <= 0)
-            clearInterval(timer);
-        return function () { return clearInterval(timer); };
-    }, [onTimeUp, secs]);
-    var _f = secondsToTime(secs), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
-    return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
-};
-var templateObject_1$1M;
-
-var TimerContainer = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n  }\n"])), function (_a) {
-    var textPosition = _a.textPosition;
-    return textPosition;
-}, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor;
-}, function (_a) {
-    var borderRadius = _a.borderRadius;
-    return borderRadius || 'unset';
-}, function (_a) {
-    var borderRadius = _a.borderRadius;
-    return borderRadius || '8px';
-});
-var templateObject_1$1L;
-
-var HurryUp = function (_a) {
-    var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.showSeconds, showSeconds = _e === void 0 ? true : _e, timerColor = _a.timerColor;
-    var theme = useTheme();
-    var _f = React__default["default"].useMemo(function () {
-        var tomorrowDate = new Date();
-        tomorrowDate.setDate(tomorrowDate.getDate() + 1);
-        tomorrowDate.setHours(0, 0, 0, 0);
-        var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
-        var hours = Math.floor(totalSeconds / 3600);
-        var restOfHour = Math.floor(totalSeconds % 3600);
-        var minutes = Math.floor(restOfHour / 60);
-        var seconds = Math.floor(totalSeconds % 60);
-        return {
-            hours: hours,
-            minutes: minutes,
-            seconds: seconds,
-        };
-    }, []), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
-    return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && (jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, showSeconds: showSeconds, timerColor: timerColor, onTimeUp: function () { } }, void 0))] }), void 0));
-};
-
-var formatPrice = function (value, _a) {
-    var _b;
-    var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
-    var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
-    // this prevents `Intl.NumberFormat` from rounding the number
-    var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
-    return new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency: currency,
-        maximumFractionDigits: 3,
-    }).format(valueToFormat);
-};
+var templateObject_1$1M, templateObject_2$19, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
 
-var Container$17 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"], ["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"])));
+var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"], ["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"])));
 var Card$3 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"], ["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"])));
 var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"])));
 var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"], ["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"])));
@@ -4243,7 +4212,7 @@ var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTe
 var DiscountContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n"])));
 var PackSelectorV2 = function (_a) {
     var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
-    return (jsxRuntime.jsx(Container$17, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
+    return (jsxRuntime.jsx(Container$16, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
             return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
         }) }), void 0));
 };
@@ -4265,27 +4234,27 @@ var PackCard$1 = function (_a) {
                                 currency: currencyCode || 'USD',
                             }), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
 };
-var templateObject_1$1K, templateObject_2$18, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
+var templateObject_1$1L, templateObject_2$18, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
 
-var Container$16 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"])));
+var Container$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"])));
 var DropContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var DropList = function (_a) {
     var dropTotal = _a.dropTotal, drops = _a.drops;
-    return (jsxRuntime.jsx(Container$16, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
+    return (jsxRuntime.jsx(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
             return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
         }) }, void 0));
 };
-var templateObject_1$1J, templateObject_2$17;
+var templateObject_1$1K, templateObject_2$17;
 
 var DROPS_TOTAL = 5;
-var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n  height: 32px;\n  display: flex;\n"], ["\n  height: 32px;\n  display: flex;\n"])));
+var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n  height: 32px;\n  display: flex;\n"], ["\n  height: 32px;\n  display: flex;\n"])));
 var Title$8 = newStyled.p(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-right: 7px;\n"], ["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-right: 7px;\n"])));
 var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-left: 7px;\n"], ["\n  height: 32px;\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-left: 7px;\n"])));
 var AbsorbencyLevel = function (_a) {
     var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
-    return (jsxRuntime.jsxs(Container$15, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
+    return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
 };
-var templateObject_1$1I, templateObject_2$16, templateObject_3$S;
+var templateObject_1$1J, templateObject_2$16, templateObject_3$S;
 
 function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>`  - ${c}`).join(`
 `),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>`  - ${c}`).join(`
@@ -4361,7 +4330,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
     AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
 ]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
 var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
-var StyledContent = newStyled.button(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"], ["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"])));
+var StyledContent = newStyled.button(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"], ["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"])));
 var Accordion$1 = function (_a) {
     var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
     var theme = useTheme();
@@ -4385,9 +4354,9 @@ var Accordion$1 = function (_a) {
                                         } }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
         } }), void 0));
 };
-var templateObject_1$1H;
+var templateObject_1$1I;
 
-var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
 var AccordionOptions = function (_a) {
     var titleColor = _a.titleColor, accordions = _a.accordions;
     var _b = React$2.useState({
@@ -4400,7 +4369,7 @@ var AccordionOptions = function (_a) {
         }
         return false;
     };
-    return (jsxRuntime.jsx(Container$14, { children: accordions.map(function (accordion, index) {
+    return (jsxRuntime.jsx(Container$13, { children: accordions.map(function (accordion, index) {
             var forceOpenValue = getForceOpen(index);
             var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
             return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
@@ -4411,7 +4380,7 @@ var AccordionOptions = function (_a) {
                 } }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
         }) }, void 0));
 };
-var templateObject_1$1G;
+var templateObject_1$1H;
 
 exports.CardSectionType = void 0;
 (function (CardSectionType) {
@@ -4573,14 +4542,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
     literal: true,
 });
 
-var ErrorText = newStyled.h3(templateObject_1$1F || (templateObject_1$1F = __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 ErrorText = newStyled.h3(templateObject_1$1G || (templateObject_1$1G = __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$15 || (templateObject_2$15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"])));
 var Error$1 = function (_a) {
     var error = _a.error;
     var theme = useTheme();
     return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
 };
-var templateObject_1$1F, templateObject_2$15;
+var templateObject_1$1G, templateObject_2$15;
 
 var BaseSelectButton = function (_a) {
     var children = _a.children, as = _a.as;
@@ -4597,7 +4566,7 @@ function BaseSelectOption(_a) {
     return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
 }
 
-var CustomListBox = newStyled(Ee)(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var CustomListBox = newStyled(Ee)(templateObject_1$1F || (templateObject_1$1F = __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 (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -4607,7 +4576,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
     Options: BaseSelectOptions,
     Option: BaseSelectOption,
 });
-var templateObject_1$1E;
+var templateObject_1$1F;
 
 var CustomButton = newStyled.button(function (_a) {
     var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
@@ -4831,7 +4800,7 @@ var CustomCheckboxStyles = {
     },
 };
 
-var Container$13 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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 Container$12 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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(CustomCheckboxStyles.baseStyles, function (props) { return [
     CustomCheckboxStyles[props.size](props.theme),
     CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
@@ -4856,9 +4825,9 @@ var Checkbox = function (_a) {
         }
         onChange(e.target.checked);
     };
-    return (jsxRuntime.jsxs(Container$13, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
 };
-var templateObject_1$1D, templateObject_2$14;
+var templateObject_1$1E, templateObject_2$14;
 
 var CustomOption = newStyled.li(function (_a) {
     var theme = _a.theme, selected = _a.selected, active = _a.active;
@@ -4907,7 +4876,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
     Option: BaseDropdownOption,
 });
 
-var Container$12 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
+var Container$11 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
 var RequiredPlaceholder = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n  margin: unset;\n  &:after {\n    content: '*';\n    color: var(--colors-semantic-urgent-color);\n  }\n"], ["\n  margin: unset;\n  &:after {\n    content: '*';\n    color: var(--colors-semantic-urgent-color);\n  }\n"])));
 function SimpleDropdown(_a) {
     var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
@@ -4938,10 +4907,10 @@ function SimpleDropdown(_a) {
         setSelectedValue(value);
     }, [value, options, initialValue]);
     var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
-    var DropdownContainer = showRequiredPlaceholder ? Container$12 : React$2.Fragment;
+    var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
     return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
 }
-var templateObject_1$1C, templateObject_2$13;
+var templateObject_1$1D, templateObject_2$13;
 
 /* base styles & size variants */
 var CustomRadioStyles$2 = {
@@ -5006,8 +4975,8 @@ var ContainerStyles$2 = {
     },
 };
 
-var Wrapper$7 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Container$11 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
+var Wrapper$7 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
 var Input$4 = newStyled.input(templateObject_2$12 || (templateObject_2$12 = __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;
     return (disabled ? 'not-allowed' : 'pointer');
@@ -5030,9 +4999,9 @@ var RadioInput = function (_a) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$11, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
 };
-var templateObject_1$1B, templateObject_2$12, templateObject_3$R;
+var templateObject_1$1C, templateObject_2$12, templateObject_3$R;
 
 var TooltipArrow = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
@@ -5112,7 +5081,7 @@ var getTooltipAlignItems = function (position, align) {
     }
 };
 
-var Wrapper$6 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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$6 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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);
 });
@@ -5164,7 +5133,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
     return color;
 });
 var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __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$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g;
+var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g;
 
 var Tooltip = function (_a) {
     var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
@@ -5232,7 +5201,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
             };
     }
 };
-var Container$10 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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$$ = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
@@ -5269,32 +5238,64 @@ var H3$3 = newStyled.h3(templateObject_2$10 || (templateObject_2$10 = __makeTemp
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
     var theme = useTheme();
-    return (jsxRuntime.jsx(Container$10, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
+    return (jsxRuntime.jsx(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
 };
-var templateObject_1$1z, templateObject_2$10;
+var templateObject_1$1A, templateObject_2$10;
 
+//TODO Move this to types with ThemeBreakpoints
+var Viewports = {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    desktop: 'desktop',
+};
 function getWindowDimensions() {
+    if (typeof window === 'undefined')
+        return { width: 0, height: 0 };
     var width = window.innerWidth, height = window.innerHeight;
     return {
         width: width,
         height: height,
     };
 }
-var useWindowDimensions = function (breakpoints) {
-    var _a = React$2.useState({ width: 0, height: 0 }), windowDimensions = _a[0], setWindowDimensions = _a[1];
+var getViewport = function (breakpoints, width) {
+    if (width <= breakpoints.mobile)
+        return Viewports.mobile;
+    if (breakpoints.tablet && width <= breakpoints.tablet) {
+        return Viewports.tablet;
+    }
+    return Viewports.desktop;
+};
+var useWindowDimensions = function (breakpoints, shouldListenChanges) {
+    var _a = React$2.useState(function () {
+        var dimension = getWindowDimensions();
+        return {
+            windowDimensions: dimension,
+            viewport: getViewport(breakpoints, dimension.width),
+        };
+    }), state = _a[0], setState = _a[1];
     React$2.useEffect(function () {
         function handleResize() {
-            setWindowDimensions(getWindowDimensions());
+            var newDimension = getWindowDimensions();
+            var newViewport = getViewport(breakpoints, newDimension.width);
+            setState(function (oldState) {
+                if (shouldListenChanges || oldState.viewport !== newViewport) {
+                    return {
+                        windowDimensions: newDimension,
+                        viewport: newViewport,
+                    };
+                }
+                return oldState;
+            });
         }
-        // calling it here updates the dimensions on first render
         handleResize();
         window.addEventListener('resize', handleResize);
         return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
-    return {
-        isMobile: windowDimensions.width < breakpoints.desktop,
-        windowDimensions: windowDimensions,
-    };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldListenChanges]);
+    var isMobile = state.viewport === Viewports.mobile;
+    var isTablet = state.viewport === Viewports.tablet;
+    var isDesktop = state.viewport === Viewports.desktop;
+    return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
 };
 
 var getStylesBySize$c = function (size, theme) {
@@ -5337,7 +5338,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
         return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
     }
 };
-var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container$_ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var Price = newStyled.p(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n  position: relative;\n  margin-top: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n  position: relative;\n  margin-top: ", ";\n"])), function (_a) {
     var weight = _a.weight;
     return (weight ? weight : '400');
@@ -5393,9 +5394,9 @@ var PriceLabel = function (_a) {
                 : exports.ComponentSize.XSmall;
         return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
     };
-    return (jsxRuntime.jsxs(Container$$, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
+    return (jsxRuntime.jsxs(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
 };
-var templateObject_1$1y, templateObject_2$$, templateObject_3$P;
+var templateObject_1$1z, templateObject_2$$, templateObject_3$P;
 
 var getStylesBySize$b = function (size) {
     switch (size) {
@@ -5425,7 +5426,7 @@ var getStylesBySize$b = function (size) {
             };
     }
 };
-var Container$_ = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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$Z = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
@@ -5462,11 +5463,11 @@ var H3$2 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __makeTempla
 var ClubOfferTag = function (_a) {
     var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _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 ? exports.ComponentSize.Medium : _e, style = _a.style;
     var theme = useTheme();
-    return (jsxRuntime.jsx(Container$_, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
+    return (jsxRuntime.jsx(Container$Z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
 };
-var templateObject_1$1x, templateObject_2$_;
+var templateObject_1$1y, templateObject_2$_;
 
-var FinalPriceStyledContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var FinalPriceStyledContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var PriceLabelV2 = function (_a) {
     var _b;
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
@@ -5516,7 +5517,7 @@ var PriceLabelV2 = function (_a) {
     var savetoString = saveto.toFixed(2);
     var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
             theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
-    return (jsxRuntime.jsxs(Container$$, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
+    return (jsxRuntime.jsxs(Container$_, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
                             marginTop: '-5px',
                         } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
                             marginTop: '-6px',
@@ -5532,9 +5533,9 @@ var PriceLabelV2 = function (_a) {
                         lineHeight: '22px',
                     } }), void 0)) }), void 0))] }), void 0));
 };
-var templateObject_1$1w;
+var templateObject_1$1x;
 
-var FlexContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var FlexContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var ContainerBase = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n  border-radius: 8px;\n\n  border: ", ";\n\n  ", "\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n\n  & label {\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n\n  border: ", ";\n\n  ", "\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n\n  & label {\n    cursor: pointer;\n  }\n"])), function (_a) {
     var selected = _a.selected, theme = _a.theme;
     return selected
@@ -5571,8 +5572,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
     var selected = _a.selected, theme = _a.theme;
     return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
 });
-var Container$Z = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
-var templateObject_1$1v, templateObject_2$Z, templateObject_3$O, templateObject_4$C, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
+var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
+var templateObject_1$1w, templateObject_2$Z, templateObject_3$O, templateObject_4$C, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
 
 var radioIds = {
     oneTime: {
@@ -5622,17 +5623,17 @@ var Autoship = function (_a) {
         onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
     };
     var benefitsColor = benefitsColorMapper(theme);
-    return (jsxRuntime.jsxs(Container$Z, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
+    return (jsxRuntime.jsxs(Container$Y, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
                                         ? benefitsColor.selected
                                         : benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
 };
 
-var Img = newStyled.img(templateObject_1$1u || (templateObject_1$1u = __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$1v || (templateObject_1$1v = __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$3 = function (_a) {
     var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
     return (jsxRuntime.jsx(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
 };
-var templateObject_1$1u;
+var templateObject_1$1v;
 
 var _a$2;
 exports.BeforeAfterVariant = void 0;
@@ -5647,13 +5648,13 @@ var componentSizeMapper = (_a$2 = {},
     _a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
     _a$2);
 
-var CustomerDetails = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject([""], [""])));
+var CustomerDetails = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""])));
 var CustomerInfo = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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 Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n  font-size: 22px;\n  line-height: 20px;\n  font-weight: 400;\n  margin: 0;\n"], ["\n  font-size: 22px;\n  line-height: 20px;\n  font-weight: 400;\n  margin: 0;\n"])));
 var StarIconContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n"])));
 var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 300;\n  line-height: normal;\n"], ["\n  font-size: 16px;\n  font-weight: 300;\n  line-height: normal;\n"])));
 var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n  display: block;\n  font-size: 14px;\n  font-style: italic;\n  font-weight: 300;\n"], ["\n  display: block;\n  font-size: 14px;\n  font-style: italic;\n  font-weight: 300;\n"])));
-var templateObject_1$1t, templateObject_2$Y, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
+var templateObject_1$1u, templateObject_2$Y, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
 
 var NameWithStars = function (_a) {
     var name = _a.name, size = _a.size;
@@ -5671,7 +5672,7 @@ var ResultFeedback = function (_a) {
     return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
 };
 
-var Container$Y = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 15px;\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    row-gap: 12px;\n    max-width: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: 15px;\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    row-gap: 12px;\n    max-width: ", ";\n  }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
+var Container$X = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 15px;\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    row-gap: 12px;\n    max-width: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: 15px;\n  background: var(--colors-shades-white-color);\n  border: 1px solid var(--colors-shades-50-color);\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    row-gap: 12px;\n    max-width: ", ";\n  }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
 var ImageContainer$5 = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  column-gap: 4px;\n  align-items: center;\n  justify-content: center;\n"])));
 var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n  display: flex;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    min-height: ", ";\n    min-width: ", ";\n    width: ", ";\n  }\n"], ["\n  display: flex;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    min-height: ", ";\n    min-width: ", ";\n    width: ", ";\n  }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
 var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  text-align: ", ";\n  margin: 0;\n  font-weight: 400;\n  line-height: 130%;\n\n  @media (max-width: 768px) {\n    font-size: ", ";\n  }\n"], ["\n  color: ", ";\n  font-size: ", ";\n  text-align: ", ";\n  margin: 0;\n  font-weight: 400;\n  line-height: 130%;\n\n  @media (max-width: 768px) {\n    font-size: ", ";\n  }\n"])), function (_a) {
@@ -5684,7 +5685,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
     var theme = _a.theme, size = _a.size;
     return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
 });
-var templateObject_1$1s, templateObject_2$X, templateObject_3$M, templateObject_4$A;
+var templateObject_1$1t, templateObject_2$X, templateObject_3$M, templateObject_4$A;
 
 /* base styles & size variants */
 var getStylesBySize$a = function (size, theme) {
@@ -5759,10 +5760,10 @@ var BeforeAfterCard = function (_a) {
     var stylesBySize = getStylesBySize$a(size, theme);
     var infoText = buildInfoText(name, age, months);
     var Component = componentByVariant[variant];
-    return (jsxRuntime.jsxs(Container$Y, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
+    return (jsxRuntime.jsxs(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
 };
 
-var Section = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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$1s || (templateObject_1$1s = __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 === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
 });
 var CardHeader = function (_a) {
@@ -5773,16 +5774,16 @@ var CardFooter = function (_a) {
     var children = _a.children;
     return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
 };
-var templateObject_1$1r;
+var templateObject_1$1s;
 
-var Body = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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$1r || (templateObject_1$1r = __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 jsxRuntime.jsx(Body, { children: children }, void 0);
 };
-var templateObject_1$1q;
+var templateObject_1$1r;
 
-var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
+var Container$W = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\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;";
@@ -5797,23 +5798,23 @@ var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
 var Card$1 = 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;
     var theme = useTheme();
-    return (jsxRuntime.jsx(Container$X, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
+    return (jsxRuntime.jsx(Container$W, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
 };
 var Card$2 = Object.assign(Card$1, {
     Header: CardHeader,
     Footer: CardFooter,
     Body: CardBody,
 });
-var templateObject_1$1p;
+var templateObject_1$1q;
 
-var StyledWrapper = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n  padding: 12px 58px;\n  @media (max-width: 992px) {\n    padding: 0.625rem 1.5rem;\n  }\n"], ["\n  padding: 12px 58px;\n  @media (max-width: 992px) {\n    padding: 0.625rem 1.5rem;\n  }\n"])));
+var StyledWrapper = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n  padding: 12px 58px;\n  @media (max-width: 992px) {\n    padding: 0.625rem 1.5rem;\n  }\n"], ["\n  padding: 12px 58px;\n  @media (max-width: 992px) {\n    padding: 0.625rem 1.5rem;\n  }\n"])));
 var StyledContainer = newStyled.div(templateObject_2$W || (templateObject_2$W = __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 TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n  margin: 0.1rem 0;\n  min-width: 4.5rem;\n  color: ", ";\n"], ["\n  margin: 0.1rem 0;\n  min-width: 4.5rem;\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
 var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n  text-align: right;\n  margin: 0 0 0 0.5rem;\n"], ["\n  text-align: right;\n  margin: 0 0 0 0.5rem;\n"])));
-var templateObject_1$1o, templateObject_2$W, templateObject_3$L, templateObject_4$z;
+var templateObject_1$1p, templateObject_2$W, templateObject_3$L, templateObject_4$z;
 
 var Minimalistic = function (_a) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _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, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
@@ -5821,23 +5822,23 @@ var Minimalistic = function (_a) {
     return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
 };
 
-var Container$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Container$V = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
 var Title$6 = newStyled.h1(templateObject_2$V || (templateObject_2$V = __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$K || (templateObject_3$K = __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$y || (templateObject_4$y = __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 (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$W, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
+    return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$1n, templateObject_2$V, templateObject_3$K, templateObject_4$y;
+var templateObject_1$1o, templateObject_2$V, templateObject_3$K, templateObject_4$y;
 
 var Bundle = {
     Minimalistic: Minimalistic,
     Simple: Simple,
 };
 
-var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: ", ";\n  align-items: center;\n  font-size: 0.88rem;\n"])), function (_a) {
+var Container$U = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: ", ";\n  align-items: center;\n  font-size: 0.88rem;\n"])), function (_a) {
     var displayBNPL = _a.displayBNPL;
     return (displayBNPL ? 'flex' : 'none');
 });
@@ -5852,43 +5853,43 @@ var BuyNowPayLater = function (_a) {
         console.error('Icon', iconName, 'not found');
         return null;
     }
-    return (jsxRuntime.jsx(Container$V, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
+    return (jsxRuntime.jsx(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
 };
-var templateObject_1$1m, templateObject_2$U, templateObject_3$J;
+var templateObject_1$1n, templateObject_2$U, templateObject_3$J;
 
-var Text$7 = newStyled.span(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
+var Text$7 = newStyled.span(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
 var Title$5 = function (_a) {
     var title = _a.title;
     var theme = useTheme();
     return jsxRuntime.jsx(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
 };
-var templateObject_1$1l;
+var templateObject_1$1m;
 
-var P$3 = newStyled.p(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
+var P$3 = newStyled.p(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
 var Promo = function (_a) {
     var text = _a.text;
     var theme = useTheme();
     return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
 };
-var templateObject_1$1k;
+var templateObject_1$1l;
 
-var Text$6 = newStyled.span(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
+var Text$6 = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
 var Description$1 = function (_a) {
     var text = _a.text;
     var theme = useTheme();
     return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
 };
-var templateObject_1$1j;
+var templateObject_1$1k;
 
-var Container$U = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"], ["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
+var Container$T = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"], ["\n  margin: 0;\n  padding: 0.25rem;\n  background-color: ", ";\n  display: inline-flex;\n  border-radius: 50%;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
 var CloseButton$1 = function (_a) {
     var onClick = _a.onClick, size = _a.size;
     var theme = useTheme();
-    return (jsxRuntime.jsx(Container$U, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
+    return (jsxRuntime.jsx(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
 };
-var templateObject_1$1i;
+var templateObject_1$1j;
 
-var Text$5 = newStyled.h3(templateObject_1$1h || (templateObject_1$1h = __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: ", ";\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: ", ";\n  display: initial;\n  color: ", ";\n"])), function (_a) {
+var Text$5 = newStyled.h3(templateObject_1$1i || (templateObject_1$1i = __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: ", ";\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: ", ";\n  display: initial;\n  color: ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -5903,7 +5904,7 @@ var OfferBanner = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
 };
-var templateObject_1$1h;
+var templateObject_1$1i;
 
 var CartProductItem = {
     Title: Title$5,
@@ -5913,36 +5914,7 @@ var CartProductItem = {
     CloseButton: CloseButton$1,
 };
 
-var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"], ["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"])), function (_a) {
-    var height = _a.height;
-    return (height ? height : '1.5em');
-}, function (_a) {
-    var width = _a.width;
-    return (width ? width : '100%');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.background.disabled;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.radius.regular;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.shades['10'].color;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.background.disabled;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.shades['10'].color;
-});
-var SkeletonBox = function (_a) {
-    var width = _a.width, height = _a.height;
-    var theme = useTheme();
-    return jsxRuntime.jsx(Container$T, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
-};
-var templateObject_1$1g;
-
-var Container$S = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n  display: inline-flex;\n  height: 20px;\n  padding: 1px 10px;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  border-radius: 6px;\n  background: #882a2b;\n  margin-top: 4px;\n  margin-bottom: 10px;\n"], ["\n  display: inline-flex;\n  height: 20px;\n  padding: 1px 10px;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  border-radius: 6px;\n  background: #882a2b;\n  margin-top: 4px;\n  margin-bottom: 10px;\n"])));
+var Container$S = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n  display: inline-flex;\n  height: 20px;\n  padding: 1px 10px;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  border-radius: 6px;\n  background: #882a2b;\n  margin-top: 4px;\n  margin-bottom: 10px;\n"], ["\n  display: inline-flex;\n  height: 20px;\n  padding: 1px 10px;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  border-radius: 6px;\n  background: #882a2b;\n  margin-top: 4px;\n  margin-bottom: 10px;\n"])));
 var MobileContainer = newStyled(Container$S)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n  padding: 2px 2px;\n  gap: 3px;\n"], ["\n  padding: 2px 2px;\n  gap: 3px;\n"])));
 var DollarPart = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 700;\n  line-height: 14px; /* 116.667% */\n"], ["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 700;\n  line-height: 14px; /* 116.667% */\n"])));
 var ClubMembersText = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 500;\n  line-height: 14px; /* 116.667% */\n"], ["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 500;\n  line-height: 14px; /* 116.667% */\n"])));
@@ -5955,7 +5927,7 @@ var ClubPriceLabel = function (_a) {
     var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
 };
-var templateObject_1$1f, templateObject_2$T, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
+var templateObject_1$1h, templateObject_2$T, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
 
 var Spacing = function (_a) {
     var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
@@ -5963,7 +5935,7 @@ var Spacing = function (_a) {
     return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
 };
 
-var Container$R = newStyled('div')(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  gap: 6px;\n  display: flex;\n  color: #292929;\n  align-items: flex-end;\n"], ["\n  gap: 6px;\n  display: flex;\n  color: #292929;\n  align-items: flex-end;\n"])));
+var Container$R = newStyled('div')(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n  gap: 6px;\n  display: flex;\n  color: #292929;\n  align-items: flex-end;\n"], ["\n  gap: 6px;\n  display: flex;\n  color: #292929;\n  align-items: flex-end;\n"])));
 var Content$2 = newStyled('div')(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  font-size: 14px;\n  font-weight: 600;\n"], ["\n  display: flex;\n  align-items: flex-end;\n  font-size: 14px;\n  font-weight: 600;\n"])));
 var BarContainer$1 = newStyled('div')(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n  gap: 2px;\n  display: flex;\n  align-items: flex-end;\n  width: fit-content;\n"], ["\n  gap: 2px;\n  display: flex;\n  align-items: flex-end;\n  width: fit-content;\n"])));
 var Bar$2 = newStyled('div')(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n  width: 2px;\n  border-radius: 2px;\n  height: ", ";\n  background-color: ", ";\n"], ["\n  width: 2px;\n  border-radius: 2px;\n  height: ", ";\n  background-color: ", ";\n"])), function (_a) {
@@ -5977,12 +5949,12 @@ var StrengthBars = function (_a) {
     var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
     return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
 };
-var templateObject_1$1e, templateObject_2$S, templateObject_3$H, templateObject_4$w;
+var templateObject_1$1g, templateObject_2$S, templateObject_3$H, templateObject_4$w;
 
-var Container$Q = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var templateObject_1$1d;
+var Container$Q = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var templateObject_1$1f;
 
-var StarContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  display: flex;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  margin-right: ", ";\n"])), function (_a) {
+var StarContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  display: flex;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  margin-right: ", ";\n"])), function (_a) {
     var marginRight = _a.marginRight;
     return marginRight;
 });
@@ -5998,7 +5970,7 @@ var StarList = function (_a) {
             return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
         }) }, void 0));
 };
-var templateObject_1$1c;
+var templateObject_1$1e;
 
 /* base styles & size variants */
 var LabelStyles = {
@@ -6039,8 +6011,8 @@ var LabelStyles = {
         });
     },
 };
-var Container$P = newStyled.a(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var templateObject_1$1b;
+var Container$P = newStyled.a(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var templateObject_1$1d;
 
 var CustomLabel = newStyled.div(function (_a) {
     var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
@@ -6091,7 +6063,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
         height: height,
     });
 });
-var ImageHoverContainer$1 = newStyled.img(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"])));
+var ImageHoverContainer$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"])));
 var Container$O = newStyled.a(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"])));
 var ProdCardContainer$1 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"])));
 var Title$4 = newStyled.p(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
@@ -6180,7 +6152,7 @@ var ProductItemMobile = function (_a) {
     };
     return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ 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$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), 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)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
 };
-var templateObject_1$1a, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
+var templateObject_1$1c, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
 
 var ImageContainer$3 = newStyled.div(function (_a) {
     var width = _a.width, height = _a.height;
@@ -6190,7 +6162,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
         height: height,
     });
 });
-var ImageHoverContainer = newStyled.img(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n  border-radius: ", ";\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n  border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
+var ImageHoverContainer = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n  border-radius: ", ";\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n  border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
 var Container$N = newStyled.a(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"])));
 var ProdCardContainer = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"])));
 var Title$3 = newStyled.p(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
@@ -6278,9 +6250,9 @@ var ProductItemTK = function (_a) {
                             marginTop: hasSpacing ? undefined : textContainerGap,
                         } }, { children: title }), void 0)) : (jsx(Title$3, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
 };
-var templateObject_1$19, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
+var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
 
-var Container$M = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
+var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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 (jsxRuntime.jsx(Container$M, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
@@ -6290,7 +6262,7 @@ function withProductGrid(ProductItemComponent, data) {
     WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
     return WithProductGrid;
 }
-var templateObject_1$18;
+var templateObject_1$1a;
 
 var Collection = {
     ProductItemMobile: ProductItemMobile,
@@ -6337,7 +6309,7 @@ var OutOfStock = function (_a) {
     return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("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), jsxRuntime.jsx("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.colors.shades['300'].color }, void 0), jsxRuntime.jsx("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), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
 };
 
-var CustomRadioGroup = newStyled(lt)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var CustomRadioGroup = newStyled(lt)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 newStyled(lt.Label)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
 var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
 var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
@@ -6359,9 +6331,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
     Option: Option,
     OptionsContainer: OptionsContainer,
 });
-var templateObject_1$17, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j;
+var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j;
 
-var Container$L = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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  opacity: ", ";\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  opacity: ", ";\n"])), function (_a) {
+var Container$L = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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  opacity: ", ";\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  opacity: ", ";\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 }, function (_a) {
@@ -6375,7 +6347,7 @@ var PatternSelector = function (_a) {
     var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
     return (jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
 };
-var templateObject_1$16, templateObject_2$O;
+var templateObject_1$18, templateObject_2$O;
 
 var renderOptions$1 = function (selectedColor, options) {
     if (options == null || options.length === 0) {
@@ -6433,7 +6405,7 @@ var SingleColorPicker = function (_a) {
     return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
 };
 
-var Wrapper$5 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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 Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __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 &&
@@ -6447,7 +6419,7 @@ var CrossSellCheckbox = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$1, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$15, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
+var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6475,7 +6447,7 @@ var sizeMapper = (_a = {},
     _a[exports.ComponentSize.Large] = 'large',
     _a[exports.ComponentSize.XSmall] = 'small',
     _a);
-var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"], ["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"])), function (_a) {
+var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"], ["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"])), function (_a) {
     var wide = _a.wide;
     return (wide ? '100%' : 'fit-content');
 }, function (_a) {
@@ -6498,7 +6470,7 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObj
     return theme.colors.text.disabled;
 });
 var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
-var templateObject_1$14, templateObject_2$M;
+var templateObject_1$16, templateObject_2$M;
 
 var BaseCTA = function (_a) {
     var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
@@ -6565,7 +6537,7 @@ var ButtonSecondaryOutline = function (props) {
         } }), void 0));
 };
 
-var Container$K = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
+var Container$K = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
 var IconContainer$4 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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$4 = newStyled.p(templateObject_3$C || (templateObject_3$C = __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$r || (templateObject_4$r = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (props) { return props.color; });
@@ -6574,9 +6546,9 @@ var Note = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$K, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
 };
-var templateObject_1$13, templateObject_2$L, templateObject_3$C, templateObject_4$r;
+var templateObject_1$15, templateObject_2$L, templateObject_3$C, templateObject_4$r;
 
-var Title$2 = newStyled.h1(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
+var Title$2 = newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
     var theme = _a.theme;
     return "\n    font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n  ");
 });
@@ -6619,9 +6591,9 @@ var DeliveryDetails = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(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$12, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$b, templateObject_8$9;
+var templateObject_1$14, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$b, templateObject_8$9;
 
-var Backdrop = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"], ["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"])), function (_a) {
+var Backdrop = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"], ["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"])), function (_a) {
     var top = _a.top;
     return top;
 }, function (_a) {
@@ -6675,15 +6647,15 @@ var Drawer = function (_a) {
     }, [isOpen, onClose, onOpen]);
     return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
 };
-var templateObject_1$11, templateObject_2$J;
+var templateObject_1$13, templateObject_2$J;
 
-var List = newStyled.ul(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
+var List = newStyled.ul(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
 var Item$2 = newStyled.li(templateObject_2$I || (templateObject_2$I = __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$A || (templateObject_3$A = __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$1 = newStyled.div(templateObject_4$p || (templateObject_4$p = __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$g || (templateObject_5$g = __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$f || (templateObject_6$f = __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$10, templateObject_2$I, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
+var templateObject_1$12, templateObject_2$I, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
 
 var DropdownListIcons = function (_a) {
     var items = _a.items;
@@ -6696,13 +6668,13 @@ var Dropdown = function (_a) {
     return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
 };
 
-var DropdownContainer = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n  position: relative;\n  font-size: 14px;\n  line-height: 18px;\n"], ["\n  position: relative;\n  font-size: 14px;\n  line-height: 18px;\n"])));
+var DropdownContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  position: relative;\n  font-size: 14px;\n  line-height: 18px;\n"], ["\n  position: relative;\n  font-size: 14px;\n  line-height: 18px;\n"])));
 var DropdownLabel = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: #fff;\n  border: 1px solid #bbb;\n  border-radius: 8px;\n  padding: 8px 12px 8px 16px;\n  cursor: pointer;\n  gap: 16px;\n  font-weight: 600;\n  color: var(--colors-pallete-secondary-color);\n  max-width: 337px;\n  height: 36px;\n\n  @media (max-width: 767px) {\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: #fff;\n  border: 1px solid #bbb;\n  border-radius: 8px;\n  padding: 8px 12px 8px 16px;\n  cursor: pointer;\n  gap: 16px;\n  font-weight: 600;\n  color: var(--colors-pallete-secondary-color);\n  max-width: 337px;\n  height: 36px;\n\n  @media (max-width: 767px) {\n    max-width: 100%;\n  }\n"])));
 var SizeLabel = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
 var DetailLabel = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n  text-align: center;\n  flex-grow: 1;\n  font-weight: 400;\n  color: var(--colors-shades-400-color);\n"], ["\n  text-align: center;\n  flex-grow: 1;\n  font-weight: 400;\n  color: var(--colors-shades-400-color);\n"])));
 var DropdownOptions = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  padding: 0;\n  max-width: 337px;\n  border: 1px solid var(--colors-pallete-secondary-color);\n  border-radius: 8px;\n  overflow: hidden;\n\n  @media (max-width: 767px) {\n    width: 100%;\n    max-width: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  padding: 0;\n  max-width: 337px;\n  border: 1px solid var(--colors-pallete-secondary-color);\n  border-radius: 8px;\n  overflow: hidden;\n\n  @media (max-width: 767px) {\n    width: 100%;\n    max-width: none;\n  }\n"])));
 var DropdownOption = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px 10px;\n  height: 40px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  &[aria-selected='true'] {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  & > span:first-of-type {\n    margin-right: auto;\n    font-weight: 600;\n  }\n\n  & > span:last-of-type {\n    text-align: center;\n    flex-grow: 1;\n    font-weight: 400;\n    color: var(--colors-shades-400-color);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px 10px;\n  height: 40px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  &[aria-selected='true'] {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  & > span:first-of-type {\n    margin-right: auto;\n    font-weight: 600;\n  }\n\n  & > span:last-of-type {\n    text-align: center;\n    flex-grow: 1;\n    font-weight: 400;\n    color: var(--colors-shades-400-color);\n  }\n"])));
-var templateObject_1$$, templateObject_2$H, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
+var templateObject_1$11, templateObject_2$H, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
 
 var SizeDropdown = function (_a) {
     var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
@@ -6725,7 +6697,7 @@ var SizeDropdown = function (_a) {
     return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
 };
 
-var DialogDropdownWrapper = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"], ["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
+var DialogDropdownWrapper = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"], ["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
 var DialogDropdownListContainer = newStyled.ul(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  position: absolute;\n  list-style: none;\n  width: max-content;\n  min-width: 100px;\n  background: #fff;\n  border: 1px solid #e9e9e9;\n  border-radius: ", ";\n  top: calc(", " + 15px);\n  right: calc(", " - 23px);\n  z-index: 50 !important;\n  margin-bottom: 1rem;\n\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n\n  overflow: hidden;\n"], ["\n  position: absolute;\n  list-style: none;\n  width: max-content;\n  min-width: 100px;\n  background: #fff;\n  border: 1px solid #e9e9e9;\n  border-radius: ", ";\n  top: calc(", " + 15px);\n  right: calc(", " - 23px);\n  z-index: 50 !important;\n  margin-bottom: 1rem;\n\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n\n  overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
 var DialogDropdownListItem = newStyled.li(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"], ["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"])));
 var DialogDropdownLink = newStyled.a(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  display: inline-block;\n  text-decoration: none;\n  width: 100%;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: var(--colors-shades-700-color);\n  font-size: 1.125rem;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  vertical-align: inherit;\n"], ["\n  display: inline-block;\n  text-decoration: none;\n  width: 100%;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: var(--colors-shades-700-color);\n  font-size: 1.125rem;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  vertical-align: inherit;\n"])));
@@ -6737,7 +6709,7 @@ var DropdownDialog = function (_a) {
                 return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
             }) }), void 0) }), void 0));
 };
-var templateObject_1$_, templateObject_2$G, templateObject_3$y, templateObject_4$n;
+var templateObject_1$10, templateObject_2$G, templateObject_3$y, templateObject_4$n;
 
 function FilteringDropdown(_a) {
     var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
@@ -6770,7 +6742,7 @@ function FilteringDropdown(_a) {
                 }) }, void 0)] }), void 0));
 }
 
-var Title$1 = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"])), function (props) { return props.borderColor; });
+var Title$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"])), function (props) { return props.borderColor; });
 var H3 = newStyled.h3(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"], ["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"])), function (props) { return props.color; });
 var ArrowContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n  width: 1rem;\n  height: 1rem;\n"], ["\n  width: 1rem;\n  height: 1rem;\n"])));
 var Container$J = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"], ["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
@@ -6780,9 +6752,9 @@ var Accordion = function (_a) {
     var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
     return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
 };
-var templateObject_1$Z, templateObject_2$F, templateObject_3$x, templateObject_4$m;
+var templateObject_1$$, templateObject_2$F, templateObject_3$x, templateObject_4$m;
 
-var SectionContent = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
+var SectionContent = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
 var Header$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1.063rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1.063rem;\n"])));
 var MobileHeader = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2.25rem;\n  margin-top: 1.063rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2.25rem;\n  margin-top: 1.063rem;\n"])));
 var MobileIconsContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"], ["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"])));
@@ -6792,7 +6764,7 @@ var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a =
 var ClearAll = newStyled.span(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n"])), function (props) { return props.color; });
 var MobileFooter = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  background-color: #fff;\n  padding: 0.75rem 0.938rem;\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: 5.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  background-color: #fff;\n  padding: 0.75rem 0.938rem;\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: 5.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n\n  span {\n    margin-left: 0.5rem;\n    user-select: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n\n  span {\n    margin-left: 0.5rem;\n    user-select: none;\n  }\n"])));
-var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$4, templateObject_10$3;
+var templateObject_1$_, templateObject_2$E, templateObject_3$w, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$4, templateObject_10$3;
 
 var getStylesBySize$7 = function (size, theme) {
     switch (size) {
@@ -6857,7 +6829,7 @@ var SelectorSecondary = function (_a) {
             } }), id: id }, void 0));
 };
 
-var UL = newStyled.ul(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  display: flex;\n  max-width: 100%;\n"], ["\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  display: flex;\n  max-width: 100%;\n"])));
+var UL = newStyled.ul(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  display: flex;\n  max-width: 100%;\n"], ["\n  margin: 0;\n  padding: 0;\n  flex-wrap: wrap;\n  display: flex;\n  max-width: 100%;\n"])));
 var LI = newStyled.li(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  list-style: none;\n  background-color: ", ";\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  color: ", ";\n  font-weight: 400;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n"], ["\n  list-style: none;\n  background-color: ", ";\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  color: ", ";\n  font-weight: 400;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
 var CloseIconContainer = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n  width: 0.656rem;\n  height: 0.656rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.5rem;\n  cursor: pointer;\n"], ["\n  width: 0.656rem;\n  height: 0.656rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.5rem;\n  cursor: pointer;\n"])));
 var Tags = function (_a) {
@@ -6867,7 +6839,7 @@ var Tags = function (_a) {
             return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
         }) }), void 0));
 };
-var templateObject_1$X, templateObject_2$D, templateObject_3$v;
+var templateObject_1$Z, templateObject_2$D, templateObject_3$v;
 
 var Filters = function (_a) {
     var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
@@ -7003,7 +6975,7 @@ var FilterCheckboxColor = function (_a) {
     return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
 };
 
-var Wrapper$4 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  padding: 12px 58px;\n  display: flex;\n  gap: 1.5em;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"], ["\n  padding: 12px 58px;\n  display: flex;\n  gap: 1.5em;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"])));
+var Wrapper$4 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  padding: 12px 58px;\n  display: flex;\n  gap: 1.5em;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"], ["\n  padding: 12px 58px;\n  display: flex;\n  gap: 1.5em;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"])));
 var Container$I = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n"])));
 var FitGuarantee = function (_a) {
     var _b;
@@ -7022,9 +6994,9 @@ var FitGuarantee = function (_a) {
                                 fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
                             } }, { children: title }), void 0), jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$W, templateObject_2$C;
+var templateObject_1$Y, templateObject_2$C;
 
-var Container$H = 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 Container$H = 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$2 = newStyled.p(templateObject_2$B || (templateObject_2$B = __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.colors.shades['550'].color; });
 var textButtonStyles$1 = function (theme) { return ({
     border: 'none',
@@ -7040,9 +7012,9 @@ var FitPredictor = function (_a) {
     var theme = useTheme();
     return (jsxs(Container$H, __assign$1({ theme: theme }, { children: [jsx(Container$H, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
 };
-var templateObject_1$V, templateObject_2$B;
+var templateObject_1$X, templateObject_2$B;
 
-var Image$1 = newStyled.img(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
+var Image$1 = newStyled.img(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  ", "\n\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant &&
         "\nborder-radius: 20px;\n";
@@ -7057,7 +7029,7 @@ var ImageSmallPreview = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
 };
-var templateObject_1$U;
+var templateObject_1$W;
 
 var Button$5 = newStyled.button(function () { return ({
     background: 'transparent',
@@ -11301,14 +11273,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
   return Slider;
 }(React__default["default"].Component);
 
-var StyledSlider = newStyled(Slider)(templateObject_1$T || (templateObject_1$T = __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 "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
+var StyledSlider = newStyled(Slider)(templateObject_1$V || (templateObject_1$V = __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 "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
     return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
 }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
     return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
 });
-var templateObject_1$T;
+var templateObject_1$V;
 
 var getStylesBySize$6 = function (size) {
     // rem units
@@ -11367,7 +11339,7 @@ var SliderNavigation = function (_a) {
         } }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
 };
 
-var horizontalStyles = css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"], ["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"])));
+var horizontalStyles = css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"], ["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"])));
 var verticalStyles = css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"], ["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"])));
 var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"], ["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"])), function (_a) {
     var position = _a.position;
@@ -11398,7 +11370,7 @@ var ImagePreviewList = function (_a) {
                             arrowPadding: 1.625,
                         }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
 };
-var templateObject_1$S, templateObject_2$A, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$7;
+var templateObject_1$U, templateObject_2$A, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$7;
 
 var propTypes = {exports: {}};
 
@@ -12991,7 +12963,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
   afterZoomOut: PropTypes.func
 } : {};
 
-var Container$F = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"], ["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"])), function (_a) {
+var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"], ["\n  ", "\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant &&
         "\n    border-radius: 40px;\n  ";
@@ -13010,9 +12982,9 @@ var ImageProductWithTags$1 = function (_a) {
                             style: { objectFit: 'cover', objectPosition: 'center' },
                         }, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
 };
-var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
+var templateObject_1$T, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
 
-var Container$E = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: fit-content;\n"])));
+var Container$E = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: fit-content;\n"])));
 var ProductGallery = function (_a) {
     var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
@@ -13024,7 +12996,7 @@ var ProductGallery = function (_a) {
                     setSelectedImage(value);
                 }, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
 };
-var templateObject_1$Q;
+var templateObject_1$S;
 
 var getStylesBySize$5 = function (size) {
     switch (size) {
@@ -13045,7 +13017,7 @@ var getStylesBySize$5 = function (size) {
             };
     }
 };
-var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __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  padding: ", ";\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  padding: ", ";\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$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __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  padding: ", ";\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  padding: ", ";\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) {
@@ -13075,9 +13047,9 @@ var IconButton = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsx(Container$D, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
 };
-var templateObject_1$P;
+var templateObject_1$R;
 
-var StyledButton$1 = newStyled(BaseButton)(templateObject_1$O || (templateObject_1$O = __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$1 = newStyled(BaseButton)(templateObject_1$Q || (templateObject_1$Q = __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 (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
@@ -13086,7 +13058,7 @@ var PaypalButton = function (_a) {
     var onClick = _a.onClick;
     return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
 };
-var templateObject_1$O;
+var templateObject_1$Q;
 
 var useOnClickOutside = function (ref, handler) {
     React$2.useEffect(function () {
@@ -13160,7 +13132,7 @@ var IconsWithTitle = function (_a) {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$C, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$8, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
 };
 
-var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  row-gap: 15px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
+var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  row-gap: 15px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: 10px;\n  max-width: ", ";\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
 var ImageContainer$2 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: flex;\n  max-width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  max-width: ", ";\n  height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
 var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
     var titlePosition = _a.titlePosition;
@@ -13172,9 +13144,9 @@ var ImageCardWithDescription = function (_a) {
     var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
     return (jsxRuntime.jsxs(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
 };
-var templateObject_1$N, templateObject_2$y, templateObject_3$s;
+var templateObject_1$P, templateObject_2$y, templateObject_3$s;
 
-var Label$1 = 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$1 = 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;
 });
@@ -13187,7 +13159,7 @@ var InputLabel = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
 };
-var templateObject_1$M, templateObject_2$x;
+var templateObject_1$O, templateObject_2$x;
 
 var containerByStatus = function (theme, status) {
     if (status === exports.InputValidationType.Valid)
@@ -13196,7 +13168,7 @@ var containerByStatus = function (theme, status) {
         return theme.colors.semantic.urgent.color;
     return '';
 };
-var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  position: relative;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  position: relative;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  position: relative;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  position: relative;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, status = _a.status, hasError = _a.hasError;
     return hasError ? '' : containerByStatus(theme, status);
 });
@@ -13274,7 +13246,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
     return theme.component.input.lineHeight;
 });
 var ClearInput = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"], ["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"])));
-var templateObject_1$L, templateObject_2$w, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
+var templateObject_1$N, templateObject_2$w, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
 
 var BaseInput = function (_a) {
     var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
@@ -13318,7 +13290,7 @@ var Button$3 = function (_a) {
     throw new Error("Invalid button variant ".concat(variant));
 };
 
-var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"])), function (_a) {
+var Container$z = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.input.borderRadius;
 });
@@ -13339,9 +13311,9 @@ var Custom = function (_a) {
     }); }, [variant, onClick, text, rest.disabled]);
     return (jsxRuntime.jsx(Container$z, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
 };
-var templateObject_1$K, templateObject_2$v;
+var templateObject_1$M, templateObject_2$v;
 
-var SuccessContainer = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  height: ", ";\n  display: flex;\n"], ["\n  height: ", ";\n  display: flex;\n"])), function (_a) {
+var SuccessContainer = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  height: ", ";\n  display: flex;\n"], ["\n  height: ", ";\n  display: flex;\n"])), function (_a) {
     var size = _a.size;
     return (size === 'small' ? '36px' : '');
 });
@@ -13351,9 +13323,9 @@ var Success = function (_a) {
     var children = _a.children, successText = _a.successText, size = _a.size;
     return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
 };
-var templateObject_1$J, templateObject_2$u, templateObject_3$q;
+var templateObject_1$L, templateObject_2$u, templateObject_3$q;
 
-var ButtonContainer = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
     var status = _a.status, type = _a.type, theme = _a.theme;
     return status === exports.InputValidationType.Empty &&
         type === 'primary' &&
@@ -13370,16 +13342,16 @@ var BasePlusButton = function (_a) {
     }
     return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
 };
-var templateObject_1$I;
+var templateObject_1$K;
 
-var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
+var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __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$t || (templateObject_2$t = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"])));
 var BasePlusIcon = function (_a) {
     var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
     var theme = useTheme();
     return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
 };
-var templateObject_1$H, templateObject_2$t;
+var templateObject_1$J, templateObject_2$t;
 
 var Input$3 = {
     Simple: BaseInput,
@@ -13388,7 +13360,7 @@ var Input$3 = {
     SimplePlusIcon: BasePlusIcon,
 };
 
-var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n"], ["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n"])), function (_a) {
+var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n"], ["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant &&
         "\n    border-radius: 40px;\n  ";
@@ -13494,14 +13466,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
         };
     }, [preventTouch, ref, touchStart]);
 }
-var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
+var templateObject_1$I, templateObject_2$s, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
 
-var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
+var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
 var ProductGalleryMobile = function (_a) {
     var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
     return (jsxRuntime.jsx(Container$w, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
 };
-var templateObject_1$F;
+var templateObject_1$H;
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -13768,7 +13740,7 @@ function useSwipeable(options) {
   return handlers;
 }
 
-var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"], ["\n  ", "\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"])), function (_a) {
+var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"], ["\n  ", "\n  position: relative;\n  max-height: 31.875rem;\n  overflow: hidden;\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant &&
         "\n    border-radius: 40px;\n  ";
@@ -13780,27 +13752,27 @@ var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithT
     var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
     return (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
 });
-var templateObject_1$E, templateObject_2$r, templateObject_3$o;
+var templateObject_1$G, templateObject_2$r, templateObject_3$o;
 
-var Button$1 = newStyled.button(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  top: calc(50% - 40px);\n  height: 40px !important;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  top: calc(50% - 40px);\n  height: 40px !important;\n"])));
+var Button$1 = newStyled.button(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  top: calc(50% - 40px);\n  height: 40px !important;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  top: calc(50% - 40px);\n  height: 40px !important;\n"])));
 var ArrowButton = function (_a) {
     var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
     return (jsxRuntime.jsx(Button$1, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
 };
-var templateObject_1$D;
+var templateObject_1$F;
 
-var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"], ["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"])));
+var Container$u = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"], ["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"])));
 var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
 var SlideDots = function (_a) {
     var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
     var theme = useTheme();
-    return (jsxRuntime.jsx(Container$u, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
+    return (jsxRuntime.jsx(Container$u, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
                 ? theme.component.slideNavigation.slideDots.selectedDotColor
-                : theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
+                : theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
 };
-var templateObject_1$C;
+var templateObject_1$E;
 
-var NavigationButton = newStyled(ArrowButton)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var NavigationButton = newStyled(ArrowButton)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
 var RightButton = newStyled(NavigationButton)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  right: 0;\n"], ["\n  right: 0;\n"])));
 var LeftButton = newStyled(NavigationButton)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  left: 0;\n"], ["\n  left: 0;\n"])));
 var SlideNavigation = function (_a) {
@@ -13814,9 +13786,9 @@ var SlideNavigation = function (_a) {
                     onNavigate(selectedIndex + 1);
                 } }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
 };
-var templateObject_1$B, templateObject_2$q, templateObject_3$n;
+var templateObject_1$D, templateObject_2$q, templateObject_3$n;
 
-var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
+var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
 var ProductGalleryMobileV2 = function (_a) {
     var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
     var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
@@ -13840,7 +13812,7 @@ var ProductGalleryMobileV2 = function (_a) {
     }, [index, images]);
     return (jsxRuntime.jsxs(Container$t, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
 };
-var templateObject_1$A;
+var templateObject_1$C;
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -13973,7 +13945,7 @@ var Portal = function (_a) {
 var visibleStyle = function (_a) {
     var opened = _a.opened;
     return opened
-        ? css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n      "]))) : css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n      "])));
+        ? css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n      "]))) : css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n      "])));
 };
 var transformStyle = function (_a) {
     var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
@@ -14021,9 +13993,9 @@ var useModal = function (id) {
         close: close,
     }); }, [close, open, opened]);
 };
-var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
+var templateObject_1$B, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
 
-var Bar$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\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: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+var Bar$1 = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\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: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
     var height = _a.height;
     return height || '0.5rem';
 }, function (_a) {
@@ -14095,9 +14067,9 @@ var MotivatorProgressBar = function (_a) {
     var progress = _calculatePercentage(currentAmount, endingValue);
     return (jsxRuntime.jsxs(Container$r, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
 };
-var templateObject_1$y;
+var templateObject_1$A;
 
-var Container$q = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"])), function (_a) {
+var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0.75rem 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.orderBar.backgroundColor;
 });
@@ -14107,7 +14079,7 @@ var OrderBar = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$q, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
 };
-var templateObject_1$x, templateObject_2$o;
+var templateObject_1$z, templateObject_2$o;
 
 var htmlReactParser = {exports: {}};
 
@@ -17888,7 +17860,7 @@ HTMLReactParser$1.htmlToDOM;
 HTMLReactParser$1.attributesToProps;
 HTMLReactParser$1.Element;
 
-var Container$p = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"], ["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"])));
+var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"], ["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"])));
 var Card = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 20px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"], ["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 20px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"])));
 var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"])));
 var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"], ["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"])));
@@ -17925,9 +17897,9 @@ var PackCard = function (_a) {
                         currency: currencyCode || 'USD',
                     }), ' ', "each"] }), void 0)] }), void 0));
 };
-var templateObject_1$w, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
+var templateObject_1$y, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
 
-var Container$o = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"])));
+var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n"])));
 var IconContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  width: 0.531rem;\n  height: 0.875rem;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 0.531rem;\n  height: 0.875rem;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
 var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), mediaQueries({
     margin: ['0 0.75rem', '0 1.25rem'],
@@ -17949,7 +17921,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
     var background = _a.background;
     return background || 'unset';
 });
-var templateObject_1$v, templateObject_2$m, templateObject_3$k, templateObject_4$e;
+var templateObject_1$x, templateObject_2$m, templateObject_3$k, templateObject_4$e;
 
 var Pagination = function (_a) {
     var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
@@ -18014,7 +17986,7 @@ var PaginatorBlog = function (_a) {
                         : theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
 };
 
-var Container$n = newStyled.div(templateObject_1$u || (templateObject_1$u = __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$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __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) {
@@ -18032,9 +18004,9 @@ var PaymentMethod = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsx(Container$n, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
 };
-var templateObject_1$u;
+var templateObject_1$w;
 
-var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 10px 0;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 10px 0;\n"])));
+var Container$m = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 10px 0;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 10px 0;\n"])));
 var IMAGE_WIDTH = '63px';
 var ImageContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: relative;\n  width: ", ";\n  img {\n    display: block;\n  }\n"], ["\n  position: relative;\n  width: ", ";\n  img {\n    display: block;\n  }\n"])), IMAGE_WIDTH);
 var DescriptionContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: calc(100% - ", ");\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: calc(100% - ", ");\n"])), mediaQueries({
@@ -18076,7 +18048,7 @@ var SimpleOrderItem = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$m, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$t, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
+var templateObject_1$v, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
 
 var P$1 = newStyled.p(function (_a) {
     var color = _a.color;
@@ -18090,7 +18062,7 @@ var P$1 = newStyled.p(function (_a) {
         margin: '0.938rem 4.188rem',
     });
 });
-var Bar = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\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: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+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: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\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: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
     var height = _a.height;
     return height || '0.5rem';
 }, function (_a) {
@@ -18135,9 +18107,9 @@ var ProgressBar = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
 };
-var templateObject_1$s;
+var templateObject_1$u;
 
-var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"], ["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
+var Container$k = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"], ["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
 var Item$1 = newStyled.span(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  padding: 0;\n"])));
 var Number$1 = newStyled(Item$1)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"], ["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"])));
 var IncreaseDecrease = newStyled(Item$1)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n  color: ", ";\n"], ["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n  color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
@@ -18165,7 +18137,7 @@ var QuantityPicker = function (_a) {
     }, [value, clamp]);
     return (jsxRuntime.jsxs(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
 };
-var templateObject_1$r, templateObject_2$k, templateObject_3$i, templateObject_4$c;
+var templateObject_1$t, templateObject_2$k, templateObject_3$i, templateObject_4$c;
 
 /* base styles & size variants */
 var CustomRadioStyles$1 = {
@@ -18234,7 +18206,7 @@ var ContainerStyles$1 = {
     },
 };
 
-var Wrapper$3 = 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 Wrapper$3 = 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$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
 var Input$2 = newStyled.input(templateObject_2$j || (templateObject_2$j = __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;
@@ -18254,7 +18226,7 @@ var RadioPrimary = function (_a) {
     };
     return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$j, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
 };
-var templateObject_1$q, templateObject_2$j, templateObject_3$h;
+var templateObject_1$s, templateObject_2$j, templateObject_3$h;
 
 var RadioGroupInput = function (_a) {
     var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
@@ -18333,7 +18305,7 @@ var ContainerStyles = {
     },
 };
 
-var Wrapper$2 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-bottom: 10px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding-bottom: 10px;\n"])));
+var Wrapper$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-bottom: 10px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding-bottom: 10px;\n"])));
 var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
 var Input$1 = newStyled.input(templateObject_2$i || (templateObject_2$i = __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;
@@ -18359,7 +18331,7 @@ var ClubRadioInput = function (_a) {
     };
     return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
 };
-var templateObject_1$p, templateObject_2$i, templateObject_3$g;
+var templateObject_1$r, templateObject_2$i, templateObject_3$g;
 
 var ClubRadioGroupInput = function (_a) {
     var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
@@ -18380,7 +18352,7 @@ function formatDate(date) {
     return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
 }
 
-var Container$h = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"])));
+var Container$h = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"])));
 var Content$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n  padding-top: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n  padding-top: 0;\n"])));
 var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
 var ReviewContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 15px;\n  margin-bottom: 5px;\n\n  @media (min-width: 768px) {\n    margin-top: 10px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-top: 15px;\n  margin-bottom: 5px;\n\n  @media (min-width: 768px) {\n    margin-top: 10px;\n  }\n"])));
@@ -18421,11 +18393,11 @@ var Review$1 = function (_a) {
     return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
                         (!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$o, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
+var templateObject_1$q, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
 
 var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
 var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
-var Container$g = newStyled.div(templateObject_1$n || (templateObject_1$n = __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 Container$g = newStyled.div(templateObject_1$p || (templateObject_1$p = __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$g || (templateObject_2$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  font-size: 14px;\n  line-height: 22px;\n  text-align: right;\n  margin-bottom: 10px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  font-size: 14px;\n  line-height: 22px;\n  text-align: right;\n  margin-bottom: 10px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n    line-height: 24px;\n  }\n"])));
 var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
 var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
@@ -18477,9 +18449,9 @@ var Review = function (_a) {
                                         : description,
                                 } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
 };
-var templateObject_1$n, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+var templateObject_1$p, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
 
-var Container$f = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: auto;\n"])));
+var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: auto;\n"])));
 var ReviewsContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n    gap: 30px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n    gap: 30px;\n  }\n"])));
 var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: block;\n\n  @media (min-width: 768px) {\n    display: flex;\n    flex-direction: column;\n  }\n"], ["\n  display: block;\n\n  @media (min-width: 768px) {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
 var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 10px;\n\n  @media (min-width: 768px) {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  margin-bottom: 10px;\n\n  @media (min-width: 768px) {\n    margin-bottom: 0;\n  }\n"])));
@@ -18495,9 +18467,9 @@ var ReviewsHeader = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
 };
-var templateObject_1$m, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
+var templateObject_1$o, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
 
-var Container$e = newStyled.div(templateObject_1$l || (templateObject_1$l = __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 Container$e = newStyled.div(templateObject_1$n || (templateObject_1$n = __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 Text = newStyled.p(templateObject_2$e || (templateObject_2$e = __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, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
@@ -18505,7 +18477,7 @@ var ScrollToTop = function (_a) {
     var fillValue = fill || theme.colors.pallete.primary.color;
     return (jsxRuntime.jsxs(Container$e, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
 };
-var templateObject_1$l, templateObject_2$e;
+var templateObject_1$n, templateObject_2$e;
 
 var Input = newStyled.input(function (props) { return ({
     padding: props.theme.component.input.padding,
@@ -18536,7 +18508,7 @@ var Input = newStyled.input(function (props) { return ({
     },
 }); });
 
-var Container$d = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"])), mediaQueries({
+var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"])), mediaQueries({
     borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
 }));
 var Description = newStyled.div({
@@ -18555,7 +18527,7 @@ var ProductItem = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$d, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
 };
-var templateObject_1$k;
+var templateObject_1$m;
 
 var Container$c = newStyled.div({
     display: 'flex',
@@ -18571,7 +18543,7 @@ var Ul = newStyled.ul({
     margin: '0px',
     padding: '0px',
 });
-var Li = newStyled.li(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"], ["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
+var Li = newStyled.li(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"], ["\n  width: 100%;\n  cursor: pointer;\n  list-style-type: none;\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n  ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
     padding: [0, '0rem 1rem'],
     borderRadius: [0, '0.5rem'],
 }));
@@ -18596,9 +18568,9 @@ var ResultsPanel = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
 };
-var templateObject_1$j, templateObject_2$d, templateObject_3$c;
+var templateObject_1$l, templateObject_2$d, templateObject_3$c;
 
-var Button = newStyled.button(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"], ["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"])), mediaQueries({
+var Button = newStyled.button(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"], ["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"])), mediaQueries({
     right: ['1rem', '7.75rem'],
     top: ['0.75rem', '0.75rem'],
 }));
@@ -18607,7 +18579,7 @@ var ClearButton = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsx(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
 };
-var templateObject_1$i;
+var templateObject_1$k;
 
 var SearchIconContainer = newStyled.div({
     display: 'flex',
@@ -18617,7 +18589,7 @@ var SearchIconContainer = newStyled.div({
     background: 'white',
     alignSelf: 'center',
 });
-var StyledButton = newStyled(ButtonSecondary)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  padding: 0.875rem 1.5rem;\n"], ["\n  position: absolute;\n  right: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  padding: 0.875rem 1.5rem;\n"])));
+var StyledButton = newStyled(ButtonSecondary)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  padding: 0.875rem 1.5rem;\n"], ["\n  position: absolute;\n  right: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  padding: 0.875rem 1.5rem;\n"])));
 var SearchControl = function (_a) {
     var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
     var theme = useTheme();
@@ -18633,7 +18605,7 @@ var SearchControl = function (_a) {
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
 };
-var templateObject_1$h;
+var templateObject_1$j;
 
 var initialState = { selectedOption: undefined, open: false, term: '' };
 var reducer = function (state, action) {
@@ -18700,7 +18672,7 @@ var SearchBar = function (_a) {
                         } }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
 };
 
-var Container$9 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"])));
+var Container$9 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"])));
 var BackArrow = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  transform: rotate(180deg);\n  margin-right: 0.5rem;\n"], ["\n  transform: rotate(180deg);\n  margin-right: 0.5rem;\n"])));
 var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
 var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  white-space: pre;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  white-space: pre;\n"])));
@@ -18711,9 +18683,9 @@ var SearchNavigation = function (_a) {
                     return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
                 }) }, void 0)] }, void 0));
 };
-var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
+var templateObject_1$i, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
 
-var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"], ["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"])), function (_a) {
+var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"], ["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"])), function (_a) {
     var alignCenter = _a.alignCenter;
     return alignCenter &&
         "\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  ";
@@ -18730,9 +18702,9 @@ var ShortBanner = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
 };
-var templateObject_1$f, templateObject_2$b, templateObject_3$a;
+var templateObject_1$h, templateObject_2$b, templateObject_3$a;
 
-var TableElement$1 = newStyled.table(templateObject_1$e || (templateObject_1$e = __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 TableElement$1 = newStyled.table(templateObject_1$g || (templateObject_1$g = __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$1 = newStyled.td(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  text-align: center;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n    text-align: center;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  text-align: center;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n    text-align: center;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableHead$1 = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    text-align: center;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    text-align: center;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableRow$1 = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __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; });
@@ -18768,9 +18740,9 @@ var SizeChartTable = function (_a) {
                             backgroundColor: getCellColor(index, cell),
                         }, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
 };
-var templateObject_1$e, templateObject_2$a, templateObject_3$9, templateObject_4$7;
+var templateObject_1$g, templateObject_2$a, templateObject_3$9, templateObject_4$7;
 
-var TableElement = newStyled.table(templateObject_1$d || (templateObject_1$d = __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 TableElement = newStyled.table(templateObject_1$f || (templateObject_1$f = __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$9 || (templateObject_2$9 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 8px;\n  text-align: center;\n  line-height: 20px;\n  height: 52px;\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: 8px;\n  text-align: center;\n  line-height: 20px;\n  height: 52px;\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$8 || (templateObject_3$8 = __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$6 || (templateObject_4$6 = __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; });
@@ -18779,7 +18751,7 @@ var SizeTable = function (_a) {
     var theme = useTheme();
     return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
 };
-var templateObject_1$d, templateObject_2$9, templateObject_3$8, templateObject_4$6;
+var templateObject_1$f, templateObject_2$9, templateObject_3$8, templateObject_4$6;
 
 var getStylesBySize$4 = function (size) {
     switch (size) {
@@ -18806,7 +18778,7 @@ var textButtonStyles = function (theme, size) {
         } });
 };
 var withContainer = function (iconFill, isLeading, Icon) {
-    return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$c || (templateObject_1$c = __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$1({ css: css(templateObject_1$e || (templateObject_1$e = __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)
@@ -18822,18 +18794,18 @@ var TextButton = function (_a) {
     var iconFill = getIconFill(theme, disabled, iconColor);
     return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
 };
-var templateObject_1$c;
+var templateObject_1$e;
 
-var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
+var Container$7 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
 var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
     return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
 };
-var templateObject_1$b, templateObject_2$8, templateObject_3$7;
+var templateObject_1$d, templateObject_2$8, templateObject_3$7;
 
-var ButtonsContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"])), function (_a) {
+var ButtonsContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"])), function (_a) {
     var inline = _a.inline;
     return (inline ? '0 0 0 10px' : '8px 0 0 0');
 });
@@ -18852,9 +18824,9 @@ var SizeSelector = function (_a) {
                         }, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
                 }) }), void 0)] }), void 0));
 };
-var templateObject_1$a;
+var templateObject_1$c;
 
-var TabContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"])), function (_a) {
+var TabContainer = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"])), function (_a) {
     var titleSize = _a.titleSize;
     return titleSize;
 }, function (_a) {
@@ -18871,9 +18843,9 @@ var Tab = function (_a) {
     var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
 };
-var templateObject_1$9;
+var templateObject_1$b;
 
-var Container$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var TabList = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
@@ -18890,14 +18862,14 @@ var Tabs = function (_a) {
     var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
     return (jsxRuntime.jsxs(Container$6, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
 };
-var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$5;
+var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5;
 
-var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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 jsxRuntime.jsx(Container$5, __assign$1({ className: className }, { children: text }), void 0);
 };
-var templateObject_1$7;
+var templateObject_1$9;
 
 var getStylesBySize$3 = function (size, styledBorder) {
     switch (size) {
@@ -19008,7 +18980,7 @@ var SeasonOfferRoundedTag = function (_a) {
     return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
 };
 
-var ImageWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"])));
+var ImageWrapper = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"])));
 var VideoOverlay = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(247, 160, 139, 0.1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  top: 0;\n  left: 0;\n  border-radius: 25px;\n  color: #ffffff;\n  gap: 15px;\n  cursor: pointer;\n  text-align: center;\n  @media (max-width: 768px) {\n    justify-content: end;\n    gap: 10px;\n    padding-bottom: 20px;\n    text-align: center;\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(247, 160, 139, 0.1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  top: 0;\n  left: 0;\n  border-radius: 25px;\n  color: #ffffff;\n  gap: 15px;\n  cursor: pointer;\n  text-align: center;\n  @media (max-width: 768px) {\n    justify-content: end;\n    gap: 10px;\n    padding-bottom: 20px;\n    text-align: center;\n  }\n"])));
 var FullscreenVideo = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 9999;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 9999;\n"])));
 var ImageVideo = function (_a) {
@@ -19030,9 +19002,9 @@ var ImageVideo = function (_a) {
                             height: '100%',
                         } }, void 0)] }, void 0))] }, void 0));
 };
-var templateObject_1$6, templateObject_2$6, templateObject_3$5;
+var templateObject_1$8, templateObject_2$6, templateObject_3$5;
 
-var ContainerDesktop = css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  flex: 0 0 50%;\n  justify-content: space-around;\n  height: 574px;\n"], ["\n  flex: 0 0 50%;\n  justify-content: space-around;\n  height: 574px;\n"])));
+var ContainerDesktop = css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  flex: 0 0 50%;\n  justify-content: space-around;\n  height: 574px;\n"], ["\n  flex: 0 0 50%;\n  justify-content: space-around;\n  height: 574px;\n"])));
 var ContainerMobile = css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  height: auto;\n  @media (max-width: 768px) {\n    max-height: fit-content;\n    padding: 50px 15px;\n  }\n"], ["\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  height: auto;\n  @media (max-width: 768px) {\n    max-height: fit-content;\n    padding: 50px 15px;\n  }\n"])));
 var Container$4 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  padding: 60px 34px 40px 34px;\n  display: flex;\n  @media (min-width: 769px) {\n    ", "\n  }\n  @media (max-width: 768px) {\n    ", "\n  }\n"], ["\n  padding: 60px 34px 40px 34px;\n  display: flex;\n  @media (min-width: 769px) {\n    ", "\n  }\n  @media (max-width: 768px) {\n    ", "\n  }\n"])), ContainerDesktop, ContainerMobile);
 var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 15px;\n  gap: 24px;\n  text-align: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 15px;\n  gap: 24px;\n  text-align: center;\n"])));
@@ -19065,9 +19037,47 @@ var TextWithImage = function (_a) {
                             },
                         } }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
 };
-var templateObject_1$5, templateObject_2$5, templateObject_3$4, templateObject_4$4;
+var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$4;
+
+var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var timerColor = _a.timerColor;
+    return timerColor || '';
+});
+var timeToSeconds = function (_a) {
+    var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
+    return hours * 3600 + minutes * 60 + seconds;
+};
+var secondsToTime = function (secs) {
+    var hours = Math.floor(secs / 3600);
+    var minutes = Math.floor((secs - hours * 3600) / 60);
+    var seconds = secs - hours * 3600 - minutes * 60;
+    return { hours: hours, minutes: minutes, seconds: seconds };
+};
+var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
+var Timer = function (_a) {
+    var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
+    var _f = React$2.useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
+    React$2.useEffect(function () {
+        var timer = setInterval(function () {
+            setSecs(function (seconds) {
+                if (seconds === 1) {
+                    clearInterval(timer);
+                    onTimeUp();
+                    return 0;
+                }
+                return seconds - 1;
+            });
+        }, 1000);
+        if (secs <= 0)
+            clearInterval(timer);
+        return function () { return clearInterval(timer); };
+    }, [onTimeUp, secs]);
+    var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
+    return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
+};
+var templateObject_1$6;
 
-var Wrapper$1 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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 Wrapper$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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$4 || (templateObject_2$4 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: block;\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: block;\n  align-items: center;\n"])), function (props) { return props.color; });
 var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-weight: 600;\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  align-self: ", ";\n"], ["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-weight: 600;\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  align-self: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -19096,7 +19106,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
     return theme.component.total.basicTotal.savings.amountFontWeight;
 });
 var TotalLabel = newStyled(Text$8)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  font-size: 20px;\n"], ["\n  font-size: 20px;\n"])));
-var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
+var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
 
 var Total = function (_a) {
     var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
@@ -19104,7 +19114,7 @@ var Total = function (_a) {
     return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
 };
 
-var Wrapper = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
@@ -19129,14 +19139,14 @@ var Subtotal = function (_a) {
                     return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
                 })] }), void 0));
 };
-var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2;
+var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2;
 
 var Totals = {
     Total: Total,
     Subtotal: Subtotal,
 };
 
-var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var CheckpointContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var CheckpointDate$1 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
 var CheckpointDateLabel$1 = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
@@ -19188,9 +19198,9 @@ var TrackingProgressV2 = function (_a) {
                 return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
             })] }), void 0));
 };
-var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
 
-var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var CheckpointContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  padding-bottom: ", ";\n  width: 60px;\n  min-width: 60px;\n  margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
 var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
@@ -19228,7 +19238,36 @@ var TrackingProgress = function (_a) {
                 return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
             })] }), void 0));
 };
-var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  background-color: ", ";\n  width: 100%;\n  padding: 5px 24px;\n  height: 40px;\n  line-height: 14px;\n  border-radius: ", ";\n\n  & [data-testid='HurryUpText'] {\n    font-size: 12px !important;\n    line-height: 12px !important;\n  }\n\n  & [data-testid='Time'] {\n    font-size: 14px !important;\n    line-height: 14px !important;\n  }\n\n  @media (min-width: 330px) {\n    & [data-testid='HurryUpText'] {\n      font-size: 14px !important;\n      line-height: 14px !important;\n    }\n\n    & [data-testid='Time'] {\n      font-size: 16px !important;\n      line-height: 16px !important;\n    }\n  }\n\n  @media (min-width: 767px) {\n    border-radius: ", ";\n  }\n"])), function (_a) {
+    var textPosition = _a.textPosition;
+    return textPosition;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius || 'unset';
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius || '8px';
+});
+var templateObject_1$1;
+
+var getDefaultCountdown = function () {
+    var tomorrowDate = new Date();
+    tomorrowDate.setDate(tomorrowDate.getDate() + 1);
+    tomorrowDate.setHours(0, 0, 0, 0);
+    var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
+    return Number(totalSeconds.toFixed(0));
+};
+
+var HurryUp = function (_a) {
+    var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
+    var theme = useTheme();
+    return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
+};
 
 var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  svg {\n    vertical-align: unset;\n  }\n"])), function (_a) {
     var size = _a.size;