npm - @trafilea/afrodita-components - Versions diffs - 4.0.1-beta.1 → 4.0.2-beta.10 - Mend

@trafilea/afrodita-components 4.0.1-beta.1 → 4.0.2-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (384) hide show

package/build/index.esm.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { jsxs as jsxs$1, jsx as jsx$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import React, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$2, useRef, useLayoutEffect, useMemo, useState, useEffect, isValidElement, cloneElement, useCallback, useReducer, createRef } from 'react';
+import { createPortal } from 'react-dom';
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -55,8 +56,8 @@ function __makeTemplateObject(cooked, raw) {
 }
 var IconWrapper = function (_a) {
-    var height = _a.height, width = _a.width, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testid = _a.testid, fill = _a.fill;
-    return (jsxs$1("svg", __assign({ width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testid ? testid : 'IconWrapper', fill: fill }, { children: [jsxs$1("title", { children: [title, " icon"] }, void 0), children] }), void 0));
+    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testid = _a.testid, fill = _a.fill;
+    return (jsxs$1("svg", __assign({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testid ? testid : 'IconWrapper', fill: fill }, { children: [jsxs$1("title", { children: [title, " icon"] }, void 0), children] }), void 0));
 };
 var SixtyDaysGuarantee = function (_a) {
@@ -342,11 +343,23 @@ var Comment = function (_a) {
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 22, viewBoxY: 20, title: "Comment" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 10C0 4.46565 4.92593 0 11 0C17.037 0 22 4.46565 22 10C22 15.5344 17.0741 20 11 20C9 20 7.03704 19.5038 5.33333 18.5496C4.40741 19.0458 3.40741 19.2748 2.2963 19.2748C1.96296 19.2748 1.59259 19.2366 1.25926 19.1985C0.925926 19.1603 0.62963 18.8931 0.555556 18.5496C0.481481 18.2061 0.62963 17.8244 0.925926 17.6336C1.48148 17.2519 1.92593 16.7176 2.22222 16.0305C0.777778 14.313 0 12.1756 0 10ZM5.55556 17.4046C7.18518 18.3588 9.03704 18.855 10.963 18.855C16.4444 18.855 20.8519 14.8855 20.8519 10C20.8519 5.1145 16.4074 1.14504 10.963 1.14504C5.51852 1.14504 1.11111 5.1145 1.11111 10C1.11111 12.0229 1.85185 13.9695 3.22222 15.5344C3.37037 15.687 3.40741 15.916 3.33333 16.1069C3.03704 16.9084 2.62963 17.5954 2.03704 18.1298C3.14815 18.1679 4.14815 17.9389 5 17.4046C5.02318 17.3966 5.04475 17.3887 5.06538 17.381L5.0654 17.381C5.14364 17.3521 5.20837 17.3282 5.2963 17.3282C5.37037 17.3282 5.48148 17.3664 5.55556 17.4046ZM12.1579 10.2941C12.1579 10.7814 11.7691 11.1765 11.2895 11.1765C10.8099 11.1765 10.4211 10.7814 10.4211 10.2941C10.4211 9.80681 10.8099 9.41177 11.2895 9.41177C11.7691 9.41177 12.1579 9.80681 12.1579 10.2941ZM7.23683 11.1765C7.71644 11.1765 8.10525 10.7814 8.10525 10.2941C8.10525 9.8068 7.71644 9.41176 7.23683 9.41176C6.75721 9.41176 6.36841 9.8068 6.36841 10.2941C6.36841 10.7814 6.75721 11.1765 7.23683 11.1765ZM16.2105 10.2941C16.2105 10.7814 15.8217 11.1765 15.3421 11.1765C14.8625 11.1765 14.4737 10.7814 14.4737 10.2941C14.4737 9.80681 14.8625 9.41177 15.3421 9.41177C15.8217 9.41177 16.2105 9.80681 16.2105 10.2941Z", fill: fill }, void 0) }), void 0));
 };
+var Message = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 22, viewBoxY: 20, title: "message icon" }, { children: jsx$1("path", { d: "M0 10C0 4.46565 4.92593 0 11 0C17.037 0 22 4.46565 22 10C22 15.5344 17.0741 20 11 20C9 20 7.03704 19.5038 5.33333 18.5496C4.40741 19.0458 3.40741 19.2748 2.2963 19.2748C1.96296 19.2748 1.59259 19.2366 1.25926 19.1985C0.925926 19.1603 0.62963 18.8931 0.555556 18.5496C0.481481 18.2061 0.62963 17.8244 0.925926 17.6336C1.48148 17.2519 1.92593 16.7176 2.22222 16.0305C0.777778 14.313 0 12.1756 0 10ZM5.55556 17.4046C7.18518 18.3588 9.03704 18.855 10.963 18.855C16.4444 18.855 20.8519 14.8855 20.8519 10C20.8519 5.1145 16.4074 1.14504 10.963 1.14504C5.51852 1.14504 1.11111 5.1145 1.11111 10C1.11111 12.0229 1.85185 13.9695 3.22222 15.5344C3.37037 15.687 3.40741 15.916 3.33333 16.1069C3.03704 16.9084 2.62963 17.5954 2.03704 18.1298C3.14815 18.1679 4.14815 17.9389 5 17.4046C5.02318 17.3966 5.04475 17.3887 5.06538 17.381L5.0654 17.381C5.14364 17.3521 5.20837 17.3282 5.2963 17.3282C5.37037 17.3282 5.48148 17.3664 5.55556 17.4046ZM12.1579 10.2941C12.1579 10.7814 11.7691 11.1765 11.2895 11.1765C10.8099 11.1765 10.4211 10.7814 10.4211 10.2941C10.4211 9.80681 10.8099 9.41177 11.2895 9.41177C11.7691 9.41177 12.1579 9.80681 12.1579 10.2941ZM7.23683 11.1765C7.71644 11.1765 8.10525 10.7814 8.10525 10.2941C8.10525 9.8068 7.71644 9.41176 7.23683 9.41176C6.75721 9.41176 6.36841 9.8068 6.36841 10.2941C6.36841 10.7814 6.75721 11.1765 7.23683 11.1765ZM16.2105 10.2941C16.2105 10.7814 15.8217 11.1765 15.3421 11.1765C14.8625 11.1765 14.4737 10.7814 14.4737 10.2941C14.4737 9.80681 14.8625 9.41177 15.3421 9.41177C15.8217 9.41177 16.2105 9.80681 16.2105 10.2941Z", fill: fill }, void 0) }), void 0));
+};
+var Mail = function (_a) {
+    var height = _a.height, width = _a.width;
+    return (jsxs$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: "message icon" }, { children: [jsx$1("path", { d: "M21.4-14.3c0,0.1,0,0.2,0,0.3c0.1,0,0.1,0,0.2,0s0.1,0,0.2,0s0.1,0,0.2,0c0,0.1,0,0.1,0,0.2c0,0.1,0,0.2,0,0.2\n\tc0,0.1,0,0.2,0,0.2h0.1c0,0.1,0,0.2,0,0.3l0,0l0,0c0-0.1,0-0.2,0-0.3c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0.1s0,0.2,0,0.2\n\tc0,0.1,0,0.3,0,0.4l0,0l0,0c0,0,0,0,0,0.1c0,0.2,0,0.3,0,0.5c0,0.1,0,0.2,0,0.3v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1\n\tv0.1v0.1v0.1v0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0.2,0,0.3,0,0.5c0,0.1,0,0.2,0,0.3v0.1V-9v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1V-8\n\tv0.1v0.1v0.1v0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0.2,0,0.3,0,0.5c0,0.1,0,0.2,0,0.3v0.1v0.1v0.1v0.1v0.1V-6v0.1v0.1v0.1v0.1\n\tc0,0.2,0,0.5,0,0.7c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.2,0-0.3v0.1V-5v0.1H22c0,0,0,0,0,0.1s0,0.1,0,0.2s0,0.1,0,0.2s0,0.1,0,0.2\n\tc-0.2,0-0.4,0-0.7,0c0,0.1,0,0.2,0,0.3l0,0l0,0c-4.5,0-9,0-13.5,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.2,0-0.4,0-0.6\n\tc-0.1,0-0.2,0-0.3,0l0,0l0,0c0.1,0,0.2,0,0.3,0v-0.1c-0.1,0-0.2,0-0.3,0c0-2.9,0-5.9,0-8.8c0.1,0,0.2,0,0.3,0v-0.1\n\tc-0.1,0-0.2,0-0.3,0l0,0c0.1,0,0.2,0,0.3,0c0-0.2,0-0.4,0-0.6c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3C12.4-14.3,16.9-14.3,21.4-14.3z\n\t M21-4.4L21-4.4c0-0.2,0-0.3,0-0.4c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3l0,0l0,0\n\tc-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3\n\tc-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3l0,0l0,0\n\tc-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.2,0-0.4,0-0.7,0l0,0c0,0.1,0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c0,0.1,0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0l0,0c0,0.1,0,0.2,0,0.3c-0.5,0-1,0-1.5,0c0-0.1,0-0.1,0-0.2c0.1,0,0.1,0,0.2,0c-0.1,0-0.1,0-0.2,0v-0.1l0,0v0.1\n\th-0.1v-0.1c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.2,0-0.3l0,0\n\tl0,0c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c0,0,0,0,0-0.1h-0.1h-0.1H13h-0.1h-0.1h-0.1h-0.1v0.1v0.1v0.1c-0.1,0-0.2,0-0.3,0\n\tc0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1\n\tc0,0,0,0,0,0.1c0,0,0,0,0,0.1c-0.1,0-0.2,0-0.3,0l0,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0l0,0c0,0,0,0,0,0.1s0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c0,0.1,0,0.2,0,0.3c0,0,0,0,0,0.1\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0\n\tc0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.2,0,12.4,0,12.5,0\n\tC21-4.2,21-4.3,21-4.4C21-4.3,21-4.3,21-4.4C21-4.3,21-4.3,21-4.4z M21-13.4c0-0.1,0-0.1,0-0.2c-4.2,0-8.3,0-12.5,0\n\tc0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.3,0,0.7,0,1c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3l0,0l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0\n\tc0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c0,0.1,0,0.2,0,0.3l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0l0,0\n\tc0,0.1,0,0.2,0,0.3c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c0,0.1,0,0.2,0,0.3l0,0l0,0c0-0.1,0-0.2,0-0.3\n\tc0.1,0,0.1,0,0.2,0c0,0.1,0,0.2,0,0.3l0,0c0.1,0,0.2,0,0.3,0v0.1v0.1v0.1l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0\n\tc0,0,0,0,0,0.1s0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0,0,0,0.1,0c0,0.1,0,0.2,0,0.3c0.6,0,1.1,0,1.7,0c0-0.1,0-0.2,0-0.3l0,0\n\tc0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3l0,0c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0s0.1,0,0.2,0\n\tc0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0,0,0,0,0-0.1c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0l0,0\n\tc0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3\n\tc0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0\n\tc0-0.1,0-0.2,0-0.3l0,0l0,0c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.1,0-0.2h0.1h0.1c0,0.1,0,0.1,0,0.2\n\tl0,0l0,0c0-0.1,0-0.1,0-0.2h0.1l0,0h-0.1v-0.1h0.1c0-0.2,0-0.4,0-0.7c-0.1,0-0.2,0-0.3,0C21-13.3,21-13.3,21-13.4\n\tC21-13.3,21-13.3,21-13.4L21-13.4L21-13.4z M18.3-9.2c0,0.2,0,0.5,0,0.7l0,0h0.1h0.1c0,0,0,0,0.1,0h0.1c0,0.1,0,0.2,0,0.3l0,0\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0l0,0l0,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3l0,0l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0-1.8,0-3.6,0-5.4l0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0h-0.1h-0.1l0,0\n\tc0,0.1,0,0.2,0,0.3c-0.2,0-0.3,0-0.5,0c-0.1,0-0.1,0-0.2,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0l0,0l0,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0v0.1v0.1v0.1\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3C18.6-9.2,18.4-9.2,18.3-9.2z M8.2-5.8c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3l0,0l0,0\n\tc0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0\n\tc0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3\n\tc0.1,0,0.2,0,0.3,0l0,0c0-0.1,0-0.2,0-0.3s0-0.2,0-0.4c0,0,0,0,0-0.1c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0l0,0\n\tc0-0.1,0-0.1,0-0.2h-0.1v0.1v0.1c0-0.1,0-0.1,0-0.2c-0.1,0-0.2,0-0.2,0h0.1h0.1v-0.1c-0.1,0-0.2,0-0.3,0s-0.1,0-0.2,0\n\tc0-0.1,0-0.2,0-0.3l0,0c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0v-0.1v-0.1v-0.1c-0.1,0-0.2,0-0.2,0\n\tc-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0C8.2-9.4,8.2-7.6,8.2-5.8z M10.5-9.9v0.1h0.1\n\tC10.5-9.8,10.5-9.8,10.5-9.9L10.5-9.9z" }, void 0), jsxs$1("g", { children: [jsx$1("path", { d: "M4.8,9.4H2.3C2,9.4,1.8,9.2,1.8,8.8c0-0.3,0.2-0.6,0.5-0.6h2.5c0.3,0,0.5,0.3,0.5,0.6C5.3,9.2,5,9.4,4.8,9.4z" }, void 0), jsx$1("path", { d: "M4.8,12H3.7c-0.3,0-0.5-0.2-0.5-0.5S3.4,11,3.7,11h1.1c0.3,0,0.5,0.2,0.5,0.5S5.1,12,4.8,12z" }, void 0), jsx$1("path", { d: "M4.8,14.6H1.6c-0.3,0-0.5-0.3-0.5-0.6c0-0.3,0.2-0.6,0.5-0.6h3.2c0.3,0,0.5,0.3,0.5,0.6C5.3,14.3,5.1,14.6,4.8,14.6z" }, void 0), jsx$1("path", { d: "M21.3,6.1H8.1c-0.9,0-1.7,0.7-1.7,1.7v8.5c0,0.9,0.7,1.7,1.7,1.7h13.3c0.9,0,1.7-0.7,1.7-1.7V7.8C23,6.9,22.3,6.1,21.3,6.1\n\t\tz M18.4,11.7c1.3-1,2.7-2.1,3.6-2.7v6.4L18.4,11.7z M8.1,7.2h13.3c0.3,0,0.5,0.2,0.6,0.5c-1,0.8-5.4,4.2-7,5.4\n\t\tc-0.2,0.1-0.3,0.1-0.5,0c-1.6-1.2-5.7-4.1-7-5V7.8C7.5,7.4,7.8,7.2,8.1,7.2z M7.5,15.3v-6c0.9,0.6,2.3,1.6,3.6,2.6L7.5,15.3z\n\t\t M8.1,16.8c-0.2,0-0.3-0.1-0.4-0.2l4.3-4.1c0.7,0.5,1.4,1,1.9,1.3c0.3,0.2,0.6,0.3,0.9,0.3s0.6-0.1,0.9-0.3c0.5-0.3,1.2-0.9,2-1.5\n\t\tl4.2,4.3c-0.1,0.1-0.2,0.2-0.4,0.2H8.1z" }, void 0)] }, void 0)] }), void 0));
+};
 var Messaging = /*#__PURE__*/Object.freeze({
     __proto__: null,
     QuestionCircle: QuestionCircle,
     Messenger: Messenger,
-    Comment: Comment
+    Comment: Comment,
+    Message: Message,
+    Mail: Mail
 });
 var AppleStore = function (_a) {
@@ -3268,7 +3281,7 @@ var InputValidationType;
 })(InputValidationType || (InputValidationType = {}));
 var Section = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
