@onesy/ui-react 1.0.163 → 1.0.165

package/Carousel/Carousel.js

@@ -143,32 +143,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Carousel'
 });
 const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _refs$carousel$curren;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _refs$carousel$curren;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCarousel) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Fade) || _Fade.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
-  }, [theme]);
-  const Transitions = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Transitions) || _Transitions.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCarousel) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Fade) || _Fade.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
+  const Transitions = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Transitions) || _Transitions.default;
   const {
       tonal = true,
       color = 'default',
@@ -293,13 +275,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const properties = [version_, orientation_, itemSize_, gap_, move_, moveValue_, moveItems_, moveBeyondEdge_, swipe_, background_, autoPlay_, autoHeight_, round_, arrows_, arrowsVisibility_, arrowHideOnStartEnd_, progress_, progressVisibility_, noTransition_];
     properties.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [version_, orientation_, itemSize_, gap_, move_, moveValue_, moveItems_, moveBeyondEdge_, swipe_, background_, autoPlay_, autoHeight_, round_, arrows_, arrowsVisibility_, arrowHideOnStartEnd_, progress_, progressVisibility_, noTransition_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -376,7 +358,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   const momentumMethod = () => {
     var _refs$value$current, _refs$value$current2;
-    const valueNew = refs.orientation.current === 'horizontal' ? (((_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current.x) || 0) + refs.velocity.current : (((_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.y) || 0) + refs.velocity.current;
+    const valueNew_0 = refs.orientation.current === 'horizontal' ? (((_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current.x) || 0) + refs.velocity.current : (((_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.y) || 0) + refs.velocity.current;
     const {
       width: width_,
       height: height_
@@ -392,35 +374,35 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         max = scrollWidth_ - scrollWidth_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
       }
       refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
-        index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))),
-        x: valueNew
+        index: Math.floor(valueNew_0 / (max / (refs.itemsLength.current - 1))),
+        x: valueNew_0
       });
-      if (valueNew <= min || valueNew >= max) {
+      if (valueNew_0 <= min || valueNew_0 >= max) {
         var _refs$carousel$curren2;
         // Done
         return (_refs$carousel$curren2 = refs.carousel.current) === null || _refs$carousel$curren2 === void 0 ? void 0 : _refs$carousel$curren2.style.removeProperty('transition');
       } else {
         refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
-          index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))),
-          x: valueNew
+          index: Math.floor(valueNew_0 / (max / (refs.itemsLength.current - 1))),
+          x: valueNew_0
         });
         onUpdatePosition(refs.value.current);
       }
     }
     if (refs.orientation.current === 'vertical') {
-      const min = 0;
-      let max = (height_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
+      const min_0 = 0;
+      let max_0 = (height_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
       if (refs.itemSize.current === 'auto') {
-        max = scrollHeight_ - scrollHeight_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
+        max_0 = scrollHeight_ - scrollHeight_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
       }
-      if (valueNew <= min || valueNew >= max) {
+      if (valueNew_0 <= min_0 || valueNew_0 >= max_0) {
         var _refs$carousel$curren3;
         // Done
         return (_refs$carousel$curren3 = refs.carousel.current) === null || _refs$carousel$curren3 === void 0 ? void 0 : _refs$carousel$curren3.style.removeProperty('transition');
       } else {
         refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
-          index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))),
-          y: valueNew
+          index: Math.floor(valueNew_0 / (max_0 / (refs.itemsLength.current - 1))),
+          y: valueNew_0
         });
         onUpdatePosition(refs.value.current);
       }
