\n );\n}\n\nMultiSelectQuestion.propTypes = {\n question: PropTypes.shape({\n id: PropTypes.string.isRequired,\n displayData: PropTypes.shape({\n choicesLimit: PropTypes.string,\n }),\n inputs: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n label: PropTypes.string.isRequired,\n format: PropTypes.string.isRequired,\n })\n ).isRequired,\n }).isRequired,\n currentQuestionValues: PropTypes.shape({}),\n dispatchUpdateQuestionValue: PropTypes.func.isRequired,\n};\n\nMultiSelectQuestion.defaultProps = {\n currentQuestionValues: {},\n};\n\nexport default React.memo(MultiSelectQuestion);\n","export default {\n disabled: false\n};","import React from 'react';\nexport default React.createContext(null);","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n *
\n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\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\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * {state => (\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 * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `` component that first enter transition does result in\n * > additional `.appear-*` classes, that way you can choose to style it\n * > differently.\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:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return pt.apply(void 0, [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. Timeouts are still used as a fallback if provided.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {}; // Name the function so it is clearer in the documentation\n\nfunction noop() {}\n\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","import { Children, cloneElement, isValidElement } from 'react';\n/**\n * Given `this.props.children`, return an object mapping key to child.\n *\n * @param {*} children `this.props.children`\n * @return {object} Mapping of key to child\n */\n\nexport function getChildMapping(children, mapFn) {\n var mapper = function mapper(child) {\n return mapFn && isValidElement(child) ? mapFn(child) : child;\n };\n\n var result = Object.create(null);\n if (children) Children.map(children, function (c) {\n return c;\n }).forEach(function (child) {\n // run the map function here instead so that the key is the computed one\n result[child.key] = mapper(child);\n });\n return result;\n}\n/**\n * When you're adding or removing children some may be added or removed in the\n * same render pass. We want to show *both* since we want to simultaneously\n * animate elements in and out. This function takes a previous set of keys\n * and a new set of keys and merges them with its best guess of the correct\n * ordering. In the future we may expose some of the utilities in\n * ReactMultiChild to make this easy, but for now React itself does not\n * directly have this concept of the union of prevChildren and nextChildren\n * so we implement it here.\n *\n * @param {object} prev prev children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @param {object} next next children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @return {object} a key set that contains all keys in `prev` and all keys\n * in `next` in a reasonable order.\n */\n\nexport function mergeChildMappings(prev, next) {\n prev = prev || {};\n next = next || {};\n\n function getValueForKey(key) {\n return key in next ? next[key] : prev[key];\n } // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n\n\n var nextKeysPending = Object.create(null);\n var pendingKeys = [];\n\n for (var prevKey in prev) {\n if (prevKey in next) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n } else {\n pendingKeys.push(prevKey);\n }\n }\n\n var i;\n var childMapping = {};\n\n for (var nextKey in next) {\n if (nextKeysPending[nextKey]) {\n for (i = 0; i < nextKeysPending[nextKey].length; i++) {\n var pendingNextKey = nextKeysPending[nextKey][i];\n childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n } // Finally, add the keys which didn't appear before any key in `next`\n\n\n for (i = 0; i < pendingKeys.length; i++) {\n childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);\n }\n\n return childMapping;\n}\n\nfunction getProp(child, prop, props) {\n return props[prop] != null ? props[prop] : child.props[prop];\n}\n\nexport function getInitialChildMapping(props, onExited) {\n return getChildMapping(props.children, function (child) {\n return cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: true,\n appear: getProp(child, 'appear', props),\n enter: getProp(child, 'enter', props),\n exit: getProp(child, 'exit', props)\n });\n });\n}\nexport function getNextChildMapping(nextProps, prevChildMapping, onExited) {\n var nextChildMapping = getChildMapping(nextProps.children);\n var children = mergeChildMappings(prevChildMapping, nextChildMapping);\n Object.keys(children).forEach(function (key) {\n var child = children[key];\n if (!isValidElement(child)) return;\n var hasPrev = (key in prevChildMapping);\n var hasNext = (key in nextChildMapping);\n var prevChild = prevChildMapping[key];\n var isLeaving = isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)\n\n if (hasNext && (!hasPrev || isLeaving)) {\n // console.log('entering', key)\n children[key] = cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: true,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n } else if (!hasNext && hasPrev && !isLeaving) {\n // item is old (exiting)\n // console.log('leaving', key)\n children[key] = cloneElement(child, {\n in: false\n });\n } else if (hasNext && hasPrev && isValidElement(prevChild)) {\n // item hasn't changed transition states\n // copy over the last transition props;\n // console.log('unchanged', key)\n children[key] = cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: prevChild.props.in,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n }\n });\n return children;\n}","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { getChildMapping, getInitialChildMapping, getNextChildMapping } from './utils/ChildMapping';\n\nvar values = Object.values || function (obj) {\n return Object.keys(obj).map(function (k) {\n return obj[k];\n });\n};\n\nvar defaultProps = {\n component: 'div',\n childFactory: function childFactory(child) {\n return child;\n }\n};\n/**\n * The `` component manages a set of transition components\n * (`` and ``) in a list. Like with the transition\n * components, `` is a state machine for managing the mounting\n * and unmounting of components over time.\n *\n * Consider the example below. As items are removed or added to the TodoList the\n * `in` prop is toggled automatically by the ``.\n *\n * Note that `` does not define any animation behavior!\n * Exactly _how_ a list item animates is up to the individual transition\n * component. This means you can mix and match animations across different list\n * items.\n */\n\nvar TransitionGroup = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(TransitionGroup, _React$Component);\n\n function TransitionGroup(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n\n var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear\n\n\n _this.state = {\n contextValue: {\n isMounting: true\n },\n handleExited: handleExited,\n firstRender: true\n };\n return _this;\n }\n\n var _proto = TransitionGroup.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.mounted = true;\n this.setState({\n contextValue: {\n isMounting: false\n }\n });\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.mounted = false;\n };\n\n TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {\n var prevChildMapping = _ref.children,\n handleExited = _ref.handleExited,\n firstRender = _ref.firstRender;\n return {\n children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),\n firstRender: false\n };\n } // node is `undefined` when user provided `nodeRef` prop\n ;\n\n _proto.handleExited = function handleExited(child, node) {\n var currentChildMapping = getChildMapping(this.props.children);\n if (child.key in currentChildMapping) return;\n\n if (child.props.onExited) {\n child.props.onExited(node);\n }\n\n if (this.mounted) {\n this.setState(function (state) {\n var children = _extends({}, state.children);\n\n delete children[child.key];\n return {\n children: children\n };\n });\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n Component = _this$props.component,\n childFactory = _this$props.childFactory,\n props = _objectWithoutPropertiesLoose(_this$props, [\"component\", \"childFactory\"]);\n\n var contextValue = this.state.contextValue;\n var children = values(this.state.children).map(childFactory);\n delete props.appear;\n delete props.enter;\n delete props.exit;\n\n if (Component === null) {\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, children);\n }\n\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, /*#__PURE__*/React.createElement(Component, props, children));\n };\n\n return TransitionGroup;\n}(React.Component);\n\nTransitionGroup.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * `` renders a `
` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport memoizeOne from 'memoize-one';\nimport { F as defaultComponents } from '../../dist/index-a86253bb.esm.js';\nimport * as React from 'react';\nimport { useRef, useState, useEffect } from 'react';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport { Transition, TransitionGroup } from 'react-transition-group';\nimport '@emotion/react';\nimport '@babel/runtime/helpers/typeof';\nimport '@babel/runtime/helpers/taggedTemplateLiteral';\nimport '@babel/runtime/helpers/defineProperty';\nimport 'react-dom';\nimport '@floating-ui/dom';\nimport 'use-isomorphic-layout-effect';\n\nvar _excluded$4 = [\"in\", \"onExited\", \"appear\", \"enter\", \"exit\"];\n// strip transition props off before spreading onto select component\nvar AnimatedInput = function AnimatedInput(WrappedComponent) {\n return function (_ref) {\n _ref.in;\n _ref.onExited;\n _ref.appear;\n _ref.enter;\n _ref.exit;\n var props = _objectWithoutProperties(_ref, _excluded$4);\n return /*#__PURE__*/React.createElement(WrappedComponent, props);\n };\n};\n\nvar _excluded$3 = [\"component\", \"duration\", \"in\", \"onExited\"];\nvar Fade = function Fade(_ref) {\n var Tag = _ref.component,\n _ref$duration = _ref.duration,\n duration = _ref$duration === void 0 ? 1 : _ref$duration,\n inProp = _ref.in;\n _ref.onExited;\n var props = _objectWithoutProperties(_ref, _excluded$3);\n var nodeRef = useRef(null);\n var transition = {\n entering: {\n opacity: 0\n },\n entered: {\n opacity: 1,\n transition: \"opacity \".concat(duration, \"ms\")\n },\n exiting: {\n opacity: 0\n },\n exited: {\n opacity: 0\n }\n };\n return /*#__PURE__*/React.createElement(Transition, {\n mountOnEnter: true,\n unmountOnExit: true,\n in: inProp,\n timeout: duration,\n nodeRef: nodeRef\n }, function (state) {\n var innerProps = {\n style: _objectSpread({}, transition[state]),\n ref: nodeRef\n };\n return /*#__PURE__*/React.createElement(Tag, _extends({\n innerProps: innerProps\n }, props));\n });\n};\n\n// ==============================\n// Collapse Transition\n// ==============================\n\nvar collapseDuration = 260;\n// wrap each MultiValue with a collapse transition; decreases width until\n// finally removing from DOM\nvar Collapse = function Collapse(_ref2) {\n var children = _ref2.children,\n _in = _ref2.in,\n _onExited = _ref2.onExited;\n var ref = useRef(null);\n var _useState = useState('auto'),\n _useState2 = _slicedToArray(_useState, 2),\n width = _useState2[0],\n setWidth = _useState2[1];\n useEffect(function () {\n var el = ref.current;\n if (!el) return;\n\n /*\n Here we're invoking requestAnimationFrame with a callback invoking our\n call to getBoundingClientRect and setState in order to resolve an edge case\n around portalling. Certain portalling solutions briefly remove children from the DOM\n before appending them to the target node. This is to avoid us trying to call getBoundingClientrect\n while the Select component is in this state.\n */\n // cannot use `offsetWidth` because it is rounded\n var rafId = window.requestAnimationFrame(function () {\n return setWidth(el.getBoundingClientRect().width);\n });\n return function () {\n return window.cancelAnimationFrame(rafId);\n };\n }, []);\n var getStyleFromStatus = function getStyleFromStatus(status) {\n switch (status) {\n default:\n return {\n width: width\n };\n case 'exiting':\n return {\n width: 0,\n transition: \"width \".concat(collapseDuration, \"ms ease-out\")\n };\n case 'exited':\n return {\n width: 0\n };\n }\n };\n return /*#__PURE__*/React.createElement(Transition, {\n enter: false,\n mountOnEnter: true,\n unmountOnExit: true,\n in: _in,\n onExited: function onExited() {\n var el = ref.current;\n if (!el) return;\n _onExited === null || _onExited === void 0 ? void 0 : _onExited(el);\n },\n timeout: collapseDuration,\n nodeRef: ref\n }, function (status) {\n return /*#__PURE__*/React.createElement(\"div\", {\n ref: ref,\n style: _objectSpread({\n overflow: 'hidden',\n whiteSpace: 'nowrap'\n }, getStyleFromStatus(status))\n }, children);\n });\n};\n\nvar _excluded$2 = [\"in\", \"onExited\"];\n// strip transition props off before spreading onto actual component\n\nvar AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) {\n return function (_ref) {\n var inProp = _ref.in,\n onExited = _ref.onExited,\n props = _objectWithoutProperties(_ref, _excluded$2);\n return /*#__PURE__*/React.createElement(Collapse, {\n in: inProp,\n onExited: onExited\n }, /*#__PURE__*/React.createElement(WrappedComponent, _extends({\n cropWithEllipsis: inProp\n }, props)));\n };\n};\n\n// fade in when last multi-value removed, otherwise instant\nvar AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) {\n return function (props) {\n return /*#__PURE__*/React.createElement(Fade, _extends({\n component: WrappedComponent,\n duration: props.isMulti ? collapseDuration : 1\n }, props));\n };\n};\n\n// instant fade; all transition-group children must be transitions\n\nvar AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) {\n return function (props) {\n return /*#__PURE__*/React.createElement(Fade, _extends({\n component: WrappedComponent\n }, props));\n };\n};\n\nvar _excluded$1 = [\"component\"],\n _excluded2 = [\"children\"];\n// make ValueContainer a transition group\nvar AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) {\n return function (props) {\n return props.isMulti ? /*#__PURE__*/React.createElement(IsMultiValueContainer, _extends({\n component: WrappedComponent\n }, props)) : /*#__PURE__*/React.createElement(TransitionGroup, _extends({\n component: WrappedComponent\n }, props));\n };\n};\nvar IsMultiValueContainer = function IsMultiValueContainer(_ref) {\n var component = _ref.component,\n restProps = _objectWithoutProperties(_ref, _excluded$1);\n var multiProps = useIsMultiValueContainer(restProps);\n return /*#__PURE__*/React.createElement(TransitionGroup, _extends({\n component: component\n }, multiProps));\n};\nvar useIsMultiValueContainer = function useIsMultiValueContainer(_ref2) {\n var children = _ref2.children,\n props = _objectWithoutProperties(_ref2, _excluded2);\n var isMulti = props.isMulti,\n hasValue = props.hasValue,\n innerProps = props.innerProps,\n _props$selectProps = props.selectProps,\n components = _props$selectProps.components,\n controlShouldRenderValue = _props$selectProps.controlShouldRenderValue;\n var _useState = useState(isMulti && controlShouldRenderValue && hasValue),\n _useState2 = _slicedToArray(_useState, 2),\n cssDisplayFlex = _useState2[0],\n setCssDisplayFlex = _useState2[1];\n var _useState3 = useState(false),\n _useState4 = _slicedToArray(_useState3, 2),\n removingValue = _useState4[0],\n setRemovingValue = _useState4[1];\n useEffect(function () {\n if (hasValue && !cssDisplayFlex) {\n setCssDisplayFlex(true);\n }\n }, [hasValue, cssDisplayFlex]);\n useEffect(function () {\n if (removingValue && !hasValue && cssDisplayFlex) {\n setCssDisplayFlex(false);\n }\n setRemovingValue(false);\n }, [removingValue, hasValue, cssDisplayFlex]);\n var onExited = function onExited() {\n return setRemovingValue(true);\n };\n var childMapper = function childMapper(child) {\n if (isMulti && /*#__PURE__*/React.isValidElement(child)) {\n // Add onExited callback to MultiValues\n if (child.type === components.MultiValue) {\n return /*#__PURE__*/React.cloneElement(child, {\n onExited: onExited\n });\n }\n // While container flexed, Input cursor is shown after Placeholder text,\n // so remove Placeholder until display is set back to grid\n if (child.type === components.Placeholder && cssDisplayFlex) {\n return null;\n }\n }\n return child;\n };\n var newInnerProps = _objectSpread(_objectSpread({}, innerProps), {}, {\n style: _objectSpread(_objectSpread({}, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style), {}, {\n display: isMulti && hasValue || cssDisplayFlex ? 'flex' : 'grid'\n })\n });\n var newProps = _objectSpread(_objectSpread({}, props), {}, {\n innerProps: newInnerProps,\n children: React.Children.toArray(children).map(childMapper)\n });\n return newProps;\n};\n\nvar _excluded = [\"Input\", \"MultiValue\", \"Placeholder\", \"SingleValue\", \"ValueContainer\"];\nvar makeAnimated = function makeAnimated() {\n var externalComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var components = defaultComponents({\n components: externalComponents\n });\n var Input = components.Input,\n MultiValue = components.MultiValue,\n Placeholder = components.Placeholder,\n SingleValue = components.SingleValue,\n ValueContainer = components.ValueContainer,\n rest = _objectWithoutProperties(components, _excluded);\n return _objectSpread({\n Input: AnimatedInput(Input),\n MultiValue: AnimatedMultiValue(MultiValue),\n Placeholder: AnimatedPlaceholder(Placeholder),\n SingleValue: AnimatedSingleValue(SingleValue),\n ValueContainer: AnimatedValueContainer(ValueContainer)\n }, rest);\n};\nvar AnimatedComponents = makeAnimated();\nvar Input = AnimatedComponents.Input;\nvar MultiValue = AnimatedComponents.MultiValue;\nvar Placeholder = AnimatedComponents.Placeholder;\nvar SingleValue = AnimatedComponents.SingleValue;\nvar ValueContainer = AnimatedComponents.ValueContainer;\nvar index = memoizeOne(makeAnimated);\n\nexport default index;\nexport { Input, MultiValue, Placeholder, SingleValue, ValueContainer };\n","// Libraries\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Select from 'react-select';\nimport makeAnimated from 'react-select/animated';\nimport { useTranslation } from 'react-i18next';\nimport { useDispatch } from 'react-redux';\n\n// State\nimport { deleteResponseEntry, upsertResponseEntry } from 'state/ducks/engagement';\n\nfunction DropdownQuestion({\n question: { id, inputs, displayData },\n questionValues,\n currentSectionPosition,\n dispatchUpdateQuestionValue,\n}) {\n const isMulti = Boolean(Number(displayData.multiSelectDropdown));\n const options = inputs.map((input) => ({ value: input.id, label: input.label }));\n const questionValuesBySection = questionValues[currentSectionPosition];\n const questionValuesByQuestion =\n questionValuesBySection && questionValuesBySection[id] ? questionValuesBySection[id] : {};\n const selectedInputs = Object.keys(questionValuesByQuestion).map((value) => {\n return options.find((option) => option.value === value);\n });\n const { t } = useTranslation();\n const dispatch = useDispatch();\n const [selected, setSelected] = useState(selectedInputs);\n\n const onChangeMulti = (selectedOptions, meta) => {\n const questionValue = selectedOptions.reduce((accumulator, { value }) => {\n return { ...accumulator, [value]: { value: true } };\n }, {});\n\n dispatchUpdateQuestionValue(id, questionValue);\n setSelected(selectedOptions);\n\n if (meta.removedValue?.value)\n dispatch(deleteResponseEntry({ inputId: meta.removedValue.value, questionId: id }));\n if (meta.removedValues?.length > 0)\n for (const removedValue of meta.removedValues)\n dispatch(deleteResponseEntry({ inputId: removedValue.value, questionId: id }));\n if (meta.option?.value)\n dispatch(upsertResponseEntry({ inputId: meta.option.value, questionId: id }));\n };\n\n const onChangeSingle = (selectedOption, meta) => {\n if (selectedOption)\n onChangeMulti([selectedOption], { option: selectedOption, removedValue: selected[0] });\n else onChangeMulti([], meta);\n };\n\n const onChange = (value, meta) => {\n if (isMulti) onChangeMulti(value, meta);\n else onChangeSingle(value, meta);\n };\n\n return (\n \n );\n}\n\nDropdownQuestion.propTypes = {\n // Disabled eslint for questionValues as the object key/values are dynamic\n questionValues: PropTypes.object, // eslint-disable-line\n question: PropTypes.shape({\n id: PropTypes.string.isRequired,\n inputs: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n label: PropTypes.string,\n })\n ).isRequired,\n displayData: PropTypes.shape({\n multiSelectDropdown: PropTypes.string,\n }).isRequired,\n }).isRequired,\n dispatchUpdateQuestionValue: PropTypes.func.isRequired,\n currentSectionPosition: PropTypes.number.isRequired,\n};\n\nDropdownQuestion.defaultProps = {\n questionValues: {},\n};\n\nexport default DropdownQuestion;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass Options extends Component {\n static propTypes = {\n options: PropTypes.array.isRequired,\n };\n\n render() {\n const { options } = this.props;\n\n return (\n
\n For the purpose of preventing duplicate submissions to this survey from the same\n participant, we would like your consent to collect information about your browser and\n attach it to your submission.\n
\n
\n You have the option to continue without consent, but your submission may be excluded\n from the results of this survey.\n
\n );\n};\n\nClosedPageContainer.propTypes = {\n match: PropTypes.shape({\n params: PropTypes.shape({\n projectId: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n t: PropTypes.func.isRequired,\n};\n\nexport default withRouter(withTranslation()(ClosedPageContainer));\n","// Libraries\nimport React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport { Trans, withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\n\n// State\nimport { clearUserData } from 'state/ducks/engagement';\n\n// Utilities\nimport { withPersistContext } from 'common/utils/reduxPersist';\nimport { populatePath } from 'common/utils/helpers';\n\n// Routes\nimport Routes from 'routes';\n\nexport class ErrorPageContainer extends PureComponent {\n componentDidMount() {\n const { persistContext, dispatchClearUserData } = this.props;\n dispatchClearUserData();\n persistContext.clearStorage();\n }\n\n render() {\n const { match, t } = this.props;\n\n return (\n
\n
\n
\n
\n
{t('engagement.500_error_message')}
\n
\n \n Don't worry - it wasn't your fault. We've been alerted and will\n look into it as quickly as possible.\n \n In the meantime, you can\n Click here \n to give it another try.\n \n
\n \n \n {\n const redirectUrl = populatePath(Routes.ENGAGEMENT_SECTION, {\n ...match.params,\n position: currentSectionPosition,\n });\n\n return (\n \n );\n }}\n />\n {\n const position = parseInteger(props.match.params.position);\n\n if (!deserializedEngagement) return null;\n\n if (!position || position < 1 || position > deserializedEngagement.sections.length) {\n return ;\n }\n\n if (!previewMode && isEngagementClosed(deserializedEngagement)) {\n return ;\n }\n\n // If a user manually alters the URL, redirect them to the intended section\n // if this is a preview and the URL is altered by skipLogic, return the next section\n if (skipSections.includes(position)) {\n return (\n \n );\n }\n\n // Redirect first-time users to the first section\n if (!previewMode && !submission && position > 1) {\n return (\n \n );\n }\n\n return ;\n }}\n />\n \n \n \n \n \n
\n