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

package/build/index.js

@@ -8,7 +8,26 @@ var reactDom = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -462,8 +481,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];
 
@@ -477,7 +496,7 @@ function _extends$1() {
     return target;
   };
 
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
 function memoize(fn) {
@@ -2571,7 +2590,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) {
@@ -3250,7 +3269,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);
     };
@@ -3596,8 +3615,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];
 
@@ -3611,7 +3630,7 @@ function _extends() {
     return target;
   };
 
-  return _extends.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$1(source, excluded) {
@@ -3750,7 +3769,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'
@@ -4227,12 +4246,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'
@@ -4311,32 +4330,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);
@@ -4541,7 +4560,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'
@@ -4606,7 +4625,7 @@ var Panel = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
   return React__default["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,
@@ -4809,24 +4828,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) {
@@ -4847,7 +4866,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
   });
@@ -4860,10 +4879,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
   });
@@ -4871,11 +4890,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
@@ -4888,7 +4907,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;
@@ -5109,7 +5128,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'
@@ -5142,7 +5161,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'
@@ -5318,7 +5337,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,
@@ -5462,7 +5481,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'
@@ -5603,11 +5622,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.
 
 
@@ -5629,7 +5648,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,
@@ -5643,7 +5662,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);
@@ -5784,7 +5803,7 @@ function RadioGroup(props) {
     }
   }, [radioGroupRef, options, triggerChange]);
   var registerOption = React.useCallback(function (option) {
-    dispatch(_extends({
+    dispatch(_extends$1({
       type: ActionTypes.RegisterOption
     }, option));
     return function () {
@@ -5819,7 +5838,7 @@ function RadioGroup(props) {
   }, React__default["default"].createElement(RadioGroupContext.Provider, {
     value: api
   }, render({
-    props: _extends({}, passThroughProps, propsWeControl),
+    props: _extends$1({}, passThroughProps, propsWeControl),
     defaultTag: DEFAULT_RADIO_GROUP_TAG,
     name: 'RadioGroup'
   }))));
@@ -5928,7 +5947,7 @@ function Option$1(props) {
   }, React__default["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'
@@ -8334,7 +8353,7 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var initialState$1 = {
+var initialState$2 = {
   animating: false,
   autoplaying: null,
   currentDirection: 0,
@@ -10018,7 +10037,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
         onMouseOver: onMouseOver,
         onMouseLeave: onMouseLeave
       };
-      return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
+      return /*#__PURE__*/React__default["default"].createElement("div", _extends$2({
         ref: this.handleRef,
         className: "slick-track",
         style: this.props.trackStyle
@@ -10174,7 +10193,7 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
       if (this.props.prevArrow) {
         prevArrow = /*#__PURE__*/React__default["default"].cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
       } else {
-        prevArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$1({
+        prevArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$2({
           key: "0",
           type: "button"
         }, prevArrowProps), " ", "Previous");
@@ -10240,7 +10259,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
       if (this.props.nextArrow) {
         nextArrow = /*#__PURE__*/React__default["default"].cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
       } else {
-        nextArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$1({
+        nextArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$2({
           key: "1",
           type: "button"
         }, nextArrowProps), " ", "Next");
@@ -11943,16 +11962,16 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      return /*#__PURE__*/React__default["default"].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
+      return /*#__PURE__*/React__default["default"].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default["default"].createElement("div", _extends$2({
         ref: _this.listRefHandler
-      }, listProps), /*#__PURE__*/React__default["default"].createElement(Track, _extends$1({
+      }, listProps), /*#__PURE__*/React__default["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__default["default"].Children.count(_this.props.children)
     });
@@ -12059,7 +12078,7 @@ var json2mq = function (query) {
 
 var json2mq_1 = json2mq;
 
-var defaultProps = {
+var defaultProps$1 = {
   accessibility: true,
   adaptiveHeight: false,
   afterChange: null,
@@ -12260,9 +12279,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
 
 
@@ -12358,7 +12377,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         settings.unslick = true;
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(InnerSlider, _extends$1({
+      return /*#__PURE__*/React__default["default"].createElement(InnerSlider, _extends$2({
         style: this.props.style,
         ref: this.innerSliderRefHandler
       }, settings), newChildren);
@@ -12854,6 +12873,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); };
     }, []);
@@ -12890,7 +12911,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': {
@@ -12914,7 +12935,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 = React.useReducer(reducer, initialState), state = _b[0], dispatch = _b[1];
+    var _b = React.useReducer(reducer, initialState$1), state = _b[0], dispatch = _b[1];
     var ref = React.useRef(null);
     useOnClickOutside(ref, function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: false } }); });
     React.useEffect(function () {
@@ -12931,13 +12952,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__namespace.useRef(_extends({}, initialState));
+  var transientProps = React__namespace.useRef(_extends({}, defaultProps));
+  transientProps.current = _extends({}, defaultProps, options);
+
+  var _React$useMemo = React__namespace.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 = React.forwardRef(function ImageProductWithTags(_a, ref) {
     var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
-    return (jsxRuntime.jsxs(Container$5, __assign({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
-};
+    return (jsxRuntime.jsxs(Container$5, __assign({ "data-testid": testId, ref: ref }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(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"])));
@@ -12977,12 +13263,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 = React.useState(initialValue), selectedImage = _b[0], setSelectedImage = _b[1];
+    var _b = React.useState(0), index = _b[0], setIndex = _b[1];
     React.useEffect(function () {
-        setSelectedImage(initialValue);
-    }, [initialValue]);
-    return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0), jsxRuntime.jsx(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 = React.useState(function () { return images[index]; }), selectedImage = _c[0], setSelectedImage = _c[1];
+    var handlers = useSwipeable({
+        onSwiped: React.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]),
+    });
+    React.useEffect(function () {
+        setSelectedImage(images[index]);
+    }, [index, images]);
+    return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign({}, handlers, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
 };
 var templateObject_1$6;