@onesy/ui-react 1.0.130 → 1.0.131

package/Carousel/Carousel.js

@@ -1,935 +1,1047 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialNavigateBeforeW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
-const IconMaterialNavigateNextW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
-const Line_1 = __importDefault(require("../Line"));
-const Fade_1 = __importDefault(require("../Fade"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Transitions_1 = __importDefault(require("../Transitions"));
-const Surface_1 = __importDefault(require("../Surface"));
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        width: '100%',
-        height: '540px',
-        overflow: 'hidden'
-    },
-    autoHeight: {
-        transition: theme.methods.transitions.make('height')
-    },
-    item: {
-        width: '100%',
-        height: '100%',
-        flex: '0 0 auto',
-        '& img': {
-            width: 'auto',
-            maxHeight: '100%'
-        }
-    },
-    item_transition: {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        '& img': {
-            width: 'auto',
-            maxHeight: '100%'
-        }
-    },
-    item_version_regular_autoHeight: {
-        width: '100%',
-        height: 'unset'
-    },
-    item_version_transition_autoHeight: {
-        width: '100%',
-        height: 'unset'
-    },
-    item_itemSize_auto: {
-        width: 'auto',
-        height: 'auto'
-    },
-    background: {
-        width: '100%',
-        height: '100%',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover'
-    },
-    carousel: {
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        touchAction: 'none'
-    },
-    carousel_version_regular: {
-        transition: theme.methods.transitions.make('transform')
-    },
-    progress: {
-        position: 'absolute'
-    },
-    progress_orientation_horizontal: {
-        width: '100%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        bottom: '24px'
-    },
-    progress_orientation_vertical: {
-        height: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        right: '24px'
-    },
-    progress_item: {
-        width: '5px',
-        height: '5px',
-        backgroundColor: 'currentColor',
-        borderRadius: theme.methods.shape.radius.value(40, 'px'),
-        cursor: 'pointer',
-        transition: theme.methods.transitions.make('transform'),
-        '&:hover': {
-            transform: 'scale(1.4)'
-        }
-    },
-    progress_item_active: {
-        transform: 'scale(1.7)'
-    },
-    arrow: {
-        position: 'absolute !important'
-    },
-    arrow_previous: {},
-    arrow_previous_orientation_horizontal: {
-        top: '50%',
-        transform: 'translateY(-50%)',
-        left: '24px'
-    },
-    arrow_previous_orientation_vertical: {
-        left: '50%',
-        transform: 'translateX(-50%)',
-        top: '24px'
-    },
-    arrow_next: {},
-    arrow_next_orientation_horizontal: {
-        top: '50%',
-        transform: 'translateY(-50%)',
-        right: '24px'
-    },
-    arrow_next_orientation_vertical: {
-        left: '50%',
-        transform: 'translateX(-50%)',
-        bottom: '24px'
-    },
-    icon_previous_orientation_vertical: {
-        transform: 'rotate(90deg)'
-    },
-    icon_next_orientation_vertical: {
-        transform: 'rotate(90deg)'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialNavigateBeforeW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
+var _IconMaterialNavigateNextW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Fade = _interopRequireDefault(require("../Fade"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Transitions = _interopRequireDefault(require("../Transitions"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "version", "valueDefault", "value", "onChange", "id", "items", "orientation", "itemSize", "gap", "move", "moveValue", "moveItems", "moveBeyondEdge", "free", "swipe", "background", "index", "autoPlay", "autoHeight", "autoHeightDelay", "autoPlayInterval", "pauseOnHover", "round", "arrows", "mouseScroll", "momentum", "previousSub", "nextSub", "updateSub", "arrowsVisibility", "arrowHideOnStartEnd", "renderProgress", "renderArrowPrevious", "renderArrowNext", "progress", "progressVisibility", "start", "end", "noTransition", "onUpdatePosition", "onInit", "onUpdateItems", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "TransitionComponent", "ProgressTransitionComponent", "ArrowTransitionComponent", "ArrowPreviousTransitionComponent", "ArrowNextTransitionComponent", "IconButtonPrevious", "IconButtonNext", "IconPrevious", "IconNext", "ArrowProps", "ArrowPreviousProps", "ArrowNextProps", "CarouselProps", "TransitionsProps", "TransitionComponentProps", "ArrowTransitionComponentProps", "ArrowPreviousTransitionComponentProps", "ArrowNextTransitionComponentProps", "ProgressTransitionComponentProps", "ItemWrapperProps", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    width: '100%',
+    height: '540px',
+    overflow: 'hidden'
+  },
+  autoHeight: {
+    transition: theme.methods.transitions.make('height')
+  },
+  item: {
+    width: '100%',
+    height: '100%',
+    flex: '0 0 auto',
+    '& img': {
+      width: 'auto',
+      maxHeight: '100%'
     }
-}), { name: 'onesy-Carousel' });
-const Carousel = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCarousel) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const Transitions = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transitions) || Transitions_1.default; }, [theme]);
-    const { tonal = true, color = 'default', version: version_, valueDefault, value: value_, onChange, 
-    // id if it updates
-    // update items
-    id, 
-    // Array of string or object
-    // object having element as a string or element
-    // and a transition element
-    items: items_, orientation: orientation_, itemSize: itemSize_, gap: gap_, move: move_, moveValue: moveValue_, moveItems: moveItems_, moveBeyondEdge: moveBeyondEdge_, free: free_, swipe: swipe_, background: background_, index: index_, autoPlay: autoPlay_, autoHeight: autoHeight_, autoHeightDelay = theme.transitions.duration.rg + 14, autoPlayInterval = 4000, pauseOnHover = true, round: round_, arrows: arrows_, mouseScroll, momentum: momentum_, 
-    // OnesySubscription methods
-    previousSub, nextSub, updateSub, 
-    // on mobile visible
-    arrowsVisibility: arrowsVisibility_, arrowHideOnStartEnd: arrowHideOnStartEnd_, renderProgress, renderArrowPrevious, renderArrowNext, progress: progress_, 
-    // on mobile visible
-    progressVisibility: progressVisibility_, start: start_, end: end_, noTransition: noTransition_, onUpdatePosition: onUpdatePosition_, onInit, onUpdateItems, onBlur: onBlur_, onFocus: onFocus_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, TransitionComponent: TransitionComponent_ = Fade, ProgressTransitionComponent = Fade, ArrowTransitionComponent = Fade, ArrowPreviousTransitionComponent, ArrowNextTransitionComponent, IconButtonPrevious, IconButtonNext, IconPrevious = IconMaterialNavigateBeforeW100_1.default, IconNext = IconMaterialNavigateNextW100_1.default, ArrowProps, ArrowPreviousProps: ArrowPreviousProps_, ArrowNextProps: ArrowNextProps_, CarouselProps, TransitionsProps, TransitionComponentProps, ArrowTransitionComponentProps, ArrowPreviousTransitionComponentProps, ArrowNextTransitionComponentProps, ProgressTransitionComponentProps, ItemWrapperProps, Component = 'div', className, children } = props, other = __rest(props, ["tonal", "color", "version", "valueDefault", "value", "onChange", "id", "items", "orientation", "itemSize", "gap", "move", "moveValue", "moveItems", "moveBeyondEdge", "free", "swipe", "background", "index", "autoPlay", "autoHeight", "autoHeightDelay", "autoPlayInterval", "pauseOnHover", "round", "arrows", "mouseScroll", "momentum", "previousSub", "nextSub", "updateSub", "arrowsVisibility", "arrowHideOnStartEnd", "renderProgress", "renderArrowPrevious", "renderArrowNext", "progress", "progressVisibility", "start", "end", "noTransition", "onUpdatePosition", "onInit", "onUpdateItems", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "TransitionComponent", "ProgressTransitionComponent", "ArrowTransitionComponent", "ArrowPreviousTransitionComponent", "ArrowNextTransitionComponent", "IconButtonPrevious", "IconButtonNext", "IconPrevious", "IconNext", "ArrowProps", "ArrowPreviousProps", "ArrowNextProps", "CarouselProps", "TransitionsProps", "TransitionComponentProps", "ArrowTransitionComponentProps", "ArrowPreviousTransitionComponentProps", "ArrowNextTransitionComponentProps", "ProgressTransitionComponentProps", "ItemWrapperProps", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        item: react_1.default.useRef(undefined),
-        items: react_1.default.useRef(undefined),
-        value: react_1.default.useRef(undefined),
-        autoPlayTimeout: react_1.default.useRef(undefined),
-        autoPlay: react_1.default.useRef(undefined),
-        carousel: react_1.default.useRef(undefined),
-        mouseDown: react_1.default.useRef(undefined),
-        focus: react_1.default.useRef(undefined),
-        gap: react_1.default.useRef(undefined),
-        previousMouseEvent: react_1.default.useRef(undefined),
-        move: react_1.default.useRef(undefined),
-        moveValue: react_1.default.useRef(undefined),
-        moveItems: react_1.default.useRef(undefined),
-        moveBeyondEdge: react_1.default.useRef(undefined),
-        free: react_1.default.useRef(undefined),
-        swipe: react_1.default.useRef(undefined),
-        mouseDownPosition: react_1.default.useRef(undefined),
-        mouseDownStart: react_1.default.useRef(undefined),
-        mouseDownDuration: react_1.default.useRef(undefined),
-        orientation: react_1.default.useRef(undefined),
-        version: react_1.default.useRef(undefined),
-        itemSize: react_1.default.useRef(undefined),
-        itemsLength: react_1.default.useRef(undefined),
-        momentum: react_1.default.useRef(undefined),
-        round: react_1.default.useRef(undefined),
-        velocity: react_1.default.useRef(undefined),
-        momentumID: react_1.default.useRef(undefined),
-        width: react_1.default.useRef(undefined),
-        onInit: react_1.default.useRef(undefined),
-        ids: {
-            items: react_1.default.useId()
-        }
-    };
-    const keys = react_1.default.useMemo(() => {
-        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_1.is)('object', item))
-                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+  },
+  item_transition: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    '& img': {
+      width: 'auto',
+      maxHeight: '100%'
+    }
+  },
+  item_version_regular_autoHeight: {
+    width: '100%',
+    height: 'unset'
+  },
+  item_version_transition_autoHeight: {
+    width: '100%',
+    height: 'unset'
+  },
+  item_itemSize_auto: {
+    width: 'auto',
+    height: 'auto'
+  },
+  background: {
+    width: '100%',
+    height: '100%',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: 'cover'
+  },
+  carousel: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    touchAction: 'none'
+  },
+  carousel_version_regular: {
+    transition: theme.methods.transitions.make('transform')
+  },
+  progress: {
+    position: 'absolute'
+  },
+  progress_orientation_horizontal: {
+    width: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    bottom: '24px'
+  },
+  progress_orientation_vertical: {
+    height: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: '24px'
+  },
+  progress_item: {
+    width: '5px',
+    height: '5px',
+    backgroundColor: 'currentColor',
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    cursor: 'pointer',
+    transition: theme.methods.transitions.make('transform'),
+    '&:hover': {
+      transform: 'scale(1.4)'
+    }
+  },
+  progress_item_active: {
+    transform: 'scale(1.7)'
+  },
+  arrow: {
+    position: 'absolute !important'
+  },
+  arrow_previous: {},
+  arrow_previous_orientation_horizontal: {
+    top: '50%',
+    transform: 'translateY(-50%)',
+    left: '24px'
+  },
+  arrow_previous_orientation_vertical: {
+    left: '50%',
+    transform: 'translateX(-50%)',
+    top: '24px'
+  },
+  arrow_next: {},
+  arrow_next_orientation_horizontal: {
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: '24px'
+  },
+  arrow_next_orientation_vertical: {
+    left: '50%',
+    transform: 'translateX(-50%)',
+    bottom: '24px'
+  },
+  icon_previous_orientation_vertical: {
+    transform: 'rotate(90deg)'
+  },
+  icon_next_orientation_vertical: {
+    transform: 'rotate(90deg)'
+  }
+}), {
+  name: 'onesy-Carousel'
+});
+const Carousel = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _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 {
+      tonal = true,
+      color = 'default',
+      version: version_,
+      valueDefault,
+      value: value_,
+      onChange,
+      // id if it updates
+      // update items
+      id,
+      // Array of string or object
+      // object having element as a string or element
+      // and a transition element
+      items: items_,
+      orientation: orientation_,
+      itemSize: itemSize_,
+      gap: gap_,
+      move: move_,
+      moveValue: moveValue_,
+      moveItems: moveItems_,
+      moveBeyondEdge: moveBeyondEdge_,
+      free: free_,
+      swipe: swipe_,
+      background: background_,
+      index: index_,
+      autoPlay: autoPlay_,
+      autoHeight: autoHeight_,
+      autoHeightDelay = theme.transitions.duration.rg + 14,
+      autoPlayInterval = 4000,
+      pauseOnHover = true,
+      round: round_,
+      arrows: arrows_,
+      mouseScroll,
+      momentum: momentum_,
+      // OnesySubscription methods
+      previousSub,
+      nextSub,
+      updateSub,
+      // on mobile visible
+      arrowsVisibility: arrowsVisibility_,
+      arrowHideOnStartEnd: arrowHideOnStartEnd_,
+      renderProgress,
+      renderArrowPrevious,
+      renderArrowNext,
+      progress: progress_,
+      // on mobile visible
+      progressVisibility: progressVisibility_,
+      start: start_,
+      end: end_,
+      noTransition: noTransition_,
+      onUpdatePosition: onUpdatePosition_,
+      onInit,
+      onUpdateItems,
+      onBlur: onBlur_,
+      onFocus: onFocus_,
+      onMouseEnter: onMouseEnter_,
+      onMouseLeave: onMouseLeave_,
+      TransitionComponent: TransitionComponent_ = Fade,
+      ProgressTransitionComponent = Fade,
+      ArrowTransitionComponent = Fade,
+      ArrowPreviousTransitionComponent,
+      ArrowNextTransitionComponent,
+      IconButtonPrevious,
+      IconButtonNext,
+      IconPrevious = _IconMaterialNavigateBeforeW.default,
+      IconNext = _IconMaterialNavigateNextW.default,
+      ArrowProps,
+      ArrowPreviousProps: ArrowPreviousProps_,
+      ArrowNextProps: ArrowNextProps_,
+      CarouselProps,
+      TransitionsProps,
+      TransitionComponentProps,
+      ArrowTransitionComponentProps,
+      ArrowPreviousTransitionComponentProps,
+      ArrowNextTransitionComponentProps,
+      ProgressTransitionComponentProps,
+      ItemWrapperProps,
+      Component = 'div',
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(undefined),
+    item: _react.default.useRef(undefined),
+    items: _react.default.useRef(undefined),
+    value: _react.default.useRef(undefined),
+    autoPlayTimeout: _react.default.useRef(undefined),
+    autoPlay: _react.default.useRef(undefined),
+    carousel: _react.default.useRef(undefined),
+    mouseDown: _react.default.useRef(undefined),
+    focus: _react.default.useRef(undefined),
+    gap: _react.default.useRef(undefined),
+    previousMouseEvent: _react.default.useRef(undefined),
+    move: _react.default.useRef(undefined),
+    moveValue: _react.default.useRef(undefined),
+    moveItems: _react.default.useRef(undefined),
+    moveBeyondEdge: _react.default.useRef(undefined),
+    free: _react.default.useRef(undefined),
+    swipe: _react.default.useRef(undefined),
+    mouseDownPosition: _react.default.useRef(undefined),
+    mouseDownStart: _react.default.useRef(undefined),
+    mouseDownDuration: _react.default.useRef(undefined),
+    orientation: _react.default.useRef(undefined),
+    version: _react.default.useRef(undefined),
+    itemSize: _react.default.useRef(undefined),
+    itemsLength: _react.default.useRef(undefined),
+    momentum: _react.default.useRef(undefined),
+    round: _react.default.useRef(undefined),
+    velocity: _react.default.useRef(undefined),
+    momentumID: _react.default.useRef(undefined),
+    width: _react.default.useRef(undefined),
+    onInit: _react.default.useRef(undefined),
+    ids: {
+      items: _react.default.useId()
+    }
+  };
+  const keys = _react.default.useMemo(() => {
+    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));
+    });
+    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], {
+      element: refs.root.current
+    });
+  });
+  const version = (0, _utils2.valueBreakpoints)(version_, 'regular', breakpoints, theme);
+  const orientation = (0, _utils2.valueBreakpoints)(orientation_, 'horizontal', breakpoints, theme);
+  const itemSize = (0, _utils2.valueBreakpoints)(itemSize_, undefined, breakpoints, theme);
+  const gap = (0, _utils2.valueBreakpoints)(gap_, 4, breakpoints, theme);
+  const move = (0, _utils2.valueBreakpoints)(move_, true, breakpoints, theme);
+  const moveValue = (0, _utils2.valueBreakpoints)(moveValue_, undefined, breakpoints, theme);
+  const moveItems = (0, _utils2.valueBreakpoints)(moveItems_, undefined, breakpoints, theme);
+  const moveBeyondEdge = (0, _utils2.valueBreakpoints)(moveBeyondEdge_, true, breakpoints, theme);
+  const swipe = (0, _utils2.valueBreakpoints)(swipe_, true, breakpoints, theme);
+  const background = (0, _utils2.valueBreakpoints)(background_, true, breakpoints, theme);
+  const autoPlay = (0, _utils2.valueBreakpoints)(autoPlay_, undefined, breakpoints, theme);
+  const autoHeight = (0, _utils2.valueBreakpoints)(autoHeight_, undefined, breakpoints, theme);
+  const round = (0, _utils2.valueBreakpoints)(round_, true, breakpoints, theme);
+  const arrows = (0, _utils2.valueBreakpoints)(arrows_, true, breakpoints, theme);
+  const arrowsVisibility = (0, _utils2.valueBreakpoints)(arrowsVisibility_, 'hover', breakpoints, theme);
+  const arrowHideOnStartEnd = (0, _utils2.valueBreakpoints)(arrowHideOnStartEnd_, undefined, breakpoints, theme);
+  const progress = (0, _utils2.valueBreakpoints)(progress_, true, breakpoints, theme);
+  const progressVisibility = (0, _utils2.valueBreakpoints)(progressVisibility_, 'hover', breakpoints, theme);
+  const noTransition = (0, _utils2.valueBreakpoints)(noTransition_, undefined, breakpoints, theme);
+  let free = (0, _utils2.valueBreakpoints)(free_, undefined, breakpoints, theme);
+  let momentum = (0, _utils2.valueBreakpoints)(momentum_, undefined, breakpoints, theme);
+  if (momentum && version !== 'regular') momentum = false;
+  if (momentum) free = true;
+  if (free && momentum === undefined) momentum = true;
+  const [init, setInit] = _react.default.useState();
+  const [items, setItems] = _react.default.useState(items_ || []);
+  const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
+  const [hover, setHover] = _react.default.useState();
+  const [mouseDown, setMouseDown] = _react.default.useState();
+  const [focus, setFocus] = _react.default.useState();
+  const styles = {
+    carousel: {}
+  };
+  refs.items.current = items;
+  refs.value.current = value;
+  refs.gap.current = gap;
+  refs.mouseDown.current = mouseDown;
+  refs.focus.current = focus;
+  refs.move.current = move;
+  refs.moveValue.current = moveValue;
+  refs.moveItems.current = moveItems;
+  refs.moveBeyondEdge.current = moveBeyondEdge;
+  refs.free.current = free;
+  refs.swipe.current = swipe;
+  refs.orientation.current = orientation;
+  refs.version.current = version;
+  refs.itemSize.current = itemSize;
+  refs.momentum.current = momentum;
+  refs.round.current = round;
+  refs.onInit.current = onInit;
+  const {
+    scrollWidth,
+    scrollHeight
+  } = refs.carousel.current || {};
+  const {
+    width,
+    height
+  } = ((_refs$carousel$curren = refs.carousel.current) === null || _refs$carousel$curren === void 0 ? void 0 : _refs$carousel$curren.getBoundingClientRect()) || {};
+  refs.width.current = width;
+  refs.itemsLength.current = items.length;
+  if (itemSize === 'auto') {
+    if (moveValue) refs.itemsLength.current = orientation === 'horizontal' ? Math.ceil(scrollWidth / moveValue) : Math.ceil(scrollHeight / moveValue);
+    if (moveItems) refs.itemsLength.current = Math.ceil(items.length / (0, _utils.clamp)(moveItems, 1, items.length));
+  }
+  const updateValue = valueNew => {
+    setValue(valueNew);
+    if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+  };
+  const momentumClear = () => {
+    cancelAnimationFrame(refs.momentumID.current);
+  };
+  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 {
+      width: width_,
+      height: height_
+    } = refs.carousel.current.getBoundingClientRect();
+    const {
+      scrollWidth: scrollWidth_,
+      scrollHeight: scrollHeight_
+    } = refs.carousel.current;
+    if (refs.orientation.current === 'horizontal') {
+      const min = 0;
+      let max = (width_ + 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);
+      }
+      refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
+        index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))),
+        x: valueNew
+      });
+      if (valueNew <= min || valueNew >= 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
+        });
+        onUpdatePosition(refs.value.current);
+      }
+    }
+    if (refs.orientation.current === 'vertical') {
+      const min = 0;
+      let max = (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);
+      }
+      if (valueNew <= min || valueNew >= max) {
+        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
         });