-    return props.type === CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
+    return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
 });
 var CardHeader = function (_a) {
     var children = _a.children;
@@ -3287,6 +3300,7 @@ var CardBody = function (_a) {
 };
 var templateObject_1$_;
+var IGNORED_KEYS = ['typography', 'fonts'];
 var applyVariablesIntoTheme = function (theme) {
     var variables = {};
     var pending = {};
@@ -3299,6 +3313,11 @@ var applyVariablesIntoTheme = function (theme) {
         }
         variables[key] = variables[valueKey];
     }
+    for (var _i = 0, IGNORED_KEYS_1 = IGNORED_KEYS; _i < IGNORED_KEYS_1.length; _i++) {
+        var key = IGNORED_KEYS_1[_i];
+        // @ts-ignore
+        variables[key] = theme[key];
+    }
     return variablesToObject(variables, {});
 };
 var variablesToObject = function (variables, theme) {
@@ -3308,7 +3327,7 @@ var variablesToObject = function (variables, theme) {
         for (var i = 0; i < path.length; i++) {
             var segment = path[i];
             var isLast = i === path.length - 1;
-            var isArray = new RegExp("".concat(segment, "-0$")).test(key);
+            var isArray = new RegExp("".concat(segment, "-0[-\\w]*$")).test(key);
             var segmentValue = isLast ? variables[key] : isArray ? [] : {};
             if (segment in target === false) {
                 // @ts-ignore
@@ -3326,6 +3345,9 @@ var transformToVariables = function (prefix, variables, theme, pending) {
         /* istanbul ignore next */
         var fullKey = key === '$root' ? prefix : "".concat(prefix, "-").concat(key);
         var value = theme[key];
+        if (IGNORED_KEYS.includes(key)) {
+            continue;
+        }
         if (value == null) {
             continue;
         }
@@ -3460,13 +3482,14 @@ function jsxs(type, props, key) {
 }
 var BaseButton = function (_a) {
-    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className;
+    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline;
     return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: {
-            display: 'flex',
+            display: inline ? 'inherit-flex' : 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             padding: '0.75rem 2rem',
             textDecoration: 'none',
+            textTransform: 'uppercase',
             boxSizing: 'border-box',
             cursor: 'pointer',
         } }, { children: [renderLeading, children, renderTrailing] }), void 0));
@@ -3500,7 +3523,7 @@ var BaseCTA = function (_a) {
     var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, type = _a.type, className = _a.className;
     var theme = useTheme();
     var stylesBySize = getStylesBySize$9(size, theme);
-    return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
+    return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
                 backgroundColor: theme.colors.background.disabled,
                 color: theme.colors.text.disabled,
                 cursor: 'not-allowed',
@@ -4417,7 +4440,7 @@ function Disclosure(props) {
 } // ---
 var DEFAULT_BUTTON_TAG$1 = 'button';
-var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
+var Button$7 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
   var _useDisclosureContext = useDisclosureContext([Disclosure.name, Button.name].join('.')),
       state = _useDisclosureContext[0],
       dispatch = _useDisclosureContext[1];
@@ -4580,7 +4603,7 @@ var Panel = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
   }));
 }); // ---