@@ -438,21 +420,21 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const onUpdatePosition = valuePosition_ => {
     // Momentum
     momentumClear();
-    const valueNew = _objectSpread(_objectSpread({}, valuePosition_), {}, {
+    const valueNew_1 = _objectSpread(_objectSpread({}, valuePosition_), {}, {
       additional: 0
     });
     if (valuePosition_.additional === undefined && refs.version.current === 'regular' && refs.itemSize.current !== 'auto') {
       var _refs$mouseDownPositi;
-      const max = refs.width.current / 2;
-      const valuePosition = valueNew[refs.orientation.current === 'horizontal' ? 'x' : 'y'];
+      const max_1 = refs.width.current / 2;
+      const valuePosition = valueNew_1[refs.orientation.current === 'horizontal' ? 'x' : 'y'];
       const part = valuePosition - (((_refs$mouseDownPositi = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi === void 0 ? void 0 : _refs$mouseDownPositi[refs.orientation.current === 'horizontal' ? 'x' : 'y']) || 0);
-      const additional = part / max * 100;
-      valueNew.additional = additional;
+      const additional = part / max_1 * 100;
+      valueNew_1.additional = additional;
     }
-    updateValue(valueNew);
-    if ((0, _utils.is)('function', onUpdatePosition_)) onUpdatePosition_(valueNew);
+    updateValue(valueNew_1);
+    if ((0, _utils.is)('function', onUpdatePosition_)) onUpdatePosition_(valueNew_1);
   };
-  const onUpdate = _react.default.useCallback((to = 'next', values = refs.items.current) => {
+  const onUpdate = (to = 'next', values = refs.items.current) => {
     var _refs$carousel$curren5, _refs$value$current3;
     // Momentum
     momentumClear();
@@ -477,24 +459,24 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             additional: 0
           });
         } else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
-          let item = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
-          item = refs.carousel.current.children[item];
-          if (item) {
-            const x = item.offsetLeft;
+          let item_0 = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
+          item_0 = refs.carousel.current.children[item_0];
+          if (item_0) {
+            const x_0 = item_0.offsetLeft;
             onUpdatePosition({
               index,
-              x,
+              x: x_0,
               additional: 0
             });
           }
         } else {
-          const width_ = refs.carousel.current.getBoundingClientRect().width;
-          const scrollWidth_ = refs.carousel.current.scrollWidth;
-          const part = refs.itemSize.current === 'auto' ? scrollWidth_ / refs.itemsLength.current : width_;
-          const x = index * part + index * (gap * theme.space.unit);
+          const width__0 = refs.carousel.current.getBoundingClientRect().width;
+          const scrollWidth__0 = refs.carousel.current.scrollWidth;
+          const part_0 = refs.itemSize.current === 'auto' ? scrollWidth__0 / refs.itemsLength.current : width__0;
+          const x_1 = index * part_0 + index * (gap * theme.space.unit);
           onUpdatePosition({
             index,
-            x,
+            x: x_1,
             additional: 0
           });
         }
@@ -508,24 +490,24 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             additional: 0
           });
         } else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
-          let item = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
-          item = refs.carousel.current.children[item];
-          if (item) {
-            const y = item.offsetTop;
+          let item_1 = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
+          item_1 = refs.carousel.current.children[item_1];
+          if (item_1) {
+            const y_0 = item_1.offsetTop;
             onUpdatePosition({
               index,
-              y,
+              y: y_0,
               additional: 0
             });
           }
         } else {
-          const height_ = refs.carousel.current.getBoundingClientRect().height;
-          const scrollHeight_ = refs.carousel.current.scrollHeight;
-          const part = refs.itemSize.current === 'auto' ? scrollHeight_ / refs.itemsLength.current : height_;
-          const y = index * part + index * (gap * theme.space.unit);
+          const height__0 = refs.carousel.current.getBoundingClientRect().height;
+          const scrollHeight__0 = refs.carousel.current.scrollHeight;
+          const part_1 = refs.itemSize.current === 'auto' ? scrollHeight__0 / refs.itemsLength.current : height__0;
+          const y_1 = index * part_1 + index * (gap * theme.space.unit);
           onUpdatePosition({
             index,
-            y,
+            y: y_1,
             additional: 0
           });
         }
