@trafilea/afrodita-components 4.3.1-beta.4 → 4.3.1-beta.8

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);
     };
@@ -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'
@@ -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 */
@@ -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;
@@ -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;
@@ -12846,6 +12847,8 @@ var useWindowDimensions = function (breakpoints) {
         function handleResize() {
             setWindowDimensions(getWindowDimensions());
         }
+        // calling it here updates the dimensions on first render
+        handleResize();
         window.addEventListener('resize', handleResize);
         return function () { return window.removeEventListener('resize', handleResize); };
     }, []);
@@ -12882,7 +12885,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 +12909,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 +12926,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 +13237,32 @@ 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(0), index = _b[0], setIndex = _b[1];
     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));
+        if (selectedValue == null) {
+            return;
+        }
+        setIndex(Math.max(0, images.indexOf(selectedValue)));
+    }, [selectedValue, images]);
+    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(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;