-Disclosure.Button = Button$6;
+Disclosure.Button = Button$7;
 Disclosure.Panel = Panel;
 function disposables() {
@@ -4976,7 +4999,7 @@ function Listbox(props) {
 } // ---
 var DEFAULT_BUTTON_TAG = 'button';
-var Button$5 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
+var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
   var _state$optionsRef$cur;
   var _useListboxContext = useListboxContext([Listbox.name, Button.name].join('.')),
@@ -5435,7 +5458,7 @@ function Option$2(props) {
 } // ---
-Listbox.Button = Button$5;
+Listbox.Button = Button$6;
 Listbox.Label = Label$4;
 Listbox.Options = Options;
 Listbox.Option = Option$2;
@@ -6147,7 +6170,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
     CustomCheckboxStyles[props.size](props.theme),
     CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
 ]; });
-var Input$3 = newStyled.input(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
+var Input$3 = newStyled.input(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 });
@@ -6173,7 +6196,7 @@ var Checkbox = function (_a) {
     }, []);
     return (jsxs$1(Container$B, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
 };
-var templateObject_1$X, templateObject_2$D;
+var templateObject_1$X, templateObject_2$C;
 var CustomOption = newStyled.li(function (_a) {
     var theme = _a.theme, selected = _a.selected, active = _a.active;
@@ -6291,19 +6314,150 @@ var SelectorSecondary = function (_a) {
             } }) }, void 0));
 };