@@ -543,21 +525,21 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         if (version === 'regular') {
           setTimeout(() => {
             var _refs$carousel$curren6, _refs$value$current4;
-            const height_ = (_refs$carousel$curren6 = refs.carousel.current.children[(_refs$value$current4 = refs.value.current) === null || _refs$value$current4 === void 0 ? void 0 : _refs$value$current4.index]) === null || _refs$carousel$curren6 === void 0 || (_refs$carousel$curren6 = _refs$carousel$curren6.children[0]) === null || _refs$carousel$curren6 === void 0 ? void 0 : _refs$carousel$curren6.getBoundingClientRect().height;
-            if (height_ > 0) refs.root.current.style.height = `${height_}px`;
+            const height__1 = (_refs$carousel$curren6 = refs.carousel.current.children[(_refs$value$current4 = refs.value.current) === null || _refs$value$current4 === void 0 ? void 0 : _refs$value$current4.index]) === null || _refs$carousel$curren6 === void 0 || (_refs$carousel$curren6 = _refs$carousel$curren6.children[0]) === null || _refs$carousel$curren6 === void 0 ? void 0 : _refs$carousel$curren6.getBoundingClientRect().height;
+            if (height__1 > 0) refs.root.current.style.height = `${height__1}px`;
           }, 1);
         }
         if (version === 'transition') {
           setTimeout(() => {
             var _refs$carousel$curren7;
-            const height_ = (_refs$carousel$curren7 = refs.carousel.current.children[0]) === null || _refs$carousel$curren7 === void 0 || (_refs$carousel$curren7 = _refs$carousel$curren7.children[0]) === null || _refs$carousel$curren7 === void 0 ? void 0 : _refs$carousel$curren7.getBoundingClientRect().height;
-            if (height_ > 0) refs.root.current.style.height = `${height_}px`;
+            const height__2 = (_refs$carousel$curren7 = refs.carousel.current.children[0]) === null || _refs$carousel$curren7 === void 0 || (_refs$carousel$curren7 = _refs$carousel$curren7.children[0]) === null || _refs$carousel$curren7 === void 0 ? void 0 : _refs$carousel$curren7.getBoundingClientRect().height;
+            if (height__2 > 0) refs.root.current.style.height = `${height__2}px`;
           }, autoHeightDelay);
         }
       }
     }
