@trafilea/afrodita-components 4.3.1-beta.2 → 4.3.1-beta.6

package/build/index.esm.js

@@ -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 * as React from 'react';
+import React__default, { 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';
 
 /*! *****************************************************************************
@@ -454,8 +455,8 @@ var Icon = {
     SlideDots: SlideDots$1,
 };
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -469,7 +470,7 @@ function _extends$1() {
     return target;
   };
 
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
 function memoize(fn) {
@@ -2563,7 +2564,7 @@ var getTheme = function getTheme(outerTheme, theme) {
     throw new Error('[ThemeProvider] Please make your theme prop a plain object');
   }
 
-  return _extends$1({}, outerTheme, theme);
+  return _extends$2({}, outerTheme, theme);
 };
 
 var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
@@ -3242,7 +3243,7 @@ var createStyled = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$1({}, options, nextOptions, {
+      return createStyled(nextTag, _extends$2({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -3449,7 +3450,7 @@ var AssetsProvider = function (_a) {
 };
 var useThemeAssets = function () { return useContext(AssetsContext); };
 
-var Container$E = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
+var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
     var flex = _a.flex;
     return flex &&
         "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
@@ -3462,7 +3463,7 @@ var Container$E = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
 var Card = function (_a) {
     var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
     var theme = useTheme();
-    return (jsx$1(Container$E, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
+    return (jsx$1(Container$F, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
 };
 var Card$1 = Object.assign(Card, {
     Header: CardHeader,
@@ -3588,8 +3589,8 @@ var ButtonSecondaryOutline = function (props) {
         } }), void 0));
 };
 
-function _extends() {
-  _extends = Object.assign || function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -3603,7 +3604,7 @@ function _extends() {
     return target;
   };
 
-  return _extends.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$1(source, excluded) {
@@ -3742,7 +3743,7 @@ function render(_ref) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends({}, _rest, {
+      return _render(_extends$1({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -4203,7 +4204,7 @@ function useDescriptions() {
           props: props.props
         };
       }, [register, props.slot, props.name, props.props]);
-      return React.createElement(DescriptionContext.Provider, {
+      return React__default.createElement(DescriptionContext.Provider, {
         value: contextBag
       }, props.children);
     };
@@ -4219,12 +4220,12 @@ function Description$2(props) {
   }, [id, context.register]);
   var passThroughProps = props;
 
-  var propsWeControl = _extends({}, context.props, {
+  var propsWeControl = _extends$1({}, context.props, {
     id: id
   });
 
   return render({
-    props: _extends({}, passThroughProps, propsWeControl),
+    props: _extends$1({}, passThroughProps, propsWeControl),
     slot: context.slot || {},
     defaultTag: DEFAULT_DESCRIPTION_TAG,
     name: context.name || 'Description'
@@ -4246,7 +4247,7 @@ function useOpenClosed() {
 function OpenClosedProvider(_ref) {
   var value = _ref.value,
       children = _ref.children;
-  return React.createElement(Context.Provider, {
+  return React__default.createElement(Context.Provider, {
     value: value
   }, children);
 }
@@ -4303,32 +4304,32 @@ var ActionTypes$2;
 var reducers$2 = (_reducers$2 = {}, _reducers$2[ActionTypes$2.ToggleDisclosure] = function (state) {
   var _match;
 
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     disclosureState: match(state.disclosureState, (_match = {}, _match[DisclosureStates.Open] = DisclosureStates.Closed, _match[DisclosureStates.Closed] = DisclosureStates.Open, _match))
   });
 }, _reducers$2[ActionTypes$2.CloseDisclosure] = function (state) {
   if (state.disclosureState === DisclosureStates.Closed) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     disclosureState: DisclosureStates.Closed
   });
 }, _reducers$2[ActionTypes$2.LinkPanel] = function (state) {
   if (state.linkedPanel === true) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     linkedPanel: true
   });
 }, _reducers$2[ActionTypes$2.UnlinkPanel] = function (state) {
   if (state.linkedPanel === false) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     linkedPanel: false
   });
 }, _reducers$2[ActionTypes$2.SetButtonId] = function (state, action) {
   if (state.buttonId === action.buttonId) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     buttonId: action.buttonId
   });
 }, _reducers$2[ActionTypes$2.SetPanelId] = function (state, action) {
   if (state.panelId === action.panelId) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     panelId: action.panelId
   });
 }, _reducers$2);
@@ -4429,11 +4430,11 @@ function Disclosure(props) {
       close: close
     };
   }, [disclosureState, close]);
-  return React.createElement(DisclosureContext.Provider, {
+  return React__default.createElement(DisclosureContext.Provider, {
     value: reducerBag
-  }, React.createElement(DisclosureAPIContext.Provider, {
+  }, React__default.createElement(DisclosureAPIContext.Provider, {
     value: api
-  }, React.createElement(OpenClosedProvider, {
+  }, React__default.createElement(OpenClosedProvider, {
     value: match(disclosureState, (_match2 = {}, _match2[DisclosureStates.Open] = State.Open, _match2[DisclosureStates.Closed] = State.Closed, _match2))
   }, render({
     props: passthroughProps,
@@ -4533,7 +4534,7 @@ var Button$7 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
     onClick: handleClick
   };
   return render({
-    props: _extends({}, passthroughProps, propsWeControl),
+    props: _extends$1({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_BUTTON_TAG$1,
     name: 'Disclosure.Button'
@@ -4595,10 +4596,10 @@ var Panel = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
     id: state.panelId
   };
   var passthroughProps = props;
-  return React.createElement(DisclosurePanelContext.Provider, {
+  return React__default.createElement(DisclosurePanelContext.Provider, {
     value: state.panelId
   }, render({
-    props: _extends({}, passthroughProps, propsWeControl),
+    props: _extends$1({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_PANEL_TAG,
     features: PanelRenderFeatures,
@@ -4801,24 +4802,24 @@ var ActionTypes$1;
 var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.SetOrientation] = function (state, action) {
   if (state.orientation === action.orientation) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     orientation: action.orientation
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -4839,7 +4840,7 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -4852,10 +4853,10 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$1({}, state, {
     searchQuery: searchQuery
   });
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -4863,11 +4864,11 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -4880,7 +4881,7 @@ var reducers$1 = (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = fu
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -4990,9 +4991,9 @@ function Listbox(props) {
       disabled: disabled
     };
   }, [listboxState, disabled]);
-  return React.createElement(ListboxContext.Provider, {
+  return React__default.createElement(ListboxContext.Provider, {
     value: reducerBag
-  }, React.createElement(OpenClosedProvider, {
+  }, React__default.createElement(OpenClosedProvider, {
     value: match(listboxState, (_match = {}, _match[ListboxStates.Open] = State.Open, _match[ListboxStates.Closed] = State.Closed, _match))
   }, render({
     props: passThroughProps,
@@ -5101,7 +5102,7 @@ var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
     onClick: handleClick
   };
   return render({
-    props: _extends({}, passthroughProps, propsWeControl),
+    props: _extends$1({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_BUTTON_TAG,
     name: 'Listbox.Button'
@@ -5134,7 +5135,7 @@ function Label$4(props) {
     onClick: handleClick
   };
   return render({
-    props: _extends({}, props, propsWeControl),
+    props: _extends$1({}, props, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_LABEL_TAG$1,
     name: 'Listbox.Label'
@@ -5310,7 +5311,7 @@ var Options = /*#__PURE__*/forwardRefWithAs(function Options(props, ref) {
   };
   var passthroughProps = props;
   return render({
-    props: _extends({}, passthroughProps, propsWeControl),
+    props: _extends$1({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_OPTIONS_TAG,
     features: OptionsRenderFeatures,
@@ -5454,7 +5455,7 @@ function Option$2(props) {
     onMouseLeave: handleLeave
   };
   return render({
-    props: _extends({}, passthroughProps, propsWeControl),
+    props: _extends$1({}, passthroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_OPTION_TAG$1,
     name: 'Listbox.Option'
@@ -5576,7 +5577,7 @@ function useLabels() {
           props: props.props
         };
       }, [register, props.slot, props.name, props.props]);
-      return React.createElement(LabelContext.Provider, {
+      return React__default.createElement(LabelContext.Provider, {
         value: contextBag
       }, props.children);
     };
@@ -5595,11 +5596,11 @@ function Label$3(props) {
     return context.register(id);
   }, [id, context.register]);
 
-  var propsWeControl = _extends({}, context.props, {
+  var propsWeControl = _extends$1({}, context.props, {
     id: id
   });
 
-  var allProps = _extends({}, passThroughProps, propsWeControl); // @ts-expect-error props are dynamic via context, some components will
+  var allProps = _extends$1({}, passThroughProps, propsWeControl); // @ts-expect-error props are dynamic via context, some components will
   //                  provide an onClick then we can delete it.
 
 
@@ -5621,7 +5622,7 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 var reducers = (_reducers = {}, _reducers[ActionTypes.RegisterOption] = function (state, action) {
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       element: action.element,
@@ -5635,7 +5636,7 @@ var reducers = (_reducers = {}, _reducers[ActionTypes.RegisterOption] = function
   });
   if (idx === -1) return state;
   options.splice(idx, 1);
-  return _extends({}, state, {
+  return _extends$1({}, state, {
     options: options
   });
 }, _reducers);
@@ -5776,7 +5777,7 @@ function RadioGroup(props) {
     }
   }, [radioGroupRef, options, triggerChange]);
   var registerOption = useCallback(function (option) {
-    dispatch(_extends({
+    dispatch(_extends$1({
       type: ActionTypes.RegisterOption
     }, option));
     return function () {
@@ -5804,14 +5805,14 @@ function RadioGroup(props) {
     'aria-describedby': describedby,
     onKeyDown: handleKeyDown
   };
-  return React.createElement(DescriptionProvider, {
+  return React__default.createElement(DescriptionProvider, {
     name: "RadioGroup.Description"
-  }, React.createElement(LabelProvider, {
+  }, React__default.createElement(LabelProvider, {
     name: "RadioGroup.Label"
-  }, React.createElement(RadioGroupContext.Provider, {
+  }, React__default.createElement(RadioGroupContext.Provider, {
     value: api
   }, render({
-    props: _extends({}, passThroughProps, propsWeControl),
+    props: _extends$1({}, passThroughProps, propsWeControl),
     defaultTag: DEFAULT_RADIO_GROUP_TAG,
     name: 'RadioGroup'
   }))));
@@ -5915,12 +5916,12 @@ function Option$1(props) {
       active: hasFlag(OptionState.Active)
     };
   }, [checked, isDisabled, hasFlag]);
-  return React.createElement(DescriptionProvider, {
+  return React__default.createElement(DescriptionProvider, {
     name: "RadioGroup.Description"
-  }, React.createElement(LabelProvider, {
+  }, React__default.createElement(LabelProvider, {
     name: "RadioGroup.Label"
   }, render({
-    props: _extends({}, passThroughProps, propsWeControl),
+    props: _extends$1({}, passThroughProps, propsWeControl),
     slot: slot,
     defaultTag: DEFAULT_OPTION_TAG,
     name: 'RadioGroup.Option'
@@ -6170,7 +6171,7 @@ var CustomCheckboxStyles = {
     },
 };
 
-var Container$D = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
+var Container$E = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
 var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
     CustomCheckboxStyles[props.size](props.theme),
     CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
@@ -6199,7 +6200,7 @@ var Checkbox = function (_a) {
     useEffect(function () {
         mounted.current = true;
     }, []);
-    return (jsxs$1(Container$D, { 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));
+    return (jsxs$1(Container$E, { 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$11, templateObject_2$E;
 
@@ -6521,12 +6522,12 @@ var TextButton = function (_a) {
 };
 var templateObject_1$_;
 
-var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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 Container$D = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __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$C, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
+    return (jsxs$1(Container$D, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
 };
 var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
 
@@ -6558,7 +6559,7 @@ var getStylesBySize$6 = function (size) {
             };
     }
 };
-var Container$B = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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$C = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
@@ -6595,7 +6596,7 @@ var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __makeTempla
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
     var theme = useTheme();
-    return (jsx$1(Container$B, __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));
+    return (jsx$1(Container$C, __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$Y, templateObject_2$B;
 
@@ -6621,7 +6622,7 @@ var getStylesBySize$5 = function (size) {
             };
     }
 };
-var Container$A = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var Price = newStyled.h1(templateObject_2$A || (templateObject_2$A = __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');
@@ -6652,7 +6653,7 @@ var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __ma
 var PriceLabel = function (_a) {
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
     var theme = useTheme();
-    return (jsxs$1(Container$A, { 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));
+    return (jsxs$1(Container$B, { 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['300'].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$X, templateObject_2$A, templateObject_3$n;
 
@@ -6717,7 +6718,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
 });
 var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
 
-var Container$z = newStyled.div(templateObject_1$V || (templateObject_1$V = __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$A = newStyled.div(templateObject_1$V || (templateObject_1$V = __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;
 });
@@ -6726,7 +6727,7 @@ var PatternSelector = function (_a) {
     var url = _a.url, selected = _a.selected, testId = _a.testId;
     var theme = useTheme();
     var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
-    return (jsx$1(Container$z, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
+    return (jsx$1(Container$A, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
 };
 var templateObject_1$V, templateObject_2$y;
 
@@ -6791,11 +6792,11 @@ var ImageSmallPreview = function (_a) {
 };
 var templateObject_1$U;
 
-var Container$y = newStyled.div(templateObject_1$T || (templateObject_1$T = __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 Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __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$x || (templateObject_2$x = __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, testId = _a.testId;
-    return (jsx$1(Container$y, __assign({ "data-testid": testId }, { children: images.map(function (item) {
+    return (jsx$1(Container$z, __assign({ "data-testid": testId }, { 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));
 };
@@ -6808,16 +6809,16 @@ var Image = function (_a) {
 };
 var templateObject_1$S;
 
-var Container$x = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  position: relative;\n  height: 45rem;\n"], ["\n  position: relative;\n  height: 45rem;\n"])));
+var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  position: relative;\n  height: 45rem;\n"], ["\n  position: relative;\n  height: 45rem;\n"])));
 var TopTagContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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$l || (templateObject_3$l = __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, testId = _a.testId;
-    return (jsxs$1(Container$x, __assign({ "data-testid": testId }, { 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));
+    return (jsxs$1(Container$y, __assign({ "data-testid": testId }, { 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$R, templateObject_2$w, templateObject_3$l;
 
-var Container$w = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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 Container$x = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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];
@@ -6825,7 +6826,7 @@ var ProductGallery = function (_a) {
     useEffect(function () {
         setSelectedImage(initialValue);
     }, [initialValue]);
-    return (jsxs$1(Container$w, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
+    return (jsxs$1(Container$x, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
                     setSelectedImage(value);
                 } }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
 };
@@ -6867,7 +6868,7 @@ var StarStyles = {
         });
     },
 };
-var Container$v = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var templateObject_1$P;
 
 var StarContainer = newStyled.div(function (_a) {
@@ -6885,7 +6886,7 @@ var sizes = {
 };
 var StarList = function (_a) {
     var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
-    return (jsx$1(Container$v, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
+    return (jsx$1(Container$w, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
             return (jsx$1(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
         }) }, void 0));
 };
@@ -6929,7 +6930,7 @@ var LabelStyles = {
         });
     },
 };
-var Container$u = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container$v = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var templateObject_1$O;
 
 var CustomLabel = newStyled.div(function (_a) {
@@ -6943,10 +6944,10 @@ var starsNumber = 5;
 var Rating = function (_a) {
     var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
     var theme = useTheme();
-    return (jsxs$1(Container$u, { 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));
+    return (jsxs$1(Container$v, { 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$t = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
+var Container$u = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
 var P$2 = newStyled.p(templateObject_2$v || (templateObject_2$v = __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',
@@ -6960,7 +6961,7 @@ var textButtonStyles = function (theme) { return ({
 var FitPredictor = function (_a) {
     var onClick = _a.onClick;
     var theme = useTheme();
-    return (jsxs(Container$t, __assign({ theme: theme }, { children: [jsx(Container$t, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
+    return (jsxs(Container$u, __assign({ theme: theme }, { children: [jsx(Container$u, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign({ 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$N, templateObject_2$v;
 
@@ -6999,7 +7000,7 @@ var Background = newStyled.div(function (_a) {
         position: 'absolute',
     });
 });
-var Container$s = newStyled.div(function (_a) {
+var Container$t = newStyled.div(function (_a) {
     var widthAuto = _a.widthAuto;
     return ({
         width: widthAuto ? 'auto' : 'fit-content',
@@ -7013,7 +7014,7 @@ var getBarWithBasedOnPercent = function (percent) {
 var ProgressBar = function (_a) {
     var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
     var theme = useTheme();
-    return (jsxs$1(Container$s, __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));
+    return (jsxs$1(Container$t, __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$M;
 
@@ -7036,7 +7037,7 @@ var getStylesBySize$4 = function (size) {
             };
     }
 };
-var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __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$s = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
@@ -7064,7 +7065,7 @@ var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
 var IconButton = function (_a) {
     var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsx$1(Container$r, __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));
+    return (jsx$1(Container$s, __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$L;
 
@@ -7211,7 +7212,7 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$4, { children: React.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$4, { children: React__default.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
 };
 
 /* base styles & variants */
@@ -7346,7 +7347,7 @@ var ContainerStyles = {
 };
 
 var Wrapper$4 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Container$q = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
+var Container$r = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
 var Input$2 = newStyled.input(templateObject_2$t || (templateObject_2$t = __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');
@@ -7362,7 +7363,7 @@ var RadioInput = function (_a) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$q, __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));
+    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$r, __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$J, templateObject_2$t;
 
@@ -7379,7 +7380,7 @@ var RadioGroupInput = function (_a) {
 };
 
 var Wrapper$3 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
-var Container$p = newStyled.div(templateObject_2$s || (templateObject_2$s = __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 Container$q = newStyled.div(templateObject_2$s || (templateObject_2$s = __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$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __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;
@@ -7393,18 +7394,18 @@ var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __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$p, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$4, __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$p, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$4, __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$q, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$4, __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$q, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
 };
 var templateObject_1$I, templateObject_2$s, templateObject_3$j;
 
-var Container$o = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
 var Title$3 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __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$i || (templateObject_3$i = __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$c || (templateObject_4$c = __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$o, { children: [jsx$1(Title$3, __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));
+    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$p, { children: [jsx$1(Title$3, __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$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
 
@@ -7413,10 +7414,10 @@ var Bundle = {
     Simple: Simple,
 };
 
-var Container$n = newStyled.div(templateObject_1$G || (templateObject_1$G = __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$o = newStyled.div(templateObject_1$G || (templateObject_1$G = __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$n, __assign({ className: className }, { children: text }), void 0);
+    return jsx$1(Container$o, __assign({ className: className }, { children: text }), void 0);
 };
 var templateObject_1$G;
 
@@ -7590,7 +7591,7 @@ var Error$1 = function (_a) {
 };
 var templateObject_1$E, templateObject_2$p;
 
-var Container$m = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  input {\n    border-color: ", ";\n  }\n"], ["\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var Container$n = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  input {\n    border-color: ", ";\n  }\n"], ["\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
@@ -7694,7 +7695,7 @@ var BaseInput = function (_a) {
         highlight: theme.colors.border.highlight,
         boxShadow: theme.component.input.boxShadow,
     };
-    return (jsxs$1(Container$m, __assign({ color: status === InputValidationType.Valid
+    return (jsxs$1(Container$n, __assign({ color: status === InputValidationType.Valid
             ? theme.colors.shades['700'].color
             : status === InputValidationType.Error
                 ? theme.colors.semantic.urgent.color
@@ -7715,7 +7716,7 @@ var Button$4 = function (_a) {
     throw new Error("Invalid button variant ".concat(variant));
 };
 
-var Container$l = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"])), function (_a) {
+var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.input.borderRadius;
 });
@@ -7732,7 +7733,7 @@ var Custom = function (_a) {
         text: text,
         disabled: rest.disabled,
     }); }, [variant, onClick, text, rest.disabled]);
-    return (jsx$1(Container$l, __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));
+    return (jsx$1(Container$m, __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$C, templateObject_2$n;
 
@@ -7767,13 +7768,13 @@ var BasePlusButton = function (_a) {
 };
 var templateObject_1$A;
 
-var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
+var Container$l = newStyled.div(templateObject_1$z || (templateObject_1$z = __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$l || (templateObject_2$l = __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();
     var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
-    return (jsx$1(Container$k, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$3, __assign({ color: status === InputValidationType.Valid
+    return (jsx$1(Container$l, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$3, __assign({ color: status === InputValidationType.Valid
                     ? theme.colors.shades['700'].color
                     : status === InputValidationType.Error
                         ? theme.colors.semantic.urgent.color
@@ -7788,7 +7789,7 @@ var Input$1 = {
     SimplePlusIcon: BasePlusIcon,
 };
 
-var Container$j = newStyled.div(templateObject_1$y || (templateObject_1$y = __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$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
@@ -7804,7 +7805,7 @@ var Container$j = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
 var PaymentMethod = function (_a) {
     var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsx$1(Container$j, __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));
+    return (jsx$1(Container$k, __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$y;
 
@@ -7825,12 +7826,12 @@ var templateObject_1$x;
 var Wrapper$2 = newStyled.div(templateObject_1$w || (templateObject_1$w = __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$k || (templateObject_2$k = __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$f || (templateObject_3$f = __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$i = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
+var Container$j = newStyled.div(templateObject_4$b || (templateObject_4$b = __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 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$i, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
+    return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$j, __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$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
 
@@ -7859,13 +7860,13 @@ var Totals = {
     Subtotal: Subtotal,
 };
 
-var Container$h = newStyled.div(templateObject_1$u || (templateObject_1$u = __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 Container$i = newStyled.div(templateObject_1$u || (templateObject_1$u = __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$i || (templateObject_2$i = __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$2 = newStyled.p(templateObject_3$d || (templateObject_3$d = __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$9 || (templateObject_4$9 = __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$h, __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$2, __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$i, __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$2, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
 };
 var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
 
@@ -7996,21 +7997,21 @@ var DeliveryDetails = function (_a) {
 };
 var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
 
-var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
+var Container$h = newStyled.div(templateObject_1$s || (templateObject_1$s = __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$g || (templateObject_2$g = __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$g, __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));
+    return (jsxs$1(Container$h, __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$s, templateObject_2$g;
 
-var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __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 Container$g = newStyled.div(templateObject_1$r || (templateObject_1$r = __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$f || (templateObject_2$f = __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$f, { 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));
+    return (jsxs$1(Container$g, { 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$r, templateObject_2$f;
 
@@ -8025,7 +8026,7 @@ var SizeTable = function (_a) {
 };
 var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
 
-var Container$e = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
+var Container$f = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
 var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 var DescriptionContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __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;
@@ -8066,7 +8067,7 @@ var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
 var SimpleOrderItem = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
     var theme = useTheme();
-    return (jsxs$1(Container$e, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$1, __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$f, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$1, __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$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
 
@@ -8077,7 +8078,7 @@ function formatDate(date) {
     return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
 }
 
-var Container$d = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"])));
+var Container$e = newStyled.div(templateObject_1$o || (templateObject_1$o = __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$c || (templateObject_2$c = __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 })({
@@ -8115,7 +8116,7 @@ var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObje
 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$d, { 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$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$e, { 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$1, { 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$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
 
@@ -8326,7 +8327,7 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var initialState$1 = {
+var initialState$2 = {
   animating: false,
   autoplaying: null,
   currentDirection: 0,
@@ -9055,7 +9056,7 @@ var extractObject = function extractObject(spec, keys) {
 
 var initializedState = function initializedState(spec) {
   // spec also contains listRef, trackRef
-  var slideCount = React.Children.count(spec.children);
+  var slideCount = React__default.Children.count(spec.children);
   var listNode = spec.listRef;
   var listWidth = Math.ceil(getWidth(listNode));
   var trackNode = spec.trackRef && spec.trackRef.node;
@@ -9862,10 +9863,10 @@ var renderSlides = function renderSlides(spec) {
   var slides = [];
   var preCloneSlides = [];
   var postCloneSlides = [];
-  var childrenCount = React.Children.count(spec.children);
+  var childrenCount = React__default.Children.count(spec.children);
   var startIndex = lazyStartIndex(spec);
   var endIndex = lazyEndIndex(spec);
-  React.Children.forEach(spec.children, function (elem, index) {
+  React__default.Children.forEach(spec.children, function (elem, index) {
     var child;
     var childOnClickOptions = {
       message: "children",
@@ -9877,7 +9878,7 @@ var renderSlides = function renderSlides(spec) {
     if (!spec.lazyLoad || spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0) {
       child = elem;
     } else {
-      child = /*#__PURE__*/React.createElement("div", null);
+      child = /*#__PURE__*/React__default.createElement("div", null);
     }
 
     var childStyle = getSlideStyle(_objectSpread2(_objectSpread2({}, spec), {}, {
@@ -9888,7 +9889,7 @@ var renderSlides = function renderSlides(spec) {
       index: index
     })); // push a cloned element of the desired slide
 
-    slides.push( /*#__PURE__*/React.cloneElement(child, {
+    slides.push( /*#__PURE__*/React__default.cloneElement(child, {
       key: "original" + getKey(child, index),
       "data-index": index,
       className: classnames(slideClasses, slideClass),
@@ -9919,7 +9920,7 @@ var renderSlides = function renderSlides(spec) {
         slideClasses = getSlideClasses(_objectSpread2(_objectSpread2({}, spec), {}, {
           index: key
         }));
-        preCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
+        preCloneSlides.push( /*#__PURE__*/React__default.cloneElement(child, {
           key: "precloned" + getKey(child, key),
           "data-index": key,
           tabIndex: "-1",
@@ -9946,7 +9947,7 @@ var renderSlides = function renderSlides(spec) {
         slideClasses = getSlideClasses(_objectSpread2(_objectSpread2({}, spec), {}, {
           index: key
         }));
-        postCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
+        postCloneSlides.push( /*#__PURE__*/React__default.cloneElement(child, {
           key: "postcloned" + getKey(child, key),
           "data-index": key,
           tabIndex: "-1",
@@ -10010,7 +10011,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
         onMouseOver: onMouseOver,
         onMouseLeave: onMouseLeave
       };
-      return /*#__PURE__*/React.createElement("div", _extends$1({
+      return /*#__PURE__*/React__default.createElement("div", _extends$2({
         ref: this.handleRef,
         className: "slick-track",
         style: this.props.trackStyle
@@ -10019,7 +10020,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return Track;
-}(React.PureComponent);
+}(React__default.PureComponent);
 
 var getDotCount = function getDotCount(spec) {
   var dots;
@@ -10095,22 +10096,22 @@ var Dots = /*#__PURE__*/function (_React$PureComponent) {
           currentSlide: currentSlide
         };
         var onClick = this.clickHandler.bind(this, dotOptions);
-        dots = dots.concat( /*#__PURE__*/React.createElement("li", {
+        dots = dots.concat( /*#__PURE__*/React__default.createElement("li", {
           key: i,
           className: className
-        }, /*#__PURE__*/React.cloneElement(this.props.customPaging(i), {
+        }, /*#__PURE__*/React__default.cloneElement(this.props.customPaging(i), {
           onClick: onClick
         })));
       }
 
-      return /*#__PURE__*/React.cloneElement(this.props.appendDots(dots), _objectSpread2({
+      return /*#__PURE__*/React__default.cloneElement(this.props.appendDots(dots), _objectSpread2({
         className: this.props.dotsClass
       }, mouseEvents));
     }
   }]);
 
   return Dots;
-}(React.PureComponent);
+}(React__default.PureComponent);
 
 var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(PrevArrow, _React$PureComponent);
@@ -10164,9 +10165,9 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
       var prevArrow;
 
       if (this.props.prevArrow) {
-        prevArrow = /*#__PURE__*/React.cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
+        prevArrow = /*#__PURE__*/React__default.cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
       } else {
-        prevArrow = /*#__PURE__*/React.createElement("button", _extends$1({
+        prevArrow = /*#__PURE__*/React__default.createElement("button", _extends$2({
           key: "0",
           type: "button"
         }, prevArrowProps), " ", "Previous");
@@ -10177,7 +10178,7 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return PrevArrow;
-}(React.PureComponent);
+}(React__default.PureComponent);
 var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
   _inherits(NextArrow, _React$PureComponent2);
 
@@ -10230,9 +10231,9 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
       var nextArrow;
 
       if (this.props.nextArrow) {
-        nextArrow = /*#__PURE__*/React.cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
+        nextArrow = /*#__PURE__*/React__default.cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
       } else {
-        nextArrow = /*#__PURE__*/React.createElement("button", _extends$1({
+        nextArrow = /*#__PURE__*/React__default.createElement("button", _extends$2({
           key: "1",
           type: "button"
         }, nextArrowProps), " ", "Next");
@@ -10243,7 +10244,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
   }]);
 
   return NextArrow;
-}(React.PureComponent);
+}(React__default.PureComponent);
 
 /**
  * A collection of shims that provide minimal functionality of the ES6 collections.
@@ -11325,10 +11326,10 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       var setTrackStyle = _this.didPropsChange(prevProps);
 
       setTrackStyle && _this.updateState(spec, setTrackStyle, function () {
-        if (_this.state.currentSlide >= React.Children.count(_this.props.children)) {
+        if (_this.state.currentSlide >= React__default.Children.count(_this.props.children)) {
           _this.changeSlide({
             message: "index",
-            index: React.Children.count(_this.props.children) - _this.props.slidesToShow,
+            index: React__default.Children.count(_this.props.children) - _this.props.slidesToShow,
             currentSlide: _this.state.currentSlide
           });
         }
@@ -11389,7 +11390,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       });
       var trackStyle = getTrackCSS(spec);
 
-      if (setTrackStyle || React.Children.count(_this.props.children) !== React.Children.count(spec.children)) {
+      if (setTrackStyle || React__default.Children.count(_this.props.children) !== React__default.Children.count(spec.children)) {
         updatedState["trackStyle"] = trackStyle;
       }
 
@@ -11441,7 +11442,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      var childrenCount = React.Children.count(_this.props.children);
+      var childrenCount = React__default.Children.count(_this.props.children);
 
       var spec = _objectSpread2(_objectSpread2(_objectSpread2({}, _this.props), _this.state), {}, {
         slideCount: childrenCount
@@ -11867,7 +11868,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
           onMouseOver: pauseOnDotsHover ? _this.onDotsOver : null,
           onMouseLeave: pauseOnDotsHover ? _this.onDotsLeave : null
         });
-        dots = /*#__PURE__*/React.createElement(Dots, dotProps);
+        dots = /*#__PURE__*/React__default.createElement(Dots, dotProps);
       }
 
       var prevArrow, nextArrow;
@@ -11875,8 +11876,8 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       arrowProps.clickHandler = _this.changeSlide;
 
       if (_this.props.arrows) {
-        prevArrow = /*#__PURE__*/React.createElement(PrevArrow, arrowProps);
-        nextArrow = /*#__PURE__*/React.createElement(NextArrow, arrowProps);
+        prevArrow = /*#__PURE__*/React__default.createElement(PrevArrow, arrowProps);
+        nextArrow = /*#__PURE__*/React__default.createElement(NextArrow, arrowProps);
       }
 
       var verticalHeightStyle = null;
@@ -11935,18 +11936,18 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      return /*#__PURE__*/React.createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React.createElement("div", _extends$1({
+      return /*#__PURE__*/React__default.createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default.createElement("div", _extends$2({
         ref: _this.listRefHandler
-      }, listProps), /*#__PURE__*/React.createElement(Track, _extends$1({
+      }, listProps), /*#__PURE__*/React__default.createElement(Track, _extends$2({
         ref: _this.trackRefHandler
       }, trackProps), _this.props.children)), !_this.props.unslick ? nextArrow : "", !_this.props.unslick ? dots : "");
     });
 
     _this.list = null;
     _this.track = null;
-    _this.state = _objectSpread2(_objectSpread2({}, initialState$1), {}, {
+    _this.state = _objectSpread2(_objectSpread2({}, initialState$2), {}, {
       currentSlide: _this.props.initialSlide,
-      slideCount: React.Children.count(_this.props.children)
+      slideCount: React__default.Children.count(_this.props.children)
     });
     _this.callbackTimers = [];
     _this.clickable = true;
@@ -11982,12 +11983,12 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return setTrackStyle || React.Children.count(this.props.children) !== React.Children.count(prevProps.children);
+      return setTrackStyle || React__default.Children.count(this.props.children) !== React__default.Children.count(prevProps.children);
     }
   }]);
 
   return InnerSlider;
-}(React.Component);
+}(React__default.Component);
 
 var camel2hyphen$1 = function (str) {
   return str
@@ -12051,12 +12052,12 @@ var json2mq = function (query) {
 
 var json2mq_1 = json2mq;
 
-var defaultProps = {
+var defaultProps$1 = {
   accessibility: true,
   adaptiveHeight: false,
   afterChange: null,
   appendDots: function appendDots(dots) {
-    return /*#__PURE__*/React.createElement("ul", {
+    return /*#__PURE__*/React__default.createElement("ul", {
       style: {
         display: "block"
       }
@@ -12071,7 +12072,7 @@ var defaultProps = {
   className: "",
   cssEase: "ease",
   customPaging: function customPaging(i) {
-    return /*#__PURE__*/React.createElement("button", null, i + 1);
+    return /*#__PURE__*/React__default.createElement("button", null, i + 1);
   },
   dots: false,
   dotsClass: "slick-dots",
@@ -12252,9 +12253,9 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         newProps = this.props.responsive.filter(function (resp) {
           return resp.breakpoint === _this3.state.breakpoint;
         });
-        settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps), this.props), newProps[0].settings);
+        settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps$1), this.props), newProps[0].settings);
       } else {
-        settings = _objectSpread2(_objectSpread2({}, defaultProps), this.props);
+        settings = _objectSpread2(_objectSpread2({}, defaultProps$1), this.props);
       } // force scrolling by one if centerMode is on
 
 
@@ -12281,7 +12282,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
       } // makes sure that children is an array, even when there is only 1 child
 
 
-      var children = React.Children.toArray(this.props.children); // Children may contain false or null, so we should filter them
+      var children = React__default.Children.toArray(this.props.children); // Children may contain false or null, so we should filter them
       // children may also contain string filled with spaces (in certain cases where we use jsx strings)
 
       children = children.filter(function (child) {
@@ -12312,7 +12313,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
             }
 
             if (k >= children.length) break;
-            row.push( /*#__PURE__*/React.cloneElement(children[k], {
+            row.push( /*#__PURE__*/React__default.cloneElement(children[k], {
               key: 100 * i + 10 * j + k,
               tabIndex: -1,
               style: {
@@ -12322,20 +12323,20 @@ var Slider = /*#__PURE__*/function (_React$Component) {
             }));
           }
 
-          newSlide.push( /*#__PURE__*/React.createElement("div", {
+          newSlide.push( /*#__PURE__*/React__default.createElement("div", {
             key: 10 * i + j
           }, row));
         }
 
         if (settings.variableWidth) {
-          newChildren.push( /*#__PURE__*/React.createElement("div", {
+          newChildren.push( /*#__PURE__*/React__default.createElement("div", {
             key: i,
             style: {
               width: currentWidth
             }
           }, newSlide));
         } else {
-          newChildren.push( /*#__PURE__*/React.createElement("div", {
+          newChildren.push( /*#__PURE__*/React__default.createElement("div", {
             key: i
           }, newSlide));
         }
@@ -12343,14 +12344,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
 
       if (settings === "unslick") {
         var className = "regular slider " + (this.props.className || "");
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React__default.createElement("div", {
           className: className
         }, children);
       } else if (newChildren.length <= settings.slidesToShow) {
         settings.unslick = true;
       }
 
-      return /*#__PURE__*/React.createElement(InnerSlider, _extends$1({
+      return /*#__PURE__*/React__default.createElement(InnerSlider, _extends$2({
         style: this.props.style,
         ref: this.innerSliderRefHandler
       }, settings), newChildren);
@@ -12358,7 +12359,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return Slider;
-}(React.Component);
+}(React__default.Component);
 
 var StyledSlider = newStyled(Slider)(templateObject_1$n || (templateObject_1$n = __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;
@@ -12491,7 +12492,8 @@ var ImageContainer = newStyled.div(function (_a) {
         height: height,
     });
 });
-var H1 = newStyled.h1(templateObject_1$j || (templateObject_1$j = __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$d = newStyled.a(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"])));
+var H1 = newStyled.h1(templateObject_2$9 || (templateObject_2$9 = __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:
@@ -12535,8 +12537,7 @@ var ProductItemMobile = function (_a) {
             _b)[size];
         return [first, second];
     }, [size]);
-    var Container = url ? 'a' : 'div';
-    return (jsxs(Container, __assign({ href: url, css: css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: min-content;\n        text-decoration: none;\n      "], ["\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: min-content;\n        text-decoration: none;\n      "]))), className: className }, { 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(Spacing, { size: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
+    return (jsxs(Container$d, __assign({ as: url ? 'a' : 'div', href: url, className: className }, { 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(Spacing, { size: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
 };
 var templateObject_1$j, templateObject_2$9;
 
@@ -12694,7 +12695,7 @@ var templateObject_1$e, templateObject_2$5, templateObject_3$5, 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;
     var theme = useTheme();
-    var _f = React.useState(currentPage), page = _f[0], setPage = _f[1];
+    var _f = React__default.useState(currentPage), page = _f[0], setPage = _f[1];
     var handlePageChange = function (page) {
         if (disabled || page < from || page > to) {
             return;
@@ -12882,7 +12883,7 @@ var SearchControl = function (_a) {
     }
 };
 
-var initialState = { selectedOption: undefined, open: false, term: '' };
+var initialState$1 = { selectedOption: undefined, open: false, term: '' };
 var reducer = function (state, action) {
     switch (action.type) {
         case 'UPDATE_TERM': {
@@ -12906,7 +12907,7 @@ var Container$6 = newStyled.div({
 var SearchBar = function (_a) {
     var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId;
     var theme = useTheme();
-    var _b = useReducer(reducer, initialState), state = _b[0], dispatch = _b[1];
+    var _b = useReducer(reducer, initialState$1), state = _b[0], dispatch = _b[1];
     var ref = useRef(null);
     useOnClickOutside(ref, function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: false } }); });
     useEffect(function () {
@@ -12923,13 +12924,278 @@ var SearchBar = function (_a) {
                 }, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var LEFT = "Left";
+var RIGHT = "Right";
+var UP = "Up";
+var DOWN = "Down";
+
+var defaultProps = {
+  delta: 10,
+  preventDefaultTouchmoveEvent: false,
+  rotationAngle: 0,
+  trackMouse: false,
+  trackTouch: true
+};
+var initialState = {
+  first: true,
+  initial: [0, 0],
+  start: 0,
+  swiping: false,
+  xy: [0, 0]
+};
+var mouseMove = "mousemove";
+var mouseUp = "mouseup";
+var touchEnd = "touchend";
+var touchMove = "touchmove";
+var touchStart = "touchstart";
+
+function getDirection(absX, absY, deltaX, deltaY) {
+  if (absX > absY) {
+    if (deltaX > 0) {
+      return RIGHT;
+    }
+
+    return LEFT;
+  } else if (deltaY > 0) {
+    return DOWN;
+  }
+
+  return UP;
+}
+
+function rotateXYByAngle(pos, angle) {
+  if (angle === 0) return pos;
+  var angleInRadians = Math.PI / 180 * angle;
+  var x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
+  var y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
+  return [x, y];
+}
+
+function getHandlers(set, handlerProps) {
+  var onStart = function onStart(event) {
+    if (event && "touches" in event && event.touches.length > 1) return;
+    set(function (state, props) {
+      if (props.trackMouse) {
+        document.addEventListener(mouseMove, onMove);
+        document.addEventListener(mouseUp, onUp);
+      }
+
+      var _ref = "touches" in event ? event.touches[0] : event,
+          clientX = _ref.clientX,
+          clientY = _ref.clientY;
+
+      var xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
+      return _extends({}, state, initialState, {
+        initial: [].concat(xy),
+        xy: xy,
+        start: event.timeStamp || 0
+      });
+    });
+  };
+
+  var onMove = function onMove(event) {
+    set(function (state, props) {
+      if ("touches" in event && event.touches.length > 1) {
+        return state;
+      }
+
+      var _ref2 = "touches" in event ? event.touches[0] : event,
+          clientX = _ref2.clientX,
+          clientY = _ref2.clientY;
+
+      var _rotateXYByAngle = rotateXYByAngle([clientX, clientY], props.rotationAngle),
+          x = _rotateXYByAngle[0],
+          y = _rotateXYByAngle[1];
+
+      var deltaX = x - state.xy[0];
+      var deltaY = y - state.xy[1];
+      var absX = Math.abs(deltaX);
+      var absY = Math.abs(deltaY);
+      var time = (event.timeStamp || 0) - state.start;
+      var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
+      var vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
+      var dir = getDirection(absX, absY, deltaX, deltaY);
+      var delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
+      if (absX < delta && absY < delta && !state.swiping) return state;
+      var eventData = {
+        absX: absX,
+        absY: absY,
+        deltaX: deltaX,
+        deltaY: deltaY,
+        dir: dir,
+        event: event,
+        first: state.first,
+        initial: state.initial,
+        velocity: velocity,
+        vxvy: vxvy
+      };
+      eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
+      props.onSwiping && props.onSwiping(eventData);
+      var cancelablePageSwipe = false;
+
+      if (props.onSwiping || props.onSwiped || "onSwiped" + dir in props) {
+        cancelablePageSwipe = true;
+      }
+
+      if (cancelablePageSwipe && props.preventDefaultTouchmoveEvent && props.trackTouch && event.cancelable) event.preventDefault();
+      return _extends({}, state, {
+        first: false,
+        eventData: eventData,
+        swiping: true
+      });
+    });
+  };
+
+  var onEnd = function onEnd(event) {
+    set(function (state, props) {
+      var eventData;
+
+      if (state.swiping && state.eventData) {
+        eventData = _extends({}, state.eventData, {
+          event: event
+        });
+        props.onSwiped && props.onSwiped(eventData);
+        var onSwipedDir = props["onSwiped" + eventData.dir];
+        onSwipedDir && onSwipedDir(eventData);
+      } else {
+        props.onTap && props.onTap({
+          event: event
+        });
+      }
+
+      return _extends({}, state, initialState, {
+        eventData: eventData
+      });
+    });
+  };
+
+  var cleanUpMouse = function cleanUpMouse() {
+    document.removeEventListener(mouseMove, onMove);
+    document.removeEventListener(mouseUp, onUp);
+  };
+
+  var onUp = function onUp(e) {
+    cleanUpMouse();
+    onEnd(e);
+  };
+
+  var attachTouch = function attachTouch(el, passive) {
+    var cleanup = function cleanup() {};
+
+    if (el && el.addEventListener) {
+      var tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];
+      tls.forEach(function (_ref3) {
+        var e = _ref3[0],
+            h = _ref3[1];
+        return el.addEventListener(e, h, {
+          passive: passive
+        });
+      });
+
+      cleanup = function cleanup() {
+        return tls.forEach(function (_ref4) {
+          var e = _ref4[0],
+              h = _ref4[1];
+          return el.removeEventListener(e, h);
+        });
+      };
+    }
+
+    return cleanup;
+  };
+
+  var onRef = function onRef(el) {
+    if (el === null) return;
+    set(function (state, props) {
+      if (state.el === el) return state;
+      var addState = {};
+
+      if (state.el && state.el !== el && state.cleanUpTouch) {
+        state.cleanUpTouch();
+        addState.cleanUpTouch = undefined;
+      }
+
+      if (props.trackTouch && el) {
+        addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
+      }
+
+      return _extends({}, state, {
+        el: el
+      }, addState);
+    });
+  };
+
+  var output = {
+    ref: onRef
+  };
+
+  if (handlerProps.trackMouse) {
+    output.onMouseDown = onStart;
+  }
+
+  return [output, attachTouch];
+}
+
+function updateTransientState(state, props, attachTouch) {
+  var addState = {};
+
+  if (!props.trackTouch && state.cleanUpTouch) {
+    state.cleanUpTouch();
+    addState.cleanUpTouch = undefined;
+  } else if (props.trackTouch && !state.cleanUpTouch) {
+    if (state.el) {
+      addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);
+    }
+  }
+
+  return _extends({}, state, addState);
+}
+
+function useSwipeable(options) {
+  var trackMouse = options.trackMouse;
+  var transientState = React.useRef(_extends({}, initialState));
+  var transientProps = React.useRef(_extends({}, defaultProps));
+  transientProps.current = _extends({}, defaultProps, options);
+
+  var _React$useMemo = React.useMemo(function () {
+    return getHandlers(function (stateSetter) {
+      return transientState.current = stateSetter(transientState.current, transientProps.current);
+    }, {
+      trackMouse: trackMouse
+    });
+  }, [trackMouse]),
+      handlers = _React$useMemo[0],
+      attachTouch = _React$useMemo[1];
+
+  transientState.current = updateTransientState(transientState.current, transientProps.current, attachTouch);
+  return handlers;
+}
+
 var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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$3 || (templateObject_2$3 = __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$3 || (templateObject_3$3 = __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 ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
     var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
-    return (jsxs$1(Container$5, __assign({ "data-testid": testId }, { 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));
-};
+    return (jsxs$1(Container$5, __assign({ "data-testid": testId, ref: ref }, { 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$a, templateObject_2$3, templateObject_3$3;
 
 var Button = newStyled.button(templateObject_1$9 || (templateObject_1$9 = __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"])));
@@ -12969,12 +13235,31 @@ var templateObject_1$7, templateObject_2$2, templateObject_3$2;
 var Container$3 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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];
-    var _b = useState(initialValue), selectedImage = _b[0], setSelectedImage = _b[1];
+    var _b = useState(function () {
+        if (selectedValue) {
+            return Math.max(0, images.indexOf(selectedValue));
+        }
+        return 0;
+    }), index = _b[0], setIndex = _b[1];
+    var _c = useState(function () { return images[index]; }), selectedImage = _c[0], setSelectedImage = _c[1];
+    var handlers = useSwipeable({
+        onSwiped: useCallback(function (_a) {
+            var dir = _a.dir;
+            setIndex(function (index) {
+                if (dir === 'Left') {
+                    return Math.min(index + 1, images.length - 1);
+                }
+                if (dir === 'Right') {
+                    return Math.max(index - 1, 0);
+                }
+                return index;
+            });
+        }, [images.length]),
+    });
     useEffect(function () {
-        setSelectedImage(initialValue);
-    }, [initialValue]);
-    return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, testId: slideDotsDataTestId }, void 0)] }, void 0));
+        setSelectedImage(images[index]);
+    }, [index, images]);
+    return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, __assign({}, handlers, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
 };
 var templateObject_1$6;