@cleartrip/ct-design-horizontal-scroll 3.13.0 → 3.13.1-SNAPSHOT-atp-changes.0

package/dist/ct-design-horizontal-scroll.umd.js

@@ -1,12 +1,32 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('styled-components'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-common-utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-common-utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHorizontalScroll = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.styled, global.ctDesignIcons, global.ctDesignTheme, global.ctDesignCommonUtils));
-})(this, (function (exports, jsxRuntime, react, ctDesignContainer, styled, ctDesignIcons, ctDesignTheme, ctDesignCommonUtils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('styled-components'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-common-utils'), require('react-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-common-utils', 'react-dom'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHorizontalScroll = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.styled, global.ctDesignIcons, global.ctDesignTheme, global.ctDesignCommonUtils, global.ReactDOM));
+})(this, (function (exports, jsxRuntime, React, ctDesignContainer, styled, ctDesignIcons, ctDesignTheme, ctDesignCommonUtils, ReactDOM) { 'use strict';
 
     function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var styled__default = /*#__PURE__*/_interopDefault(styled);
+    var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -34,6 +54,14 @@
       };
       return __assign.apply(this, arguments);
     };
+    function __rest(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;
+    }
     function __makeTemplateObject(cooked, raw) {
       if (Object.defineProperty) {
         Object.defineProperty(cooked, "raw", {
@@ -91,6 +119,1771 @@
         ARROW_DIRECTION["RIGHT"] = "RIGHT";
     })(exports.ARROW_DIRECTION || (exports.ARROW_DIRECTION = {}));
 
+    function _extends() {
+      _extends = Object.assign ? Object.assign.bind() : function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+        return target;
+      };
+      return _extends.apply(this, arguments);
+    }
+
+    function _objectWithoutPropertiesLoose(source, excluded) {
+      if (source == null) return {};
+      var target = {};
+      var sourceKeys = Object.keys(source);
+      var key, i;
+      for (i = 0; i < sourceKeys.length; i++) {
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+      }
+      return target;
+    }
+
+    function _setPrototypeOf(o, p) {
+      _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+      };
+      return _setPrototypeOf(o, p);
+    }
+
+    function _inheritsLoose(subClass, superClass) {
+      subClass.prototype = Object.create(superClass.prototype);
+      subClass.prototype.constructor = subClass;
+      _setPrototypeOf(subClass, superClass);
+    }
+
+    /**
+     * Copyright (c) 2013-present, Facebook, Inc.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    var ReactPropTypesSecret_1;
+    var hasRequiredReactPropTypesSecret;
+    function requireReactPropTypesSecret() {
+      if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1;
+      hasRequiredReactPropTypesSecret = 1;
+      var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+      ReactPropTypesSecret_1 = ReactPropTypesSecret;
+      return ReactPropTypesSecret_1;
+    }
+
+    /**
+     * Copyright (c) 2013-present, Facebook, Inc.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    var factoryWithThrowingShims;
+    var hasRequiredFactoryWithThrowingShims;
+    function requireFactoryWithThrowingShims() {
+      if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
+      hasRequiredFactoryWithThrowingShims = 1;
+      var ReactPropTypesSecret = requireReactPropTypesSecret();
+      function emptyFunction() {}
+      function emptyFunctionWithReset() {}
+      emptyFunctionWithReset.resetWarningCache = emptyFunction;
+      factoryWithThrowingShims = function () {
+        function shim(props, propName, componentName, location, propFullName, secret) {
+          if (secret === ReactPropTypesSecret) {
+            // It is still safe when called from React.
+            return;
+          }
+          var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
+          err.name = 'Invariant Violation';
+          throw err;
+        }
+        shim.isRequired = shim;
+        function getShim() {
+          return shim;
+        }
+        // Important!
+        // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+        var ReactPropTypes = {
+          array: shim,
+          bigint: shim,
+          bool: shim,
+          func: shim,
+          number: shim,
+          object: shim,
+          string: shim,
+          symbol: shim,
+          any: shim,
+          arrayOf: getShim,
+          element: shim,
+          elementType: shim,
+          instanceOf: getShim,
+          node: shim,
+          objectOf: getShim,
+          oneOf: getShim,
+          oneOfType: getShim,
+          shape: getShim,
+          exact: getShim,
+          checkPropTypes: emptyFunctionWithReset,
+          resetWarningCache: emptyFunction
+        };
+        ReactPropTypes.PropTypes = ReactPropTypes;
+        return ReactPropTypes;
+      };
+      return factoryWithThrowingShims;
+    }
+
+    /**
+     * Copyright (c) 2013-present, Facebook, Inc.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+    {
+      // By explicitly using `prop-types` you are opting into new production behavior.
+      // http://fb.me/prop-types-in-prod
+      requireFactoryWithThrowingShims()();
+    }
+
+    /**
+     * Checks if a given element has a CSS class.
+     * 
+     * @param element the element
+     * @param className the CSS class name
+     */
+    function hasClass(element, className) {
+      if (element.classList) return !!className && element.classList.contains(className);
+      return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
+    }
+
+    /**
+     * Adds a CSS class to a given element.
+     * 
+     * @param element the element
+     * @param className the CSS class name
+     */
+
+    function addClass(element, className) {
+      if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className);
+    }
+
+    function replaceClassName(origClass, classToRemove) {
+      return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
+    }
+    /**
+     * Removes a CSS class from a given element.
+     * 
+     * @param element the element
+     * @param className the CSS class name
+     */
+
+    function removeClass$1(element, className) {
+      if (element.classList) {
+        element.classList.remove(className);
+      } else if (typeof element.className === 'string') {
+        element.className = replaceClassName(element.className, className);
+      } else {
+        element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
+      }
+    }
+
+    var config = {
+      disabled: false
+    };
+
+    var TransitionGroupContext = React__namespace.default.createContext(null);
+
+    var forceReflow = function forceReflow(node) {
+      return node.scrollTop;
+    };
+
+    var UNMOUNTED = 'unmounted';
+    var EXITED = 'exited';
+    var ENTERING = 'entering';
+    var ENTERED = 'entered';
+    var EXITING = 'exiting';
+    /**
+     * The Transition component lets you describe a transition from one component
+     * state to another _over time_ with a simple declarative API. Most commonly
+     * it's used to animate the mounting and unmounting of a component, but can also
+     * be used to describe in-place transition states as well.
+     *
+     * ---
+     *
+     * **Note**: `Transition` is a platform-agnostic base component. If you're using
+     * transitions in CSS, you'll probably want to use
+     * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
+     * instead. It inherits all the features of `Transition`, but contains
+     * additional features necessary to play nice with CSS transitions (hence the
+     * name of the component).
+     *
+     * ---
+     *
+     * By default the `Transition` component does not alter the behavior of the
+     * component it renders, it only tracks "enter" and "exit" states for the
+     * components. It's up to you to give meaning and effect to those states. For
+     * example we can add styles to a component when it enters or exits:
+     *
+     * ```jsx
+     * import { Transition } from 'react-transition-group';
+     *
+     * const duration = 300;
+     *
+     * const defaultStyle = {
+     *   transition: `opacity ${duration}ms ease-in-out`,
+     *   opacity: 0,
+     * }
+     *
+     * const transitionStyles = {
+     *   entering: { opacity: 1 },
+     *   entered:  { opacity: 1 },
+     *   exiting:  { opacity: 0 },
+     *   exited:  { opacity: 0 },
+     * };
+     *
+     * const Fade = ({ in: inProp }) => (
+     *   <Transition in={inProp} timeout={duration}>
+     *     {state => (
+     *       <div style={{
+     *         ...defaultStyle,
+     *         ...transitionStyles[state]
+     *       }}>
+     *         I'm a fade Transition!
+     *       </div>
+     *     )}
+     *   </Transition>
+     * );
+     * ```
+     *
+     * There are 4 main states a Transition can be in:
+     *  - `'entering'`
+     *  - `'entered'`
+     *  - `'exiting'`
+     *  - `'exited'`
+     *
+     * Transition state is toggled via the `in` prop. When `true` the component
+     * begins the "Enter" stage. During this stage, the component will shift from
+     * its current transition state, to `'entering'` for the duration of the
+     * transition and then to the `'entered'` stage once it's complete. Let's take
+     * the following example (we'll use the
+     * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
+     *
+     * ```jsx
+     * function App() {
+     *   const [inProp, setInProp] = useState(false);
+     *   return (
+     *     <div>
+     *       <Transition in={inProp} timeout={500}>
+     *         {state => (
+     *           // ...
+     *         )}
+     *       </Transition>
+     *       <button onClick={() => setInProp(true)}>
+     *         Click to Enter
+     *       </button>
+     *     </div>
+     *   );
+     * }
+     * ```
+     *
+     * When the button is clicked the component will shift to the `'entering'` state
+     * and stay there for 500ms (the value of `timeout`) before it finally switches
+     * to `'entered'`.
+     *
+     * When `in` is `false` the same thing happens except the state moves from
+     * `'exiting'` to `'exited'`.
+     */
+
+    var Transition = /*#__PURE__*/function (_React$Component) {
+      _inheritsLoose(Transition, _React$Component);
+      function Transition(props, context) {
+        var _this;
+        _this = _React$Component.call(this, props, context) || this;
+        var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
+
+        var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
+        var initialStatus;
+        _this.appearStatus = null;
+        if (props.in) {
+          if (appear) {
+            initialStatus = EXITED;
+            _this.appearStatus = ENTERING;
+          } else {
+            initialStatus = ENTERED;
+          }
+        } else {
+          if (props.unmountOnExit || props.mountOnEnter) {
+            initialStatus = UNMOUNTED;
+          } else {
+            initialStatus = EXITED;
+          }
+        }
+        _this.state = {
+          status: initialStatus
+        };
+        _this.nextCallback = null;
+        return _this;
+      }
+      Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
+        var nextIn = _ref.in;
+        if (nextIn && prevState.status === UNMOUNTED) {
+          return {
+            status: EXITED
+          };
+        }
+        return null;
+      } // getSnapshotBeforeUpdate(prevProps) {
+      //   let nextStatus = null
+      //   if (prevProps !== this.props) {
+      //     const { status } = this.state
+      //     if (this.props.in) {
+      //       if (status !== ENTERING && status !== ENTERED) {
+      //         nextStatus = ENTERING
+      //       }
+      //     } else {
+      //       if (status === ENTERING || status === ENTERED) {
+      //         nextStatus = EXITING
+      //       }
+      //     }
+      //   }
+      //   return { nextStatus }
+      // }
+      ;
+
+      var _proto = Transition.prototype;
+      _proto.componentDidMount = function componentDidMount() {
+        this.updateStatus(true, this.appearStatus);
+      };
+      _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+        var nextStatus = null;
+        if (prevProps !== this.props) {
+          var status = this.state.status;
+          if (this.props.in) {
+            if (status !== ENTERING && status !== ENTERED) {
+              nextStatus = ENTERING;
+            }
+          } else {
+            if (status === ENTERING || status === ENTERED) {
+              nextStatus = EXITING;
+            }
+          }
+        }
+        this.updateStatus(false, nextStatus);
+      };
+      _proto.componentWillUnmount = function componentWillUnmount() {
+        this.cancelNextCallback();
+      };
+      _proto.getTimeouts = function getTimeouts() {
+        var timeout = this.props.timeout;
+        var exit, enter, appear;
+        exit = enter = appear = timeout;
+        if (timeout != null && typeof timeout !== 'number') {
+          exit = timeout.exit;
+          enter = timeout.enter; // TODO: remove fallback for next major
+
+          appear = timeout.appear !== undefined ? timeout.appear : enter;
+        }
+        return {
+          exit: exit,
+          enter: enter,
+          appear: appear
+        };
+      };
+      _proto.updateStatus = function updateStatus(mounting, nextStatus) {
+        if (mounting === void 0) {
+          mounting = false;
+        }
+        if (nextStatus !== null) {
+          // nextStatus will always be ENTERING or EXITING.
+          this.cancelNextCallback();
+          if (nextStatus === ENTERING) {
+            if (this.props.unmountOnExit || this.props.mountOnEnter) {
+              var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.default.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+              // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
+              // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
+
+              if (node) forceReflow(node);
+            }
+            this.performEnter(mounting);
+          } else {
+            this.performExit();
+          }
+        } else if (this.props.unmountOnExit && this.state.status === EXITED) {
+          this.setState({
+            status: UNMOUNTED
+          });
+        }
+      };
+      _proto.performEnter = function performEnter(mounting) {
+        var _this2 = this;
+        var enter = this.props.enter;
+        var appearing = this.context ? this.context.isMounting : mounting;
+        var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default.default.findDOMNode(this), appearing],
+          maybeNode = _ref2[0],
+          maybeAppearing = _ref2[1];
+        var timeouts = this.getTimeouts();
+        var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
+        // if we are mounting and running this it means appear _must_ be set
+
+        if (!mounting && !enter || config.disabled) {
+          this.safeSetState({
+            status: ENTERED
+          }, function () {
+            _this2.props.onEntered(maybeNode);
+          });
+          return;
+        }
+        this.props.onEnter(maybeNode, maybeAppearing);
+        this.safeSetState({
+          status: ENTERING
+        }, function () {
+          _this2.props.onEntering(maybeNode, maybeAppearing);
+          _this2.onTransitionEnd(enterTimeout, function () {
+            _this2.safeSetState({
+              status: ENTERED
+            }, function () {
+              _this2.props.onEntered(maybeNode, maybeAppearing);
+            });
+          });
+        });
+      };
+      _proto.performExit = function performExit() {
+        var _this3 = this;
+        var exit = this.props.exit;
+        var timeouts = this.getTimeouts();
+        var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default.default.findDOMNode(this); // no exit animation skip right to EXITED
+
+        if (!exit || config.disabled) {
+          this.safeSetState({
+            status: EXITED
+          }, function () {
+            _this3.props.onExited(maybeNode);
+          });
+          return;
+        }
+        this.props.onExit(maybeNode);
+        this.safeSetState({
+          status: EXITING
+        }, function () {
+          _this3.props.onExiting(maybeNode);
+          _this3.onTransitionEnd(timeouts.exit, function () {
+            _this3.safeSetState({
+              status: EXITED
+            }, function () {
+              _this3.props.onExited(maybeNode);
+            });
+          });
+        });
+      };
+      _proto.cancelNextCallback = function cancelNextCallback() {
+        if (this.nextCallback !== null) {
+          this.nextCallback.cancel();
+          this.nextCallback = null;
+        }
+      };
+      _proto.safeSetState = function safeSetState(nextState, callback) {
+        // This shouldn't be necessary, but there are weird race conditions with
+        // setState callbacks and unmounting in testing, so always make sure that
+        // we can cancel any pending setState callbacks after we unmount.
+        callback = this.setNextCallback(callback);
+        this.setState(nextState, callback);
+      };
+      _proto.setNextCallback = function setNextCallback(callback) {
+        var _this4 = this;
+        var active = true;
+        this.nextCallback = function (event) {
+          if (active) {
+            active = false;
+            _this4.nextCallback = null;
+            callback(event);
+          }
+        };
+        this.nextCallback.cancel = function () {
+          active = false;
+        };
+        return this.nextCallback;
+      };
+      _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
+        this.setNextCallback(handler);
+        var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.default.findDOMNode(this);
+        var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
+        if (!node || doesNotHaveTimeoutOrListener) {
+          setTimeout(this.nextCallback, 0);
+          return;
+        }
+        if (this.props.addEndListener) {
+          var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
+            maybeNode = _ref3[0],
+            maybeNextCallback = _ref3[1];
+          this.props.addEndListener(maybeNode, maybeNextCallback);
+        }
+        if (timeout != null) {
+          setTimeout(this.nextCallback, timeout);
+        }
+      };
+      _proto.render = function render() {
+        var status = this.state.status;
+        if (status === UNMOUNTED) {
+          return null;
+        }
+        var _this$props = this.props,
+          children = _this$props.children;
+          _this$props.in;
+          _this$props.mountOnEnter;
+          _this$props.unmountOnExit;
+          _this$props.appear;
+          _this$props.enter;
+          _this$props.exit;
+          _this$props.timeout;
+          _this$props.addEndListener;
+          _this$props.onEnter;
+          _this$props.onEntering;
+          _this$props.onEntered;
+          _this$props.onExit;
+          _this$props.onExiting;
+          _this$props.onExited;
+          _this$props.nodeRef;
+          var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+        return /*#__PURE__*/(
+          // allows for nested Transitions
+          React__namespace.default.createElement(TransitionGroupContext.Provider, {
+            value: null
+          }, typeof children === 'function' ? children(status, childProps) : React__namespace.default.cloneElement(React__namespace.default.Children.only(children), childProps))
+        );
+      };
+      return Transition;
+    }(React__namespace.default.Component);
+    Transition.contextType = TransitionGroupContext;
+    Transition.propTypes = {}; // Name the function so it is clearer in the documentation
+
+    function noop() {}
+    Transition.defaultProps = {
+      in: false,
+      mountOnEnter: false,
+      unmountOnExit: false,
+      appear: false,
+      enter: true,
+      exit: true,
+      onEnter: noop,
+      onEntering: noop,
+      onEntered: noop,
+      onExit: noop,
+      onExiting: noop,
+      onExited: noop
+    };
+    Transition.UNMOUNTED = UNMOUNTED;
+    Transition.EXITED = EXITED;
+    Transition.ENTERING = ENTERING;
+    Transition.ENTERED = ENTERED;
+    Transition.EXITING = EXITING;
+
+    var _addClass = function addClass$1(node, classes) {
+      return node && classes && classes.split(' ').forEach(function (c) {
+        return addClass(node, c);
+      });
+    };
+    var removeClass = function removeClass(node, classes) {
+      return node && classes && classes.split(' ').forEach(function (c) {
+        return removeClass$1(node, c);
+      });
+    };
+    /**
+     * A transition component inspired by the excellent
+     * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
+     * use it if you're using CSS transitions or animations. It's built upon the
+     * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
+     * component, so it inherits all of its props.
+     *
+     * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
+     * and `exit` states of the transition. The first class is applied and then a
+     * second `*-active` class in order to activate the CSS transition. After the
+     * transition, matching `*-done` class names are applied to persist the
+     * transition state.
+     *
+     * ```jsx
+     * function App() {
+     *   const [inProp, setInProp] = useState(false);
+     *   return (
+     *     <div>
+     *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
+     *         <div>
+     *           {"I'll receive my-node-* classes"}
+     *         </div>
+     *       </CSSTransition>
+     *       <button type="button" onClick={() => setInProp(true)}>
+     *         Click to Enter
+     *       </button>
+     *     </div>
+     *   );
+     * }
+     * ```
+     *
+     * When the `in` prop is set to `true`, the child component will first receive
+     * the class `example-enter`, then the `example-enter-active` will be added in
+     * the next tick. `CSSTransition` [forces a
+     * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
+     * between before adding the `example-enter-active`. This is an important trick
+     * because it allows us to transition between `example-enter` and
+     * `example-enter-active` even though they were added immediately one after
+     * another. Most notably, this is what makes it possible for us to animate
+     * _appearance_.
+     *
+     * ```css
+     * .my-node-enter {
+     *   opacity: 0;
+     * }
+     * .my-node-enter-active {
+     *   opacity: 1;
+     *   transition: opacity 200ms;
+     * }
+     * .my-node-exit {
+     *   opacity: 1;
+     * }
+     * .my-node-exit-active {
+     *   opacity: 0;
+     *   transition: opacity 200ms;
+     * }
+     * ```
+     *
+     * `*-active` classes represent which styles you want to animate **to**, so it's
+     * important to add `transition` declaration only to them, otherwise transitions
+     * might not behave as intended! This might not be obvious when the transitions
+     * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
+     * the example above (minus `transition`), but it becomes apparent in more
+     * complex transitions.
+     *
+     * **Note**: If you're using the
+     * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
+     * prop, make sure to define styles for `.appear-*` classes as well.
+     */
+
+    var CSSTransition = /*#__PURE__*/function (_React$Component) {
+      _inheritsLoose(CSSTransition, _React$Component);
+      function CSSTransition() {
+        var _this;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+        _this.appliedClasses = {
+          appear: {},
+          enter: {},
+          exit: {}
+        };
+        _this.onEnter = function (maybeNode, maybeAppearing) {
+          var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
+            node = _this$resolveArgument[0],
+            appearing = _this$resolveArgument[1];
+          _this.removeClasses(node, 'exit');
+          _this.addClass(node, appearing ? 'appear' : 'enter', 'base');
+          if (_this.props.onEnter) {
+            _this.props.onEnter(maybeNode, maybeAppearing);
+          }
+        };
+        _this.onEntering = function (maybeNode, maybeAppearing) {
+          var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
+            node = _this$resolveArgument2[0],
+            appearing = _this$resolveArgument2[1];
+          var type = appearing ? 'appear' : 'enter';
+          _this.addClass(node, type, 'active');
+          if (_this.props.onEntering) {
+            _this.props.onEntering(maybeNode, maybeAppearing);
+          }
+        };
+        _this.onEntered = function (maybeNode, maybeAppearing) {
+          var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
+            node = _this$resolveArgument3[0],
+            appearing = _this$resolveArgument3[1];
+          var type = appearing ? 'appear' : 'enter';
+          _this.removeClasses(node, type);
+          _this.addClass(node, type, 'done');
+          if (_this.props.onEntered) {
+            _this.props.onEntered(maybeNode, maybeAppearing);
+          }
+        };
+        _this.onExit = function (maybeNode) {
+          var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
+            node = _this$resolveArgument4[0];
+          _this.removeClasses(node, 'appear');
+          _this.removeClasses(node, 'enter');
+          _this.addClass(node, 'exit', 'base');
+          if (_this.props.onExit) {
+            _this.props.onExit(maybeNode);
+          }
+        };
+        _this.onExiting = function (maybeNode) {
+          var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
+            node = _this$resolveArgument5[0];
+          _this.addClass(node, 'exit', 'active');
+          if (_this.props.onExiting) {
+            _this.props.onExiting(maybeNode);
+          }
+        };
+        _this.onExited = function (maybeNode) {
+          var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
+            node = _this$resolveArgument6[0];
+          _this.removeClasses(node, 'exit');
+          _this.addClass(node, 'exit', 'done');
+          if (_this.props.onExited) {
+            _this.props.onExited(maybeNode);
+          }
+        };
+        _this.resolveArguments = function (maybeNode, maybeAppearing) {
+          return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
+          : [maybeNode, maybeAppearing];
+        };
+        _this.getClassNames = function (type) {
+          var classNames = _this.props.classNames;
+          var isStringClassNames = typeof classNames === 'string';
+          var prefix = isStringClassNames && classNames ? classNames + "-" : '';
+          var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
+          var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
+          var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
+          return {
+            baseClassName: baseClassName,
+            activeClassName: activeClassName,
+            doneClassName: doneClassName
+          };
+        };
+        return _this;
+      }
+      var _proto = CSSTransition.prototype;
+      _proto.addClass = function addClass(node, type, phase) {
+        var className = this.getClassNames(type)[phase + "ClassName"];
+        var _this$getClassNames = this.getClassNames('enter'),
+          doneClassName = _this$getClassNames.doneClassName;
+        if (type === 'appear' && phase === 'done' && doneClassName) {
+          className += " " + doneClassName;
+        } // This is to force a repaint,
+        // which is necessary in order to transition styles when adding a class name.
+
+        if (phase === 'active') {
+          if (node) forceReflow(node);
+        }
+        if (className) {
+          this.appliedClasses[type][phase] = className;
+          _addClass(node, className);
+        }
+      };
+      _proto.removeClasses = function removeClasses(node, type) {
+        var _this$appliedClasses$ = this.appliedClasses[type],
+          baseClassName = _this$appliedClasses$.base,
+          activeClassName = _this$appliedClasses$.active,
+          doneClassName = _this$appliedClasses$.done;
+        this.appliedClasses[type] = {};
+        if (baseClassName) {
+          removeClass(node, baseClassName);
+        }
+        if (activeClassName) {
+          removeClass(node, activeClassName);
+        }
+        if (doneClassName) {
+          removeClass(node, doneClassName);
+        }
+      };
+      _proto.render = function render() {
+        var _this$props = this.props;
+          _this$props.classNames;
+          var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
+        return /*#__PURE__*/React__namespace.default.createElement(Transition, _extends({}, props, {
+          onEnter: this.onEnter,
+          onEntered: this.onEntered,
+          onEntering: this.onEntering,
+          onExit: this.onExit,
+          onExiting: this.onExiting,
+          onExited: this.onExited
+        }));
+      };
+      return CSSTransition;
+    }(React__namespace.default.Component);
+    CSSTransition.defaultProps = {
+      classNames: ''
+    };
+    CSSTransition.propTypes = {};
+
+    function _assertThisInitialized(self) {
+      if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+      }
+      return self;
+    }
+
+    /**
+     * Given `this.props.children`, return an object mapping key to child.
+     *
+     * @param {*} children `this.props.children`
+     * @return {object} Mapping of key to child
+     */
+
+    function getChildMapping(children, mapFn) {
+      var mapper = function mapper(child) {
+        return mapFn && React.isValidElement(child) ? mapFn(child) : child;
+      };
+      var result = Object.create(null);
+      if (children) React.Children.map(children, function (c) {
+        return c;
+      }).forEach(function (child) {
+        // run the map function here instead so that the key is the computed one
+        result[child.key] = mapper(child);
+      });
+      return result;
+    }
+    /**
+     * When you're adding or removing children some may be added or removed in the
+     * same render pass. We want to show *both* since we want to simultaneously
+     * animate elements in and out. This function takes a previous set of keys
+     * and a new set of keys and merges them with its best guess of the correct
+     * ordering. In the future we may expose some of the utilities in
+     * ReactMultiChild to make this easy, but for now React itself does not
+     * directly have this concept of the union of prevChildren and nextChildren
+     * so we implement it here.
+     *
+     * @param {object} prev prev children as returned from
+     * `ReactTransitionChildMapping.getChildMapping()`.
+     * @param {object} next next children as returned from
+     * `ReactTransitionChildMapping.getChildMapping()`.
+     * @return {object} a key set that contains all keys in `prev` and all keys
+     * in `next` in a reasonable order.
+     */
+
+    function mergeChildMappings(prev, next) {
+      prev = prev || {};
+      next = next || {};
+      function getValueForKey(key) {
+        return key in next ? next[key] : prev[key];
+      } // For each key of `next`, the list of keys to insert before that key in
+      // the combined list
+
+      var nextKeysPending = Object.create(null);
+      var pendingKeys = [];
+      for (var prevKey in prev) {
+        if (prevKey in next) {
+          if (pendingKeys.length) {
+            nextKeysPending[prevKey] = pendingKeys;
+            pendingKeys = [];
+          }
+        } else {
+          pendingKeys.push(prevKey);
+        }
+      }
+      var i;
+      var childMapping = {};
+      for (var nextKey in next) {
+        if (nextKeysPending[nextKey]) {
+          for (i = 0; i < nextKeysPending[nextKey].length; i++) {
+            var pendingNextKey = nextKeysPending[nextKey][i];
+            childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
+          }
+        }
+        childMapping[nextKey] = getValueForKey(nextKey);
+      } // Finally, add the keys which didn't appear before any key in `next`
+
+      for (i = 0; i < pendingKeys.length; i++) {
+        childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+      }
+      return childMapping;
+    }
+    function getProp(child, prop, props) {
+      return props[prop] != null ? props[prop] : child.props[prop];
+    }
+    function getInitialChildMapping(props, onExited) {
+      return getChildMapping(props.children, function (child) {
+        return React.cloneElement(child, {
+          onExited: onExited.bind(null, child),
+          in: true,
+          appear: getProp(child, 'appear', props),
+          enter: getProp(child, 'enter', props),
+          exit: getProp(child, 'exit', props)
+        });
+      });
+    }
+    function getNextChildMapping(nextProps, prevChildMapping, onExited) {
+      var nextChildMapping = getChildMapping(nextProps.children);
+      var children = mergeChildMappings(prevChildMapping, nextChildMapping);
+      Object.keys(children).forEach(function (key) {
+        var child = children[key];
+        if (!React.isValidElement(child)) return;
+        var hasPrev = (key in prevChildMapping);
+        var hasNext = (key in nextChildMapping);
+        var prevChild = prevChildMapping[key];
+        var isLeaving = React.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
+
+        if (hasNext && (!hasPrev || isLeaving)) {
+          // console.log('entering', key)
+          children[key] = React.cloneElement(child, {
+            onExited: onExited.bind(null, child),
+            in: true,
+            exit: getProp(child, 'exit', nextProps),
+            enter: getProp(child, 'enter', nextProps)
+          });
+        } else if (!hasNext && hasPrev && !isLeaving) {
+          // item is old (exiting)
+          // console.log('leaving', key)
+          children[key] = React.cloneElement(child, {
+            in: false
+          });
+        } else if (hasNext && hasPrev && React.isValidElement(prevChild)) {
+          // item hasn't changed transition states
+          // copy over the last transition props;
+          // console.log('unchanged', key)
+          children[key] = React.cloneElement(child, {
+            onExited: onExited.bind(null, child),
+            in: prevChild.props.in,
+            exit: getProp(child, 'exit', nextProps),
+            enter: getProp(child, 'enter', nextProps)
+          });
+        }
+      });
+      return children;
+    }
+
+    var values = Object.values || function (obj) {
+      return Object.keys(obj).map(function (k) {
+        return obj[k];
+      });
+    };
+    var defaultProps = {
+      component: 'div',
+      childFactory: function childFactory(child) {
+        return child;
+      }
+    };
+    /**
+     * The `<TransitionGroup>` component manages a set of transition components
+     * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
+     * components, `<TransitionGroup>` is a state machine for managing the mounting
+     * and unmounting of components over time.
+     *
+     * Consider the example below. As items are removed or added to the TodoList the
+     * `in` prop is toggled automatically by the `<TransitionGroup>`.
+     *
+     * Note that `<TransitionGroup>`  does not define any animation behavior!
+     * Exactly _how_ a list item animates is up to the individual transition
+     * component. This means you can mix and match animations across different list
+     * items.
+     */
+
+    var TransitionGroup = /*#__PURE__*/function (_React$Component) {
+      _inheritsLoose(TransitionGroup, _React$Component);
+      function TransitionGroup(props, context) {
+        var _this;
+        _this = _React$Component.call(this, props, context) || this;
+        var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
+
+        _this.state = {
+          contextValue: {
+            isMounting: true
+          },
+          handleExited: handleExited,
+          firstRender: true
+        };
+        return _this;
+      }
+      var _proto = TransitionGroup.prototype;
+      _proto.componentDidMount = function componentDidMount() {
+        this.mounted = true;
+        this.setState({
+          contextValue: {
+            isMounting: false
+          }
+        });
+      };
+      _proto.componentWillUnmount = function componentWillUnmount() {
+        this.mounted = false;
+      };
+      TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
+        var prevChildMapping = _ref.children,
+          handleExited = _ref.handleExited,
+          firstRender = _ref.firstRender;
+        return {
+          children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
+          firstRender: false
+        };
+      } // node is `undefined` when user provided `nodeRef` prop
+      ;
+
+      _proto.handleExited = function handleExited(child, node) {
+        var currentChildMapping = getChildMapping(this.props.children);
+        if (child.key in currentChildMapping) return;
+        if (child.props.onExited) {
+          child.props.onExited(node);
+        }
+        if (this.mounted) {
+          this.setState(function (state) {
+            var children = _extends({}, state.children);
+            delete children[child.key];
+            return {
+              children: children
+            };
+          });
+        }
+      };
+      _proto.render = function render() {
+        var _this$props = this.props,
+          Component = _this$props.component,
+          childFactory = _this$props.childFactory,
+          props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
+        var contextValue = this.state.contextValue;
+        var children = values(this.state.children).map(childFactory);
+        delete props.appear;
+        delete props.enter;
+        delete props.exit;
+        if (Component === null) {
+          return /*#__PURE__*/React__namespace.default.createElement(TransitionGroupContext.Provider, {
+            value: contextValue
+          }, children);
+        }
+        return /*#__PURE__*/React__namespace.default.createElement(TransitionGroupContext.Provider, {
+          value: contextValue
+        }, /*#__PURE__*/React__namespace.default.createElement(Component, props, children));
+      };
+      return TransitionGroup;
+    }(React__namespace.default.Component);
+    TransitionGroup.propTypes = {};
+    TransitionGroup.defaultProps = defaultProps;
+
+    /**
+     * The `<ReplaceTransition>` component is a specialized `Transition` component
+     * that animates between two children.
+     *
+     * ```jsx
+     * <ReplaceTransition in>
+     *   <Fade><div>I appear first</div></Fade>
+     *   <Fade><div>I replace the above</div></Fade>
+     * </ReplaceTransition>
+     * ```
+     */
+
+    var ReplaceTransition = /*#__PURE__*/function (_React$Component) {
+      _inheritsLoose(ReplaceTransition, _React$Component);
+      function ReplaceTransition() {
+        var _this;
+        for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+          _args[_key] = arguments[_key];
+        }
+        _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
+        _this.handleEnter = function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+          return _this.handleLifecycle('onEnter', 0, args);
+        };
+        _this.handleEntering = function () {
+          for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+            args[_key3] = arguments[_key3];
+          }
+          return _this.handleLifecycle('onEntering', 0, args);
+        };
+        _this.handleEntered = function () {
+          for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+            args[_key4] = arguments[_key4];
+          }
+          return _this.handleLifecycle('onEntered', 0, args);
+        };
+        _this.handleExit = function () {
+          for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+            args[_key5] = arguments[_key5];
+          }
+          return _this.handleLifecycle('onExit', 1, args);
+        };
+        _this.handleExiting = function () {
+          for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+            args[_key6] = arguments[_key6];
+          }
+          return _this.handleLifecycle('onExiting', 1, args);
+        };
+        _this.handleExited = function () {
+          for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+            args[_key7] = arguments[_key7];
+          }
+          return _this.handleLifecycle('onExited', 1, args);
+        };
+        return _this;
+      }
+      var _proto = ReplaceTransition.prototype;
+      _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
+        var _child$props;
+        var children = this.props.children;
+        var child = React__namespace.default.Children.toArray(children)[idx];
+        if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
+        if (this.props[handler]) {
+          var maybeNode = child.props.nodeRef ? undefined : ReactDOM__default.default.findDOMNode(this);
+          this.props[handler](maybeNode);
+        }
+      };
+      _proto.render = function render() {
+        var _this$props = this.props,
+          children = _this$props.children,
+          inProp = _this$props.in,
+          props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
+        var _React$Children$toArr = React__namespace.default.Children.toArray(children),
+          first = _React$Children$toArr[0],
+          second = _React$Children$toArr[1];
+        delete props.onEnter;
+        delete props.onEntering;
+        delete props.onEntered;
+        delete props.onExit;
+        delete props.onExiting;
+        delete props.onExited;
+        return /*#__PURE__*/React__namespace.default.createElement(TransitionGroup, props, inProp ? React__namespace.default.cloneElement(first, {
+          key: 'first',
+          onEnter: this.handleEnter,
+          onEntering: this.handleEntering,
+          onEntered: this.handleEntered
+        }) : React__namespace.default.cloneElement(second, {
+          key: 'second',
+          onEnter: this.handleExit,
+          onEntering: this.handleExiting,
+          onEntered: this.handleExited
+        }));
+      };
+      return ReplaceTransition;
+    }(React__namespace.default.Component);
+    ReplaceTransition.propTypes = {};
+
+    var _leaveRenders, _enterRenders;
+    function areChildrenDifferent(oldChildren, newChildren) {
+      if (oldChildren === newChildren) return false;
+      if (React__namespace.default.isValidElement(oldChildren) && React__namespace.default.isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {
+        return false;
+      }
+      return true;
+    }
+    /**
+     * Enum of modes for SwitchTransition component
+     * @enum { string }
+     */
+
+    var modes = {
+      out: 'out-in',
+      in: 'in-out'
+    };
+    var callHook = function callHook(element, name, cb) {
+      return function () {
+        var _element$props;
+        element.props[name] && (_element$props = element.props)[name].apply(_element$props, arguments);
+        cb();
+      };
+    };
+    var leaveRenders = (_leaveRenders = {}, _leaveRenders[modes.out] = function (_ref) {
+      var current = _ref.current,
+        changeState = _ref.changeState;
+      return React__namespace.default.cloneElement(current, {
+        in: false,
+        onExited: callHook(current, 'onExited', function () {
+          changeState(ENTERING, null);
+        })
+      });
+    }, _leaveRenders[modes.in] = function (_ref2) {
+      var current = _ref2.current,
+        changeState = _ref2.changeState,
+        children = _ref2.children;
+      return [current, React__namespace.default.cloneElement(children, {
+        in: true,
+        onEntered: callHook(children, 'onEntered', function () {
+          changeState(ENTERING);
+        })
+      })];
+    }, _leaveRenders);
+    var enterRenders = (_enterRenders = {}, _enterRenders[modes.out] = function (_ref3) {
+      var children = _ref3.children,
+        changeState = _ref3.changeState;
+      return React__namespace.default.cloneElement(children, {
+        in: true,
+        onEntered: callHook(children, 'onEntered', function () {
+          changeState(ENTERED, React__namespace.default.cloneElement(children, {
+            in: true
+          }));
+        })
+      });
+    }, _enterRenders[modes.in] = function (_ref4) {
+      var current = _ref4.current,
+        children = _ref4.children,
+        changeState = _ref4.changeState;
+      return [React__namespace.default.cloneElement(current, {
+        in: false,
+        onExited: callHook(current, 'onExited', function () {
+          changeState(ENTERED, React__namespace.default.cloneElement(children, {
+            in: true
+          }));
+        })
+      }), React__namespace.default.cloneElement(children, {
+        in: true
+      })];
+    }, _enterRenders);
+    /**
+     * A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
+     * You can use it when you want to control the render between state transitions.
+     * Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
+     *
+     * If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
+     * If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child.
+     *
+     * **Note**: If you want the animation to happen simultaneously
+     * (that is, to have the old child removed and a new child inserted **at the same time**),
+     * you should use
+     * [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group)
+     * instead.
+     *
+     * ```jsx
+     * function App() {
+     *  const [state, setState] = useState(false);
+     *  return (
+     *    <SwitchTransition>
+     *      <CSSTransition
+     *        key={state ? "Goodbye, world!" : "Hello, world!"}
+     *        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
+     *        classNames='fade'
+     *      >
+     *        <button onClick={() => setState(state => !state)}>
+     *          {state ? "Goodbye, world!" : "Hello, world!"}
+     *        </button>
+     *      </CSSTransition>
+     *    </SwitchTransition>
+     *  );
+     * }
+     * ```
+     *
+     * ```css
+     * .fade-enter{
+     *    opacity: 0;
+     * }
+     * .fade-exit{
+     *    opacity: 1;
+     * }
+     * .fade-enter-active{
+     *    opacity: 1;
+     * }
+     * .fade-exit-active{
+     *    opacity: 0;
+     * }
+     * .fade-enter-active,
+     * .fade-exit-active{
+     *    transition: opacity 500ms;
+     * }
+     * ```
+     */
+
+    var SwitchTransition = /*#__PURE__*/function (_React$Component) {
+      _inheritsLoose(SwitchTransition, _React$Component);
+      function SwitchTransition() {
+        var _this;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+        _this.state = {
+          status: ENTERED,
+          current: null
+        };
+        _this.appeared = false;
+        _this.changeState = function (status, current) {
+          if (current === void 0) {
+            current = _this.state.current;
+          }
+          _this.setState({
+            status: status,
+            current: current
+          });
+        };
+        return _this;
+      }
+      var _proto = SwitchTransition.prototype;
+      _proto.componentDidMount = function componentDidMount() {
+        this.appeared = true;
+      };
+      SwitchTransition.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+        if (props.children == null) {
+          return {
+            current: null
+          };
+        }
+        if (state.status === ENTERING && props.mode === modes.in) {
+          return {
+            status: ENTERING
+          };
+        }
+        if (state.current && areChildrenDifferent(state.current, props.children)) {
+          return {
+            status: EXITING
+          };
+        }
+        return {
+          current: React__namespace.default.cloneElement(props.children, {
+            in: true
+          })
+        };
+      };
+      _proto.render = function render() {
+        var _this$props = this.props,
+          children = _this$props.children,
+          mode = _this$props.mode,
+          _this$state = this.state,
+          status = _this$state.status,
+          current = _this$state.current;
+        var data = {
+          children: children,
+          current: current,
+          changeState: this.changeState,
+          status: status
+        };
+        var component;
+        switch (status) {
+          case ENTERING:
+            component = enterRenders[mode](data);
+            break;
+          case EXITING:
+            component = leaveRenders[mode](data);
+            break;
+          case ENTERED:
+            component = current;
+        }
+        return /*#__PURE__*/React__namespace.default.createElement(TransitionGroupContext.Provider, {
+          value: {
+            isMounting: !this.appeared
+          }
+        }, component);
+      };
+      return SwitchTransition;
+    }(React__namespace.default.Component);
+    SwitchTransition.propTypes = {};
+    SwitchTransition.defaultProps = {
+      mode: modes.out
+    };
+
+    var useMergeRefs = function () {
+      var refs = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+      }
+      return React.useMemo(function () {
+        if (refs.every(function (ref) {
+          return ref == null;
+        })) {
+          return null;
+        }
+        return function (instance) {
+          refs.forEach(function (ref) {
+            if (typeof ref === 'function') {
+              ref(instance);
+            } else if (ref) {
+              ref.current = instance;
+            }
+          });
+        };
+      }, refs);
+    };
+
+    var styles = {
+      zoom: {
+        entering: {
+          transform: 'none'
+        },
+        entered: {
+          transform: 'none'
+        }
+      },
+      fade: {
+        entering: {
+          opacity: 1
+        },
+        entered: {
+          opacity: 1
+        }
+      },
+      grow: {
+        entering: {
+          opacity: 1,
+          transform: 'scale(1, 1)'
+        },
+        entered: {
+          opacity: 1,
+          transform: 'none'
+        }
+      },
+      slide_fade: {
+        entering: {
+          opacity: 0,
+          transform: 'translateY(4px)'
+        },
+        entered: {
+          opacity: 1,
+          transform: ''
+        },
+        exited: {
+          opacity: 0,
+          transform: 'translateY(4px)'
+        }
+      },
+      grow_from_container: {},
+      collapse: {},
+      slide: {}
+    };
+    var defaultTransform = {
+      grow: 'scale(0.75, 0.5625)',
+      zoom: 'scale(0)'
+    };
+    var reflow = function (node) {
+      return node.scrollTop;
+    };
+    function getTransitionProps(props, options) {
+      var _a, _b;
+      var timeout = props.timeout,
+        easing = props.easing,
+        _c = props.style,
+        style = _c === void 0 ? {} : _c;
+      return {
+        duration: (_a = style.transitionDuration) !== null && _a !== void 0 ? _a : typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
+        easing: (_b = style.transitionTimingFunction) !== null && _b !== void 0 ? _b : typeof easing === 'object' ? easing[options.mode] : easing,
+        delay: style.transitionDelay
+      };
+    }
+    function getTranslateValue(direction, node, containerRef) {
+      var rect = node.getBoundingClientRect();
+      var containerRect = containerRef && containerRef.getBoundingClientRect();
+      var computedStyle = window.getComputedStyle(node);
+      var transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
+      var offsetX = 0;
+      var offsetY = 0;
+      if (transform && transform !== 'none' && typeof transform === 'string') {
+        var transformValues = transform.split('(')[1].split(')')[0].split(',');
+        offsetX = parseInt(transformValues[4], 10);
+        offsetY = parseInt(transformValues[5], 10);
+      }
+      if (direction === 'left') {
+        if (containerRect) {
+          return "translateX(".concat(containerRect.right + offsetX - rect.left, "px)");
+        }
+        return "translateX(".concat(window.innerWidth + offsetX - rect.left, "px)");
+      }
+      if (direction === 'right') {
+        if (containerRect) {
+          return "translateX(-".concat(rect.right - containerRect.left - offsetX, "px)");
+        }
+        return "translateX(-".concat(rect.left + rect.width - offsetX, "px)");
+      }
+      if (direction === 'up') {
+        if (containerRect) {
+          return "translateY(".concat(containerRect.bottom + offsetY - rect.top, "px)");
+        }
+        return "translateY(".concat(window.innerHeight + offsetY - rect.top, "px)");
+      }
+      if (containerRect) {
+        return "translateY(-".concat(rect.top - containerRect.top + rect.height - offsetY, "px)");
+      }
+      return "translateY(-".concat(rect.top + rect.height - offsetY, "px)");
+    }
+    function setTranslateValue(direction, node, containerRef) {
+      var transform = getTranslateValue(direction, node, containerRef);
+      if (transform) {
+        node.style.webkitTransform = transform;
+        node.style.transform = transform;
+      }
+    }
+    function getGrowFromContainerStyles(_a) {
+      var containerRef = _a.containerRef,
+        node = _a.node,
+        transitionProps = _a.transitionProps;
+      var _b = transitionProps !== null && transitionProps !== void 0 ? transitionProps : {},
+        _c = _b.delay,
+        delay = _c === void 0 ? 0 : _c,
+        _d = _b.duration,
+        duration = _d === void 0 ? 300 : _d,
+        _e = _b.easing,
+        easing = _e === void 0 ? '' : _e;
+      requestAnimationFrame(function () {
+        var _a;
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) return;
+        var _b = (_a = containerRef.current.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {},
+          width = _b.width,
+          height = _b.height,
+          top = _b.top,
+          left = _b.left;
+        node.style.transition = '';
+        node.style.opacity = '0';
+        var _c = node.getBoundingClientRect(),
+          realHeight = _c.height,
+          realWidth = _c.width;
+        requestAnimationFrame(function () {
+          node.style.transformOrigin = 'top left';
+          node.style.top = top + 'px';
+          node.style.left = left + 'px';
+          node.style.opacity = '0';
+          node.style.height = height + 'px';
+          node.style.width = width + 'px';
+          node.style.transform = 'translate(0, 0)';
+          requestAnimationFrame(function () {
+            node.style.transition = "opacity ".concat(duration / 3, "ms ").concat(delay, "ms ").concat(easing, ", width ").concat(duration, "ms ").concat(delay, "ms ").concat(easing, ", height ").concat(duration, "ms ").concat(delay, "ms ").concat(easing, ", transform ").concat(duration, "ms ").concat(delay, "ms ").concat(easing);
+            node.style.height = realHeight + 'px';
+            node.style.width = realWidth + 'px';
+            node.style.opacity = '1';
+            node.style.transform = "translate(".concat(-left, "px, ").concat(-top, "px)");
+          });
+        });
+      });
+    }
+    function getExitGrowFromContainerStyles(_a) {
+      var containerRef = _a.containerRef,
+        node = _a.node,
+        transitionProps = _a.transitionProps;
+      var _b = transitionProps !== null && transitionProps !== void 0 ? transitionProps : {},
+        _c = _b.delay,
+        delay = _c === void 0 ? 0 : _c,
+        _d = _b.duration,
+        duration = _d === void 0 ? 300 : _d,
+        _e = _b.easing,
+        easing = _e === void 0 ? '' : _e;
+      var resizingTime = 6 * duration / 10;
+      var fadingDelay = 5 * duration / 10;
+      requestAnimationFrame(function () {
+        var _a;
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) return;
+        var _b = (_a = containerRef.current.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {},
+          width = _b.width,
+          height = _b.height,
+          top = _b.top,
+          left = _b.left;
+        node.style.transition = "opacity ".concat(duration, "ms ").concat(fadingDelay, "ms ").concat(easing, ", width ").concat(resizingTime, "ms ").concat(delay, "ms ").concat(easing, ", height ").concat(resizingTime, "ms ").concat(delay, "ms ").concat(easing, ", transform ").concat(resizingTime, "ms ").concat(delay, "ms ").concat(easing);
+        node.style.transformOrigin = 'top left';
+        node.style.top = top + 'px';
+        node.style.left = left + 'px';
+        node.style.opacity = '0';
+        node.style.height = height + 'px';
+        node.style.width = width + 'px';
+        node.style.transform = 'translate(0, 0)';
+      });
+    }
+    React__namespace.forwardRef(function (_a, forwardedRef) {
+      var _b = _a.appear,
+        appear = _b === void 0 ? true : _b,
+        inProp = _a.in;
+      _a.css;
+      var style = _a.style,
+        type = _a.type,
+        children = _a.children,
+        timeout = _a.timeout,
+        easing = _a.easing,
+        containerRef = _a.containerRef,
+        _c = _a.slideDirection,
+        slideDirection = _c === void 0 ? 'down' : _c,
+        onEnter = _a.onEnter,
+        onEntered = _a.onEntered,
+        onEntering = _a.onEntering,
+        onExit = _a.onExit,
+        onExited = _a.onExited,
+        onExiting = _a.onExiting,
+        addEndListener = _a.addEndListener,
+        other = __rest(_a, ["appear", "in", "css", "style", "type", "children", "timeout", "easing", "containerRef", "slideDirection", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "addEndListener"]);
+      var theme = ctDesignTheme.useTheme();
+      var defaultTimeout = {
+        enter: theme.transitions.duration.enteringScreen,
+        exit: theme.transitions.duration.leavingScreen
+      };
+      timeout = timeout || defaultTimeout;
+      var nodeRef = React__namespace.useRef(null);
+      var handleRef = useMergeRefs(nodeRef, children === null || children === void 0 ? void 0 : children.ref, forwardedRef);
+      var normalizedTransitionCallback = function (callback) {
+        return function (maybeIsAppearing) {
+          if (callback) {
+            var node = nodeRef.current;
+            if (maybeIsAppearing === undefined) {
+              callback(node);
+            } else {
+              callback(node, maybeIsAppearing);
+            }
+          }
+        };
+      };
+      var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
+        if (type === 'slide') {
+          setTranslateValue(slideDirection, node, containerRef);
+        }
+        reflow(node);
+        var transitionProps = getTransitionProps({
+          style: style,
+          timeout: timeout,
+          easing: easing
+        }, {
+          mode: 'enter'
+        });
+        if (type === 'fade') {
+          node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
+          node.style.transition = theme.transitions.create('opacity', transitionProps);
+        }
+        if (type === 'slide_fade') {
+          node.style.webkitTransition = [theme.transitions.create('opacity', transitionProps), theme.transitions.create('transform', transitionProps)].join(',');
+          node.style.transition = [theme.transitions.create('opacity', transitionProps), theme.transitions.create('transform', transitionProps)].join(',');
+        }
+        if (type === 'grow_from_container') {
+          getGrowFromContainerStyles({
+            node: node,
+            containerRef: containerRef,
+            transitionProps: transitionProps
+          });
+        }
+        if (type === 'grow') {
+          var duration = void 0;
+          node.style.transition = [theme.transitions.create('opacity', {
+            duration: transitionProps.duration,
+            delay: transitionProps.delay
+          }), theme.transitions.create('transform', {
+            duration: duration,
+            delay: transitionProps.delay,
+            easing: transitionProps.easing
+          })].join(',');
+        }
+        if (type === 'zoom') {
+          node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
+          node.style.transition = theme.transitions.create('transform', transitionProps);
+        }
+        if (onEnter) {
+          onEnter(node, isAppearing);
+        }
+      });
+      var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {
+        if (type === 'slide') {
+          var easingValue = easing || {
+            enter: theme.transitions.easing.easeOut,
+            exit: theme.transitions.easing.sharp
+          };
+          var transitionProps = getTransitionProps({
+            timeout: timeout,
+            style: style,
+            easing: easingValue
+          }, {
+            mode: 'enter'
+          });
+          node.style.webkitTransition = theme.transitions.create('-webkit-transform', __assign({}, transitionProps));
+          node.style.transition = theme.transitions.create('transform', __assign({}, transitionProps));
+          node.style.webkitTransform = 'none';
+          node.style.transform = 'none';
+        }
+        if (onEntering) {
+          onEntering(node, isAppearing);
+        }
+      });
+      var handleEntered = normalizedTransitionCallback(onEntered);
+      var handleExiting = normalizedTransitionCallback(onExiting);
+      var handleExit = normalizedTransitionCallback(function (node) {
+        var transitionProps = getTransitionProps({
+          style: style,
+          timeout: timeout,
+          easing: easing
+        }, {
+          mode: 'exit'
+        });
+        if (type == 'fade') {
+          node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
+          node.style.transition = theme.transitions.create('opacity', transitionProps);
+        }
+        if (type === 'slide_fade') {
+          node.style.transition = '';
+          node.style.webkitTransition = '';
+        }
+        if (type === 'grow_from_container') {
+          getExitGrowFromContainerStyles({
+            node: node,
+            containerRef: containerRef,
+            transitionProps: transitionProps
+          });
+        }
+        if (type === 'grow') {
+          node.style.transition = [theme.transitions.create('opacity', {
+            duration: transitionProps.duration,
+            delay: transitionProps.delay
+          }), theme.transitions.create('transform', {
+            duration: transitionProps.duration,
+            delay: transitionProps.delay,
+            easing: transitionProps.easing
+          })].join(',');
+          node.style.opacity = 0;
+          node.style.transform = 'scale(0.75, 0.5625)';
+        }
+        if (type === 'zoom') {
+          node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
+          node.style.transition = theme.transitions.create('transform', transitionProps);
+        }
+        if (type === 'slide') {
+          node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
+          node.style.transition = theme.transitions.create('transform', transitionProps);
+          setTranslateValue(slideDirection, node, containerRef);
+        }
+        if (onExit) {
+          onExit(node);
+        }
+      });
+      var handleExited = normalizedTransitionCallback(function (node) {
+        if (type === 'slide') {
+          node.style.webkitTransition = '';
+          node.style.transition = '';
+        }
+        if (onExited) {
+          onExited(node);
+        }
+      });
+      var handleAddEndListener = function (next) {
+        if (addEndListener && nodeRef.current) {
+          addEndListener(nodeRef.current, next);
+        }
+      };
+      var updatePosition = React__namespace.useCallback(function () {
+        if (nodeRef.current) {
+          setTranslateValue(slideDirection, nodeRef.current, containerRef);
+        }
+      }, [slideDirection, containerRef]);
+      React__namespace.useEffect(function () {
+        if (inProp || slideDirection === 'down' || slideDirection === 'right') {
+          return undefined;
+        }
+        var handleResize = ctDesignCommonUtils.debounce(function () {
+          if (nodeRef.current) {
+            setTranslateValue(slideDirection, nodeRef.current, containerRef);
+          }
+        });
+        window.addEventListener('resize', handleResize);
+        return function () {
+          window.removeEventListener('resize', handleResize);
+        };
+      }, [slideDirection, inProp, containerRef]);
+      React__namespace.useEffect(function () {
+        if (type === 'slide' && !inProp) {
+          updatePosition();
+        }
+      }, [inProp, updatePosition]);
+      return jsxRuntime.jsx(Transition, __assign({
+        appear: appear,
+        in: inProp,
+        nodeRef: nodeRef,
+        onEnter: handleEnter,
+        onEntered: handleEntered,
+        onEntering: handleEntering,
+        onExit: handleExit,
+        onExited: handleExited,
+        onExiting: handleExiting,
+        addEndListener: handleAddEndListener,
+        timeout: timeout
+      }, other, {
+        children: function (state) {
+          var childProp = {
+            style: __assign(__assign(__assign({
+              opacity: (type == 'fade' || type === 'grow') && 0,
+              transform: defaultTransform[type],
+              visibility: state === 'exited' && !inProp ? 'hidden' : undefined
+            }, styles[type][state]), style), children.props.style),
+            ref: handleRef
+          };
+          if (type === 'slide') {
+            childProp = __assign(__assign({}, childProp), children.props);
+          }
+          return React__namespace.cloneElement(children, childProp);
+        }
+      }));
+    });
+
     var HOVER_TYPE;
     (function (HOVER_TYPE) {
       HOVER_TYPE["ENTER"] = "ENTER";
@@ -119,14 +1912,14 @@
         var _d = shadowWidth || {}, leftShadowWidth = _d.left, rightShadowWidth = _d.right;
         var theme = ctDesignTheme.useTheme();
         var childrenContainer = styleConfig.childrenContainer, leftChevron = styleConfig.leftChevron, leftShadowContainer = styleConfig.leftShadowContainer, leftShadowWrapper = styleConfig.leftShadowWrapper, rightChevron = styleConfig.rightChevron, rightShadowContainer = styleConfig.rightShadowContainer, rightShadowWrapper = styleConfig.rightShadowWrapper, root = styleConfig.root, scrollWrapper = styleConfig.scrollWrapper;
-        var _e = react.useState(false), isHovering = _e[0], setIsHovering = _e[1];
-        var _f = react.useState({
+        var _e = React.useState(false), isHovering = _e[0], setIsHovering = _e[1];
+        var _f = React.useState({
             left: false,
             right: false,
         }), shadowDirection = _f[0], setShadowDirection = _f[1];
-        var horizontalScrollRef = react.useRef(null);
-        var parentContainerRef = react.useRef(null);
-        var childContainerRef = react.useRef(null);
+        var horizontalScrollRef = React.useRef(null);
+        var parentContainerRef = React.useRef(null);
+        var childContainerRef = React.useRef(null);
         var updateArrowIcons = function () {
             if (horizontalScrollRef.current && childContainerRef.current) {
                 var _a = horizontalScrollRef.current.getBoundingClientRect(), horizontalScrollRight = _a.right, horizontalScrollLeft = _a.left;
@@ -145,7 +1938,7 @@
                 }
             }
         };
-        react.useEffect(function () {
+        React.useEffect(function () {
             var _a;
             setTimeout(updateArrowIcons, 200);
             var callback = ctDesignCommonUtils.debounce(updateArrowIcons, 200);
@@ -155,7 +1948,7 @@
                 (_a = parentContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', callback);
             };
         }, []);
-        var onHover = react.useCallback(function (type) { return function () {
+        var onHover = React.useCallback(function (type) { return function () {
             if (type === HOVER_TYPE.ENTER) {
                 setIsHovering(true);
             }
@@ -175,7 +1968,7 @@
                 }
             }
         }; };
-        var arrowDimension = react.useMemo(function () {
+        var arrowDimension = React.useMemo(function () {
             switch (arrowSize) {
                 case exports.ARROW_SIZE.SM: {
                     return theme.size[6];