-  }, [gap, version, autoHeight, autoHeightDelay]);
-  const onMouseUp = _react.default.useCallback(event => {
+  };
+  const onMouseUp = event => {
     if (refs.mouseDown.current) {
       var _refs$carousel$curren8;
       if (refs.mouseDown.current && !refs.momentum.current) (_refs$carousel$curren8 = refs.carousel.current) === null || _refs$carousel$curren8 === void 0 || _refs$carousel$curren8.style.removeProperty('transition');
@@ -602,39 +584,39 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         if (refs.orientation.current === 'horizontal') {
           var _refs$mouseDownPositi2;
           const {
-            x
+            x: x_2
           } = refs.value.current;
-          let index = refs.value.current.index;
-          if (((_refs$mouseDownPositi2 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi2 === void 0 ? void 0 : _refs$mouseDownPositi2.x) > x) index++;
-          const width_ = refs.carousel.current.getBoundingClientRect().width;
-          const original = index * width_ + index * (gap * theme.space.unit);
-          const threshold = width_ / 4;
-          const moved = Math.abs(original - x);
-          if (x > 0 && x < original && moved >= threshold) onUpdate(index - 1);else if (x > original && moved >= threshold) onUpdate(index + 1);else onUpdate(index);
+          let index_0 = refs.value.current.index;
+          if (((_refs$mouseDownPositi2 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi2 === void 0 ? void 0 : _refs$mouseDownPositi2.x) > x_2) index_0++;
+          const width__1 = refs.carousel.current.getBoundingClientRect().width;
+          const original = index_0 * width__1 + index_0 * (gap * theme.space.unit);
+          const threshold = width__1 / 4;
+          const moved = Math.abs(original - x_2);
+          if (x_2 > 0 && x_2 < original && moved >= threshold) onUpdate(index_0 - 1);else if (x_2 > original && moved >= threshold) onUpdate(index_0 + 1);else onUpdate(index_0);
         }
         if (refs.orientation.current === 'vertical') {
           var _refs$mouseDownPositi3;
           const {
-            y
+            y: y_2
           } = refs.value.current;
-          let index = refs.value.current.index;
-          if (((_refs$mouseDownPositi3 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi3 === void 0 ? void 0 : _refs$mouseDownPositi3.y) > y) index++;
-          const height_ = refs.carousel.current.getBoundingClientRect().height;
-          const original = index * height_ + index * (gap * theme.space.unit);
-          const threshold = height_ / 4;
-          const moved = Math.abs(original - y);
-          if (y > 0 && y < original && moved >= threshold) onUpdate(index - 1);else if (y > original && moved >= threshold) onUpdate(index + 1);else onUpdate(index);
+          let index_1 = refs.value.current.index;
+          if (((_refs$mouseDownPositi3 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi3 === void 0 ? void 0 : _refs$mouseDownPositi3.y) > y_2) index_1++;
+          const height__3 = refs.carousel.current.getBoundingClientRect().height;
+          const original_0 = index_1 * height__3 + index_1 * (gap * theme.space.unit);
+          const threshold_0 = height__3 / 4;
+          const moved_0 = Math.abs(original_0 - y_2);
+          if (y_2 > 0 && y_2 < original_0 && moved_0 >= threshold_0) onUpdate(index_1 - 1);else if (y_2 > original_0 && moved_0 >= threshold_0) onUpdate(index_1 + 1);else onUpdate(index_1);
         }
       }
       setMouseDown(false);
       refs.previousMouseEvent.current = undefined;
     }
-  }, []);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current;
-    const onKeyDown = event => {
+    const onKeyDown = event_0 => {
       if (refs.focus.current) {
-        switch (event.key) {
+        switch (event_0.key) {
           case 'ArrowLeft':
             return onUpdate('previous');
           case 'ArrowRight':
@@ -649,77 +631,77 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         const incX = x_ - refs.previousMouseEvent.current.clientX;
         const incY = y_ - refs.previousMouseEvent.current.clientY;
         const {
-          width: width_,
-          height: height_
+          width: width__2,
+          height: height__4
         } = refs.carousel.current.getBoundingClientRect();
         const {
-          scrollWidth: scrollWidth_,
-          scrollHeight: scrollHeight_
+          scrollWidth: scrollWidth__1,
+          scrollHeight: scrollHeight__1
         } = refs.carousel.current;
         if (refs.orientation.current === 'horizontal' && incX !== 0) {
           var _refs$value$current7, _refs$value$current8, _refs$value$current9;
-          const min = 0;
-          let max = (width_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
+          const min_1 = 0;
+          let max_2 = (width__2 + gap * theme.space.unit) * (refs.itemsLength.current - 1);
           if (refs.itemSize.current === 'auto') {
-            max = scrollWidth_ - scrollWidth_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
+            max_2 = scrollWidth__1 - scrollWidth__1 / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
           }
-          let x = (((_refs$value$current7 = refs.value.current) === null || _refs$value$current7 === void 0 ? void 0 : _refs$value$current7.x) || 0) - incX;
-          if (refs.free.current || !refs.moveBeyondEdge.current) x = (0, _utils.clamp)(x, min, max);
+          let x_3 = (((_refs$value$current7 = refs.value.current) === null || _refs$value$current7 === void 0 ? void 0 : _refs$value$current7.x) || 0) - incX;
+          if (refs.free.current || !refs.moveBeyondEdge.current) x_3 = (0, _utils.clamp)(x_3, min_1, max_2);
 
           // Move beyond min, max
-          if (x < min || x > max) x = (((_refs$value$current8 = refs.value.current) === null || _refs$value$current8 === void 0 ? void 0 : _refs$value$current8.x) || 0) - incX / 1.7;
-          refs.velocity.current = x - (((_refs$value$current9 = refs.value.current) === null || _refs$value$current9 === void 0 ? void 0 : _refs$value$current9.x) || 0);
+          if (x_3 < min_1 || x_3 > max_2) x_3 = (((_refs$value$current8 = refs.value.current) === null || _refs$value$current8 === void 0 ? void 0 : _refs$value$current8.x) || 0) - incX / 1.7;
+          refs.velocity.current = x_3 - (((_refs$value$current9 = refs.value.current) === null || _refs$value$current9 === void 0 ? void 0 : _refs$value$current9.x) || 0);
           onUpdatePosition({
-            index: Math.floor(x / (max / (refs.itemsLength.current - 1))),
-            x
+            index: Math.floor(x_3 / (max_2 / (refs.itemsLength.current - 1))),
+            x: x_3
           });
         }
         if (refs.orientation.current === 'vertical' && incY !== 0) {
           var _refs$value$current0, _refs$value$current1, _refs$value$current10;
-          const min = 0;
-          let max = (height_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
+          const min_2 = 0;
+          let max_3 = (height__4 + gap * theme.space.unit) * (refs.itemsLength.current - 1);
           if (refs.itemSize.current === 'auto') {
-            max = scrollHeight_ - scrollHeight_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
+            max_3 = scrollHeight__1 - scrollHeight__1 / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
           }
-          let y = (((_refs$value$current0 = refs.value.current) === null || _refs$value$current0 === void 0 ? void 0 : _refs$value$current0.y) || 0) - incY;
-          if (refs.free.current || !refs.moveBeyondEdge.current) y = (0, _utils.clamp)(y, min, max);
+          let y_3 = (((_refs$value$current0 = refs.value.current) === null || _refs$value$current0 === void 0 ? void 0 : _refs$value$current0.y) || 0) - incY;
+          if (refs.free.current || !refs.moveBeyondEdge.current) y_3 = (0, _utils.clamp)(y_3, min_2, max_3);
 
           // Move beyond min, max
-          if (y < min || y > max) y = (((_refs$value$current1 = refs.value.current) === null || _refs$value$current1 === void 0 ? void 0 : _refs$value$current1.y) || 0) - incY / 1.7;
-          refs.velocity.current = y - (((_refs$value$current10 = refs.value.current) === null || _refs$value$current10 === void 0 ? void 0 : _refs$value$current10.y) || 0);
+          if (y_3 < min_2 || y_3 > max_3) y_3 = (((_refs$value$current1 = refs.value.current) === null || _refs$value$current1 === void 0 ? void 0 : _refs$value$current1.y) || 0) - incY / 1.7;
+          refs.velocity.current = y_3 - (((_refs$value$current10 = refs.value.current) === null || _refs$value$current10 === void 0 ? void 0 : _refs$value$current10.y) || 0);
           onUpdatePosition({
-            index: Math.floor(y / (max / (refs.itemsLength.current - 1))),
-            y
+            index: Math.floor(y_3 / (max_3 / (refs.itemsLength.current - 1))),
+            y: y_3
           });
         }
       }
     };
 
     // Mouse move
-    const onMouseMove = event => {
+    const onMouseMove = event_1 => {
       if (refs.mouseDown.current) {
         const {
-          clientY,
-          clientX
-        } = event;
-        onMove(clientX, clientY);
-        refs.previousMouseEvent.current = event;
+          clientY: clientY_0,
+          clientX: clientX_0
+        } = event_1;
+        onMove(clientX_0, clientY_0);
+        refs.previousMouseEvent.current = event_1;
       }
     };
 
     // Touch move
-    const onTouchMove = event => {
+    const onTouchMove = event_2 => {
       if (refs.mouseDown.current) {
         const {
-          clientY,
-          clientX
-        } = event.touches[0];
-        onMove(clientX, clientY);
-        refs.previousMouseEvent.current = event;
+          clientY: clientY_1,
+          clientX: clientX_1
+        } = event_2.touches[0];
+        onMove(clientX_1, clientY_1);
+        refs.previousMouseEvent.current = event_2;
 
         // Normalize for use as a mouseDown value
-        refs.previousMouseEvent.current.clientY = clientY;
-        refs.previousMouseEvent.current.clientX = clientX;
+        refs.previousMouseEvent.current.clientY = clientY_1;
+        refs.previousMouseEvent.current.clientX = clientX_1;
       }
     };
     const method = () => {
@@ -784,78 +766,78 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
   // OnesySubscription methods
   _react.default.useEffect(() => {
-    const method = (...args) => onUpdate(...args);
-    if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.subscribe)) updateSub === null || updateSub === void 0 || updateSub.subscribe(method);
+    const method_0 = (...args) => onUpdate(...args);
+    if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.subscribe)) updateSub === null || updateSub === void 0 || updateSub.subscribe(method_0);
     return () => {
-      if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.unsubscribe)) updateSub === null || updateSub === void 0 || updateSub.unsubscribe(method);
+      if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.unsubscribe)) updateSub === null || updateSub === void 0 || updateSub.unsubscribe(method_0);
     };
   }, [updateSub]);
   _react.default.useEffect(() => {
-    const method = (...args) => onUpdate(...args);
-    if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.subscribe)) previousSub === null || previousSub === void 0 || previousSub.subscribe(method);
+    const method_1 = (...args_0) => onUpdate(...args_0);
+    if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.subscribe)) previousSub === null || previousSub === void 0 || previousSub.subscribe(method_1);
     return () => {
-      if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.unsubscribe)) previousSub === null || previousSub === void 0 || previousSub.unsubscribe(method);
+      if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.unsubscribe)) previousSub === null || previousSub === void 0 || previousSub.unsubscribe(method_1);
     };
   }, [previousSub]);
   _react.default.useEffect(() => {
-    const method = (...args) => onUpdate(...args);
-    if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.subscribe)) nextSub === null || nextSub === void 0 || nextSub.subscribe(method);
+    const method_2 = (...args_1) => onUpdate(...args_1);
+    if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.subscribe)) nextSub === null || nextSub === void 0 || nextSub.subscribe(method_2);
     return () => {
-      if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.unsubscribe)) nextSub === null || nextSub === void 0 || nextSub.unsubscribe(method);
+      if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.unsubscribe)) nextSub === null || nextSub === void 0 || nextSub.unsubscribe(method_2);
     };
   }, [nextSub]);
   _react.default.useEffect(() => {
-    const values = (0, _utils.unique)([...items_, ..._react.default.Children.toArray(children)]).filter(Boolean);
-    const previous = refs.items.current.reduce((result, item) => result += (0, _utils.is)('string', item) ? item : item === null || item === void 0 ? void 0 : item.key, '');
-    const updated = values.reduce((result, item) => result += (0, _utils.is)('string', item) ? item : item === null || item === void 0 ? void 0 : item.key, '');
+    const values_0 = (0, _utils.unique)([...items_, ..._react.default.Children.toArray(children)]).filter(Boolean);
+    const previous = refs.items.current.reduce((result_0, item_2) => result_0 += (0, _utils.is)('string', item_2) ? item_2 : item_2 === null || item_2 === void 0 ? void 0 : item_2.key, '');
+    const updated = values_0.reduce((result_1, item_3) => result_1 += (0, _utils.is)('string', item_3) ? item_3 : item_3 === null || item_3 === void 0 ? void 0 : item_3.key, '');
     if (updated !== previous) {
-      onUpdate('next', values);
-      setItems(values);
+      onUpdate('next', values_0);
+      setItems(values_0);
     }
   }, [items_, background, children]);
