\n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n function Transition(props, context) {\n var _this;\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n var _proto = Transition.prototype;\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n if (prevProps !== this.props) {\n var status = this.state.status;\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n this.updateStatus(false, nextStatus);\n };\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n _proto.performExit = function performExit() {\n var _this3 = this;\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n var active = true;\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n this.nextCallback.cancel = function () {\n active = false;\n };\n return this.nextCallback;\n };\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n _proto.render = function render() {\n var status = this.state.status;\n if (status === UNMOUNTED) {\n return null;\n }\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n return (/*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n return Transition;\n}(React.Component);\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * {hello ?
\n * );\n * ```\n */\nexport default function useTimeout() {\n var isMounted = useMounted();\n\n // types are confused between node and web here IDK\n var handleRef = useRef();\n useWillUnmount(function () {\n return clearTimeout(handleRef.current);\n });\n return useMemo(function () {\n var clear = function clear() {\n return clearTimeout(handleRef.current);\n };\n function set(fn) {\n var delayMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n if (!isMounted()) return;\n clear();\n if (delayMs <= MAX_DELAY_MS) {\n // For simplicity, if the timeout is short, just set a normal timeout.\n handleRef.current = setTimeout(fn, delayMs);\n } else {\n setChainedTimeout(handleRef, fn, Date.now() + delayMs);\n }\n }\n return {\n set: set,\n clear: clear,\n handleRef: handleRef\n };\n }, []);\n}","import { useRef, useEffect } from 'react';\n\n/**\n * Track whether a component is current mounted. Generally less preferable than\n * properlly canceling effects so they don't run after a component is unmounted,\n * but helpful in cases where that isn't feasible, such as a `Promise` resolution.\n *\n * @returns a function that returns the current isMounted state of the component\n *\n * ```ts\n * const [data, setData] = useState(null)\n * const isMounted = useMounted()\n *\n * useEffect(() => {\n * fetchdata().then((newData) => {\n * if (isMounted()) {\n * setData(newData);\n * }\n * })\n * })\n * ```\n */\nexport default function useMounted() {\n var mounted = useRef(true);\n var isMounted = useRef(function () {\n return mounted.current;\n });\n useEffect(function () {\n mounted.current = true;\n return function () {\n mounted.current = false;\n };\n }, []);\n return isMounted.current;\n}","import createWithBsPrefix from './createWithBsPrefix';\nexport default createWithBsPrefix('carousel-caption');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"as\", \"bsPrefix\", \"children\", \"className\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar CarouselItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n bsPrefix = _ref.bsPrefix,\n children = _ref.children,\n className = _ref.className,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n var finalClassName = classNames(className, useBootstrapPrefix(bsPrefix, 'carousel-item'));\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref\n }, props, {\n className: finalClassName\n }), children);\n});\nCarouselItem.displayName = 'CarouselItem';\nexport default CarouselItem;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"as\", \"bsPrefix\", \"slide\", \"fade\", \"controls\", \"indicators\", \"activeIndex\", \"onSelect\", \"onSlide\", \"onSlid\", \"interval\", \"keyboard\", \"onKeyDown\", \"pause\", \"onMouseOver\", \"onMouseOut\", \"wrap\", \"touch\", \"onTouchStart\", \"onTouchMove\", \"onTouchEnd\", \"prevIcon\", \"prevLabel\", \"nextIcon\", \"nextLabel\", \"className\", \"children\"];\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport useUpdateEffect from '@restart/hooks/useUpdateEffect';\nimport useCommittedRef from '@restart/hooks/useCommittedRef';\nimport useTimeout from '@restart/hooks/useTimeout';\nimport classNames from 'classnames';\nimport Transition from 'react-transition-group/Transition';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport CarouselCaption from './CarouselCaption';\nimport CarouselItem from './CarouselItem';\nimport { map, forEach } from './ElementChildren';\nimport SafeAnchor from './SafeAnchor';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport transitionEndListener from './transitionEndListener';\nimport triggerBrowserReflow from './triggerBrowserReflow';\nvar SWIPE_THRESHOLD = 40;\nvar propTypes = {\n /**\n * @default 'carousel'\n */\n bsPrefix: PropTypes.string,\n as: PropTypes.elementType,\n /**\n * Enables animation on the Carousel as it transitions between slides.\n */\n slide: PropTypes.bool,\n /** Animates slides with a crossfade animation instead of the default slide animation */\n fade: PropTypes.bool,\n /**\n * Show the Carousel previous and next arrows for changing the current slide\n */\n controls: PropTypes.bool,\n /**\n * Show a set of slide position indicators\n */\n indicators: PropTypes.bool,\n /**\n * Controls the current visible slide\n *\n * @controllable onSelect\n */\n activeIndex: PropTypes.number,\n /**\n * Callback fired when the active item changes.\n *\n * ```js\n * (eventKey: number, event: Object | null) => void\n * ```\n *\n * @controllable activeIndex\n */\n onSelect: PropTypes.func,\n /**\n * Callback fired when a slide transition starts.\n *\n * ```js\n * (eventKey: number, direction: 'left' | 'right') => void\n */\n onSlide: PropTypes.func,\n /**\n * Callback fired when a slide transition ends.\n *\n * ```js\n * (eventKey: number, direction: 'left' | 'right') => void\n */\n onSlid: PropTypes.func,\n /**\n * The amount of time to delay between automatically cycling an item. If `null`, carousel will not automatically cycle.\n */\n interval: PropTypes.number,\n /** Whether the carousel should react to keyboard events. */\n keyboard: PropTypes.bool,\n /**\n * If set to `\"hover\"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it.\n *\n * On touch-enabled devices, when set to `\"hover\"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.\n */\n pause: PropTypes.oneOf(['hover', false]),\n /** Whether the carousel should cycle continuously or have hard stops. */\n wrap: PropTypes.bool,\n /**\n * Whether the carousel should support left/right swipe interactions on touchscreen devices.\n */\n touch: PropTypes.bool,\n /** Override the default button icon for the \"previous\" control */\n prevIcon: PropTypes.node,\n /**\n * Label shown to screen readers only, can be used to show the previous element\n * in the carousel.\n * Set to null to deactivate.\n */\n prevLabel: PropTypes.string,\n /** Override the default button icon for the \"next\" control */\n nextIcon: PropTypes.node,\n /**\n * Label shown to screen readers only, can be used to show the next element\n * in the carousel.\n * Set to null to deactivate.\n */\n nextLabel: PropTypes.string\n};\nvar defaultProps = {\n slide: true,\n fade: false,\n controls: true,\n indicators: true,\n defaultActiveIndex: 0,\n interval: 5000,\n keyboard: true,\n pause: 'hover',\n wrap: true,\n touch: true,\n prevIcon: /*#__PURE__*/React.createElement(\"span\", {\n \"aria-hidden\": \"true\",\n className: \"carousel-control-prev-icon\"\n }),\n prevLabel: 'Previous',\n nextIcon: /*#__PURE__*/React.createElement(\"span\", {\n \"aria-hidden\": \"true\",\n className: \"carousel-control-next-icon\"\n }),\n nextLabel: 'Next'\n};\nfunction isVisible(element) {\n if (!element || !element.style || !element.parentNode || !element.parentNode.style) {\n return false;\n }\n var elementStyle = getComputedStyle(element);\n return elementStyle.display !== 'none' && elementStyle.visibility !== 'hidden' && getComputedStyle(element.parentNode).display !== 'none';\n}\nfunction CarouselFunc(uncontrolledProps, ref) {\n var _useUncontrolled = useUncontrolled(uncontrolledProps, {\n activeIndex: 'onSelect'\n }),\n _useUncontrolled$as = _useUncontrolled.as,\n Component = _useUncontrolled$as === void 0 ? 'div' : _useUncontrolled$as,\n bsPrefix = _useUncontrolled.bsPrefix,\n slide = _useUncontrolled.slide,\n fade = _useUncontrolled.fade,\n controls = _useUncontrolled.controls,\n indicators = _useUncontrolled.indicators,\n activeIndex = _useUncontrolled.activeIndex,\n onSelect = _useUncontrolled.onSelect,\n onSlide = _useUncontrolled.onSlide,\n onSlid = _useUncontrolled.onSlid,\n interval = _useUncontrolled.interval,\n keyboard = _useUncontrolled.keyboard,\n onKeyDown = _useUncontrolled.onKeyDown,\n pause = _useUncontrolled.pause,\n onMouseOver = _useUncontrolled.onMouseOver,\n onMouseOut = _useUncontrolled.onMouseOut,\n wrap = _useUncontrolled.wrap,\n touch = _useUncontrolled.touch,\n onTouchStart = _useUncontrolled.onTouchStart,\n onTouchMove = _useUncontrolled.onTouchMove,\n onTouchEnd = _useUncontrolled.onTouchEnd,\n prevIcon = _useUncontrolled.prevIcon,\n prevLabel = _useUncontrolled.prevLabel,\n nextIcon = _useUncontrolled.nextIcon,\n nextLabel = _useUncontrolled.nextLabel,\n className = _useUncontrolled.className,\n children = _useUncontrolled.children,\n props = _objectWithoutPropertiesLoose(_useUncontrolled, _excluded);\n var prefix = useBootstrapPrefix(bsPrefix, 'carousel');\n var nextDirectionRef = useRef(null);\n var _useState = useState('next'),\n direction = _useState[0],\n setDirection = _useState[1];\n var _useState2 = useState(false),\n paused = _useState2[0],\n setPaused = _useState2[1];\n var _useState3 = useState(false),\n isSliding = _useState3[0],\n setIsSliding = _useState3[1];\n var _useState4 = useState(activeIndex || 0),\n renderedActiveIndex = _useState4[0],\n setRenderedActiveIndex = _useState4[1];\n if (!isSliding && activeIndex !== renderedActiveIndex) {\n if (nextDirectionRef.current) {\n setDirection(nextDirectionRef.current);\n } else {\n setDirection((activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev');\n }\n if (slide) {\n setIsSliding(true);\n }\n setRenderedActiveIndex(activeIndex || 0);\n }\n useEffect(function () {\n if (nextDirectionRef.current) {\n nextDirectionRef.current = null;\n }\n });\n var numChildren = 0;\n var activeChildInterval; // Iterate to grab all of the children's interval values\n // (and count them, too)\n\n forEach(children, function (child, index) {\n ++numChildren;\n if (index === activeIndex) {\n activeChildInterval = child.props.interval;\n }\n });\n var activeChildIntervalRef = useCommittedRef(activeChildInterval);\n var prev = useCallback(function (event) {\n if (isSliding) {\n return;\n }\n var nextActiveIndex = renderedActiveIndex - 1;\n if (nextActiveIndex < 0) {\n if (!wrap) {\n return;\n }\n nextActiveIndex = numChildren - 1;\n }\n nextDirectionRef.current = 'prev';\n if (onSelect) {\n onSelect(nextActiveIndex, event);\n }\n }, [isSliding, renderedActiveIndex, onSelect, wrap, numChildren]); // This is used in the setInterval, so it should not invalidate.\n\n var next = useEventCallback(function (event) {\n if (isSliding) {\n return;\n }\n var nextActiveIndex = renderedActiveIndex + 1;\n if (nextActiveIndex >= numChildren) {\n if (!wrap) {\n return;\n }\n nextActiveIndex = 0;\n }\n nextDirectionRef.current = 'next';\n if (onSelect) {\n onSelect(nextActiveIndex, event);\n }\n });\n var elementRef = useRef();\n useImperativeHandle(ref, function () {\n return {\n element: elementRef.current,\n prev: prev,\n next: next\n };\n }); // This is used in the setInterval, so it should not invalidate.\n\n var nextWhenVisible = useEventCallback(function () {\n if (!document.hidden && isVisible(elementRef.current)) {\n next();\n }\n });\n var slideDirection = direction === 'next' ? 'left' : 'right';\n useUpdateEffect(function () {\n if (slide) {\n // These callbacks will be handled by the