@onesy/ui-react 1.0.163 → 1.0.165

package/esm/Carousel/Carousel.js

@@ -137,12 +137,12 @@ const useStyle = styleMethod(theme => ({
 });
 const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCarousel?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Transitions = React.useMemo(() => theme?.elements?.Transitions || TransitionsElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCarousel?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Transitions = theme?.elements?.Transitions || TransitionsElement;
   const {
       tonal = true,
       color = 'default',
@@ -267,13 +267,13 @@ const Carousel = /*#__PURE__*/React.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 (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return 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] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -349,7 +349,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
     cancelAnimationFrame(refs.momentumID.current);
   };
   const momentumMethod = () => {
-    const valueNew = refs.orientation.current === 'horizontal' ? (refs.value.current?.x || 0) + refs.velocity.current : (refs.value.current?.y || 0) + refs.velocity.current;
+    const valueNew_0 = refs.orientation.current === 'horizontal' ? (refs.value.current?.x || 0) + refs.velocity.current : (refs.value.current?.y || 0) + refs.velocity.current;
     const {
       width: width_,
       height: height_
@@ -365,33 +365,33 @@ const Carousel = /*#__PURE__*/React.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) {
         // Done
         return refs.carousel.current?.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) {
         // Done
         return refs.carousel.current?.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);
       }
@@ -408,20 +408,20 @@ const Carousel = /*#__PURE__*/React.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') {
-      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.mouseDownPosition.current?.[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 (is('function', onUpdatePosition_)) onUpdatePosition_(valueNew);
+    updateValue(valueNew_1);
+    if (is('function', onUpdatePosition_)) onUpdatePosition_(valueNew_1);
   };
-  const onUpdate = React.useCallback((to = 'next', values = refs.items.current) => {
+  const onUpdate = (to = 'next', values = refs.items.current) => {
     // Momentum
     momentumClear();
 
@@ -445,24 +445,24 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
             additional: 0
           });
         } else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
-          let item = index * clamp(moveItems, 1, refs.items.current.length);
-          item = refs.carousel.current.children[item];
-          if (item) {
-            const x = item.offsetLeft;
+          let item_0 = index * 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
           });
         }
@@ -476,24 +476,24 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
             additional: 0
           });
         } else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
-          let item = index * clamp(moveItems, 1, refs.items.current.length);
-          item = refs.carousel.current.children[item];
-          if (item) {
-            const y = item.offsetTop;
+          let item_1 = index * 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
           });
         }
@@ -510,20 +510,20 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (autoHeight) {
         if (version === 'regular') {
           setTimeout(() => {
-            const height_ = refs.carousel.current.children[refs.value.current?.index]?.children[0]?.getBoundingClientRect().height;
-            if (height_ > 0) refs.root.current.style.height = `${height_}px`;
+            const height__1 = refs.carousel.current.children[refs.value.current?.index]?.children[0]?.getBoundingClientRect().height;
+            if (height__1 > 0) refs.root.current.style.height = `${height__1}px`;
           }, 1);
         }
         if (version === 'transition') {
           setTimeout(() => {
-            const height_ = refs.carousel.current.children[0]?.children[0]?.getBoundingClientRect().height;
-            if (height_ > 0) refs.root.current.style.height = `${height_}px`;
+            const height__2 = refs.carousel.current.children[0]?.children[0]?.getBoundingClientRect().height;
+            if (height__2 > 0) refs.root.current.style.height = `${height__2}px`;
           }, autoHeightDelay);
         }
       }
     }