-        return (0, utils_1.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_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+        onUpdatePosition(refs.value.current);
+      }
+    }
+    refs.velocity.current *= 0.95;
+    if (Math.abs(refs.velocity.current) > 0.5) refs.momentumID.current = requestAnimationFrame(momentumMethod);else {
+      var _refs$carousel$curren4;
+      // Done
+      (_refs$carousel$curren4 = refs.carousel.current) === null || _refs$carousel$curren4 === void 0 || _refs$carousel$curren4.style.removeProperty('transition');
+    }
+  };
+  const momentumStart = () => {
+    refs.momentumID.current = requestAnimationFrame(momentumMethod);
+  };
+  const onUpdatePosition = valuePosition_ => {
+    // Momentum
+    momentumClear();
+    const valueNew = _objectSpread(_objectSpread({}, valuePosition_), {}, {
+      additional: 0
     });
-    const version = (0, utils_2.valueBreakpoints)(version_, 'regular', breakpoints, theme);
-    const orientation = (0, utils_2.valueBreakpoints)(orientation_, 'horizontal', breakpoints, theme);
-    const itemSize = (0, utils_2.valueBreakpoints)(itemSize_, undefined, breakpoints, theme);
-    const gap = (0, utils_2.valueBreakpoints)(gap_, 4, breakpoints, theme);
-    const move = (0, utils_2.valueBreakpoints)(move_, true, breakpoints, theme);
-    const moveValue = (0, utils_2.valueBreakpoints)(moveValue_, undefined, breakpoints, theme);
-    const moveItems = (0, utils_2.valueBreakpoints)(moveItems_, undefined, breakpoints, theme);
-    const moveBeyondEdge = (0, utils_2.valueBreakpoints)(moveBeyondEdge_, true, breakpoints, theme);
-    const swipe = (0, utils_2.valueBreakpoints)(swipe_, true, breakpoints, theme);
-    const background = (0, utils_2.valueBreakpoints)(background_, true, breakpoints, theme);
-    const autoPlay = (0, utils_2.valueBreakpoints)(autoPlay_, undefined, breakpoints, theme);
-    const autoHeight = (0, utils_2.valueBreakpoints)(autoHeight_, undefined, breakpoints, theme);
-    const round = (0, utils_2.valueBreakpoints)(round_, true, breakpoints, theme);
-    const arrows = (0, utils_2.valueBreakpoints)(arrows_, true, breakpoints, theme);
-    const arrowsVisibility = (0, utils_2.valueBreakpoints)(arrowsVisibility_, 'hover', breakpoints, theme);
-    const arrowHideOnStartEnd = (0, utils_2.valueBreakpoints)(arrowHideOnStartEnd_, undefined, breakpoints, theme);
-    const progress = (0, utils_2.valueBreakpoints)(progress_, true, breakpoints, theme);
-    const progressVisibility = (0, utils_2.valueBreakpoints)(progressVisibility_, 'hover', breakpoints, theme);
-    const noTransition = (0, utils_2.valueBreakpoints)(noTransition_, undefined, breakpoints, theme);
-    let free = (0, utils_2.valueBreakpoints)(free_, undefined, breakpoints, theme);
-    let momentum = (0, utils_2.valueBreakpoints)(momentum_, undefined, breakpoints, theme);
-    if (momentum && version !== 'regular')
-        momentum = false;
-    if (momentum)
-        free = true;
-    if (free && momentum === undefined)
-        momentum = true;
-    const [init, setInit] = react_1.default.useState();
-    const [items, setItems] = react_1.default.useState(items_ || []);
-    const [value, setValue] = react_1.default.useState(valueDefault !== undefined ? valueDefault : value_);
-    const [hover, setHover] = react_1.default.useState();
-    const [mouseDown, setMouseDown] = react_1.default.useState();
-    const [focus, setFocus] = react_1.default.useState();
-    const styles = {
-        carousel: {}
-    };
-    refs.items.current = items;
-    refs.value.current = value;
-    refs.gap.current = gap;
-    refs.mouseDown.current = mouseDown;
-    refs.focus.current = focus;
-    refs.move.current = move;
-    refs.moveValue.current = moveValue;
-    refs.moveItems.current = moveItems;
-    refs.moveBeyondEdge.current = moveBeyondEdge;
-    refs.free.current = free;
-    refs.swipe.current = swipe;
-    refs.orientation.current = orientation;
-    refs.version.current = version;
-    refs.itemSize.current = itemSize;
-    refs.momentum.current = momentum;
-    refs.round.current = round;
-    refs.onInit.current = onInit;
-    const { scrollWidth, scrollHeight } = (refs.carousel.current || {});
-    const { width, height } = (((_a = refs.carousel.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {});
-    refs.width.current = width;
-    refs.itemsLength.current = items.length;
-    if (itemSize === 'auto') {
-        if (moveValue)
-            refs.itemsLength.current = orientation === 'horizontal' ? Math.ceil(scrollWidth / moveValue) : Math.ceil(scrollHeight / moveValue);
-        if (moveItems)
-            refs.itemsLength.current = Math.ceil(items.length / (0, utils_1.clamp)(moveItems, 1, items.length));
+    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 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 updateValue = (valueNew) => {
-        setValue(valueNew);
-        if ((0, utils_1.is)('function', onChange))
-            onChange(valueNew);
-    };
-    const momentumClear = () => {
-        cancelAnimationFrame(refs.momentumID.current);
-    };
-    const momentumMethod = () => {
-        var _a, _b, _c, _d, _e;
-        const valueNew = refs.orientation.current === 'horizontal' ? (((_a = refs.value.current) === null || _a === void 0 ? void 0 : _a.x) || 0) + refs.velocity.current : (((_b = refs.value.current) === null || _b === void 0 ? void 0 : _b.y) || 0) + refs.velocity.current;
-        const { width: width_, height: height_ } = refs.carousel.current.getBoundingClientRect();
-        const { scrollWidth: scrollWidth_, scrollHeight: scrollHeight_ } = refs.carousel.current;
-        if (refs.orientation.current === 'horizontal') {
-            const min = 0;
-            let max = ((width_ + (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));
-            }
-            refs.value.current = Object.assign(Object.assign({}, refs.value.current), { index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))), x: valueNew });
-            if (valueNew <= min || valueNew >= max) {
-                // Done
-                return (_c = refs.carousel.current) === null || _c === void 0 ? void 0 : _c.style.removeProperty('transition');
-            }
-            else {
-                refs.value.current = Object.assign(Object.assign({}, refs.value.current), { index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))), x: valueNew });
-                onUpdatePosition(refs.value.current);
-            }
-        }
-        if (refs.orientation.current === 'vertical') {
-            const min = 0;
-            let max = ((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));
-            }
-            if (valueNew <= min || valueNew >= max) {
-                // Done
-                return (_d = refs.carousel.current) === null || _d === void 0 ? void 0 : _d.style.removeProperty('transition');
-            }
-            else {
-                refs.value.current = Object.assign(Object.assign({}, refs.value.current), { index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))), y: valueNew });
-                onUpdatePosition(refs.value.current);
-            }
-        }
-        refs.velocity.current *= 0.95;
-        if (Math.abs(refs.velocity.current) > 0.5)
-            refs.momentumID.current = requestAnimationFrame(momentumMethod);
-        else {
-            // Done
-            (_e = refs.carousel.current) === null || _e === void 0 ? void 0 : _e.style.removeProperty('transition');
+    updateValue(valueNew);
+    if ((0, _utils.is)('function', onUpdatePosition_)) onUpdatePosition_(valueNew);
+  };
+  const onUpdate = _react.default.useCallback((to = 'next', values = refs.items.current) => {
+    var _refs$carousel$curren5, _refs$value$current3;
+    // Momentum
+    momentumClear();
+
+    // Momentum clean up
+    (_refs$carousel$curren5 = refs.carousel.current) === null || _refs$carousel$curren5 === void 0 || _refs$carousel$curren5.style.removeProperty('transition');
+    let index = (_refs$value$current3 = refs.value.current) === null || _refs$value$current3 === void 0 ? void 0 : _refs$value$current3.index;
+    if (index === undefined) index = 0;else if ((0, _utils.is)('number', to)) index = (0, _utils.clamp)(to, 0, refs.itemsLength.current - 1);else {
+      index = to === 'next' ? index + 1 : index - 1;
+      if (index < 0) index = refs.round.current ? refs.itemsLength.current - 1 : 0;
+      if (index > refs.itemsLength.current - 1) index = refs.round.current ? 0 : refs.itemsLength.current - 1;
+    }
+
+    // Regular
+    if (version === 'regular' && refs.carousel.current) {
+      if (refs.orientation.current === 'horizontal') {
+        if (refs.itemSize.current === 'auto' && refs.moveValue.current !== undefined) {
+          const x = index * refs.moveValue.current;
+          onUpdatePosition({
+            index,
+            x,
+            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;
+            onUpdatePosition({
+              index,
+              x,
+              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);
+          onUpdatePosition({
+            index,
+            x,
+            additional: 0
+          });
         }
-    };
-    const momentumStart = () => {
-        refs.momentumID.current = requestAnimationFrame(momentumMethod);
-    };
-    const onUpdatePosition = (valuePosition_) => {
-        var _a;
-        // Momentum
-        momentumClear();
-        const valueNew = Object.assign(Object.assign({}, 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 part = valuePosition - (((_a = refs.mouseDownPosition.current) === null || _a === void 0 ? void 0 : _a[refs.orientation.current === 'horizontal' ? 'x' : 'y']) || 0);
-            const additional = (part / max) * 100;
-            valueNew.additional = additional;
+      }
+      if (refs.orientation.current === 'vertical') {
+        if (refs.itemSize.current === 'auto' && refs.moveValue.current !== undefined) {
+          const y = index * refs.moveValue.current;
+          onUpdatePosition({
+            index,
+            y,
+            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;
+            onUpdatePosition({
+              index,
+              y,
+              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);
+          onUpdatePosition({
+            index,
+            y,
+            additional: 0
+          });
         }
-        updateValue(valueNew);
-        if ((0, utils_1.is)('function', onUpdatePosition_))
-            onUpdatePosition_(valueNew);
-    };
-    const onUpdate = react_1.default.useCallback((to = 'next', values = refs.items.current) => {
-        var _a, _b;
-        // Momentum
-        momentumClear();
-        // Momentum clean up
-        (_a = refs.carousel.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty('transition');
-        let index = (_b = refs.value.current) === null || _b === void 0 ? void 0 : _b.index;
-        if (index === undefined)
-            index = 0;
-        else if ((0, utils_1.is)('number', to))
-            index = (0, utils_1.clamp)(to, 0, refs.itemsLength.current - 1);
-        else {
-            index = to === 'next' ? index + 1 : index - 1;
-            if (index < 0)
-                index = refs.round.current ? refs.itemsLength.current - 1 : 0;
-            if (index > refs.itemsLength.current - 1)
-                index = refs.round.current ? 0 : refs.itemsLength.current - 1;
+      }
+    }
+
+    // Transition
+    const itemNew = values[index];
+    if (itemNew) {
+      if (version === 'transition') updateValue({
+        index,
+        element: itemNew
+      });
+      if (autoHeight) {
+        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`;
+          }, 1);
         }
-        // Regular
-        if (version === 'regular' && refs.carousel.current) {
-            if (refs.orientation.current === 'horizontal') {
-                if (refs.itemSize.current === 'auto' && refs.moveValue.current !== undefined) {
-                    const x = index * refs.moveValue.current;
-                    onUpdatePosition({
-                        index,
-                        x,
-                        additional: 0
-                    });
-                }
-                else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
-                    let item = index * (0, utils_1.clamp)(moveItems, 1, refs.items.current.length);
-                    item = refs.carousel.current.children[item];
-                    if (item) {
-                        const x = item.offsetLeft;
-                        onUpdatePosition({
-                            index,
-                            x,
-                            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));
-                    onUpdatePosition({
-                        index,
-                        x,
-                        additional: 0
-                    });
-                }
-            }
-            if (refs.orientation.current === 'vertical') {
-                if (refs.itemSize.current === 'auto' && refs.moveValue.current !== undefined) {
-                    const y = index * refs.moveValue.current;
-                    onUpdatePosition({
-                        index,
-                        y,
-                        additional: 0
-                    });
-                }
-                else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
-                    let item = index * (0, utils_1.clamp)(moveItems, 1, refs.items.current.length);
-                    item = refs.carousel.current.children[item];
-                    if (item) {
-                        const y = item.offsetTop;
-                        onUpdatePosition({
-                            index,
-                            y,
-                            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));
-                    onUpdatePosition({
-                        index,
-                        y,
-                        additional: 0
-                    });
-                }
-            }
+        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`;
+          }, autoHeightDelay);
         }
-        // Transition
-        const itemNew = values[index];
-        if (itemNew) {
-            if (version === 'transition')
-                updateValue({ index, element: itemNew });
-            if (autoHeight) {
-                if (version === 'regular') {
-                    setTimeout(() => {
-                        var _a, _b, _c;
-                        const height_ = (_c = (_b = refs.carousel.current.children[(_a = refs.value.current) === null || _a === void 0 ? void 0 : _a.index]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height;
-                        if (height_ > 0)
-                            refs.root.current.style.height = `${height_}px`;
-                    }, 1);
-                }
-                if (version === 'transition') {
-                    setTimeout(() => {
-                        var _a, _b;
-                        const height_ = (_b = (_a = refs.carousel.current.children[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
-                        if (height_ > 0)
-                            refs.root.current.style.height = `${height_}px`;
-                    }, autoHeightDelay);
-                }
-            }
+      }
+    }
+  }, [gap, version, autoHeight, autoHeightDelay]);
+  const onMouseUp = _react.default.useCallback(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');
+      refs.mouseDownDuration.current = new Date().getTime() - refs.mouseDownStart.current;
+      if (refs.free.current) {
+        setMouseDown(false);
+        if (refs.momentum.current) momentumStart();
+        refs.previousMouseEvent.current = undefined;
+        return;
+      }
+
+      // Swipe
+      // less than 140 ms
+      if (refs.swipe.current && refs.mouseDownDuration.current <= 140) {
+        var _refs$mouseDown$curre;
+        const {
+          clientX: previousClientX,
+          clientY: previousClientY
+        } = ((_refs$mouseDown$curre = refs.mouseDown.current.touches) === null || _refs$mouseDown$curre === void 0 ? void 0 : _refs$mouseDown$curre[0]) || refs.mouseDown.current;
+        const {
+          clientX,
+          clientY
+        } = refs.previousMouseEvent.current || event;
+        refs.previousMouseEvent.current = undefined;
+        setMouseDown(false);
+        if (refs.orientation.current === 'horizontal') {
+          var _refs$value$current5;
+          // As move already updates the index
+          // so move to that index
+          if (previousClientX < clientX) return onUpdate((_refs$value$current5 = refs.value.current) === null || _refs$value$current5 === void 0 ? void 0 : _refs$value$current5.index);
+          if (previousClientX > clientX) return onUpdate('next');
         }
-    }, [gap, version, autoHeight, autoHeightDelay]);
-    const onMouseUp = react_1.default.useCallback((event) => {
-        var _a, _b, _c, _d, _e, _f;
-        if (refs.mouseDown.current) {
-            if (refs.mouseDown.current && !refs.momentum.current)
-                (_a = refs.carousel.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty('transition');
-            refs.mouseDownDuration.current = new Date().getTime() - refs.mouseDownStart.current;
-            if (refs.free.current) {
-                setMouseDown(false);
-                if (refs.momentum.current)
-                    momentumStart();
-                refs.previousMouseEvent.current = undefined;
-                return;
-            }
-            // Swipe
-            // less than 140 ms
-            if (refs.swipe.current && refs.mouseDownDuration.current <= 140) {
-                const { clientX: previousClientX, clientY: previousClientY } = ((_b = refs.mouseDown.current.touches) === null || _b === void 0 ? void 0 : _b[0]) || refs.mouseDown.current;
-                const { clientX, clientY } = refs.previousMouseEvent.current || event;
-                refs.previousMouseEvent.current = undefined;
-                setMouseDown(false);
-                if (refs.orientation.current === 'horizontal') {
-                    // As move already updates the index
-                    // so move to that index
-                    if (previousClientX < clientX)
-                        return onUpdate((_c = refs.value.current) === null || _c === void 0 ? void 0 : _c.index);
-                    if (previousClientX > clientX)
-                        return onUpdate('next');
-                }
-                if (refs.orientation.current === 'vertical') {
-                    if (previousClientY < clientY)
-                        return onUpdate((_d = refs.value.current) === null || _d === void 0 ? void 0 : _d.index);
-                    if (previousClientY > clientY)
-                        return onUpdate('next');
-                }
-            }
-            // Move
-            if (refs.version.current === 'regular' && refs.value.current) {
-                if (refs.orientation.current === 'horizontal') {
-                    const { x } = refs.value.current;
-                    let index = refs.value.current.index;
-                    if (((_e = refs.mouseDownPosition.current) === null || _e === void 0 ? void 0 : _e.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);
-                }
-                if (refs.orientation.current === 'vertical') {
-                    const { y } = refs.value.current;
-                    let index = refs.value.current.index;
-                    if (((_f = refs.mouseDownPosition.current) === null || _f === void 0 ? void 0 : _f.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);
-                }
-            }
-            setMouseDown(false);
-            refs.previousMouseEvent.current = undefined;
+        if (refs.orientation.current === 'vertical') {
+          var _refs$value$current6;
+          if (previousClientY < clientY) return onUpdate((_refs$value$current6 = refs.value.current) === null || _refs$value$current6 === void 0 ? void 0 : _refs$value$current6.index);
+          if (previousClientY > clientY) return onUpdate('next');
         }
-    }, []);
-    react_1.default.useEffect(() => {
-        var _a;
-        const onKeyDown = (event) => {
-            if (refs.focus.current) {
-                switch (event.key) {
-                    case 'ArrowLeft':
-                        return onUpdate('previous');
-                    case 'ArrowRight':
-                        return onUpdate('next');
-                    default:
-                        break;
-                }
-            }
-        };
-        const onMove = (x_, y_) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (refs.version.current === 'regular' && refs.move.current && refs.mouseDown.current && refs.previousMouseEvent.current) {
-                const incX = x_ - refs.previousMouseEvent.current.clientX;
-                const incY = y_ - refs.previousMouseEvent.current.clientY;
-                const { width: width_, height: height_ } = refs.carousel.current.getBoundingClientRect();
-                const { scrollWidth: scrollWidth_, scrollHeight: scrollHeight_ } = refs.carousel.current;
-                if (refs.orientation.current === 'horizontal' && incX !== 0) {
-                    const min = 0;
-                    let max = ((width_ + (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));
-                    }
-                    let x = (((_a = refs.value.current) === null || _a === void 0 ? void 0 : _a.x) || 0) - incX;
-                    if (refs.free.current || !refs.moveBeyondEdge.current)
-                        x = (0, utils_1.clamp)(x, min, max);
-                    // Move beyond min, max
-                    if (x < min || x > max)
-                        x = (((_b = refs.value.current) === null || _b === void 0 ? void 0 : _b.x) || 0) - (incX / 1.7);
-                    refs.velocity.current = x - (((_c = refs.value.current) === null || _c === void 0 ? void 0 : _c.x) || 0);
-                    onUpdatePosition({
-                        index: Math.floor(x / (max / (refs.itemsLength.current - 1))),
-                        x
-                    });
-                }
-                if (refs.orientation.current === 'vertical' && incY !== 0) {
-                    const min = 0;
-                    let max = ((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));
-                    }
-                    let y = (((_d = refs.value.current) === null || _d === void 0 ? void 0 : _d.y) || 0) - incY;
-                    if (refs.free.current || !refs.moveBeyondEdge.current)
-                        y = (0, utils_1.clamp)(y, min, max);
-                    // Move beyond min, max
-                    if (y < min || y > max)
-                        y = (((_e = refs.value.current) === null || _e === void 0 ? void 0 : _e.y) || 0) - (incY / 1.7);
-                    refs.velocity.current = y - (((_f = refs.value.current) === null || _f === void 0 ? void 0 : _f.y) || 0);
-                    onUpdatePosition({
-                        index: Math.floor(y / (max / (refs.itemsLength.current - 1))),
-                        y
-                    });
-                }
-            }
-        };
-        // Mouse move
-        const onMouseMove = (event) => {
-            if (refs.mouseDown.current) {
-                const { clientY, clientX } = event;
-                onMove(clientX, clientY);
-                refs.previousMouseEvent.current = event;
-            }
-        };
-        // Touch move
-        const onTouchMove = (event) => {
-            if (refs.mouseDown.current) {
-                const { clientY, clientX } = event.touches[0];
-                onMove(clientX, clientY);
-                refs.previousMouseEvent.current = event;
-                // Normalize for use as a mouseDown value
-                refs.previousMouseEvent.current.clientY = clientY;
-                refs.previousMouseEvent.current.clientX = clientX;
-            }
-        };
-        const method = () => { var _a; return onUpdate((_a = refs.value.current) === null || _a === void 0 ? void 0 : _a.index); };
-        const observer = new ResizeObserver(method);
-        method();
-        observer.observe(refs.root.current);
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.addEventListener('keydown', onKeyDown);
-        rootDocument.addEventListener('mouseup', onMouseUp);
-        rootDocument.addEventListener('mousemove', onMouseMove);
-        rootDocument.addEventListener('touchend', onMouseUp);
-        rootDocument.addEventListener('touchmove', onTouchMove, { passive: true });
-        setInit(true);
-        if ((0, utils_1.is)('function', refs.onInit.current))
-            refs.onInit.current();
-        return () => {
-            observer.disconnect();
-            rootDocument.removeEventListener('keydown', onKeyDown);
-            rootDocument.removeEventListener('mousemove', onMouseMove);
-            rootDocument.removeEventListener('mouseup', onMouseUp);
-            rootDocument.removeEventListener('touchmove', onTouchMove);
-            rootDocument.removeEventListener('touchend', onMouseUp);
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (value_ !== undefined && !(0, utils_1.equalDeep)(value_, refs.value.current))
-            setValue((valuePrevious) => (Object.assign(Object.assign({}, valuePrevious), value_)));
-    }, [value_]);
-    react_1.default.useEffect(() => {
-        var _a;
-        if (init) {
-            if (index_ >= 0 && index_ <= refs.itemsLength.current && index_ !== ((_a = refs.value.current) === null || _a === void 0 ? void 0 : _a.index))
-                onUpdate(index_);
+      }
+
+      // Move
+      if (refs.version.current === 'regular' && refs.value.current) {
+        if (refs.orientation.current === 'horizontal') {
+          var _refs$mouseDownPositi2;
+          const {
+            x
+          } = 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);
         }
-    }, [index_]);
-    react_1.default.useEffect(() => {
-        if ((0, utils_1.is)('function', onUpdateItems))
-            onUpdateItems();
-    }, [items, onUpdateItems, theme.palette.light]);
-    react_1.default.useEffect(() => {
-        setItems(items_);
-    }, [id, items_]);
-    const onPrevious = () => onUpdate('previous');
-    const onNext = () => onUpdate('next');
-    const clear = () => {
-        clearTimeout(refs.autoPlayTimeout.current);
-        refs.autoPlay.current = false;
-    };
-    const start = () => {
-        clear();
-        if (!autoPlay || mouseDown || focus)
-            return;
-        if (pauseOnHover && hover)
-            return;
-        refs.autoPlayTimeout.current = setTimeout(onUpdate, autoPlayInterval);
-        refs.autoPlay.current = true;
-    };
-    // autoPlay
-    react_1.default.useEffect(() => {
-        start();
-    }, [items, value, autoPlay, autoPlayInterval]);
-    // OnesySubscription methods
-    react_1.default.useEffect(() => {
-        const method = (...args) => onUpdate(...args);
-        if ((0, utils_1.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.subscribe))
-            updateSub === null || updateSub === void 0 ? void 0 : updateSub.subscribe(method);
-        return () => {
-            if ((0, utils_1.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.unsubscribe))
-                updateSub === null || updateSub === void 0 ? void 0 : updateSub.unsubscribe(method);
-        };
-    }, [updateSub]);
-    react_1.default.useEffect(() => {
-        const method = (...args) => onUpdate(...args);
-        if ((0, utils_1.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.subscribe))
-            previousSub === null || previousSub === void 0 ? void 0 : previousSub.subscribe(method);
-        return () => {
-            if ((0, utils_1.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.unsubscribe))
-                previousSub === null || previousSub === void 0 ? void 0 : previousSub.unsubscribe(method);
-        };
-    }, [previousSub]);
-    react_1.default.useEffect(() => {
-        const method = (...args) => onUpdate(...args);
-        if ((0, utils_1.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.subscribe))
-            nextSub === null || nextSub === void 0 ? void 0 : nextSub.subscribe(method);
-        return () => {
-            if ((0, utils_1.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.unsubscribe))
-                nextSub === null || nextSub === void 0 ? void 0 : nextSub.unsubscribe(method);
-        };
-    }, [nextSub]);
-    react_1.default.useEffect(() => {
-        const values = (0, utils_1.unique)([
-            ...items_,
-            ...react_1.default.Children.toArray(children)
-        ])
-            .filter(Boolean);
-        const previous = refs.items.current.reduce((result, item) => result += (0, utils_1.is)('string', item) ? item : item === null || item === void 0 ? void 0 : item.key, '');
-        const updated = values.reduce((result, item) => result += (0, utils_1.is)('string', item) ? item : item === null || item === void 0 ? void 0 : item.key, '');
-        if (updated !== previous) {
-            onUpdate('next', values);
-            setItems(values);
+        if (refs.orientation.current === 'vertical') {
+          var _refs$mouseDownPositi3;
+          const {
+            y
+          } = 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);
         }
-    }, [items_, background, children]);
-    const onWheel = react_1.default.useCallback((0, utils_1.debounce)((event) => {
-        if ((refs.orientation.current === 'horizontal' && event.deltaX < 0) ||
-            (refs.orientation.current === 'vertical' && event.deltaY < 0)) {
-            event.preventDefault();
-            event.stopPropagation();
+      }
+      setMouseDown(false);
+      refs.previousMouseEvent.current = undefined;
+    }
+  }, []);
+  _react.default.useEffect(() => {
+    var _refs$root$current;
+    const onKeyDown = event => {
+      if (refs.focus.current) {
+        switch (event.key) {
+          case 'ArrowLeft':
             return onUpdate('previous');
-        }
-        if ((refs.orientation.current === 'horizontal' && event.deltaX > 0) ||
-            (refs.orientation.current === 'vertical' && event.deltaY > 0)) {
-            event.preventDefault();
-            event.stopPropagation();
+          case 'ArrowRight':
             return onUpdate('next');
+          default:
+            break;
         }
-    }, 40), []);
-    const onBlur = react_1.default.useCallback((event) => {
-        setFocus(false);
-        if ((0, utils_1.is)('function', onBlur_))
-            onBlur_(event);
-    }, []);
-    const onFocus = react_1.default.useCallback((event) => {
-        setFocus(true);
-        if ((0, utils_1.is)('function', onFocus_))
-            onFocus_(event);
-    }, []);
-    const onMouseDown = react_1.default.useCallback((event) => {
-        // Momentum
-        momentumClear();
-        setMouseDown(event);
-        refs.mouseDownPosition.current = Object.assign({}, refs.value.current);
-        refs.mouseDownStart.current = new Date().getTime();
-        refs.carousel.current.style.transition = 'none';
-    }, []);
-    const onMouseEnter = react_1.default.useCallback((event) => {
-        setHover(true);
-        if (refs.autoPlay.current)
-            clear();
-        if ((0, utils_1.is)('function', onMouseEnter_))
-            onMouseEnter_(event);
-    }, []);
-    const onMouseLeave = react_1.default.useCallback((event) => {
-        setFocus(false);
-        setHover(false);
-        if (!refs.autoPlay.current)
-            start();
-        if ((0, utils_1.is)('function', onMouseLeave_))
-            onMouseLeave_(event);
-    }, []);
-    const onArrowMouseEnter = react_1.default.useCallback((event) => {
-        setHover(true);
-        if (refs.autoPlay.current)
-            clear();
-    }, []);
-    const ArrowPreviousTransitionComponent_ = ArrowPreviousTransitionComponent || ArrowTransitionComponent;
-    const ArrowNextTransitionComponent_ = ArrowNextTransitionComponent || ArrowTransitionComponent;
-    let TransitionComponent = TransitionComponent_;
-    if (noTransition)
-        TransitionComponent = react_1.default.Fragment;
-    if (version === 'regular') {
-        styles.carousel.transform = `translate3d(${orientation === 'horizontal' ? `${-((value === null || value === void 0 ? void 0 : value.x) || 0)}px, 0` : `0, ${-((value === null || value === void 0 ? void 0 : value.y) || 0)}px`}, 0)`;
-    }
-    const indexActive = value === null || value === void 0 ? void 0 : value.index;
-    let arrowPreviousIn = focus || (arrowsVisibility === 'hover' && hover) || arrowsVisibility === 'visible';
-    let arrowNextIn = focus || (arrowsVisibility === 'hover' && hover) || arrowsVisibility === 'visible';
-    if (arrowHideOnStartEnd) {
-        const min = 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 (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;
+      }
+    };
+    const onMove = (x_, y_) => {
+      if (refs.version.current === 'regular' && refs.move.current && refs.mouseDown.current && refs.previousMouseEvent.current) {
+        const incX = x_ - refs.previousMouseEvent.current.clientX;
+        const incY = y_ - refs.previousMouseEvent.current.clientY;
+        const {
+          width: width_,
+          height: height_
+        } = refs.carousel.current.getBoundingClientRect();
+        const {
+          scrollWidth: scrollWidth_,
+          scrollHeight: scrollHeight_
+        } = 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);
+          if (refs.itemSize.current === 'auto') {
+            max = scrollWidth_ - scrollWidth_ / 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);
+
+          // 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);
+          onUpdatePosition({
+            index: Math.floor(x / (max / (refs.itemsLength.current - 1))),
+            x
+          });
         }
-        else {
-            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) + 1 !== undefined && (value === null || value === void 0 ? void 0 : value.y) >= maxY))
-                arrowNextIn = false;
+        if (refs.orientation.current === 'vertical' && incY !== 0) {
+          var _refs$value$current10, _refs$value$current11, _refs$value$current12;
+          const min = 0;
+          let max = (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);
+          }
+          let y = (((_refs$value$current10 = refs.value.current) === null || _refs$value$current10 === void 0 ? void 0 : _refs$value$current10.y) || 0) - incY;
+          if (refs.free.current || !refs.moveBeyondEdge.current) y = (0, _utils.clamp)(y, min, max);
+
+          // Move beyond min, max
+          if (y < min || y > max) y = (((_refs$value$current11 = refs.value.current) === null || _refs$value$current11 === void 0 ? void 0 : _refs$value$current11.y) || 0) - incY / 1.7;
+          refs.velocity.current = y - (((_refs$value$current12 = refs.value.current) === null || _refs$value$current12 === void 0 ? void 0 : _refs$value$current12.y) || 0);
+          onUpdatePosition({
+            index: Math.floor(y / (max / (refs.itemsLength.current - 1))),
+            y
+          });
         }
+      }
+    };
+
+    // Mouse move
+    const onMouseMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event;
+        onMove(clientX, clientY);
+        refs.previousMouseEvent.current = event;
+      }
+    };
+
+    // Touch move
+    const onTouchMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event.touches[0];
+        onMove(clientX, clientY);
+        refs.previousMouseEvent.current = event;
+
+        // Normalize for use as a mouseDown value
+        refs.previousMouseEvent.current.clientY = clientY;
+        refs.previousMouseEvent.current.clientX = clientX;
+      }
+    };
+    const method = () => {
+      var _refs$value$current13;
+      return onUpdate((_refs$value$current13 = refs.value.current) === null || _refs$value$current13 === void 0 ? void 0 : _refs$value$current13.index);
+    };
+    const observer = new ResizeObserver(method);
+    method();
+    observer.observe(refs.root.current);
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    rootDocument.addEventListener('keydown', onKeyDown);
+    rootDocument.addEventListener('mouseup', onMouseUp);
+    rootDocument.addEventListener('mousemove', onMouseMove);
+    rootDocument.addEventListener('touchend', onMouseUp);
+    rootDocument.addEventListener('touchmove', onTouchMove, {
+      passive: true
+    });
+    setInit(true);
+    if ((0, _utils.is)('function', refs.onInit.current)) refs.onInit.current();
+    return () => {
+      observer.disconnect();
+      rootDocument.removeEventListener('keydown', onKeyDown);
+      rootDocument.removeEventListener('mousemove', onMouseMove);
+      rootDocument.removeEventListener('mouseup', onMouseUp);
+      rootDocument.removeEventListener('touchmove', onTouchMove);
+      rootDocument.removeEventListener('touchend', onMouseUp);
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    if (value_ !== undefined && !(0, _utils.equalDeep)(value_, refs.value.current)) setValue(valuePrevious => _objectSpread(_objectSpread({}, valuePrevious), value_));
+  }, [value_]);
+  _react.default.useEffect(() => {
+    if (init) {
+      var _refs$value$current14;
+      if (index_ >= 0 && index_ <= refs.itemsLength.current && index_ !== ((_refs$value$current14 = refs.value.current) === null || _refs$value$current14 === void 0 ? void 0 : _refs$value$current14.index)) onUpdate(index_);
     }
-    const ArrowPreviousProps = Object.assign(Object.assign({}, ArrowPreviousProps_), { 'aria-label': 'Arrow previous', 'aria-controls': refs.ids.items });
-    const ArrowNextProps = Object.assign(Object.assign({}, ArrowNextProps_), { 'aria-label': 'Arrow next', 'aria-controls': refs.ids.items });
-    const resolveItem = (Item) => {
-        if (!Item)
-            return null;
-        if ((0, utils_1.is)('string', Item)) {
-            if (background)
-                return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Carousel', theme) && [
-                            'onesy-Carousel-background'
-                        ],
-                        classes.background
-                    ]), style: {
-                        backgroundImage: `url(${Item})`
-                    } }));
-            return ((0, jsx_runtime_1.jsx)("img", { src: Item, alt: '' }));
-        }
-        if ((0, utils_1.is)('function', Item))
-            return Item(refs.value.current);
-        if (Item === null || Item === void 0 ? void 0 : Item.element)
-            return react_1.default.cloneElement(Item.element);
-        return react_1.default.cloneElement(Item);
+  }, [index_]);
+  _react.default.useEffect(() => {
+    if ((0, _utils.is)('function', onUpdateItems)) onUpdateItems();
+  }, [items, onUpdateItems, theme.palette.light]);
+  _react.default.useEffect(() => {
+    setItems(items_);
+  }, [id, items_]);
+  const onPrevious = () => onUpdate('previous');
+  const onNext = () => onUpdate('next');
+  const clear = () => {
+    clearTimeout(refs.autoPlayTimeout.current);
+    refs.autoPlay.current = false;
+  };
+  const start = () => {
+    clear();
+    if (!autoPlay || mouseDown || focus) return;
+    if (pauseOnHover && hover) return;
+    refs.autoPlayTimeout.current = setTimeout(onUpdate, autoPlayInterval);
+    refs.autoPlay.current = true;
+  };
+
+  // autoPlay
+  _react.default.useEffect(() => {
+    start();
+  }, [items, value, autoPlay, autoPlayInterval]);
+
+  // 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);
+    return () => {
+      if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.unsubscribe)) updateSub === null || updateSub === void 0 || updateSub.unsubscribe(method);
+    };
+  }, [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);
+    return () => {
+      if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.unsubscribe)) previousSub === null || previousSub === void 0 || previousSub.unsubscribe(method);
     };
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tabIndex: '0', role: 'region', "aria-roledescription": 'carousel', tonal: tonal, color: color, onFocus: onFocus, onBlur: onBlur, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Carousel', theme) && [
-                'onesy-Carousel-root'
-            ],
-            className,
-            classes.root,
-            autoHeight && classes.autoHeight
-        ]) }, other, { children: [start_, version === 'regular' && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: refs.carousel, gap: gap, direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column', align: 'center', justify: 'flex-start', onWheel: mouseScroll && onWheel, onMouseDown: onMouseDown, onTouchStart: onMouseDown, onMouseUp: onMouseUp, onTouchEnd: onMouseUp, id: refs.ids.items, "aria-live": 'polite' }, CarouselProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Carousel', theme) && [
-                        'onesy-Carousel-carousel'
-                    ],
-                    CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.className,
-                    classes.carousel,
-                    classes[`carousel_version_${version}`]
-                ]), style: Object.assign(Object.assign({}, styles.carousel), CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.style) }, { children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'column', align: 'center', justify: 'center', role: 'group', "aria-roledescription": 'slide', "aria-label": `${index + 1} out of ${refs.itemsLength.current}` }, ItemWrapperProps, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.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}`]
-                    ]) }, { children: resolveItem(item) }), index))) }))), version === 'transition' && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: refs.carousel, gap: 0.5, direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column', align: 'center', justify: 'center', onWheel: mouseScroll && onWheel, onMouseDown: onMouseDown, onTouchStart: onMouseDown, onMouseUp: onMouseUp, onTouchEnd: onMouseUp, id: refs.ids.items, "aria-live": 'polite' }, CarouselProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Carousel', theme) && [
-                        'onesy-Carousel-carousel'
-                    ],
-                    CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.className,
-                    classes.carousel
-                ]) }, { children: value && ((0, jsx_runtime_1.jsx)(Transitions, Object.assign({ mode: 'in-out-follow', switch: true }, TransitionsProps, { children: (0, jsx_runtime_1.jsx)(TransitionComponent, Object.assign({}, TransitionComponentProps, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: refs.item, gap: 0, direction: 'column', align: 'center', justify: 'center', role: 'group', "aria-roledescription": 'slide', "aria-label": `${value.index + 1} out of ${refs.itemsLength.current}`, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Carousel', theme) && [
-                                    'onesy-Carousel-item-transition'
-                                ],
-                                classes.item_transition,
-                                autoHeight && classes[`item_version_${version}_autoHeight`],
-                            ]) }, { children: resolveItem(value.element) })) }), indexActive) }))) }))), progress && ((0, jsx_runtime_1.jsx)(ProgressTransitionComponent, Object.assign({ in: focus || (progressVisibility === 'hover' && hover) || progressVisibility === 'visible' }, ProgressTransitionComponentProps, { children: (0, utils_1.is)('function', renderProgress) ?
-                    renderProgress(onUpdate) :
-                    (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column', align: 'center', justify: 'center', wrap: 'wrap', className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('Carousel', theme) && [
-                                'onesy-Carousel-progress'
-                            ],
-                            classes.progress,
-                            classes[`progress_orientation_${orientation}`]
-                        ]) }, { children: Array.from({ length: refs.itemsLength.current }).map((item, index) => ((0, jsx_runtime_1.jsx)("span", { onClick: () => onUpdate(index), className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Carousel', theme) && [
-                                    'onesy-Carousel-progress-item',
-                                    indexActive === index && 'onesy-Carousel-progress-item-active'
-                                ],
-                                classes.progress_item,
-                                indexActive === index && classes.progress_item_active
-                            ]) }, index))) })) }))), arrows && ((0, jsx_runtime_1.jsx)(ArrowPreviousTransitionComponent_, Object.assign({ in: arrowPreviousIn }, ArrowTransitionComponentProps, ArrowPreviousTransitionComponentProps, { children: ((0, utils_1.is)('function', renderArrowPrevious) ?
-                    renderArrowPrevious(() => onUpdate('previous')) :
-                    IconButtonPrevious ?
-                        react_1.default.cloneElement(IconButtonPrevious, Object.assign(Object.assign(Object.assign({ tonal,
-                            color, onClick: onPrevious, onMouseEnter: onArrowMouseEnter }, ArrowProps), ArrowPreviousProps), { disabled: !round && indexActive === 0, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Carousel', theme) && [
-                                    'onesy-Carousel-arrow',
-                                    'onesy-Carousel-arrow-previous'
-                                ],
-                                ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className,
-                                ArrowPreviousProps === null || ArrowPreviousProps === void 0 ? void 0 : ArrowPreviousProps.className,
-                                classes.arrow,
-                                classes.arrow_previous,
-                                classes[`arrow_previous_orientation_${orientation}`]
-                            ]) })) :
-                        (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, version: 'filled', onClick: onPrevious, onMouseEnter: onArrowMouseEnter }, ArrowProps, ArrowPreviousProps, { disabled: !round && indexActive === 0, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Carousel', theme) && [
-                                    'onesy-Carousel-arrow',
-                                    'onesy-Carousel-arrow-previous'
-                                ],
-                                ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className,
-                                ArrowPreviousProps === null || ArrowPreviousProps === void 0 ? void 0 : ArrowPreviousProps.className,
-                                classes.arrow,
-                                classes.arrow_previous,
-                                classes[`arrow_previous_orientation_${orientation}`]
-                            ]) }, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { noRtl: true, className: (0, style_react_1.classNames)([
-                                    classes[`icon_previous_orientation_${orientation}`]
-                                ]) }) }))) }))), arrows && ((0, jsx_runtime_1.jsx)(ArrowNextTransitionComponent_, Object.assign({ in: arrowNextIn }, ArrowTransitionComponentProps, ArrowNextTransitionComponentProps, { children: ((0, utils_1.is)('function', renderArrowNext) ?
-                    renderArrowNext(() => onUpdate('next')) : IconButtonNext ?
-                    react_1.default.cloneElement(IconButtonNext, Object.assign(Object.assign(Object.assign({ tonal,
-                        color, onClick: onNext, onMouseEnter: onArrowMouseEnter }, ArrowProps), ArrowNextProps), { disabled: !round && indexActive === items.length - 1, className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('Carousel', theme) && [
-                                'onesy-Carousel-arrow',
-                                'onesy-Carousel-arrow-next'
-                            ],
-                            ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className,
-                            ArrowNextProps === null || ArrowNextProps === void 0 ? void 0 : ArrowNextProps.className,
-                            classes.arrow,
-                            classes.arrow_next,
-                            classes[`arrow_next_orientation_${orientation}`]
-                        ]) })) :
-                    (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, version: 'filled', onClick: onNext, onMouseEnter: onArrowMouseEnter }, ArrowProps, ArrowNextProps, { disabled: !round && indexActive === items.length - 1, className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('Carousel', theme) && [
-                                'onesy-Carousel-arrow',
-                                'onesy-Carousel-arrow-next'
-                            ],
-                            ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className,
-                            ArrowNextProps === null || ArrowNextProps === void 0 ? void 0 : ArrowNextProps.className,
-                            classes.arrow,
-                            classes.arrow_next,
-                            classes[`arrow_next_orientation_${orientation}`]
-                        ]) }, { children: (0, jsx_runtime_1.jsx)(IconNext, { noRtl: true, className: (0, style_react_1.classNames)([
-                                classes[`icon_next_orientation_${orientation}`]
-                            ]) }) }))) }))), end_] })));
+  }, [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);
+    return () => {
+      if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.unsubscribe)) nextSub === null || nextSub === void 0 || nextSub.unsubscribe(method);
+    };
+  }, [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, '');
+    if (updated !== previous) {
+      onUpdate('next', values);
+      setItems(values);
+    }
+  }, [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();
+      return onUpdate('previous');
+    }
+    if (refs.orientation.current === 'horizontal' && event.deltaX > 0 || refs.orientation.current === 'vertical' && event.deltaY > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      return onUpdate('next');
+    }
+  }, 40), []);
+  const onBlur = _react.default.useCallback(event => {
+    setFocus(false);
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
+  }, []);
+  const onFocus = _react.default.useCallback(event => {
+    setFocus(true);
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
+  }, []);
+  const onMouseDown = _react.default.useCallback(event => {
+    // Momentum
+    momentumClear();
+    setMouseDown(event);
+    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 => {
+    setHover(true);
+    if (refs.autoPlay.current) clear();
+    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
+  }, []);
+  const onMouseLeave = _react.default.useCallback(event => {
+    setFocus(false);
+    setHover(false);
+    if (!refs.autoPlay.current) start();
+    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
+  }, []);
+  const onArrowMouseEnter = _react.default.useCallback(event => {
+    setHover(true);
+    if (refs.autoPlay.current) clear();
+  }, []);
+  const ArrowPreviousTransitionComponent_ = ArrowPreviousTransitionComponent || ArrowTransitionComponent;
+  const ArrowNextTransitionComponent_ = ArrowNextTransitionComponent || ArrowTransitionComponent;
+  let TransitionComponent = TransitionComponent_;
+  if (noTransition) TransitionComponent = _react.default.Fragment;
+  if (version === 'regular') {
+    styles.carousel.transform = `translate3d(${orientation === 'horizontal' ? `${-((value === null || value === void 0 ? void 0 : value.x) || 0)}px, 0` : `0, ${-((value === null || value === void 0 ? void 0 : value.y) || 0)}px`}, 0)`;
+  }
+  const indexActive = value === null || value === void 0 ? void 0 : value.index;
+  let arrowPreviousIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
+  let arrowNextIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
+  if (arrowHideOnStartEnd) {
+    const min = 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 (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 {
+      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) + 1 !== undefined && (value === null || value === void 0 ? void 0 : value.y) >= maxY) arrowNextIn = false;
+    }
+  }
+  const ArrowPreviousProps = _objectSpread(_objectSpread({}, ArrowPreviousProps_), {}, {
+    'aria-label': 'Arrow previous',
+    'aria-controls': refs.ids.items
+  });
+  const ArrowNextProps = _objectSpread(_objectSpread({}, ArrowNextProps_), {}, {
+    'aria-label': 'Arrow next',
+    'aria-controls': refs.ids.items
+  });
+  const resolveItem = Item => {
+    if (!Item) return null;
+    if ((0, _utils.is)('string', Item)) {
+      if (background) return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-background'], classes.background]),
+        style: {
+          backgroundImage: `url(${Item})`
+        }
+      });
+      return /*#__PURE__*/_react.default.createElement("img", {
+        src: Item,
+        alt: ""
+      });
+    }
+    if ((0, _utils.is)('function', Item)) return Item(refs.value.current);
+    if (Item !== null && Item !== void 0 && Item.element) return /*#__PURE__*/_react.default.cloneElement(Item.element);
+    return /*#__PURE__*/_react.default.cloneElement(Item);
+  };
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tabIndex: "0",
+    role: "region",
+    "aria-roledescription": "carousel",
+    tonal: tonal,
+    color: color,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-root'], className, classes.root, autoHeight && classes.autoHeight])
+  }, other), start_, version === 'regular' && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: refs.carousel,
+    gap: gap,
+    direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
+    align: "center",
+    justify: "flex-start",
+    onWheel: mouseScroll && onWheel,
+    onMouseDown: onMouseDown,
+    onTouchStart: onMouseDown,
+    onMouseUp: onMouseUp,
+    onTouchEnd: onMouseUp,
+    id: refs.ids.items,
+    "aria-live": "polite"
+  }, 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,
+    gap: 0,
+    direction: "column",
+    align: "center",
+    justify: "center",
+    role: "group",
+    "aria-roledescription": "slide",
+    "aria-label": `${index + 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)({
+    ref: refs.carousel,
+    gap: 0.5,
+    direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
+    align: "center",
+    justify: "center",
+    onWheel: mouseScroll && onWheel,
+    onMouseDown: onMouseDown,
+    onTouchStart: onMouseDown,
+    onMouseUp: onMouseUp,
+    onTouchEnd: onMouseUp,
+    id: refs.ids.items,
+    "aria-live": "polite"
+  }, CarouselProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-carousel'], CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.className, classes.carousel])
+  }), value && /*#__PURE__*/_react.default.createElement(Transitions, (0, _extends2.default)({
+    mode: "in-out-follow",
+    switch: true
+  }, TransitionsProps), /*#__PURE__*/_react.default.createElement(TransitionComponent, (0, _extends2.default)({
+    key: indexActive
+  }, TransitionComponentProps), /*#__PURE__*/_react.default.createElement(Line, {
+    ref: refs.item,
+    gap: 0,
+    direction: "column",
+    align: "center",
+    justify: "center",
+    role: "group",
+    "aria-roledescription": "slide",
+    "aria-label": `${value.index + 1} out of ${refs.itemsLength.current}`,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-item-transition'], classes.item_transition, autoHeight && classes[`item_version_${version}_autoHeight`]])
+  }, resolveItem(value.element))))), progress && /*#__PURE__*/_react.default.createElement(ProgressTransitionComponent, (0, _extends2.default)({
+    in: focus || progressVisibility === 'hover' && hover || progressVisibility === 'visible'
+  }, ProgressTransitionComponentProps), (0, _utils.is)('function', renderProgress) ? renderProgress(onUpdate) : /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
+    align: "center",
+    justify: "center",
+    wrap: "wrap",
+    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])
+  })))), 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({
+    tonal,
+    color,
+    onClick: onPrevious,
+    onMouseEnter: onArrowMouseEnter
+  }, ArrowProps), ArrowPreviousProps), {}, {
+    disabled: !round && indexActive === 0,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-arrow', 'onesy-Carousel-arrow-previous'], ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className, ArrowPreviousProps === null || ArrowPreviousProps === void 0 ? void 0 : ArrowPreviousProps.className, classes.arrow, classes.arrow_previous, classes[`arrow_previous_orientation_${orientation}`]])
+  })) : /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    tonal: tonal,
+    color: color,
+    version: "filled",
+    onClick: onPrevious,
+    onMouseEnter: onArrowMouseEnter
+  }, ArrowProps, ArrowPreviousProps, {
+    disabled: !round && indexActive === 0,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-arrow', 'onesy-Carousel-arrow-previous'], ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className, ArrowPreviousProps === null || ArrowPreviousProps === void 0 ? void 0 : ArrowPreviousProps.className, classes.arrow, classes.arrow_previous, classes[`arrow_previous_orientation_${orientation}`]])
+  }), /*#__PURE__*/_react.default.createElement(IconPrevious, {
+    noRtl: true,
+    className: (0, _styleReact.classNames)([classes[`icon_previous_orientation_${orientation}`]])
+  }))), arrows && /*#__PURE__*/_react.default.createElement(ArrowNextTransitionComponent_, (0, _extends2.default)({
+    in: arrowNextIn
+  }, ArrowTransitionComponentProps, ArrowNextTransitionComponentProps), (0, _utils.is)('function', renderArrowNext) ? renderArrowNext(() => onUpdate('next')) : IconButtonNext ? /*#__PURE__*/_react.default.cloneElement(IconButtonNext, _objectSpread(_objectSpread(_objectSpread({
+    tonal,
+    color,
+    onClick: onNext,
+    onMouseEnter: onArrowMouseEnter
+  }, ArrowProps), ArrowNextProps), {}, {
+    disabled: !round && indexActive === items.length - 1,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-arrow', 'onesy-Carousel-arrow-next'], ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className, ArrowNextProps === null || ArrowNextProps === void 0 ? void 0 : ArrowNextProps.className, classes.arrow, classes.arrow_next, classes[`arrow_next_orientation_${orientation}`]])
+  })) : /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    tonal: tonal,
+    color: color,
+    version: "filled",
+    onClick: onNext,
+    onMouseEnter: onArrowMouseEnter
+  }, ArrowProps, ArrowNextProps, {
+    disabled: !round && indexActive === items.length - 1,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-arrow', 'onesy-Carousel-arrow-next'], ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.className, ArrowNextProps === null || ArrowNextProps === void 0 ? void 0 : ArrowNextProps.className, classes.arrow, classes.arrow_next, classes[`arrow_next_orientation_${orientation}`]])
+  }), /*#__PURE__*/_react.default.createElement(IconNext, {
+    noRtl: true,
+    className: (0, _styleReact.classNames)([classes[`icon_next_orientation_${orientation}`]])
+  }))), end_);
 });
 Carousel.displayName = 'onesy-Carousel';
-exports.default = Carousel;
+var _default = exports.default = Carousel;