@onesy/ui-react 1.0.0

package/Carousel/Carousel.js

@@ -0,0 +1,935 @@
+"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("@amaui/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
+const IconMaterialNavigateNextW100_1 = __importDefault(require("@amaui/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)'
+    }
+}), { 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));
+        });
+        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 });
+    });
+    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));
+    }
+    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');
+        }
+    };
+    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;
+        }
+        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;
+        }
+        // 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
+                    });
+                }
+            }
+        }
+        // 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_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;
+        }
+    }, []);
+    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_);
+        }
+    }, [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);
+        }
+    }, [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();
+            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_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;
+        }
+        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 = 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);
+    };
+    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_] })));
+});
+Carousel.displayName = 'onesy-Carousel';
+exports.default = Carousel;