-  const onWheel = _react.default.useCallback((0, _utils.debounce)(event => {
-    if (refs.orientation.current === 'horizontal' && event.deltaX < 0 || refs.orientation.current === 'vertical' && event.deltaY < 0) {
-      event.preventDefault();
-      event.stopPropagation();
+  const onWheel = (0, _utils.debounce)(event_3 => {
+    if (refs.orientation.current === 'horizontal' && event_3.deltaX < 0 || refs.orientation.current === 'vertical' && event_3.deltaY < 0) {
+      event_3.preventDefault();
+      event_3.stopPropagation();
       return onUpdate('previous');
     }
-    if (refs.orientation.current === 'horizontal' && event.deltaX > 0 || refs.orientation.current === 'vertical' && event.deltaY > 0) {
-      event.preventDefault();
-      event.stopPropagation();
+    if (refs.orientation.current === 'horizontal' && event_3.deltaX > 0 || refs.orientation.current === 'vertical' && event_3.deltaY > 0) {
+      event_3.preventDefault();
+      event_3.stopPropagation();
       return onUpdate('next');
     }
-  }, 40), []);
-  const onBlur = _react.default.useCallback(event => {
+  }, 40);
+  const onBlur = event_4 => {
     setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onFocus = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_4);
+  };
+  const onFocus = event_5 => {
     setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onMouseDown = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_5);
+  };
+  const onMouseDown = event_6 => {
     // Momentum
     momentumClear();
-    setMouseDown(event);
+    setMouseDown(event_6);
     refs.mouseDownPosition.current = _objectSpread({}, refs.value.current);
     refs.mouseDownStart.current = new Date().getTime();
     refs.carousel.current.style.transition = 'none';
-  }, []);
-  const onMouseEnter = _react.default.useCallback(event => {
+  };
+  const onMouseEnter = event_7 => {
     setHover(true);
     if (refs.autoPlay.current) clear();
-    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_7);
+  };
+  const onMouseLeave = event_8 => {
     setFocus(false);
     setHover(false);
     if (!refs.autoPlay.current) start();
-    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
-  const onArrowMouseEnter = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_8);
+  };
+  const onArrowMouseEnter = event_9 => {
     setHover(true);
     if (refs.autoPlay.current) clear();
-  }, []);
+  };
   const ArrowPreviousTransitionComponent_ = ArrowPreviousTransitionComponent || ArrowTransitionComponent;
   const ArrowNextTransitionComponent_ = ArrowNextTransitionComponent || ArrowTransitionComponent;
   let TransitionComponent = TransitionComponent_;
