\n * )}\n * \n * );\n * ```\n *\n * As noted the `Transition` component doesn't _do_ anything by itself to its child component.\n * What it does do is track transition states over time so you can update the\n * component (such as by adding styles or classes) when it changes states.\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component begins the\n * \"Enter\" stage. During this stage, the component will shift from its current transition state,\n * to `'entering'` for the duration of the transition and then to the `'entered'` stage once\n * it's complete. Let's take the following example:\n *\n * ```jsx\n * state = { in: false };\n *\n * toggleEnterState = () => {\n * this.setState({ in: true });\n * }\n *\n * render() {\n * return (\n *
\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state and\n * stay there for 500ms (the value of `timeout`) before it finally switches to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.\n *\n * ## Timing\n *\n * Timing is often the trickiest part of animation, mistakes can result in slight delays\n * that are hard to pin down. A common example is when you want to add an exit transition,\n * you should set the desired final styles when the state is `'exiting'`. That's when the\n * transition to those styles will start and, if you matched the `timeout` prop with the\n * CSS Transition duration, it will end exactly when the state changes to `'exited'`.\n *\n * > **Note**: For simpler transitions the `Transition` component might be enough, but\n * > take into account that it's platform-agnostic, while the `CSSTransition` component\n * > [forces reflows](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * > in order to make more complex transitions more predictable. For example, even though\n * > classes `example-enter` and `example-enter-active` are applied immediately one after\n * > another, you can still transition from one to the other because of the forced reflow\n * > (read [this issue](https://github.com/reactjs/react-transition-group/issues/159#issuecomment-322761171)\n * > for more info). Take this into account when choosing between `Transition` and\n * > `CSSTransition`.\n *\n * ## Example\n *\n * \n *\n */\n\nvar Transition = function (_React$Component) {\n _inherits(Transition, _React$Component);\n\n function Transition(props, context) {\n _classCallCheck(this, Transition);\n\n var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));\n\n var parentGroup = context.transitionGroup;\n // In the context of a TransitionGroup all enters are really appears\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n\n var initialStatus = void 0;\n _this.nextStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.nextStatus = 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\n _this.state = { status: initialStatus };\n\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.prototype.getChildContext = function getChildContext() {\n return { transitionGroup: null }; // allows for nested Transitions\n };\n\n Transition.prototype.componentDidMount = function componentDidMount() {\n this.updateStatus(true);\n };\n\n Transition.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {\n var _ref = this.pendingState || this.state,\n status = _ref.status;\n\n if (nextProps.in) {\n if (status === UNMOUNTED) {\n this.setState({ status: EXITED });\n }\n if (status !== ENTERING && status !== ENTERED) {\n this.nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n this.nextStatus = EXITING;\n }\n }\n };\n\n Transition.prototype.componentDidUpdate = function componentDidUpdate() {\n this.updateStatus();\n };\n\n Transition.prototype.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n Transition.prototype.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n\n var exit = void 0,\n enter = void 0,\n appear = void 0;\n\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter;\n appear = timeout.appear;\n }\n return { exit: exit, enter: enter, appear: appear };\n };\n\n Transition.prototype.updateStatus = function updateStatus() {\n var mounting = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n var nextStatus = this.nextStatus;\n\n if (nextStatus !== null) {\n this.nextStatus = null;\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n var node = _reactDom2.default.findDOMNode(this);\n\n if (nextStatus === ENTERING) {\n this.performEnter(node, mounting);\n } else {\n this.performExit(node);\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({ status: UNMOUNTED });\n }\n };\n\n Transition.prototype.performEnter = function performEnter(node, mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n\n var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;\n\n var timeouts = this.getTimeouts();\n\n // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n if (!mounting && !enter) {\n this.safeSetState({ status: ENTERED }, function () {\n _this2.props.onEntered(node);\n });\n return;\n }\n\n this.props.onEnter(node, appearing);\n\n this.safeSetState({ status: ENTERING }, function () {\n _this2.props.onEntering(node, appearing);\n\n // FIXME: appear timeout?\n _this2.onTransitionEnd(node, timeouts.enter, function () {\n _this2.safeSetState({ status: ENTERED }, function () {\n _this2.props.onEntered(node, appearing);\n });\n });\n });\n };\n\n Transition.prototype.performExit = function performExit(node) {\n var _this3 = this;\n\n var exit = this.props.exit;\n\n var timeouts = this.getTimeouts();\n\n // no exit animation skip right to EXITED\n if (!exit) {\n this.safeSetState({ status: EXITED }, function () {\n _this3.props.onExited(node);\n });\n return;\n }\n this.props.onExit(node);\n\n this.safeSetState({ status: EXITING }, function () {\n _this3.props.onExiting(node);\n\n _this3.onTransitionEnd(node, timeouts.exit, function () {\n _this3.safeSetState({ status: EXITED }, function () {\n _this3.props.onExited(node);\n });\n });\n });\n };\n\n Transition.prototype.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n Transition.prototype.safeSetState = function safeSetState(nextState, callback) {\n var _this4 = this;\n\n // We need to track pending updates for instances where a cWRP fires quickly\n // after cDM and before the state flushes, which would double trigger a\n // transition\n this.pendingState = nextState;\n\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, function () {\n _this4.pendingState = null;\n callback();\n });\n };\n\n Transition.prototype.setNextCallback = function setNextCallback(callback) {\n var _this5 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this5.nextCallback = null;\n\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n Transition.prototype.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {\n this.setNextCallback(handler);\n\n if (node) {\n if (this.props.addEndListener) {\n this.props.addEndListener(node, this.nextCallback);\n }\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n } else {\n setTimeout(this.nextCallback, 0);\n }\n };\n\n Transition.prototype.render = function render() {\n var status = this.state.status;\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _props = this.props,\n children = _props.children,\n childProps = _objectWithoutProperties(_props, ['children']);\n // filter props for Transtition\n\n\n delete childProps.in;\n delete childProps.mountOnEnter;\n delete childProps.unmountOnExit;\n delete childProps.appear;\n delete childProps.enter;\n delete childProps.exit;\n delete childProps.timeout;\n delete childProps.addEndListener;\n delete childProps.onEnter;\n delete childProps.onEntering;\n delete childProps.onEntered;\n delete childProps.onExit;\n delete childProps.onExiting;\n delete childProps.onExited;\n\n if (typeof children === 'function') {\n return children(status, childProps);\n }\n\n var child = _react2.default.Children.only(children);\n return _react2.default.cloneElement(child, childProps);\n };\n\n return Transition;\n}(_react2.default.Component);\n\nTransition.contextTypes = {\n transitionGroup: PropTypes.object\n};\nTransition.childContextTypes = {\n transitionGroup: function transitionGroup() {}\n};\n\n\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A `function` child can be used instead of a React element.\n * This function is called with the current transition status\n * ('entering', 'entered', 'exiting', 'exited', 'unmounted'), which can be used\n * to apply context specific props to a component.\n *\n * ```jsx\n * \n * {(status) => (\n * \n * )}\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * Normally a component is not transitioned if it is shown when the `` component mounts.\n * If you want to transition on the first mount set `appear` to `true`, and the\n * component will transition in as soon as the `` mounts.\n *\n * > Note: there are no specific \"appear\" states. `appear` only adds an additional `enter` transition.\n */\n appear: PropTypes.bool,\n\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided\n *\n * You may specify a single timeout for all transitions like: `timeout={500}`,\n * or individually like:\n *\n * ```jsx\n * timeout={{\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * @type {number | { enter?: number, exit?: number }}\n */\n timeout: function timeout(props) {\n for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n var pt = _PropTypes.timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n return pt.apply(undefined, [props].concat(args));\n },\n\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. **Note:** Timeouts are still used as a fallback if provided.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {};\n\n// Name the function so it is clearer in the documentation\nfunction noop() {}\n\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\n\nTransition.UNMOUNTED = 0;\nTransition.EXITED = 1;\nTransition.ENTERING = 2;\nTransition.ENTERED = 3;\nTransition.EXITING = 4;\n\nexports.default = Transition;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Transition from 'react-transition-group/Transition';\nimport { mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts } from './utils';\n\nconst propTypes = {\n ...Transition.propTypes,\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]),\n tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n baseClass: PropTypes.string,\n baseClassActive: PropTypes.string,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n innerRef: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.func,\n ]),\n};\n\nconst defaultProps = {\n ...Transition.defaultProps,\n tag: 'div',\n baseClass: 'fade',\n baseClassActive: 'show',\n timeout: TransitionTimeouts.Fade,\n appear: true,\n enter: true,\n exit: true,\n in: true,\n};\n\nfunction Fade(props) {\n const {\n tag: Tag,\n baseClass,\n baseClassActive,\n className,\n cssModule,\n children,\n innerRef,\n ...otherProps\n } = props;\n\n // In NODE_ENV=production the Transition.propTypes are wrapped which results in an\n // empty object \"{}\". This is the result of the `react-transition-group` babel\n // configuration settings. Therefore, to ensure that production builds work without\n // error, we can either explicitly define keys or use the Transition.defaultProps.\n // Using the Transition.defaultProps excludes any required props. Thus, the best\n // solution is to explicitly define required props in our utilities and reference these.\n // This also gives us more flexibility in the future to remove the prop-types\n // dependency in distribution builds (Similar to how `react-transition-group` does).\n // Note: Without omitting the `react-transition-group` props, the resulting child\n // Tag component would inherit the Transition properties as attributes for the HTML\n // element which results in errors/warnings for non-valid attributes.\n const transitionProps = pick(otherProps, TransitionPropTypeKeys);\n const childProps = omit(otherProps, TransitionPropTypeKeys);\n\n return (\n \n {(status) => {\n const isActive = status === 'entered';\n const classes = mapToCssModules(classNames(\n className,\n baseClass,\n isActive && baseClassActive\n ), cssModule);\n return (\n \n {children}\n \n );\n }}\n \n );\n}\n\nFade.propTypes = propTypes;\nFade.defaultProps = defaultProps;\n\nexport default Fade;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n color: PropTypes.string,\n pill: PropTypes.bool,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n children: PropTypes.node,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n color: 'secondary',\n pill: false,\n tag: 'span'\n};\n\nconst Badge = (props) => {\n let {\n className,\n cssModule,\n color,\n pill,\n tag: Tag,\n ...attributes\n } = props;\n\n const classes = mapToCssModules(classNames(\n className,\n 'badge',\n 'badge-' + color,\n pill ? 'badge-pill' : false\n ), cssModule);\n\n if (attributes.href && Tag === 'span') {\n Tag = 'a';\n }\n\n return (\n \n );\n};\n\nBadge.propTypes = propTypes;\nBadge.defaultProps = defaultProps;\n\nexport default Badge;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, deprecated } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n inverse: PropTypes.bool,\n color: PropTypes.string,\n block: deprecated(PropTypes.bool, 'Please use the props \"body\"'),\n body: PropTypes.bool,\n outline: PropTypes.bool,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n innerRef: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.func,\n ]),\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst Card = (props) => {\n const {\n className,\n cssModule,\n color,\n block,\n body,\n inverse,\n outline,\n tag: Tag,\n innerRef,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card',\n inverse ? 'text-white' : false,\n block || body ? 'card-body' : false,\n color ? `${outline ? 'border' : 'bg'}-${color}` : false\n ), cssModule);\n\n return (\n \n );\n};\n\nCard.propTypes = propTypes;\nCard.defaultProps = defaultProps;\n\nexport default Card;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst CardGroup = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-group'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardGroup.propTypes = propTypes;\nCardGroup.defaultProps = defaultProps;\n\nexport default CardGroup;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div',\n};\n\nconst CardDeck = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-deck'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardDeck.propTypes = propTypes;\nCardDeck.defaultProps = defaultProps;\n\nexport default CardDeck;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst CardColumns = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-columns'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardColumns.propTypes = propTypes;\nCardColumns.defaultProps = defaultProps;\n\nexport default CardColumns;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst CardBody = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-body'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardBody.propTypes = propTypes;\nCardBody.defaultProps = defaultProps;\n\nexport default CardBody;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'a'\n};\n\nconst CardLink = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n innerRef,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-link'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardLink.propTypes = propTypes;\nCardLink.defaultProps = defaultProps;\n\nexport default CardLink;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst CardFooter = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-footer'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardFooter.propTypes = propTypes;\nCardFooter.defaultProps = defaultProps;\n\nexport default CardFooter;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst CardHeader = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-header'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardHeader.propTypes = propTypes;\nCardHeader.defaultProps = defaultProps;\n\nexport default CardHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n top: PropTypes.bool,\n bottom: PropTypes.bool,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'img'\n};\n\nconst CardImg = (props) => {\n const {\n className,\n cssModule,\n top,\n bottom,\n tag: Tag,\n ...attributes\n } = props;\n\n let cardImgClassName = 'card-img';\n if (top) {\n cardImgClassName = 'card-img-top';\n }\n if (bottom) {\n cardImgClassName = 'card-img-bottom';\n }\n\n const classes = mapToCssModules(classNames(\n className,\n cardImgClassName\n ), cssModule);\n\n return (\n \n );\n};\n\nCardImg.propTypes = propTypes;\nCardImg.defaultProps = defaultProps;\n\nexport default CardImg;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst CardImgOverlay = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'card-img-overlay'\n ), cssModule);\n\n return (\n \n );\n};\n\nCardImgOverlay.propTypes = propTypes;\nCardImgOverlay.defaultProps = defaultProps;\n\nexport default CardImgOverlay;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Transition from 'react-transition-group/Transition';\nimport { mapToCssModules, TransitionTimeouts, TransitionStatuses } from './utils';\n\nclass CarouselItem extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n startAnimation: false,\n };\n\n this.onEnter = this.onEnter.bind(this);\n this.onEntering = this.onEntering.bind(this);\n this.onExit = this.onExit.bind(this);\n this.onExiting = this.onExiting.bind(this);\n this.onExited = this.onExited.bind(this);\n }\n\n onEnter(node, isAppearing) {\n this.setState({ startAnimation: false });\n this.props.onEnter(node, isAppearing);\n }\n\n onEntering(node, isAppearing) {\n // getting this variable triggers a reflow\n const offsetHeight = node.offsetHeight;\n this.setState({ startAnimation: true });\n this.props.onEntering(node, isAppearing);\n return offsetHeight;\n }\n\n onExit(node) {\n this.setState({ startAnimation: false });\n this.props.onExit(node);\n }\n\n onExiting(node) {\n this.setState({ startAnimation: true });\n node.dispatchEvent(new CustomEvent('slide.bs.carousel'));\n this.props.onExiting(node);\n }\n\n onExited(node) {\n node.dispatchEvent(new CustomEvent('slid.bs.carousel'));\n this.props.onExited(node);\n }\n\n render() {\n const { in: isIn, children, cssModule, slide, tag: Tag, className, ...transitionProps } = this.props;\n\n return (\n \n {(status) => {\n const { direction } = this.context;\n const isActive = (status === TransitionStatuses.ENTERED) || (status === TransitionStatuses.EXITING);\n const directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) &&\n this.state.startAnimation &&\n (direction === 'right' ? 'carousel-item-left' : 'carousel-item-right');\n const orderClassName = (status === TransitionStatuses.ENTERING) &&\n (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev');\n const itemClasses = mapToCssModules(classNames(\n className,\n 'carousel-item',\n isActive && 'active',\n directionClassName,\n orderClassName,\n ), cssModule);\n\n return (\n \n {children}\n \n );\n }}\n \n );\n }\n}\n\nCarouselItem.propTypes = {\n ...Transition.propTypes,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n in: PropTypes.bool,\n cssModule: PropTypes.object,\n children: PropTypes.node,\n slide: PropTypes.bool,\n className: PropTypes.string,\n};\n\nCarouselItem.defaultProps = {\n ...Transition.defaultProps,\n tag: 'div',\n timeout: TransitionTimeouts.Carousel,\n slide: true,\n};\n\nCarouselItem.contextTypes = {\n direction: PropTypes.string\n};\n\nexport default CarouselItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport CarouselItem from './CarouselItem';\nimport { mapToCssModules } from './utils';\n\nclass Carousel extends React.Component {\n constructor(props) {\n super(props);\n this.handleKeyPress = this.handleKeyPress.bind(this);\n this.renderItems = this.renderItems.bind(this);\n this.hoverStart = this.hoverStart.bind(this);\n this.hoverEnd = this.hoverEnd.bind(this);\n this.state = {\n direction: 'right',\n indicatorClicked: false,\n };\n }\n\n getChildContext() {\n return { direction: this.state.direction };\n }\n\n componentDidMount() {\n // Set up the cycle\n if (this.props.ride === 'carousel') {\n this.setInterval();\n }\n\n // TODO: move this to the specific carousel like bootstrap. Currently it will trigger ALL carousels on the page.\n document.addEventListener('keyup', this.handleKeyPress);\n }\n\n componentWillReceiveProps(nextProps) {\n this.setInterval(nextProps);\n // Calculate the direction to turn\n if (this.props.activeIndex + 1 === nextProps.activeIndex) {\n this.setState({ direction: 'right' });\n } else if (this.props.activeIndex - 1 === nextProps.activeIndex) {\n this.setState({ direction: 'left' });\n } else if (this.props.activeIndex > nextProps.activeIndex) {\n this.setState({ direction: this.state.indicatorClicked ? 'left' : 'right' });\n } else if (this.props.activeIndex !== nextProps.activeIndex) {\n this.setState({ direction: this.state.indicatorClicked ? 'right' : 'left' });\n }\n this.setState({ indicatorClicked: false });\n }\n\n componentWillUnmount() {\n this.clearInterval();\n document.removeEventListener('keyup', this.handleKeyPress);\n }\n\n setInterval(props = this.props) {\n // make sure not to have multiple intervals going...\n this.clearInterval();\n if (props.interval) {\n this.cycleInterval = setInterval(() => {\n props.next();\n }, parseInt(props.interval, 10));\n }\n }\n\n clearInterval() {\n clearInterval(this.cycleInterval);\n }\n\n hoverStart(...args) {\n if (this.props.pause === 'hover') {\n this.clearInterval();\n }\n if (this.props.mouseEnter) {\n this.props.mouseEnter(...args);\n }\n }\n\n hoverEnd(...args) {\n if (this.props.pause === 'hover') {\n this.setInterval();\n }\n if (this.props.mouseLeave) {\n this.props.mouseLeave(...args);\n }\n }\n\n handleKeyPress(evt) {\n if (this.props.keyboard) {\n if (evt.keyCode === 37) {\n this.props.previous();\n } else if (evt.keyCode === 39) {\n this.props.next();\n }\n }\n }\n\n renderItems(carouselItems, className) {\n const { slide } = this.props;\n return (\n
\n );\n }\n}\n\nCarousel.propTypes = {\n // the current active slide of the carousel\n activeIndex: PropTypes.number,\n // a function which should advance the carousel to the next slide (via activeIndex)\n next: PropTypes.func.isRequired,\n // a function which should advance the carousel to the previous slide (via activeIndex)\n previous: PropTypes.func.isRequired,\n // controls if the left and right arrow keys should control the carousel\n keyboard: PropTypes.bool,\n /* If set to \"hover\", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on\n * mouseleave. If set to false, hovering over the carousel won't pause it. (default: \"hover\")\n */\n pause: PropTypes.oneOf(['hover', false]),\n // Autoplays the carousel after the user manually cycles the first item. If \"carousel\", autoplays the carousel on load.\n // This is how bootstrap defines it... I would prefer a bool named autoplay or something...\n ride: PropTypes.oneOf(['carousel']),\n // the interval at which the carousel automatically cycles (default: 5000)\n // eslint-disable-next-line react/no-unused-prop-types\n interval: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n PropTypes.bool,\n ]),\n children: PropTypes.array,\n // called when the mouse enters the Carousel\n mouseEnter: PropTypes.func,\n // called when the mouse exits the Carousel\n mouseLeave: PropTypes.func,\n // controls whether the slide animation on the Carousel works or not\n slide: PropTypes.bool,\n cssModule: PropTypes.object,\n className: PropTypes.string,\n};\n\nCarousel.defaultProps = {\n interval: 5000,\n pause: 'hover',\n keyboard: true,\n slide: true,\n};\n\nCarousel.childContextTypes = {\n direction: PropTypes.string\n};\n\nexport default Carousel;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst CarouselControl = (props) => {\n const { direction, onClickHandler, cssModule, directionText, className } = props;\n\n const anchorClasses = mapToCssModules(classNames(\n className,\n `carousel-control-${direction}`\n ), cssModule);\n\n const iconClasses = mapToCssModules(classNames(\n `carousel-control-${direction}-icon`\n ), cssModule);\n\n const screenReaderClasses = mapToCssModules(classNames(\n 'sr-only'\n ), cssModule);\n\n\n return (\n {\n e.preventDefault();\n onClickHandler();\n }}\n >\n \n {directionText || direction}\n \n );\n};\n\nCarouselControl.propTypes = {\n direction: PropTypes.oneOf(['prev', 'next']).isRequired,\n onClickHandler: PropTypes.func.isRequired,\n cssModule: PropTypes.object,\n directionText: PropTypes.string,\n className: PropTypes.string,\n};\n\nexport default CarouselControl;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst CarouselIndicators = (props) => {\n const { items, activeIndex, cssModule, onClickHandler, className } = props;\n\n const listClasses = mapToCssModules(classNames(className, 'carousel-indicators'), cssModule);\n const indicators = items.map((item, idx) => {\n const indicatorClasses = mapToCssModules(classNames(\n { active: activeIndex === idx }\n ), cssModule);\n return (\n {\n e.preventDefault();\n onClickHandler(idx);\n }}\n className={indicatorClasses}\n />);\n });\n\n return (\n \n {indicators}\n \n );\n};\n\nCarouselIndicators.propTypes = {\n items: PropTypes.array.isRequired,\n activeIndex: PropTypes.number.isRequired,\n cssModule: PropTypes.object,\n onClickHandler: PropTypes.func.isRequired,\n className: PropTypes.string,\n};\n\nexport default CarouselIndicators;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst CarouselCaption = (props) => {\n const { captionHeader, captionText, cssModule, className } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'carousel-caption',\n 'd-none',\n 'd-md-block'\n ), cssModule);\n\n return (\n