-  }, [gap, version, autoHeight, autoHeightDelay]);
-  const onMouseUp = React.useCallback(event => {
+  };
+  const onMouseUp = event => {
     if (refs.mouseDown.current) {
       if (refs.mouseDown.current && !refs.momentum.current) refs.carousel.current?.style.removeProperty('transition');
       refs.mouseDownDuration.current = new Date().getTime() - refs.mouseDownStart.current;
@@ -563,37 +563,37 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (refs.version.current === 'regular' && refs.value.current) {
         if (refs.orientation.current === 'horizontal') {
           const {
-            x
+            x: x_2
           } = refs.value.current;
-          let index = refs.value.current.index;
-          if (refs.mouseDownPosition.current?.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.mouseDownPosition.current?.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') {
           const {
-            y
+            y: y_2
           } = refs.value.current;
-          let index = refs.value.current.index;
-          if (refs.mouseDownPosition.current?.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.mouseDownPosition.current?.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.useEffect(() => {
-    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':
@@ -608,75 +608,75 @@ const Carousel = /*#__PURE__*/React.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) {
-          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.current?.x || 0) - incX;
-          if (refs.free.current || !refs.moveBeyondEdge.current) x = clamp(x, min, max);
+          let x_3 = (refs.value.current?.x || 0) - incX;
+          if (refs.free.current || !refs.moveBeyondEdge.current) x_3 = clamp(x_3, min_1, max_2);
 
           // Move beyond min, max
-          if (x < min || x > max) x = (refs.value.current?.x || 0) - incX / 1.7;
-          refs.velocity.current = x - (refs.value.current?.x || 0);
+          if (x_3 < min_1 || x_3 > max_2) x_3 = (refs.value.current?.x || 0) - incX / 1.7;
+          refs.velocity.current = x_3 - (refs.value.current?.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) {
-          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.current?.y || 0) - incY;
-          if (refs.free.current || !refs.moveBeyondEdge.current) y = clamp(y, min, max);
+          let y_3 = (refs.value.current?.y || 0) - incY;
+          if (refs.free.current || !refs.moveBeyondEdge.current) y_3 = clamp(y_3, min_2, max_3);
 
           // Move beyond min, max
-          if (y < min || y > max) y = (refs.value.current?.y || 0) - incY / 1.7;
-          refs.velocity.current = y - (refs.value.current?.y || 0);
+          if (y_3 < min_2 || y_3 > max_3) y_3 = (refs.value.current?.y || 0) - incY / 1.7;
+          refs.velocity.current = y_3 - (refs.value.current?.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 = () => onUpdate(refs.value.current?.index);
@@ -737,78 +737,78 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
   // OnesySubscription methods
   React.useEffect(() => {
-    const method = (...args) => onUpdate(...args);
-    if (is('function', updateSub?.subscribe)) updateSub?.subscribe(method);
+    const method_0 = (...args) => onUpdate(...args);
+    if (is('function', updateSub?.subscribe)) updateSub?.subscribe(method_0);
     return () => {
-      if (is('function', updateSub?.unsubscribe)) updateSub?.unsubscribe(method);
+      if (is('function', updateSub?.unsubscribe)) updateSub?.unsubscribe(method_0);
     };
   }, [updateSub]);
   React.useEffect(() => {
-    const method = (...args) => onUpdate(...args);
-    if (is('function', previousSub?.subscribe)) previousSub?.subscribe(method);
+    const method_1 = (...args_0) => onUpdate(...args_0);
+    if (is('function', previousSub?.subscribe)) previousSub?.subscribe(method_1);
     return () => {
-      if (is('function', previousSub?.unsubscribe)) previousSub?.unsubscribe(method);
+      if (is('function', previousSub?.unsubscribe)) previousSub?.unsubscribe(method_1);
     };
   }, [previousSub]);
   React.useEffect(() => {
-    const method = (...args) => onUpdate(...args);
-    if (is('function', nextSub?.subscribe)) nextSub?.subscribe(method);
+    const method_2 = (...args_1) => onUpdate(...args_1);
+    if (is('function', nextSub?.subscribe)) nextSub?.subscribe(method_2);
     return () => {
-      if (is('function', nextSub?.unsubscribe)) nextSub?.unsubscribe(method);
+      if (is('function', nextSub?.unsubscribe)) nextSub?.unsubscribe(method_2);
     };
   }, [nextSub]);
   React.useEffect(() => {
-    const values = unique([...items_, ...React.Children.toArray(children)]).filter(Boolean);
-    const previous = refs.items.current.reduce((result, item) => result += is('string', item) ? item : item?.key, '');
-    const updated = values.reduce((result, item) => result += is('string', item) ? item : item?.key, '');
+    const values_0 = unique([...items_, ...React.Children.toArray(children)]).filter(Boolean);
+    const previous = refs.items.current.reduce((result_0, item_2) => result_0 += is('string', item_2) ? item_2 : item_2?.key, '');
+    const updated = values_0.reduce((result_1, item_3) => result_1 += is('string', item_3) ? item_3 : item_3?.key, '');
     if (updated !== previous) {
-      onUpdate('next', values);
-      setItems(values);
+      onUpdate('next', values_0);
+      setItems(values_0);
     }
   }, [items_, background, children]);
-  const onWheel = React.useCallback(debounce(event => {
-    if (refs.orientation.current === 'horizontal' && event.deltaX < 0 || refs.orientation.current === 'vertical' && event.deltaY < 0) {
-      event.preventDefault();
-      event.stopPropagation();
+  const onWheel = 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.useCallback(event => {
+  }, 40);
+  const onBlur = event_4 => {
     setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onFocus = React.useCallback(event => {
+    if (is('function', onBlur_)) onBlur_(event_4);
+  };
+  const onFocus = event_5 => {
     setFocus(true);
-    if (is('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onMouseDown = React.useCallback(event => {
+    if (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.useCallback(event => {
+  };
+  const onMouseEnter = event_7 => {
     setHover(true);
     if (refs.autoPlay.current) clear();
-    if (is('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = React.useCallback(event => {
+    if (is('function', onMouseEnter_)) onMouseEnter_(event_7);
+  };
+  const onMouseLeave = event_8 => {
     setFocus(false);
     setHover(false);
     if (!refs.autoPlay.current) start();
-    if (is('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
-  const onArrowMouseEnter = React.useCallback(event => {
+    if (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_;
@@ -820,14 +820,14 @@ const Carousel = /*#__PURE__*/React.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?.x === min || value?.y === min) arrowPreviousIn = false;
+    if (value?.x === min_3 || value?.y === min_3) arrowPreviousIn = false;
     if (itemSize === 'auto') {
       if (value?.x !== undefined && value?.x + 1 >= maxX || value?.y !== undefined && value?.y + 1 >= maxY) arrowNextIn = false;
     } else {
@@ -861,11 +861,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return /*#__PURE__*/React.cloneElement(Item);
   };
   return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: item => {
+    ref: item_4 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_4);else ref.current = item_4;
       }
-      refs.root.current = item;
+      refs.root.current = item_4;
     },
     tabIndex: "0",
     role: "region",
@@ -894,18 +894,18 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, CarouselProps, {
     className: classNames([staticClassName('Carousel', theme) && ['onesy-Carousel-carousel'], CarouselProps?.className, classes.carousel, classes[`carousel_version_${version}`]]),
     style: _objectSpread(_objectSpread({}, styles.carousel), CarouselProps?.style)
-  }), items.map((item, index) => /*#__PURE__*/React.createElement(Line, _extends({
-    key: index,
+  }), items.map((item_5, index_2) => /*#__PURE__*/React.createElement(Line, _extends({
+    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: classNames([staticClassName('Carousel', theme) && ['onesy-Carousel-item'], ItemWrapperProps?.className, classes.item, autoHeight && classes[`item_version_${version}_autoHeight`], itemSize && classes[`item_itemSize_${itemSize}`]])
-  }), resolveItem(item)))), version === 'transition' && /*#__PURE__*/React.createElement(Line, _extends({
+  }), resolveItem(item_5)))), version === 'transition' && /*#__PURE__*/React.createElement(Line, _extends({
     ref: refs.carousel,
     gap: 0.5,
     direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
@@ -946,10 +946,10 @@ const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('Carousel', theme) && ['onesy-Carousel-progress'], classes.progress, classes[`progress_orientation_${orientation}`]])
   }, Array.from({
     length: refs.itemsLength.current
-  }).map((item, index) => /*#__PURE__*/React.createElement("span", {
-    key: index,
-    onClick: () => onUpdate(index),
-    className: classNames([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.createElement("span", {
+    key: index_3,
+    onClick: () => onUpdate(index_3),
+    className: classNames([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.createElement(ArrowPreviousTransitionComponent_, _extends({
     in: arrowPreviousIn
   }, ArrowTransitionComponentProps, ArrowPreviousTransitionComponentProps), is('function', renderArrowPrevious) ? renderArrowPrevious(() => onUpdate('previous')) : IconButtonPrevious ? /*#__PURE__*/React.cloneElement(IconButtonPrevious, _objectSpread(_objectSpread(_objectSpread({