@@ -867,14 +849,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   let arrowPreviousIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
   let arrowNextIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
   if (arrowHideOnStartEnd) {
-    const min = 0;
+    const min_3 = 0;
     let maxX = (width + gap * theme.space.unit) * (refs.itemsLength.current - 1);
     let maxY = (height + gap * theme.space.unit) * (refs.itemsLength.current - 1);
     if (refs.itemSize.current === 'auto') {
       maxX = scrollWidth - scrollWidth / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
       maxY = scrollHeight - scrollHeight / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
     }
-    if ((value === null || value === void 0 ? void 0 : value.x) === min || (value === null || value === void 0 ? void 0 : value.y) === min) arrowPreviousIn = false;
+    if ((value === null || value === void 0 ? void 0 : value.x) === min_3 || (value === null || value === void 0 ? void 0 : value.y) === min_3) arrowPreviousIn = false;
     if (itemSize === 'auto') {
       if ((value === null || value === void 0 ? void 0 : value.x) !== undefined && (value === null || value === void 0 ? void 0 : value.x) + 1 >= maxX || (value === null || value === void 0 ? void 0 : value.y) !== undefined && (value === null || value === void 0 ? void 0 : value.y) + 1 >= maxY) arrowNextIn = false;
     } else {
@@ -908,11 +890,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return /*#__PURE__*/_react.default.cloneElement(Item);
   };
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: item => {
+    ref: item_4 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_4);else ref.current = item_4;
       }