-var ButtonsContainer = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
-var SizeParagraph = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"], ["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"])));
+// 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$W || (templateObject_1$W = __makeTemplateObject([""], [""]))),
+    hero2: newStyled.h2(templateObject_2$B || (templateObject_2$B = __makeTemplateObject([""], [""]))),
+    hero3: newStyled.h3(templateObject_3$n || (templateObject_3$n = __makeTemplateObject([""], [""]))),
+    display1: newStyled.h1(templateObject_4$c || (templateObject_4$c = __makeTemplateObject([""], [""]))),
+    display2: newStyled.h2(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject([""], [""]))),
+    heading1: newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject([""], [""]))),
+    heading2: newStyled.h2(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject([""], [""]))),
+    heading3: newStyled.h3(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject([""], [""]))),
+    heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
+    heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
+    heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
+    body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
+    link: newStyled.a(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "], ["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
+    button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: inline-block;\n  "], ["\n    display: inline-block;\n  "]))),
+    pricing: newStyled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "], ["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
+    label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
+    tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: inline-block;\n    text-transform: ", ";\n  "], ["\n    display: inline-block;\n    text-transform: ", ";\n  "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
+};
+var Text$3 = function (_a) {
+    var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
+    var theme = useTheme();
+    var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
+    var _b = useMemo(function () {
+        var _a;
+        return (__assign(__assign({}, ((_a = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _a !== void 0 ? _a : {})), allProps));
+    }, [variant, allProps]), size = _b.size, weight = _b.weight, props = __rest(_b, ["size", "weight"]);
+    var commonCSS = useMemo(function () {
+        var _a, _b;
+        // These are the common style inside a `variant`.
+        // E.g.: Common styles for all "button".
+        var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
+            fontSize: 14,
+            lineHeight: 1,
+        };
+        // This allow us to define different styles for different `sizes` inside a `variant`
+        // E.g.: "button-small", "button-regular"
+        //
+        // We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
+        // E.g.: "hero1", "display1"
+        var variantName = [variant, size].filter(Boolean).join('-');
+        // These are styles specific to `variation-size`.
+        var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
+        var style = __assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
+        if (weight) {
+            style.fontWeight = theme.typography.config.weight[weight];
+        }
+        if (props.disabled) {
+            style.opacity = 0.5;
+            style.cursor = 'not-allowed';
+            style.color = theme.colors.text.disabled;
+        }
+        return style;
+    }, [theme, variant, weight, size, props.disabled]);
+    // This is to make TS happy, because `href` doesn't exists on other `variants`
+    var propsHref = props.href;
+    var href = useMemo(function () {
+        // We could use `pointer-events: none` but it prevents us from using
+        // `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
+        if (propsHref != null && props.disabled) {
+            return 'javascript:void(0)';
+        }
+        return propsHref;
+    }, [props.disabled, propsHref]);
+    return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
+};
+var DEFAULTS = {
+    heading1: {
+        weight: 'bold',
+    },
+    heading2: {
+        weight: 'bold',
+    },
+    heading3: {
+        weight: 'bold',
+    },
+    heading4: {
+        weight: 'bold',
+    },
+    heading5: {
+        weight: 'bold',
+    },
+    heading6: {
+        weight: 'bold',
+    },
+    hero1: {
+        weight: 'heavy',
+    },
+    hero2: {
+        weight: 'heavy',
+    },
+    hero3: {
+        weight: 'heavy',
+    },
+    display1: {
+        weight: 'bold',
+    },
+    display2: {
+        weight: 'bold',
+    },
+    body: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    button: {
+        size: 'regular',
+        weight: 'bold',
+    },
+    tag: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    label: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    link: {
+        size: 'regular',
+        weight: 'regular',
+    },
+    pricing: {
+        size: 'regular',
+    },
+};
+var templateObject_1$W, templateObject_2$B, templateObject_3$n, templateObject_4$c, templateObject_5$7, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var ButtonsContainer = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
 var SizeSelector = function (_a) {
-    var sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange;
-    return (jsxs("div", { children: [jsxs(SizeParagraph, { children: ["Size: ", jsx("span", __assign({ css: { fontWeight: 600 } }, { children: selectedValue.description }), void 0)] }, void 0), jsx(ButtonsContainer, { children: sizes.map(function (size) {
+    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
+    return (jsxs("div", __assign({ css: {
+            display: 'flex',
+            flexDirection: inline ? 'row' : 'column',
+            alignItems: inline ? 'center' : 'start',
+        } }, { children: [jsxs(Text$3, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, !inline && (jsx(Text$3, __assign({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, { children: sizes.map(function (size) {
                     var active = !size.disabled && size.label === selectedValue.label;
                     return (jsx(SelectorSecondary, { css: {
                             padding: '0.75rem 1rem 0.625rem',
-                            margin: '0 0.5rem 0.5rem 0',
+                            margin: '0.5rem',
                         }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
-                }) }, void 0)] }, void 0));
+                }) }, void 0)] }), void 0));
 };
-var templateObject_1$W, templateObject_2$C;
+var templateObject_1$V;
 var getStylesBySize$7 = function (size) {
     switch (size) {
@@ -6332,7 +6486,7 @@ var textButtonStyles$1 = function (theme, size) {
         } });
 };
 var withContainer = function (iconFill, isLeading, Icon) {
-    return Icon && (jsx("span", __assign({ css: css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
+    return Icon && (jsx("span", __assign({ css: css(templateObject_1$U || (templateObject_1$U = __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)
@@ -6348,16 +6502,16 @@ var TextButton = function (_a) {
     var iconFill = getIconFill(theme, disabled, iconColor);
     return (jsx(BaseButton, __assign({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
 };
-var templateObject_1$V;
+var templateObject_1$U;
-var Container$A = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
-var P$2 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var PercentageSpan = newStyled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
+var Container$A = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
+var P$2 = newStyled.p(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var PercentageSpan = newStyled.span(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
     return (jsxs$1(Container$A, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
 };
-var templateObject_1$U, templateObject_2$B, templateObject_3$n;
+var templateObject_1$T, templateObject_2$A, templateObject_3$m;
 var getStylesBySize$6 = function (size) {
     switch (size) {
@@ -6387,7 +6541,7 @@ var getStylesBySize$6 = function (size) {
             };
     }
 };
-var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __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$S || (templateObject_1$S = __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) {
@@ -6409,7 +6563,7 @@ var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
     var size = _a.size;
     return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
 });
-var H3$2 = newStyled.h3(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+var H3$2 = newStyled.h3(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var textColor = _a.textColor;
     return textColor;
 }, function (_a) {
@@ -6426,7 +6580,7 @@ var DiscountTag = function (_a) {
     var theme = useTheme();
     return (jsx$1(Container$z, __assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
 };
-var templateObject_1$T, templateObject_2$A;
+var templateObject_1$S, templateObject_2$z;
 var getStylesBySize$5 = function (size) {
     switch (size) {
@@ -6450,8 +6604,8 @@ var getStylesBySize$5 = function (size) {
             };
     }
 };
-var Container$y = 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 Price = newStyled.h1(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
+var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Price = newStyled.h1(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
     var weight = _a.weight;
     return (weight ? weight : '400');
 }, function (_a) {
@@ -6473,7 +6627,7 @@ var Price = newStyled.h1(templateObject_2$z || (templateObject_2$z = __makeTempl
     var margin = _a.margin, size = _a.size;
     return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
 });
-var TagContainer = newStyled.h1(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+var TagContainer = newStyled.h1(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
     return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
@@ -6483,7 +6637,7 @@ var PriceLabel = function (_a) {
     var theme = useTheme();
     return (jsxs$1(Container$y, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
 };
-var templateObject_1$S, templateObject_2$z, templateObject_3$m;
+var templateObject_1$R, templateObject_2$y, templateObject_3$l;
 var OneColorSelector = function (_a) {
     var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
@@ -6522,69 +6676,55 @@ var OutOfStock = function (_a) {
     return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
 };
-var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
-var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
-var Span = newStyled.span(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
-var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n"])));
+var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+newStyled(RadioGroup.Label)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
+var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var Span = newStyled.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
+var OptionsContainer = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"])));
 var Label$1 = function (_a) {
     var label = _a.label, values = _a.values;
-    return (jsxs$1(CustomRadioGroupLabel, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }, void 0));
+    return (jsxs$1(Text$3, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
 };
 var Option = function (_a) {
     var value = _a.value, children = _a.children;
     return (jsx$1(CustomRadioGroupOption, __assign({ value: value }, { children: children }), void 0));
 };
 var ColorRadioGroup = function (_a) {
-    var value = _a.value, onChange = _a.onChange, children = _a.children;
-    return (jsx$1(CustomRadioGroup, __assign({ value: value, onChange: onChange }, { children: children }), void 0));
+    var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
+    return (jsx$1(CustomRadioGroup, __assign({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
 };
 var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
     Label: Label$1,
     Option: Option,
     OptionsContainer: OptionsContainer,
 });
-var templateObject_1$R, templateObject_2$y, templateObject_3$l, templateObject_4$e, templateObject_5$7;
+var templateObject_1$Q, templateObject_2$x, templateObject_3$k, templateObject_4$b, templateObject_5$6;
-var Container$x = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
+var Container$x = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 });
-var Image$4 = newStyled.img(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
+var Image$2 = newStyled.img(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
 var PatternSelector = function (_a) {
     var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
     var theme = useTheme();
     var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
-    return (jsx$1(Container$x, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$4, { src: url, alt: "pattern" }, void 0) }), void 0));
+    return (jsx$1(Container$x, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
 };
-var templateObject_1$Q, templateObject_2$x;
+var templateObject_1$P, templateObject_2$w;
 var renderOptions$1 = function (options) {
     if (options.length)
-        return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
+        return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
                 var checked = _a.checked;
-                return option.color ? (jsx$1(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && jsx$1(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
+                return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
             } }), option.label)); });
     else
-        return jsx$1(OutOfStock, { title: "out of stock color" }, void 0);
-};
-var getInitialValue$1 = function (options, selectedValue) {
-    if (selectedValue && options.includes(selectedValue))
-        return selectedValue;
-    else if (selectedValue)
-        return options[0];
-    else
-        ;
+        return jsx(OutOfStock, { title: "out of stock color" }, void 0);
 };
 var SingleColorPicker = function (_a) {
-    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange;
-    var initialValue = getInitialValue$1(options, selectedValue);
-    var _b = useState(initialValue), selectedColor = _b[0], setSelectedColor = _b[1];
-    var onChangeHandler = function (selectedOption) {
-        setSelectedColor(selectedOption);
-        onChange(selectedOption);
-    };
-    return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: selectedColor && selectedColor.label }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions$1(options) }, void 0)] }), void 0));
+    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
+    return (jsxs(ColorRadioGroup$1, __assign({ 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({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options) }), void 0)] }), void 0));
 };
 var renderOptions = function (selectedColor, options) {
@@ -6623,38 +6763,44 @@ var MultiColorPicker = function (_a) {
     return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
 };
-var Image$3 = newStyled.img(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
+var Image$1 = newStyled.img(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
     var selected = _a.selected, theme = _a.theme;
     return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
 });
 var ImageSmallPreview = function (_a) {
     var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className;
     var theme = useTheme();
-    return jsx$1(Image$3, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
+    return jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
 };
-var templateObject_1$P;
+var templateObject_1$O;
-var Container$w = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"])));
-var Button$4 = newStyled.button(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
+var Container$w = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  overflow: auto;\n  align-items: flex-start;\n"], ["\n  grid-row-gap: 20px;\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  overflow: auto;\n  align-items: flex-start;\n"])));
+var Button$5 = newStyled.button(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
-    return (jsx(Container$w, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
-            return (jsx(Button$4, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
+    return (jsx$1(Container$w, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
+            return (jsx$1(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
         }) }), void 0));
 };
-var templateObject_1$O, templateObject_2$w;
+var templateObject_1$N, templateObject_2$v;
-var Container$v = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"], ["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"])));
-var Image$2 = newStyled.img(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
-var TopTagContainer$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
-var BottomTagContainer$1 = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
+var Img = newStyled.img(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
+var Image = function (_a) {
+    var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
+    return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
+};
+var templateObject_1$M;
+var Container$v = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  position: relative;\n  height: 45rem;\n"], ["\n  position: relative;\n  height: 45rem;\n"])));
+var TopTagContainer$1 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
+var BottomTagContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ImageProductWithTags$1 = function (_a) {
     var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
-    return (jsxs$1(Container$v, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$2, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
+    return (jsxs$1(Container$v, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
 };
-var templateObject_1$N, templateObject_2$v, templateObject_3$k, templateObject_4$d;
+var templateObject_1$L, templateObject_2$u, templateObject_3$j;
-var Container$u = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"])));
+var Container$u = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: auto auto;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: auto auto;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"])));
 var ProductGallery = function (_a) {
     var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
@@ -6666,7 +6812,7 @@ var ProductGallery = function (_a) {
                     setSelectedImage(value);
                 } }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
 };
-var templateObject_1$M;
+var templateObject_1$K;
 /* base styles & size variants */
 var StarStyles = {
@@ -6704,8 +6850,8 @@ var StarStyles = {
         });
     },
 };
-var Container$t = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var templateObject_1$L;
+var Container$t = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var templateObject_1$J;
 var StarContainer = newStyled.div(function (_a) {
     var size = _a.size;
@@ -6760,8 +6906,8 @@ var LabelStyles = {
         });
     },
 };
-var Container$s = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var templateObject_1$K;
+var Container$s = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var templateObject_1$I;
 var CustomLabel = newStyled.div(function (_a) {
     var theme = _a.theme, size = _a.size;
@@ -6777,8 +6923,8 @@ var Rating = function (_a) {
     return (jsxs$1(Container$s, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxs$1(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
 };
-var Container$r = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
-var P$1 = newStyled.p(templateObject_2$u || (templateObject_2$u = __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 Container$r = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
+var P$1 = newStyled.p(templateObject_2$t || (templateObject_2$t = __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 = function (theme) { return ({
     border: 'none',
     background: 'transparent',
@@ -6793,7 +6939,7 @@ var FitPredictor = function (_a) {
     var theme = useTheme();
     return (jsxs(Container$r, __assign({ theme: theme }, { children: [jsx(Container$r, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
 };
-var templateObject_1$J, templateObject_2$u;
+var templateObject_1$H, templateObject_2$t;
 var H2$1 = newStyled.h2(function (_a) {
     var color = _a.color;
@@ -6807,7 +6953,7 @@ var H2$1 = newStyled.h2(function (_a) {
         margin: '0.938rem 4.188rem',
     });
 });
-var Bar = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+var Bar = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -6846,7 +6992,7 @@ var ProgressBar = function (_a) {
     var theme = useTheme();
     return (jsxs$1(Container$q, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
 };
-var templateObject_1$I;
+var templateObject_1$G;
 var getStylesBySize$4 = function (size) {
     switch (size) {
@@ -6867,7 +7013,7 @@ var getStylesBySize$4 = function (size) {
             };
     }
 };
-var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+var Container$p = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -6897,7 +7043,7 @@ var IconButton = function (_a) {
     var theme = useTheme();
     return (jsx$1(Container$p, __assign({ 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$H;
+var templateObject_1$F;
 var TooltipArrow = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
@@ -6977,7 +7123,7 @@ var getTooltipAlignItems = function (position, align) {
     }
 };
-var Wrapper$5 = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"])), function (_a) {
+var Wrapper$5 = newStyled.div(templateObject_1$E || (templateObject_1$E = __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);
 });
@@ -7001,11 +7147,11 @@ var TooltipContainer = newStyled.div(function (_a) {
 var getTooltipMargin = function (actual, expected, margin) {
     return actual === expected ? margin : '0';
 };
-var ContentWrapper = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
+var ContentWrapper = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 });
-var TooltipArrowContainer = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"], ["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"])), function (_a) {
+var TooltipArrowContainer = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"], ["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"])), function (_a) {
     var position = _a.position;
     return getArrowRotation(position);
 }, function (_a) {
@@ -7015,17 +7161,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$j || (templateObject_
     var position = _a.position;
     return getArrowContainerMargin(position);
 });
-var TooltipText = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
+var TooltipText = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var TopSection = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"])));
-var Title$3 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
+var TopSection = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"])));
+var Title$3 = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var IconContainer$4 = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __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$G, templateObject_2$t, templateObject_3$j, templateObject_4$c, templateObject_5$6, templateObject_6$5, templateObject_7$3;
+var IconContainer$4 = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
+var templateObject_1$E, templateObject_2$s, templateObject_3$i, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$2;
 var Tooltip = function (_a) {
     var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
@@ -7176,9 +7322,9 @@ var ContainerStyles = {
     },
 };
-var Wrapper$4 = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper$4 = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var Container$o = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
-var Input$2 = newStyled.input(templateObject_2$s || (templateObject_2$s = __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 Input$2 = newStyled.input(templateObject_2$r || (templateObject_2$r = __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');
 });
@@ -7195,7 +7341,7 @@ var RadioInput = function (_a) {
     };
     return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$o, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(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 }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
 };
-var templateObject_1$F, templateObject_2$s;
+var templateObject_1$D, templateObject_2$r;
 var RadioGroupInput = function (_a) {
     var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
@@ -7209,9 +7355,9 @@ var RadioGroupInput = function (_a) {
         }) }), void 0));
 };
-var Wrapper$3 = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
-var Container$n = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var Text$3 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"])), function (_a) {
+var Wrapper$3 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Container$n = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Text$2 = newStyled.h4(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
@@ -7224,32 +7370,32 @@ var Text$3 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemp
 var Minimalistic = function (_a) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
     var theme = useTheme();
-    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$n, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$3, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$n, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$3, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$3, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
+    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$n, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$n, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$E, templateObject_2$r, templateObject_3$i;
+var templateObject_1$C, templateObject_2$q, templateObject_3$h;
-var Container$m = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
-var Title$2 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __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$h || (templateObject_3$h = __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$b || (templateObject_4$b = __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 Container$m = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Title$2 = newStyled.h1(templateObject_2$p || (templateObject_2$p = __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$g || (templateObject_3$g = __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$9 || (templateObject_4$9 = __makeTemplateObject(["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"])));
 var Simple = function (_a) {
     var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
     var theme = useTheme();
     return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$m, { children: [jsx$1(Title$2, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$D, templateObject_2$q, templateObject_3$h, templateObject_4$b;
+var templateObject_1$B, templateObject_2$p, templateObject_3$g, templateObject_4$9;
 var Bundle = {
     Minimalistic: Minimalistic,
     Simple: Simple,
 };
-var Container$l = newStyled.div(templateObject_1$C || (templateObject_1$C = __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$l = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"])));
 var Tag = function (_a) {
     var text = _a.text, className = _a.className;
     return jsx$1(Container$l, __assign({ className: className }, { children: text }), void 0);
 };
-var templateObject_1$C;
+var templateObject_1$A;
 var getStylesBySize$3 = function (size) {
     switch (size) {
@@ -7350,11 +7496,11 @@ var Timer = function (_a) {
     return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
 };
-var Label = newStyled.span(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"], ["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"])), function (_a) {
+var Label = newStyled.span(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"], ["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var MandatoryIcon = newStyled.span(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 0.25rem;\n"], ["\n  color: ", ";\n  margin-left: 0.25rem;\n"])), function (_a) {
+var MandatoryIcon = newStyled.span(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 0.25rem;\n"], ["\n  color: ", ";\n  margin-left: 0.25rem;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
@@ -7363,7 +7509,7 @@ var InputLabel = function (_a) {
     var theme = useTheme();
     return (jsxs$1(Label, __assign({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
 };
-var templateObject_1$B, templateObject_2$p;
+var templateObject_1$z, templateObject_2$o;
 var isEmpty = function (value) {
     return value.length === 0;
@@ -7373,20 +7519,20 @@ var sliceString = function (str, maxLength) {
     return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
 };
-var ErrorText = newStyled.h3(templateObject_1$A || (templateObject_1$A = __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$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"])));
+var ErrorText = newStyled.h3(templateObject_1$y || (templateObject_1$y = __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$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"])));
 var Error$1 = function (_a) {
     var error = _a.error;
     var theme = useTheme();
     return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
 };
-var templateObject_1$A, templateObject_2$o;
+var templateObject_1$y, templateObject_2$n;
-var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  input {\n    border-color: ", ";\n  }\n"], ["\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var Container$k = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  input {\n    border-color: ", ";\n  }\n"], ["\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var StyledInput = newStyled.input(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var padding = _a.padding;
     return padding;
 }, function (_a) {
@@ -7429,34 +7575,49 @@ var StyledInput = newStyled.input(templateObject_2$n || (templateObject_2$n = __
     var disabledColor = _a.disabledColor;
     return disabledColor;
 });
-var InputWrapper = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  height: 100%;\n"])));
-var templateObject_1$z, templateObject_2$n, templateObject_3$g;
+var InputWrapper = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  height: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return (size === 'small' ? '36px' : '44px');
+});
+var templateObject_1$x, templateObject_2$m, templateObject_3$f;
 var BaseInput = function (_a) {
-    var onChange = _a.onChange, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, rest = __rest(_a, ["onChange", "defaultValue", "label", "children", "required", "onValidation"]);
+    var _b;
+    var value = _a.value, onChange = _a.onChange, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, rest = __rest(_a, ["value", "onChange", "defaultValue", "label", "children", "required", "onValidation", "size"]);
     var theme = useTheme();
-    var _c = useState(defaultValue), value = _c[0], setValue = _c[1];
-    var _d = useState(InputValidationType.Empty), status = _d[0], setStatus = _d[1];
+    var _d = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : ''), internalValue = _d[0], setInternalValue = _d[1];
+    var _e = useState(InputValidationType.Empty), status = _e[0], setStatus = _e[1];
     var handleChange = function (_a) {
-        var value = _a.target.value;
-        setValue(value);
-        onChange && onChange(value);
+        var target = _a.target;
+        if (onChange) {
+            onChange(target.value);
+        }
+        if (value == null) {
+            setInternalValue(target.value);
+        }
     };
     var validate = function (_a) {
         var value = _a.target.value;
-        var newStatus = handleValidations(value);
-        setStatus(newStatus);
-        onValidation && onValidation(newStatus);
-    };
-    var handleValidations = function (value) {
+        var status = InputValidationType.Valid;
         if (required && isEmpty(value)) {
-            return InputValidationType.Error;
+            status = InputValidationType.Error;
         }
         if (!required && isEmpty(value)) {
-            return InputValidationType.Empty;
+            status = InputValidationType.Empty;
         }
-        return InputValidationType.Valid;
+        setStatus(status);
     };
+    useEffect(function () {
+        if (value == null) {
+            return;
+        }
+        setInternalValue(value);
+    }, [value]);
+    useEffect(function () {
+        if (onValidation != null) {
+            onValidation(status);
+        }
+    }, [onValidation, status]);
     var styling = {
         border: theme.component.input.border,
         borderRadius: theme.component.input.borderRadius,
@@ -7475,39 +7636,57 @@ var BaseInput = function (_a) {
             ? theme.colors.shades['700'].color
             : status === InputValidationType.Error
                 ? theme.colors.semantic.urgent.color
-                : '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsx$1(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
+                : '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper", size: size }, { children: [jsx$1(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: internalValue }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
+};
+var Button$4 = function (_a) {
+    var variant = _a.variant, props = __rest(_a, ["variant"]);
+    if (variant === 'primary') {
+        return jsx$1(ButtonPrimary, __assign({}, props), void 0);
+    }
+    if (variant === 'secondary') {
+        return jsx$1(ButtonSecondary, __assign({}, props), void 0);
+    }
+    if (variant === 'secondary-outline') {
+        return jsx$1(ButtonSecondary, __assign({}, props), void 0);
+    }
+    throw new Error("Invalid button variant ".concat(variant));
 };
-var Container$j = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  input {\n    border-radius: ", ";\n  }\n"], ["\n  input {\n    border-radius: ", ";\n  }\n"])), function (_a) {
+var Container$j = newStyled.div(templateObject_1$w || (templateObject_1$w = __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  }\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  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.input.borderRadius;
 });
-var ButtonContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.button.borderRadius;
 });
 var Custom = function (_a) {
-    var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
+    var onClick = _a.onClick, text = _a.text, variant = _a.variant, rest = __rest(_a, ["onClick", "text", "variant"]);
     var theme = useTheme();
-    var props = {
+    var props = useMemo(function () { return ({
+        variant: variant,
         onClick: onClick,
         text: text,
         disabled: rest.disabled,
-    };
-    return (jsx$1(Container$j, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
+    }); }, [variant, onClick, text, rest.disabled]);
+    return (jsx$1(Container$j, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: jsx$1(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
 };
-var templateObject_1$y, templateObject_2$m;
+var templateObject_1$w, templateObject_2$l;
-var SuccessContainer = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  height: 3rem;\n  display: flex;\n"], ["\n  height: 3rem;\n  display: flex;\n"])));
-var SuccessMessage = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
-var SuccessText = newStyled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"])));
+var SuccessContainer = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  height: ", ";\n  display: flex;\n"], ["\n  height: ", ";\n  display: flex;\n"])), function (_a) {
+    var size = _a.size;
+    return (size === 'small' ? '36px' : '');
+});
+var SuccessMessage = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
+var SuccessText = newStyled.span(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"])));
 var Success = function (_a) {
-    var children = _a.children, successText = _a.successText;
-    return (jsxs$1(SuccessContainer, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
+    var children = _a.children, successText = _a.successText, size = _a.size;
+    return (jsxs$1(SuccessContainer, __assign({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
 };
-var templateObject_1$x, templateObject_2$l, templateObject_3$f;
+var templateObject_1$v, templateObject_2$k, templateObject_3$e;
-var ButtonContainer = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer = newStyled.div(templateObject_1$u || (templateObject_1$u = __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 === InputValidationType.Empty &&
         type === 'primary' &&
@@ -7516,15 +7695,18 @@ var ButtonContainer = newStyled.div(templateObject_1$w || (templateObject_1$w =
 var BasePlusButton = function (_a) {
     var onClick = _a.onClick, onClickEdit = _a.onClickEdit, text = _a.text, success = _a.success, editText = _a.editText, successText = _a.successText, rest = __rest(_a, ["onClick", "onClickEdit", "text", "success", "editText", "successText"]);
     var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
+    var _c = useState(''), inputValue = _c[0], setInputValue = _c[1];
     var theme = useTheme();
-    var SuccessComponent = (jsx$1(Success, __assign({ successText: successText }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsx$1(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
-    var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
-    return success ? SuccessComponent : Input;
+    var onChangeInput = useCallback(function (value) { return setInputValue(value); }, []);
+    if (success) {
+        return (jsx$1(Success, __assign({ successText: successText, size: rest.size }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsx$1(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
+    }
+    return (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
 };
-var templateObject_1$w;
+var templateObject_1$u;
-var Container$i = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
-var IconContainer$3 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
+var Container$i = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
+var IconContainer$3 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
 var BasePlusIcon = function (_a) {
     var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
     var theme = useTheme();
@@ -7535,7 +7717,7 @@ var BasePlusIcon = function (_a) {
                         ? theme.colors.semantic.urgent.color
                         : '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
 };
-var templateObject_1$v, templateObject_2$k;
+var templateObject_1$t, templateObject_2$j;
 var Input$1 = {
     Simple: BaseInput,
@@ -7544,7 +7726,7 @@ var Input$1 = {
     SimplePlusIcon: BasePlusIcon,
 };
-var Container$h = 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$h = newStyled.div(templateObject_1$s || (templateObject_1$s = __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) {
@@ -7562,9 +7744,9 @@ var PaymentMethod = function (_a) {
     var theme = useTheme();
     return (jsx$1(Container$h, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
 };
-var templateObject_1$u;
+var templateObject_1$s;
-var Text$2 = newStyled.h3(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
+var Text$1 = newStyled.h3(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -7574,29 +7756,29 @@ var Text$2 = newStyled.h3(templateObject_1$t || (templateObject_1$t = __makeTemp
 var OfferBanner = function (_a) {
     var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
     var theme = useTheme();
-    return (jsx$1(Text$2, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
+    return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
 };
-var templateObject_1$t;
+var templateObject_1$r;
-var Wrapper$2 = newStyled.div(templateObject_1$s || (templateObject_1$s = __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$j || (templateObject_2$j = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.color; });
-var Currency = newStyled.span(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
-var Container$g = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
-var Discount = newStyled.h3(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"])));
+var Wrapper$2 = newStyled.div(templateObject_1$q || (templateObject_1$q = __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$i || (templateObject_2$i = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.color; });
+var Currency = newStyled.span(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
+var Container$g = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
+var Discount = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"])));
 var Total = function (_a) {
     var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
     var theme = useTheme();
     return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$g, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
 };
-var templateObject_1$s, templateObject_2$j, templateObject_3$e, templateObject_4$a, templateObject_5$5;
+var templateObject_1$q, templateObject_2$i, templateObject_3$d, templateObject_4$8, templateObject_5$4;
-var Wrapper$1 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Wrapper$1 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var ItemContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
-var Item$1 = newStyled.h4(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
-var CouponItem = newStyled(Item$1)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var ItemContainer = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
+var Item$1 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
+var CouponItem = newStyled(Item$1)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
@@ -7608,22 +7790,22 @@ var Subtotal = function (_a) {
                     return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
                 })] }), void 0));
 };
-var templateObject_1$r, templateObject_2$i, templateObject_3$d, templateObject_4$9;
+var templateObject_1$p, templateObject_2$h, templateObject_3$c, templateObject_4$7;
 var Totals = {
     Total: Total,
     Subtotal: Subtotal,
 };
-var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
-var IconContainer$2 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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$1 = 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$8 || (templateObject_4$8 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (props) { return props.color; });
+var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
+var IconContainer$2 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"], ["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"])));
+var Text = newStyled.p(templateObject_3$b || (templateObject_3$b = __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$6 || (templateObject_4$6 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (props) { return props.color; });
 var Note = function (_a) {
     var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
-    return (jsxs$1(Container$f, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$2, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$1, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
+    return (jsxs$1(Container$f, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$2, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
 };
-var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$8;
+var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$6;
 /* eslint-disable no-param-reassign */
 var index$2 = function (breakpoints) {
@@ -7713,14 +7895,14 @@ var mediaQueries = function (_a) {
     ], { literal: true });
 };
-var Title$1 = newStyled.h1(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
-var Line = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
-var Row$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"])), function (props) {
+var Title$1 = newStyled.h1(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
+var Line = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
+var Row$1 = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"])), function (props) {
     return mediaQueries(props)({
         flexDirection: ['column', 'row'],
     });
 });
-var Col$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"])), function (props) {
+var Col$1 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"])), function (props) {
     return mediaQueries(props)({
         margin: ['0', '0 1.25rem'],
         marginBottom: ['1.875rem', '0'],
@@ -7729,13 +7911,13 @@ var Col$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemp
         width: ['100%', 'inherit'],
     });
 });
-var IconContainer$1 = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"], ["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"])), function (props) {
+var IconContainer$1 = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"], ["\n  width: 1.375rem;\n  height: 1.375rem;\n  margin-right: 0.438rem;\n  ", "\n"])), function (props) {
     return mediaQueries(props)({
         marginBottom: ['1.875rem', '0'],
         width: ['auto', '1.375rem'],
     });
 });
-var SectionTitle = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"])), function (props) {
+var SectionTitle = newStyled.h1(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n"])), function (props) {
     return mediaQueries(props)({
         display: ['block', 'flex'],
     });
@@ -7743,53 +7925,46 @@ var SectionTitle = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __ma
     var theme = _a.theme;
     return theme.colors.shades['700'].color;
 });
-var SectionDetails = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  margin: 0;\n  margin-top: 0.625rem;\n"], ["\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  margin: 0;\n  margin-top: 0.625rem;\n"])), function (props) { return props.color; });
-var KeepMeUpdated = newStyled.h1(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), function (props) { return props.borderColor; });
+var SectionDetails = newStyled.p(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  margin: 0;\n  margin-top: 0.625rem;\n"], ["\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  margin: 0;\n  margin-top: 0.625rem;\n"])), function (props) { return props.color; });
+var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), function (props) { return props.borderColor; });
 var DeliveryDetails = function (_a) {
     var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
     var theme = useTheme();
     return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$p, templateObject_2$g, templateObject_3$b, templateObject_4$7, templateObject_5$4, templateObject_6$4, templateObject_7$2, templateObject_8$1;
+var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
-var Container$e = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
-var H1$2 = newStyled.h1(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"])), function (props) { return props.color; });
+var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
+var H1$2 = newStyled.h1(templateObject_2$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;
     var theme = useTheme();
     return (jsxs$1(Container$e, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
 };
-var templateObject_1$o, templateObject_2$f;
+var templateObject_1$m, templateObject_2$e;
-var Container$d = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"])));
-var H1$1 = newStyled.h1(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
+var Container$d = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"])));
+var H1$1 = newStyled.h1(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
 var OrderBar = function (_a) {
     var message = _a.message;
     var theme = useTheme();
     return (jsxs$1(Container$d, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
 };
-var templateObject_1$n, templateObject_2$e;
+var templateObject_1$l, templateObject_2$d;
-var TableElement = newStyled.table(templateObject_1$m || (templateObject_1$m = __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$d || (templateObject_2$d = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
-var TableHead = newStyled.th(templateObject_3$a || (templateObject_3$a = __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; });
+var TableElement = newStyled.table(templateObject_1$k || (templateObject_1$k = __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$c || (templateObject_2$c = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
+var TableHead = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __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$4 || (templateObject_4$4 = __makeTemplateObject(["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"], ["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; });
 var SizeTable = function (_a) {
     var headers = _a.headers, data = _a.data;
     var theme = useTheme();
     return (jsxs$1(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
 };
-var templateObject_1$m, templateObject_2$d, templateObject_3$a, templateObject_4$6;
+var templateObject_1$k, templateObject_2$c, templateObject_3$9, templateObject_4$4;
-var Img = newStyled.img(templateObject_1$l || (templateObject_1$l = __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$1 = function (_a) {
-    var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
-    return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
-};
-var templateObject_1$l;
-var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
-var DescriptionContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), function (_a) {
+var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
+var DescriptionContainer = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
         marginLeft: ['0.938rem', '1.875rem'],
@@ -7815,7 +7990,7 @@ var Subtitle = newStyled.h3(function (_a) {
         margin: '0.063rem 0',
     });
 });
-var PriceContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"], ["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"])), function (_a) {
+var PriceContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"], ["\n  display: flex;\n  ", ";\n  height: 100%;\n  align-items: end;\n  margin-top: 0.219rem;\n"])), function (_a) {
     var withTag = _a.withTag, theme = _a.theme;
     return withTag
         ? mediaQueries({ theme: theme })({
@@ -7827,9 +8002,9 @@ var PriceContainer = newStyled.div(templateObject_3$9 || (templateObject_3$9 = _
 var SimpleOrderItem = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
     var theme = useTheme();
-    return (jsxs$1(Container$c, { children: [jsx$1(Image$1, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$c, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
 };
-var templateObject_1$k, templateObject_2$c, templateObject_3$9;
+var templateObject_1$j, templateObject_2$b, templateObject_3$8;
 function formatDate(date) {
     var day = date.getDate();
@@ -7838,47 +8013,47 @@ function formatDate(date) {
     return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
 }
-var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __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$b || (templateObject_2$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), function (_a) {
+var Container$b = newStyled.div(templateObject_1$i || (templateObject_1$i = __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$a || (templateObject_2$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
         fontSize: ['14px', '16px'],
         lineHeight: ['22px', '24px'],
     });
 });
-var Content = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"])), function (_a) {
+var Content = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
         flexDirection: ['column', 'row'],
     });
 });
-var ReviewContainer = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"])), function (_a) {
+var ReviewContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
         margin: ['0 0 8px 0', '0 50px 0 0'],
     });
 });
-var H2 = newStyled.h2(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"], ["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"])), function (_a) {
+var H2 = newStyled.h2(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"], ["\n  font-weight: 600;\n  ", ";\n  margin: 0;\n"])), function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
         fontSize: ['16px', '18px'],
         lineHeight: ['24px', '28px'],
     });
 });
-var H3$1 = newStyled.h3(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"], ["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"])), function (_a) {
+var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"], ["\n  font-size: 16px;\n  line-height: 24px;\n  ", ";\n  margin: 10px 0 8px;\n"])), function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
         fontSize: ['14px', '16px'],
         lineHeight: ['22px', '24px'],
     });
 });
-var P = newStyled.p(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"], ["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"])));
+var P = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"], ["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"])));
 var Review = function (_a) {
     var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
     var theme = useTheme();
-    return (jsxs$1(Container$b, { children: [jsxs$1(Heading, __assign({ theme: theme }, { children: [jsx$1(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign({ theme: theme }, { children: [jsx$1(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsx$1(P, { children: description }, void 0)] }), void 0), jsx$1(Image$1, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$b, { children: [jsxs$1(Heading, __assign({ theme: theme }, { children: [jsx$1(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign({ theme: theme }, { children: [jsx$1(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsx$1(P, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
 };
-var templateObject_1$j, templateObject_2$b, templateObject_3$8, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$1;
+var templateObject_1$i, templateObject_2$a, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7;
 var Button$3 = newStyled.button(function () { return ({
     background: 'transparent',
@@ -12121,14 +12296,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
   return Slider;
 }(React.Component);
-var StyledSlider = newStyled(Slider)(templateObject_1$i || (templateObject_1$i = __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$h || (templateObject_1$h = __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$i;
+var templateObject_1$h;
 var getStylesBySize$1 = function (size) {
     // rem units
@@ -12187,13 +12362,13 @@ var SliderNavigation = function (_a) {
         } }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
 };
-var List = newStyled.ul(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
-var Item = newStyled.li(templateObject_2$a || (templateObject_2$a = __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$7 || (templateObject_3$7 = __makeTemplateObject(["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"], ["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"])));
-var ArrowContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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$2 || (templateObject_5$2 = __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$2 || (templateObject_6$2 = __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$h, templateObject_2$a, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2;
+var List = newStyled.ul(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
+var Item = newStyled.li(templateObject_2$9 || (templateObject_2$9 = __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$6 || (templateObject_3$6 = __makeTemplateObject(["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"], ["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"])));
+var ArrowContainer = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"], ["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"])));
+var StyledDropdown = newStyled.ul(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"], ["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
+var DropdownItem = newStyled.li(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"], ["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
+var templateObject_1$g, templateObject_2$9, templateObject_3$6, templateObject_4$2, templateObject_5$1, templateObject_6$1;
 var DropdownListIcons = function (_a) {
     var items = _a.items;
@@ -12206,7 +12381,7 @@ var Dropdown = function (_a) {
     return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign({ 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 StyledButton = newStyled(BaseButton)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
+var StyledButton = newStyled(BaseButton)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
 var AmazonButton = function (_a) {
     var onClick = _a.onClick;
     return (jsx$1(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
@@ -12215,23 +12390,23 @@ var PaypalButton = function (_a) {
     var onClick = _a.onClick;
     return (jsx$1(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
 };
-var templateObject_1$g;
+var templateObject_1$f;
-var Wrapper = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
-var Col = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var Row = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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) {
+var Wrapper = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
+var Col = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Row = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"])), function (props) {
     return props.rightToLeft &&
         "\n    flex-direction: row-reverse;\n    justify-content: space-between;\n  ";
 });
-var H5 = newStyled.h5(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
-var H3 = newStyled.h3(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
-var FreeShipping = newStyled.span(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n"], ["\n  font-weight: 600;\n  color: ", ";\n"])), function (props) { return props.color; });
+var H5 = newStyled.h5(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
+var H3 = newStyled.h3(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
+var FreeShipping = newStyled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n"], ["\n  font-weight: 600;\n  color: ", ";\n"])), function (props) { return props.color; });
 var CrossSellCheckbox = function (_a) {
     var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
     var theme = useTheme();
-    return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$1, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$f, templateObject_2$9, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1;
+var templateObject_1$e, templateObject_2$8, templateObject_3$5, templateObject_4$1, templateObject_5, templateObject_6;
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -12246,8 +12421,8 @@ var ImageContainer = newStyled.div(function (_a) {
         height: height,
     });
 });
-var Container$a = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"])));
-var H1 = newStyled.h1(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
+var Container$a = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"])));
+var H1 = newStyled.h1(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
 var getStylesBySize = function (size) {
     switch (size) {
         case ComponentSize.Medium:
@@ -12272,11 +12447,11 @@ var ProductItemMobile = function (_a) {
     var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
     var theme = useTheme();
     var styles = getStylesBySize(size);
-    return (jsxs(Container$a, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$1, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image$1, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
+    return (jsxs(Container$a, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
 };
-var templateObject_1$e, templateObject_2$8;
+var templateObject_1$d, templateObject_2$7;
-var Container$9 = newStyled.div(templateObject_1$d || (templateObject_1$d = __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$9 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"])));
 function withProductGrid(ProductItemComponent, data) {
     function WithProductGrid(props) {
         return (jsx$1(Container$9, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
@@ -12286,18 +12461,18 @@ function withProductGrid(ProductItemComponent, data) {
     WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
     return WithProductGrid;
 }
-var templateObject_1$d;
+var templateObject_1$c;
 var Collection = {
     ProductItemMobile: ProductItemMobile,
     withProductGrid: withProductGrid,
 };
-var Backdrop = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\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: 0;\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$b || (templateObject_1$b = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\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: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"])), function (_a) {
     var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
     return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
 });
-var Sidebar = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"], ["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"])), function (_a) {
+var Sidebar = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"], ["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -12338,16 +12513,16 @@ var Drawer = function (_a) {
     }, [isOpen, onClose, onOpen]);
     return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
 };
-var templateObject_1$c, templateObject_2$7;
+var templateObject_1$b, templateObject_2$6;
-var Container$8 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
     var size = _a.size;
     return (size ? size : '100%');
 }, function (_a) {
     var size = _a.size;
     return (size ? size : '100%');
 });
-var Animation = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"], ["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"])), function (_a) {
+var Animation = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"], ["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"])), function (_a) {
     var animationDuration = _a.animationDuration;
     return animationDuration;
 });
@@ -12355,11 +12530,11 @@ var Spinner = function (_a) {
     var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
     return (jsx$1(Container$8, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
 };
-var templateObject_1$b, templateObject_2$6;
+var templateObject_1$a, templateObject_2$5;
-var UL = newStyled.ul(templateObject_1$a || (templateObject_1$a = __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$5 || (templateObject_2$5 = __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$5 || (templateObject_3$5 = __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 UL = newStyled.ul(templateObject_1$9 || (templateObject_1$9 = __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$4 || (templateObject_2$4 = __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$4 || (templateObject_3$4 = __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) {
     var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
     var theme = useTheme();
@@ -12367,7 +12542,7 @@ var Tags = function (_a) {
             return (jsxs$1(LI, __assign({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
         }) }), void 0));
 };
-var templateObject_1$a, templateObject_2$5, templateObject_3$5;
+var templateObject_1$9, templateObject_2$4, templateObject_3$4;
 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;
@@ -12400,15 +12575,15 @@ function FilteringDropdown(_a) {
                 }) }, void 0)] }), void 0));
 }
-var Container$7 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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$4 || (templateObject_2$4 = __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$4 || (templateObject_3$4 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), function (_a) {
+var Container$7 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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$3 || (templateObject_2$3 = __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$3 || (templateObject_3$3 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
         margin: ['0 0.75rem', '0 1.25rem'],
     });
 });
-var PageNumber = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"])), function (_a) {
+var PageNumber = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"])), function (_a) {
     var bold = _a.bold;
     return (bold ? '700' : '500');
 }, function (_a) {
@@ -12425,7 +12600,7 @@ var PageNumber = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __ma
         width: ['1.25rem', '1.875rem'],
     });
 });
-var templateObject_1$9, templateObject_2$4, templateObject_3$4, templateObject_4$2;
+var templateObject_1$8, templateObject_2$3, templateObject_3$3, templateObject_4;
 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;
@@ -12441,101 +12616,6 @@ var Pagination = function (_a) {
     return (jsxs$1(Container$7, __assign({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
 };
-// 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$8 || (templateObject_1$8 = __makeTemplateObject([""], [""]))),
-    hero2: newStyled.h2(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject([""], [""]))),
-    hero3: newStyled.h3(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject([""], [""]))),
-    display1: newStyled.h1(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject([""], [""]))),
-    display2: newStyled.h2(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""]))),
-    heading1: newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""]))),
-    heading2: newStyled.h2(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""]))),
-    heading3: newStyled.h3(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""]))),
-    heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
-    heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
-    heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
-    body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
-    link: newStyled.a(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "], ["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
-    button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: inline-block;\n  "], ["\n    display: inline-block;\n  "]))),
-    pricing: newStyled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "], ["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
-    label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
-    tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: inline-block;\n    text-transform: ", ";\n  "], ["\n    display: inline-block;\n    text-transform: ", ";\n  "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
-};
-var Text = function (_a) {
-    var variant = _a.variant, children = _a.children, size = _a.size, weight = _a.weight, allProps = __rest(_a, ["variant", "children", "size", "weight"]);
-    var theme = useTheme();
-    var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
-    var props = useMemo(function () {
-        var _a;
-        return (__assign(__assign({}, ((_a = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _a !== void 0 ? _a : {})), allProps));
-    }, [variant, allProps]);
-    var commonCSS = useMemo(function () {
-        var _a, _b;
-        // These are the common style inside a `variant`.
-        // E.g.: Common styles for all "button".
-        var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
-            fontSize: 14,
-            lineHeight: 1,
-        };
-        // This allow us to define different styles for different `sizes` inside a `variant`
-        // E.g.: "button-small", "button-regular"
-        //
-        // We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
-        // E.g.: "hero1", "display1"
-        var variantName = [variant, size].filter(Boolean).join('-');
-        // These are styles specific to `variation-size`.
-        var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
-        var style = __assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
-        if (weight) {
-            style.fontWeight = theme.typography.config.weight[weight];
-        }
-        if (props.disabled) {
-            style.opacity = 0.5;
-            style.cursor = 'not-allowed';
-            style.color = theme.colors.text.disabled;
-        }
-        return style;
-    }, [theme, variant, weight, size, props.disabled]);
-    // This is to make TS happy, because `href` doesn't exists on other `variants`
-    var propsHref = props.href;
-    var href = useMemo(function () {
-        // We could use `pointer-events: none` but it prevents us from using
-        // `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
-        if (propsHref != null && props.disabled) {
-            return 'javascript:void(0)';
-        }
-        return propsHref;
-    }, [props.disabled, propsHref]);
-    return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
-};
-var DEFAULTS = {
-    hero1: {
-        weight: 'heavy',
-    },
-    hero2: {
-        weight: 'heavy',
-    },
-    hero3: {
-        weight: 'heavy',
-    },
-    display1: {
-        weight: 'bold',
-    },
-    display2: {
-        weight: 'bold',
-    },
-    body: {
-        size: 'regular',
-        weight: 'regular',
-    },
-    button: {
-        size: 'regular',
-        weight: 'bold',
-    },
-};
-var templateObject_1$8, templateObject_2$3, templateObject_3$3, templateObject_4$1, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
 var Container$6 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"])), function (props) {
     return mediaQueries(props)({
         borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
@@ -12555,7 +12635,7 @@ var Description = newStyled.div({
 var ProductItem = function (_a) {
     var src = _a.src, title = _a.title, price = _a.price;
     var theme = useTheme();
-    return (jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(Image$1, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
+    return (jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$3, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
 };
 var templateObject_1$7;
@@ -12566,7 +12646,7 @@ var Container$5 = newStyled.div({
 });
 var Footer = function (_a) {
     var text = _a.text, onClick = _a.onClick;
-    return (jsx$1(Container$5, { children: jsx$1(Text, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
+    return (jsx$1(Container$5, { children: jsx$1(Text$3, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
 };
 var Ul = newStyled.ul({
@@ -12600,7 +12680,7 @@ var Header = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTem
 var ResultsPanel = function (_a) {
     var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
     var theme = useTheme();
-    return (jsxs$1(Container$4, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
+    return (jsxs$1(Container$4, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text$3, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
 };
 var templateObject_1$6, templateObject_2$2, templateObject_3$2;
@@ -12754,15 +12834,14 @@ var SearchBar = function (_a) {
                 }, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
 };
-var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: relative;\n  max-height: 31.875rem;\n  max-width: 23.438rem;\n"], ["\n  position: relative;\n  max-height: 31.875rem;\n  max-width: 23.438rem;\n"])));
-var Image = newStyled.img(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
-var TopTagContainer = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
-var BottomTagContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
+var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: relative;\n  max-height: 31.875rem;\n"], ["\n  position: relative;\n  max-height: 31.875rem;\n"])));
+var TopTagContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
+var BottomTagContainer = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ImageProductWithTags = function (_a) {
     var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
-    return (jsxs$1(Container$2, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
+    return (jsxs$1(Container$2, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
 };
-var templateObject_1$4, templateObject_2$1, templateObject_3$1, templateObject_4;
+var templateObject_1$4, templateObject_2$1, templateObject_3$1;
 var Button = newStyled.button(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n"])));
 var ArrowButton = function (_a) {
@@ -12786,29 +12865,19 @@ var NavigationButton = newStyled(ArrowButton)(templateObject_1$1 || (templateObj
 var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  right: 0;\n"], ["\n  right: 0;\n"])));
 var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  left: 0;\n"], ["\n  left: 0;\n"])));
 var SlideNavigation = function (_a) {
-    var quantity = _a.quantity, initialIndex = _a.initialIndex, onNavigate = _a.onNavigate, dataTestId = _a.dataTestId;
+    var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, dataTestId = _a.dataTestId;
+    var theme = useTheme();
     var upperLimit = quantity - 1;
     var lowerLimit = 0;
-    var initialValue = initialIndex && lowerLimit <= initialIndex && initialIndex <= upperLimit
-        ? initialIndex
-        : lowerLimit;
-    var _b = useState(initialValue), currentIndex = _b[0], setCurrentIndex = _b[1];
-    var theme = useTheme();
-    var getNextIndex = function () { return currentIndex + 1; };
-    var getPreviousIndex = function () { return currentIndex - 1; };
-    return (jsxs$1(Fragment$1, { children: [currentIndex > lowerLimit && (jsx$1(LeftButton, { Icon: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
-                    var index = getPreviousIndex();
-                    setCurrentIndex(index);
-                    onNavigate(index);
-                } }, void 0)), currentIndex < upperLimit && (jsx$1(RightButton, { Icon: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
-                    var index = getNextIndex();
-                    setCurrentIndex(index);
-                    onNavigate(index);
-                } }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: currentIndex, containerDataTestId: dataTestId }, void 0)] }, void 0));
+    return (jsxs$1(Fragment$1, { children: [selectedIndex > lowerLimit && (jsx$1(LeftButton, { Icon: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
+                    onNavigate(selectedIndex - 1);
+                } }, void 0)), selectedIndex < upperLimit && (jsx$1(RightButton, { Icon: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
+                    onNavigate(selectedIndex + 1);
+                } }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: dataTestId }, void 0)] }, void 0));
 };
 var templateObject_1$1, templateObject_2, templateObject_3;
-var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  width: fit-content;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  width: fit-content;\n  position: relative;\n"])));
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
@@ -12816,9 +12885,38 @@ var ProductGalleryMobile = function (_a) {
     useEffect(function () {
         setSelectedImage(initialValue);
     }, [initialValue]);
-    return (jsxs$1(Container, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, initialIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
+    return (jsxs$1(Container, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
 };
 var templateObject_1;
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image$1 as Image, Input$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+var Portal = function (_a) {
+    var id = _a.id, className = _a.className, children = _a.children;
+    var _b = useState(false), mounted = _b[0], setMounted = _b[1];
+    var container = useRef(null);
+    useEffect(function () {
+        var element = document.getElementById(id);
+        if (element == null) {
+            element = document.createElement('div');
+            element.id = id;
+            document.body.appendChild(element);
+        }
+        if (element == null) {
+            throw new Error("Unable to find/create container (".concat(id, ")"));
+        }
+        element.dataset.testId = id;
+        setMounted(true);
+        container.current = element;
+    }, [id]);
+    useEffect(function () {
+        if (mounted) {
+            container.current.className = className !== null && className !== void 0 ? className : '';
+        }
+    }, [className, mounted]);
+    if (mounted === false) {
+        return null;
+    }
+    return createPortal(children, container.current, id);
+};
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text$3 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map