"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
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");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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%'
    }
  },
  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 = props_ => {
  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _refs$carousel$curren;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCarousel) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
  const Fade = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Fade) || _Fade.default;
  const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
  const Transitions = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Transitions) || _Transitions.default;
  const {
      ref,
      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_0 => result.push(key_0));
    });
    return (0, _utils.unique)(result);
  }, [version_, orientation_, itemSize_, gap_, move_, moveValue_, moveItems_, moveBeyondEdge_, swipe_, background_, autoPlay_, autoHeight_, round_, arrows_, arrowsVisibility_, arrowHideOnStartEnd_, progress_, progressVisibility_, noTransition_]);
  const breakpoints = {};
  keys.forEach(key_1 => {
    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
      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_0 = refs.orientation.current === 'horizontal' ? (((_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current.x) || 0) + refs.velocity.current : (((_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.y) || 0) + refs.velocity.current;
    const {
      width: width_,
      height: height_
    } = 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_0 / (max / (refs.itemsLength.current - 1))),
        x: valueNew_0
      });
      if (valueNew_0 <= min || valueNew_0 >= max) {
        var _refs$carousel$curren2;
        // Done
        return (_refs$carousel$curren2 = refs.carousel.current) === null || _refs$carousel$curren2 === void 0 ? void 0 : _refs$carousel$curren2.style.removeProperty('transition');
      } else {
        refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
          index: Math.floor(valueNew_0 / (max / (refs.itemsLength.current - 1))),
          x: valueNew_0
        });
        onUpdatePosition(refs.value.current);
      }
    }
    if (refs.orientation.current === 'vertical') {
      const min_0 = 0;
      let max_0 = (height_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
      if (refs.itemSize.current === 'auto') {
        max_0 = scrollHeight_ - scrollHeight_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
      }
      if (valueNew_0 <= min_0 || valueNew_0 >= max_0) {
        var _refs$carousel$curren3;
        // Done
        return (_refs$carousel$curren3 = refs.carousel.current) === null || _refs$carousel$curren3 === void 0 ? void 0 : _refs$carousel$curren3.style.removeProperty('transition');
      } else {
        refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
          index: Math.floor(valueNew_0 / (max_0 / (refs.itemsLength.current - 1))),
          y: valueNew_0
        });
        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_1 = _objectSpread(_objectSpread({}, valuePosition_), {}, {
      additional: 0
    });
    if (valuePosition_.additional === undefined && refs.version.current === 'regular' && refs.itemSize.current !== 'auto') {
      var _refs$mouseDownPositi;
      const max_1 = refs.width.current / 2;
      const valuePosition = valueNew_1[refs.orientation.current === 'horizontal' ? 'x' : 'y'];
      const part = valuePosition - (((_refs$mouseDownPositi = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi === void 0 ? void 0 : _refs$mouseDownPositi[refs.orientation.current === 'horizontal' ? 'x' : 'y']) || 0);
      const additional = part / max_1 * 100;
      valueNew_1.additional = additional;
    }
    updateValue(valueNew_1);
    if ((0, _utils.is)('function', onUpdatePosition_)) onUpdatePosition_(valueNew_1);
  };
  const onUpdate = (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_0 = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
          item_0 = refs.carousel.current.children[item_0];
          if (item_0) {
            const x_0 = item_0.offsetLeft;
            onUpdatePosition({
              index,
              x: x_0,
              additional: 0
            });
          }
        } else {
          const width__0 = refs.carousel.current.getBoundingClientRect().width;
          const scrollWidth__0 = refs.carousel.current.scrollWidth;
          const part_0 = refs.itemSize.current === 'auto' ? scrollWidth__0 / refs.itemsLength.current : width__0;
          const x_1 = index * part_0 + index * (gap * theme.space.unit);
          onUpdatePosition({
            index,
            x: x_1,
            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_1 = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
          item_1 = refs.carousel.current.children[item_1];
          if (item_1) {
            const y_0 = item_1.offsetTop;
            onUpdatePosition({
              index,
              y: y_0,
              additional: 0
            });
          }
        } else {
          const height__0 = refs.carousel.current.getBoundingClientRect().height;
          const scrollHeight__0 = refs.carousel.current.scrollHeight;
          const part_1 = refs.itemSize.current === 'auto' ? scrollHeight__0 / refs.itemsLength.current : height__0;
          const y_1 = index * part_1 + index * (gap * theme.space.unit);
          onUpdatePosition({
            index,
            y: y_1,
            additional: 0
          });
        }
      }
    }

    // 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__1 = (_refs$carousel$curren6 = refs.carousel.current.children[(_refs$value$current4 = refs.value.current) === null || _refs$value$current4 === void 0 ? void 0 : _refs$value$current4.index]) === null || _refs$carousel$curren6 === void 0 || (_refs$carousel$curren6 = _refs$carousel$curren6.children[0]) === null || _refs$carousel$curren6 === void 0 ? void 0 : _refs$carousel$curren6.getBoundingClientRect().height;
            if (height__1 > 0) refs.root.current.style.height = `${height__1}px`;
          }, 1);
        }
        if (version === 'transition') {
          setTimeout(() => {
            var _refs$carousel$curren7;
            const height__2 = (_refs$carousel$curren7 = refs.carousel.current.children[0]) === null || _refs$carousel$curren7 === void 0 || (_refs$carousel$curren7 = _refs$carousel$curren7.children[0]) === null || _refs$carousel$curren7 === void 0 ? void 0 : _refs$carousel$curren7.getBoundingClientRect().height;
            if (height__2 > 0) refs.root.current.style.height = `${height__2}px`;
          }, autoHeightDelay);
        }
      }
    }
  };
  const onMouseUp = event => {
    if (refs.mouseDown.current) {
      var _refs$carousel$curren8;
      if (refs.mouseDown.current && !refs.momentum.current) (_refs$carousel$curren8 = refs.carousel.current) === null || _refs$carousel$curren8 === void 0 || _refs$carousel$curren8.style.removeProperty('transition');
      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');
        }
        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');
        }
      }

      // Move
      if (refs.version.current === 'regular' && refs.value.current) {
        if (refs.orientation.current === 'horizontal') {
          var _refs$mouseDownPositi2;
          const {
            x: x_2
          } = refs.value.current;
          let index_0 = refs.value.current.index;
          if (((_refs$mouseDownPositi2 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi2 === void 0 ? void 0 : _refs$mouseDownPositi2.x) > x_2) index_0++;
          const width__1 = refs.carousel.current.getBoundingClientRect().width;
          const original = index_0 * width__1 + index_0 * (gap * theme.space.unit);
          const threshold = width__1 / 4;
          const moved = Math.abs(original - x_2);
          if (x_2 > 0 && x_2 < original && moved >= threshold) onUpdate(index_0 - 1);else if (x_2 > original && moved >= threshold) onUpdate(index_0 + 1);else onUpdate(index_0);
        }
        if (refs.orientation.current === 'vertical') {
          var _refs$mouseDownPositi3;
          const {
            y: y_2
          } = refs.value.current;
          let index_1 = refs.value.current.index;
          if (((_refs$mouseDownPositi3 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi3 === void 0 ? void 0 : _refs$mouseDownPositi3.y) > y_2) index_1++;
          const height__3 = refs.carousel.current.getBoundingClientRect().height;
          const original_0 = index_1 * height__3 + index_1 * (gap * theme.space.unit);
          const threshold_0 = height__3 / 4;
          const moved_0 = Math.abs(original_0 - y_2);
          if (y_2 > 0 && y_2 < original_0 && moved_0 >= threshold_0) onUpdate(index_1 - 1);else if (y_2 > original_0 && moved_0 >= threshold_0) onUpdate(index_1 + 1);else onUpdate(index_1);
        }
      }
      setMouseDown(false);
      refs.previousMouseEvent.current = undefined;
    }
  };
  _react.default.useEffect(() => {
    var _refs$root$current;
    const onKeyDown = event_0 => {
      if (refs.focus.current) {
        switch (event_0.key) {
          case 'ArrowLeft':
            return onUpdate('previous');
          case 'ArrowRight':
            return onUpdate('next');
          default:
            break;
        }
      }
    };
    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__2,
          height: height__4
        } = refs.carousel.current.getBoundingClientRect();
        const {
          scrollWidth: scrollWidth__1,
          scrollHeight: scrollHeight__1
        } = refs.carousel.current;
        if (refs.orientation.current === 'horizontal' && incX !== 0) {
          var _refs$value$current7, _refs$value$current8, _refs$value$current9;
          const min_1 = 0;
          let max_2 = (width__2 + gap * theme.space.unit) * (refs.itemsLength.current - 1);
          if (refs.itemSize.current === 'auto') {
            max_2 = scrollWidth__1 - scrollWidth__1 / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
          }
          let x_3 = (((_refs$value$current7 = refs.value.current) === null || _refs$value$current7 === void 0 ? void 0 : _refs$value$current7.x) || 0) - incX;
          if (refs.free.current || !refs.moveBeyondEdge.current) x_3 = (0, _utils.clamp)(x_3, min_1, max_2);

          // Move beyond min, max
          if (x_3 < min_1 || x_3 > max_2) x_3 = (((_refs$value$current8 = refs.value.current) === null || _refs$value$current8 === void 0 ? void 0 : _refs$value$current8.x) || 0) - incX / 1.7;
          refs.velocity.current = x_3 - (((_refs$value$current9 = refs.value.current) === null || _refs$value$current9 === void 0 ? void 0 : _refs$value$current9.x) || 0);
          onUpdatePosition({
            index: Math.floor(x_3 / (max_2 / (refs.itemsLength.current - 1))),
            x: x_3
          });
        }
        if (refs.orientation.current === 'vertical' && incY !== 0) {
          var _refs$value$current0, _refs$value$current1, _refs$value$current10;
          const min_2 = 0;
          let max_3 = (height__4 + gap * theme.space.unit) * (refs.itemsLength.current - 1);
          if (refs.itemSize.current === 'auto') {
            max_3 = scrollHeight__1 - scrollHeight__1 / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
          }
          let y_3 = (((_refs$value$current0 = refs.value.current) === null || _refs$value$current0 === void 0 ? void 0 : _refs$value$current0.y) || 0) - incY;
          if (refs.free.current || !refs.moveBeyondEdge.current) y_3 = (0, _utils.clamp)(y_3, min_2, max_3);

          // Move beyond min, max
          if (y_3 < min_2 || y_3 > max_3) y_3 = (((_refs$value$current1 = refs.value.current) === null || _refs$value$current1 === void 0 ? void 0 : _refs$value$current1.y) || 0) - incY / 1.7;
          refs.velocity.current = y_3 - (((_refs$value$current10 = refs.value.current) === null || _refs$value$current10 === void 0 ? void 0 : _refs$value$current10.y) || 0);
          onUpdatePosition({
            index: Math.floor(y_3 / (max_3 / (refs.itemsLength.current - 1))),
            y: y_3
          });
        }
      }
    };

    // Mouse move
    const onMouseMove = event_1 => {
      if (refs.mouseDown.current) {
        const {
          clientY: clientY_0,
          clientX: clientX_0
        } = event_1;
        onMove(clientX_0, clientY_0);
        refs.previousMouseEvent.current = event_1;
      }
    };

    // Touch move
    const onTouchMove = event_2 => {
      if (refs.mouseDown.current) {
        const {
          clientY: clientY_1,
          clientX: clientX_1
        } = event_2.touches[0];
        onMove(clientX_1, clientY_1);
        refs.previousMouseEvent.current = event_2;

        // Normalize for use as a mouseDown value
        refs.previousMouseEvent.current.clientY = clientY_1;
        refs.previousMouseEvent.current.clientX = clientX_1;
      }
    };
    const method = () => {
      var _refs$value$current11;
      return onUpdate((_refs$value$current11 = refs.value.current) === null || _refs$value$current11 === void 0 ? void 0 : _refs$value$current11.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$current12;
      if (index_ >= 0 && index_ <= refs.itemsLength.current && index_ !== ((_refs$value$current12 = refs.value.current) === null || _refs$value$current12 === void 0 ? void 0 : _refs$value$current12.index)) onUpdate(index_);
    }
  }, [index_]);
  _react.default.useEffect(() => {
    if ((0, _utils.is)('function', onUpdateItems)) onUpdateItems();
  }, [items, 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_0 = (...args) => onUpdate(...args);
    if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.subscribe)) updateSub === null || updateSub === void 0 || updateSub.subscribe(method_0);
    return () => {
      if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.unsubscribe)) updateSub === null || updateSub === void 0 || updateSub.unsubscribe(method_0);
    };
  }, [updateSub]);
  _react.default.useEffect(() => {
    const method_1 = (...args_0) => onUpdate(...args_0);
    if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.subscribe)) previousSub === null || previousSub === void 0 || previousSub.subscribe(method_1);
    return () => {
      if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.unsubscribe)) previousSub === null || previousSub === void 0 || previousSub.unsubscribe(method_1);
    };
  }, [previousSub]);
  _react.default.useEffect(() => {
    const method_2 = (...args_1) => onUpdate(...args_1);
    if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.subscribe)) nextSub === null || nextSub === void 0 || nextSub.subscribe(method_2);
    return () => {
      if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.unsubscribe)) nextSub === null || nextSub === void 0 || nextSub.unsubscribe(method_2);
    };
  }, [nextSub]);
  _react.default.useEffect(() => {
    const values_0 = (0, _utils.unique)([...items_, ..._react.default.Children.toArray(children)]).filter(Boolean);
    const previous = refs.items.current.reduce((result_0, item_2) => result_0 += (0, _utils.is)('string', item_2) ? item_2 : item_2 === null || item_2 === void 0 ? void 0 : item_2.key, '');
    const updated = values_0.reduce((result_1, item_3) => result_1 += (0, _utils.is)('string', item_3) ? item_3 : item_3 === null || item_3 === void 0 ? void 0 : item_3.key, '');
    if (updated !== previous) {
      onUpdate('next', values_0);
      setItems(values_0);
    }
  }, [items_, background, children]);
  const onWheel = (0, _utils.debounce)(event_3 => {
    if (refs.orientation.current === 'horizontal' && event_3.deltaX < 0 || refs.orientation.current === 'vertical' && event_3.deltaY < 0) {
      event_3.preventDefault();
      event_3.stopPropagation();
      return onUpdate('previous');
    }
    if (refs.orientation.current === 'horizontal' && event_3.deltaX > 0 || refs.orientation.current === 'vertical' && event_3.deltaY > 0) {
      event_3.preventDefault();
      event_3.stopPropagation();
      return onUpdate('next');
    }
  }, 40);
  const onBlur = event_4 => {
    setFocus(false);
    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_4);
  };
  const onFocus = event_5 => {
    setFocus(true);
    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_5);
  };
  const onMouseDown = event_6 => {
    // Momentum
    momentumClear();
    setMouseDown(event_6);
    refs.mouseDownPosition.current = _objectSpread({}, refs.value.current);
    refs.mouseDownStart.current = new Date().getTime();
    refs.carousel.current.style.transition = 'none';
  };
  const onMouseEnter = event_7 => {
    setHover(true);
    if (refs.autoPlay.current) clear();
    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_7);
  };
  const onMouseLeave = event_8 => {
    setFocus(false);
    setHover(false);
    if (!refs.autoPlay.current) start();
    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_8);
  };
  const onArrowMouseEnter = event_9 => {
    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_3 = 0;
    let maxX = (width + gap * theme.space.unit) * (refs.itemsLength.current - 1);
    let maxY = (height + gap * theme.space.unit) * (refs.itemsLength.current - 1);
    if (refs.itemSize.current === 'auto') {
      maxX = scrollWidth - scrollWidth / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
      maxY = scrollHeight - scrollHeight / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
    }
    if ((value === null || value === void 0 ? void 0 : value.x) === min_3 || (value === null || value === void 0 ? void 0 : value.y) === min_3) arrowPreviousIn = false;
    if (itemSize === 'auto') {
      if ((value === null || value === void 0 ? void 0 : value.x) !== undefined && (value === null || value === void 0 ? void 0 : value.x) + 1 >= maxX || (value === null || value === void 0 ? void 0 : value.y) !== undefined && (value === null || value === void 0 ? void 0 : value.y) + 1 >= maxY) arrowNextIn = false;
    } else {
      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__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-background'], classes.background]),
        style: {
          backgroundImage: `url(${Item})`
        }
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
    ref: item_4 => {
      if (ref) {
        if ((0, _utils.is)('function', ref)) ref(item_4);else ref.current = item_4;
      }
      refs.root.current = item_4;
    },
    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), {}, {
    children: [start_, version === 'regular' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
      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),
      children: items.map((item_5, index_2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
        gap: 0,
        direction: "column",
        align: "center",
        justify: "center",
        role: "group",
        "aria-roledescription": "slide",
        "aria-label": `${index_2 + 1} out of ${refs.itemsLength.current}`
      }, ItemWrapperProps), {}, {
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-item'], ItemWrapperProps === null || ItemWrapperProps === void 0 ? void 0 : ItemWrapperProps.className, classes.item, autoHeight && classes[`item_version_${version}_autoHeight`], itemSize && classes[`item_itemSize_${itemSize}`]]),
        children: resolveItem(item_5)
      }), index_2))
    })), version === 'transition' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
      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]),
      children: value && /*#__PURE__*/(0, _jsxRuntime.jsx)(Transitions, _objectSpread(_objectSpread({
        mode: "in-out-follow",
        switch: true
      }, TransitionsProps), {}, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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`]]),
            children: resolveItem(value.element)
          })
        }), indexActive)
      }))
    })), progress && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressTransitionComponent, _objectSpread(_objectSpread({
      in: focus || progressVisibility === 'hover' && hover || progressVisibility === 'visible'
    }, ProgressTransitionComponentProps), {}, {
      children: (0, _utils.is)('function', renderProgress) ? renderProgress(onUpdate) : /*#__PURE__*/(0, _jsxRuntime.jsx)(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}`]]),
        children: Array.from({
          length: refs.itemsLength.current
        }).map((item_6, index_3) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          onClick: () => onUpdate(index_3),
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-progress-item', indexActive === index_3 && 'onesy-Carousel-progress-item-active'], classes.progress_item, indexActive === index_3 && classes.progress_item_active])
        }, index_3))
      })
    })), arrows && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowPreviousTransitionComponent_, _objectSpread(_objectSpread(_objectSpread({
      in: arrowPreviousIn
    }, ArrowTransitionComponentProps), ArrowPreviousTransitionComponentProps), {}, {
      children: (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__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
        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}`]]),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPrevious, {
          noRtl: true,
          className: (0, _styleReact.classNames)([classes[`icon_previous_orientation_${orientation}`]])
        })
      }))
    })), arrows && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowNextTransitionComponent_, _objectSpread(_objectSpread(_objectSpread({
      in: arrowNextIn
    }, ArrowTransitionComponentProps), ArrowNextTransitionComponentProps), {}, {
      children: (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__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
        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}`]]),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNext, {
          noRtl: true,
          className: (0, _styleReact.classNames)([classes[`icon_next_orientation_${orientation}`]])
        })
      }))
    })), end_]
  }));
};
Carousel.displayName = 'onesy-Carousel';
var _default = exports.default = Carousel;