-      refs.root.current = item;
+      refs.root.current = item_4;
     },
     tabIndex: "0",
     role: "region",
@@ -941,18 +923,18 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, CarouselProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-carousel'], CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.className, classes.carousel, classes[`carousel_version_${version}`]]),
     style: _objectSpread(_objectSpread({}, styles.carousel), CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.style)
-  }), items.map((item, index) => /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    key: index,
+  }), items.map((item_5, index_2) => /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    key: index_2,
     gap: 0,
     direction: "column",
     align: "center",
     justify: "center",
     role: "group",
     "aria-roledescription": "slide",
-    "aria-label": `${index + 1} out of ${refs.itemsLength.current}`
+    "aria-label": `${index_2 + 1} out of ${refs.itemsLength.current}`
   }, ItemWrapperProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-item'], ItemWrapperProps === null || ItemWrapperProps === void 0 ? void 0 : ItemWrapperProps.className, classes.item, autoHeight && classes[`item_version_${version}_autoHeight`], itemSize && classes[`item_itemSize_${itemSize}`]])
-  }), resolveItem(item)))), version === 'transition' && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  }), resolveItem(item_5)))), version === 'transition' && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: refs.carousel,
     gap: 0.5,
     direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
@@ -993,10 +975,10 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-progress'], classes.progress, classes[`progress_orientation_${orientation}`]])
   }, Array.from({
     length: refs.itemsLength.current
-  }).map((item, index) => /*#__PURE__*/_react.default.createElement("span", {
-    key: index,
-    onClick: () => onUpdate(index),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-progress-item', indexActive === index && 'onesy-Carousel-progress-item-active'], classes.progress_item, indexActive === index && classes.progress_item_active])
+  }).map((item_6, index_3) => /*#__PURE__*/_react.default.createElement("span", {
+    key: index_3,
+    onClick: () => onUpdate(index_3),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-progress-item', indexActive === index_3 && 'onesy-Carousel-progress-item-active'], classes.progress_item, indexActive === index_3 && classes.progress_item_active])
   })))), arrows && /*#__PURE__*/_react.default.createElement(ArrowPreviousTransitionComponent_, (0, _extends2.default)({
     in: arrowPreviousIn
   }, ArrowTransitionComponentProps, ArrowPreviousTransitionComponentProps), (0, _utils.is)('function', renderArrowPrevious) ? renderArrowPrevious(() => onUpdate('previous')) : IconButtonPrevious ? /*#__PURE__*/_react.default.cloneElement(IconButtonPrevious, _objectSpread(_objectSpread(_objectSpread({