@micromag/screen-quiz 0.3.829 → 0.4.4

package/es/index.js

@@ -4,9 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, Transitions, Button } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -25,86 +23,58 @@ import Visual from '@micromag/element-visual';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
-import { animated } from '@react-spring/web';
+import { animated, useTransition, easings } from '@react-spring/web';
 import Button$1, { RichButton } from '@micromag/element-button';
 import Keypad from '@micromag/element-keypad';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
-var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withoutOpacity":"micromag-screen-quiz-answers-withoutOpacity","withIcon":"micromag-screen-quiz-answers-withIcon","withSquareItems":"micromag-screen-quiz-answers-withSquareItems","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
+var styles$4 = {"container":"container","items":"items","emptyAnswer":"emptyAnswer","item":"item","isPlaceholder":"isPlaceholder","userAnswer":"userAnswer","otherAnswer":"otherAnswer","withoutOpacity":"withoutOpacity","button":"button","withIcon":"withIcon","withSquareItems":"withSquareItems","resultIcon":"resultIcon","answered":"answered","rightAnswer":"rightAnswer","faIcon":"faIcon","itemContent":"itemContent"};
 
-var propTypes$5 = {
-  items: PropTypes$1.quizAnswers.isRequired,
-  keypadLayout: PropTypes.shape({}),
-  answeredIndex: PropTypes.number,
-  answersCollapseDelay: PropTypes.number,
-  buttonsStyle: PropTypes$1.boxStyle,
-  buttonsLayout: PropTypes$1.buttonLayout,
-  inactiveButtonsStyle: PropTypes$1.boxStyle,
-  buttonsTextStyle: PropTypes$1.textStyle,
-  inactiveButtonsTextStyle: PropTypes$1.textStyle,
-  goodAnswerColor: PropTypes$1.color,
-  badAnswerColor: PropTypes$1.color,
-  showUserAnswer: PropTypes.bool,
-  withoutGoodAnswer: PropTypes.bool,
-  withoutIcon: PropTypes.bool,
-  focusable: PropTypes.bool,
-  animated: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  onClick: PropTypes.func,
-  onCollapse: PropTypes.func,
-  onCollapsed: PropTypes.func,
-  onTransitionEnd: PropTypes.func,
-  withoutCollapse: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps$5 = {
-  keypadLayout: null,
-  answeredIndex: null,
-  answersCollapseDelay: 1000,
-  buttonsStyle: null,
-  buttonsLayout: null,
-  inactiveButtonsStyle: null,
-  buttonsTextStyle: null,
-  inactiveButtonsTextStyle: null,
-  goodAnswerColor: null,
-  badAnswerColor: null,
-  showUserAnswer: false,
-  withoutGoodAnswer: false,
-  withoutIcon: false,
-  focusable: false,
-  animated: false,
-  collapsed: false,
-  onClick: null,
-  onCollapse: null,
-  onCollapsed: null,
-  onTransitionEnd: null,
-  withoutCollapse: false,
-  className: null
-};
-var Answers = function Answers(_ref) {
+function Answers(_ref) {
   var items = _ref.items,
-    keypadLayout = _ref.keypadLayout,
-    answeredIndex = _ref.answeredIndex,
-    answersCollapseDelay = _ref.answersCollapseDelay,
-    buttonsStyle = _ref.buttonsStyle,
-    buttonsLayout = _ref.buttonsLayout,
-    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
-    goodAnswerColor = _ref.goodAnswerColor,
-    badAnswerColor = _ref.badAnswerColor,
-    showUserAnswer = _ref.showUserAnswer,
-    withoutGoodAnswer = _ref.withoutGoodAnswer,
-    withoutIcon = _ref.withoutIcon,
-    focusable = _ref.focusable,
-    collapseAnimated = _ref.animated,
-    initialCollapsed = _ref.collapsed,
-    onClick = _ref.onClick,
-    onCollapse = _ref.onCollapse,
-    onCollapsed = _ref.onCollapsed,
-    onTransitionEnd = _ref.onTransitionEnd,
-    withoutCollapse = _ref.withoutCollapse,
-    className = _ref.className;
+    _ref$keypadLayout = _ref.keypadLayout,
+    keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
+    _ref$answeredIndex = _ref.answeredIndex,
+    answeredIndex = _ref$answeredIndex === void 0 ? null : _ref$answeredIndex,
+    _ref$answersCollapseD = _ref.answersCollapseDelay,
+    answersCollapseDelay = _ref$answersCollapseD === void 0 ? 1000 : _ref$answersCollapseD,
+    _ref$buttonsStyle = _ref.buttonsStyle,
+    buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
+    _ref$buttonsLayout = _ref.buttonsLayout,
+    buttonsLayout = _ref$buttonsLayout === void 0 ? null : _ref$buttonsLayout,
+    _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
+    inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
+    _ref$buttonsTextStyle = _ref.buttonsTextStyle,
+    buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
+    _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
+    inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
+    _ref$goodAnswerColor = _ref.goodAnswerColor,
+    goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
+    _ref$badAnswerColor = _ref.badAnswerColor,
+    badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
+    _ref$showUserAnswer = _ref.showUserAnswer,
+    showUserAnswer = _ref$showUserAnswer === void 0 ? false : _ref$showUserAnswer,
+    _ref$withoutGoodAnswe = _ref.withoutGoodAnswer,
+    withoutGoodAnswer = _ref$withoutGoodAnswe === void 0 ? false : _ref$withoutGoodAnswe,
+    _ref$withoutIcon = _ref.withoutIcon,
+    withoutIcon = _ref$withoutIcon === void 0 ? false : _ref$withoutIcon,
+    _ref$focusable = _ref.focusable,
+    focusable = _ref$focusable === void 0 ? false : _ref$focusable,
+    _ref$animated = _ref.animated,
+    collapseAnimated = _ref$animated === void 0 ? false : _ref$animated,
+    _ref$collapsed = _ref.collapsed,
+    initialCollapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+    _ref$onCollapse = _ref.onCollapse,
+    onCollapse = _ref$onCollapse === void 0 ? null : _ref$onCollapse,
+    _ref$onCollapsed = _ref.onCollapsed,
+    onCollapsed = _ref$onCollapsed === void 0 ? null : _ref$onCollapsed,
+    _ref$onTransitionEnd = _ref.onTransitionEnd,
+    onTransitionEnd = _ref$onTransitionEnd === void 0 ? null : _ref$onTransitionEnd,
+    _ref$withoutCollapse = _ref.withoutCollapse,
+    withoutCollapse = _ref$withoutCollapse === void 0 ? false : _ref$withoutCollapse,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   var _useScreenRenderConte = useScreenRenderContext(),
     isView = _useScreenRenderConte.isView,
     isPreview = _useScreenRenderConte.isPreview,
@@ -437,125 +407,81 @@ var Answers = function Answers(_ref) {
     columns: columns,
     spacing: spacing
   }) : null);
-};
-Answers.propTypes = propTypes$5;
-Answers.defaultProps = defaultProps$5;
+}
 
-var styles$3 = {"container":"micromag-screen-quiz-question-container","emptyQuestion":"micromag-screen-quiz-question-emptyQuestion","emptyResult":"micromag-screen-quiz-question-emptyResult","question":"micromag-screen-quiz-question-question","index":"micromag-screen-quiz-question-index","resultContent":"micromag-screen-quiz-question-resultContent","result":"micromag-screen-quiz-question-result","resultVisible":"micromag-screen-quiz-question-resultVisible","resultHidden":"micromag-screen-quiz-question-resultHidden","isPlaceholder":"micromag-screen-quiz-question-isPlaceholder"};
+var styles$3 = {"container":"container","question":"question","index":"index","resultContent":"resultContent","result":"result","emptyQuestion":"emptyQuestion","emptyResult":"emptyResult","resultVisible":"resultVisible","resultHidden":"resultHidden","isPlaceholder":"isPlaceholder"};
 
-var propTypes$4 = {
-  question: PropTypes$1.textElement,
-  answers: PropTypes$1.quizAnswers,
-  keypadLayout: PropTypes.shape({}),
-  result: PropTypes.shape({
-    image: PropTypes$1.imageElement,
-    text: PropTypes$1.textElement
-  }),
-  resultImage: PropTypes$1.visualElement,
-  index: PropTypes.number,
-  totalCount: PropTypes.number,
-  answeredIndex: PropTypes.number,
-  buttonsLayout: PropTypes$1.buttonLayout,
-  buttonsStyle: PropTypes$1.boxStyle,
-  inactiveButtonsStyle: PropTypes$1.boxStyle,
-  buttonsTextStyle: PropTypes$1.textStyle,
-  inactiveButtonsTextStyle: PropTypes$1.textStyle,
-  questionsHeadingStyle: PropTypes$1.textStyle,
-  feedbackTextStyle: PropTypes$1.textStyle,
-  numbersTextStyle: PropTypes$1.textStyle,
-  goodAnswerColor: PropTypes$1.color,
-  badAnswerColor: PropTypes$1.color,
-  focusable: PropTypes.bool,
-  animated: PropTypes.bool,
-  layout: PropTypes.string,
-  showInstantAnswer: PropTypes.bool,
-  withResult: PropTypes.bool,
-  withoutGoodAnswer: PropTypes.bool,
-  withoutTrueFalse: PropTypes.bool,
-  withoutIndex: PropTypes.bool,
-  transitions: PropTypes$1.transitions,
-  transitionPlaying: PropTypes.bool,
-  transitionStagger: PropTypes.number,
-  transitionDisabled: PropTypes.bool,
-  onAnswerClick: PropTypes.func,
-  onAnswerTransitionEnd: PropTypes.func,
-  withoutCollapse: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
-};
-var defaultProps$4 = {
-  question: null,
-  answers: null,
-  keypadLayout: null,
-  result: null,
-  resultImage: null,
-  index: null,
-  totalCount: null,
-  answeredIndex: null,
-  buttonsLayout: null,
-  buttonsStyle: null,
-  inactiveButtonsStyle: null,
-  buttonsTextStyle: null,
-  inactiveButtonsTextStyle: null,
-  questionsHeadingStyle: null,
-  feedbackTextStyle: null,
-  numbersTextStyle: null,
-  goodAnswerColor: null,
-  badAnswerColor: null,
-  focusable: false,
-  animated: false,
-  layout: null,
-  showInstantAnswer: false,
-  withResult: false,
-  withoutGoodAnswer: false,
-  withoutTrueFalse: false,
-  withoutIndex: false,
-  transitions: null,
-  transitionPlaying: false,
-  transitionStagger: 100,
-  transitionDisabled: false,
-  onAnswerClick: null,
-  onAnswerTransitionEnd: null,
-  withoutCollapse: false,
-  className: null,
-  style: null
-};
-var Question = function Question(_ref) {
-  var question = _ref.question,
-    answers = _ref.answers,
-    keypadLayout = _ref.keypadLayout,
-    result = _ref.result,
-    resultImage = _ref.resultImage,
-    index = _ref.index,
-    totalCount = _ref.totalCount,
-    answeredIndex = _ref.answeredIndex,
-    buttonsLayout = _ref.buttonsLayout,
-    buttonsStyle = _ref.buttonsStyle,
-    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
-    questionsHeadingStyle = _ref.questionsHeadingStyle,
-    feedbackTextStyle = _ref.feedbackTextStyle,
-    numbersTextStyle = _ref.numbersTextStyle,
-    goodAnswerColor = _ref.goodAnswerColor,
-    badAnswerColor = _ref.badAnswerColor,
-    focusable = _ref.focusable,
-    animated = _ref.animated,
-    showInstantAnswer = _ref.showInstantAnswer,
-    withResult = _ref.withResult,
-    withoutGoodAnswer = _ref.withoutGoodAnswer,
-    withoutTrueFalse = _ref.withoutTrueFalse,
-    withoutIndex = _ref.withoutIndex,
-    layout = _ref.layout,
-    transitions = _ref.transitions,
-    transitionPlaying = _ref.transitionPlaying,
-    transitionStagger = _ref.transitionStagger,
-    transitionDisabled = _ref.transitionDisabled,
-    onAnswerClick = _ref.onAnswerClick,
-    onAnswerTransitionEnd = _ref.onAnswerTransitionEnd,
-    withoutCollapse = _ref.withoutCollapse,
-    className = _ref.className,
-    style = _ref.style;
+function Question(_ref) {
+  var _ref$question = _ref.question,
+    question = _ref$question === void 0 ? null : _ref$question,
+    _ref$answers = _ref.answers,
+    answers = _ref$answers === void 0 ? null : _ref$answers,
+    _ref$keypadLayout = _ref.keypadLayout,
+    keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
+    _ref$result = _ref.result,
+    result = _ref$result === void 0 ? null : _ref$result,
+    _ref$resultImage = _ref.resultImage,
+    resultImage = _ref$resultImage === void 0 ? null : _ref$resultImage,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? null : _ref$index,
+    _ref$totalCount = _ref.totalCount,
+    totalCount = _ref$totalCount === void 0 ? null : _ref$totalCount,
+    _ref$answeredIndex = _ref.answeredIndex,
+    answeredIndex = _ref$answeredIndex === void 0 ? null : _ref$answeredIndex,
+    _ref$buttonsLayout = _ref.buttonsLayout,
+    buttonsLayout = _ref$buttonsLayout === void 0 ? null : _ref$buttonsLayout,
+    _ref$buttonsStyle = _ref.buttonsStyle,
+    buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
+    _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
+    inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
+    _ref$buttonsTextStyle = _ref.buttonsTextStyle,
+    buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
+    _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
+    inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
+    _ref$questionsHeading = _ref.questionsHeadingStyle,
+    questionsHeadingStyle = _ref$questionsHeading === void 0 ? null : _ref$questionsHeading,
+    _ref$feedbackTextStyl = _ref.feedbackTextStyle,
+    feedbackTextStyle = _ref$feedbackTextStyl === void 0 ? null : _ref$feedbackTextStyl,
+    _ref$numbersTextStyle = _ref.numbersTextStyle,
+    numbersTextStyle = _ref$numbersTextStyle === void 0 ? null : _ref$numbersTextStyle,
+    _ref$goodAnswerColor = _ref.goodAnswerColor,
+    goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
+    _ref$badAnswerColor = _ref.badAnswerColor,
+    badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
+    _ref$focusable = _ref.focusable,
+    focusable = _ref$focusable === void 0 ? false : _ref$focusable,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? false : _ref$animated,
+    _ref$showInstantAnswe = _ref.showInstantAnswer,
+    showInstantAnswer = _ref$showInstantAnswe === void 0 ? false : _ref$showInstantAnswe,
+    _ref$withResult = _ref.withResult,
+    withResult = _ref$withResult === void 0 ? false : _ref$withResult,
+    _ref$withoutGoodAnswe = _ref.withoutGoodAnswer,
+    withoutGoodAnswer = _ref$withoutGoodAnswe === void 0 ? false : _ref$withoutGoodAnswe,
+    _ref$withoutTrueFalse = _ref.withoutTrueFalse,
+    withoutTrueFalse = _ref$withoutTrueFalse === void 0 ? false : _ref$withoutTrueFalse,
+    _ref$withoutIndex = _ref.withoutIndex,
+    withoutIndex = _ref$withoutIndex === void 0 ? false : _ref$withoutIndex,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? null : _ref$layout,
+    _ref$transitions = _ref.transitions,
+    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
+    _ref$transitionPlayin = _ref.transitionPlaying,
+    transitionPlaying = _ref$transitionPlayin === void 0 ? false : _ref$transitionPlayin,
+    _ref$transitionStagge = _ref.transitionStagger,
+    transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
+    _ref$transitionDisabl = _ref.transitionDisabled,
+    transitionDisabled = _ref$transitionDisabl === void 0 ? false : _ref$transitionDisabl,
+    _ref$onAnswerClick = _ref.onAnswerClick,
+    onAnswerClick = _ref$onAnswerClick === void 0 ? null : _ref$onAnswerClick,
+    _ref$onAnswerTransiti = _ref.onAnswerTransitionEnd,
+    onAnswerTransitionEnd = _ref$onAnswerTransiti === void 0 ? null : _ref$onAnswerTransiti,
+    _ref$withoutCollapse = _ref.withoutCollapse,
+    withoutCollapse = _ref$withoutCollapse === void 0 ? false : _ref$withoutCollapse,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style;
   var _useScreenRenderConte = useScreenRenderContext(),
     isPlaceholder = _useScreenRenderConte.isPlaceholder;
   var isSplitted = layout === 'split';
@@ -678,104 +604,67 @@ var Question = function Question(_ref) {
     width: "100%",
     height: "auto"
   }) : null) : null))) : null]);
-};
-Question.propTypes = propTypes$4;
-Question.defaultProps = defaultProps$4;
+}
 
-var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","nextButton":"micromag-screen-quiz-nextButton","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive","withIcon":"micromag-screen-quiz-withIcon"};
+var styles$2 = {"container":"container","background":"background","content":"content","disabled":"disabled","reset":"reset","points":"points","header":"header","footer":"footer","nextButton":"nextButton","question":"question","results":"results","intro":"intro"};
 
-var propTypes$3 = {
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  keypadLayout: PropTypes.shape({}),
-  question: PropTypes$1.textElement,
-  answers: PropTypes$1.quizAnswers,
-  result: PropTypes.shape({
-    image: PropTypes$1.imageElement,
-    text: PropTypes$1.textElement
-  }),
-  resultImage: PropTypes$1.visualElement,
-  buttonsLayout: PropTypes$1.buttonLayout,
-  buttonsStyle: PropTypes$1.boxStyle,
-  inactiveButtonsStyle: PropTypes$1.boxStyle,
-  buttonsTextStyle: PropTypes$1.textStyle,
-  inactiveButtonsTextStyle: PropTypes$1.textStyle,
-  feedbackTextStyle: PropTypes$1.textStyle,
-  numbersTextStyle: PropTypes$1.textStyle,
-  goodAnswerColor: PropTypes$1.color,
-  badAnswerColor: PropTypes$1.color,
-  withoutTrueFalse: PropTypes.bool,
-  spacing: PropTypes.number,
-  background: PropTypes$1.backgroundElement,
-  header: PropTypes$1.header,
-  footer: PropTypes$1.footer,
-  current: PropTypes.bool,
-  preload: PropTypes.bool,
-  ready: PropTypes.bool,
-  transitions: PropTypes$1.transitions,
-  transitionStagger: PropTypes.number,
-  type: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$3 = {
-  id: null,
-  layout: 'middle',
-  keypadLayout: null,
-  question: null,
-  answers: null,
-  result: null,
-  resultImage: null,
-  buttonsLayout: null,
-  buttonsStyle: null,
-  inactiveButtonsStyle: null,
-  buttonsTextStyle: null,
-  inactiveButtonsTextStyle: null,
-  feedbackTextStyle: null,
-  numbersTextStyle: null,
-  goodAnswerColor: null,
-  badAnswerColor: null,
-  withoutTrueFalse: false,
-  spacing: 20,
-  header: null,
-  footer: null,
-  background: null,
-  current: true,
-  preload: true,
-  ready: true,
-  transitions: null,
-  transitionStagger: 100,
-  type: null,
-  className: null
-};
-var QuizScreen = function QuizScreen(_ref) {
-  var id = _ref.id,
-    layout = _ref.layout,
-    keypadLayout = _ref.keypadLayout,
-    question = _ref.question,
-    answers = _ref.answers,
-    result = _ref.result,
-    resultImage = _ref.resultImage,
-    buttonsLayout = _ref.buttonsLayout,
-    buttonsStyle = _ref.buttonsStyle,
-    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
-    feedbackTextStyle = _ref.feedbackTextStyle,
-    numbersTextStyle = _ref.numbersTextStyle,
-    goodAnswerColor = _ref.goodAnswerColor,
-    badAnswerColor = _ref.badAnswerColor,
-    withoutTrueFalse = _ref.withoutTrueFalse,
-    spacing = _ref.spacing,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    current = _ref.current,
-    preload = _ref.preload,
-    ready = _ref.ready,
-    transitions = _ref.transitions,
-    transitionStagger = _ref.transitionStagger,
-    type = _ref.type,
-    className = _ref.className;
+function QuizScreen(_ref) {
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
+    _ref$keypadLayout = _ref.keypadLayout,
+    keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
+    _ref$question = _ref.question,
+    question = _ref$question === void 0 ? null : _ref$question,
+    _ref$answers = _ref.answers,
+    answers = _ref$answers === void 0 ? null : _ref$answers,
+    _ref$result = _ref.result,
+    result = _ref$result === void 0 ? null : _ref$result,
+    _ref$resultImage = _ref.resultImage,
+    resultImage = _ref$resultImage === void 0 ? null : _ref$resultImage,
+    _ref$buttonsLayout = _ref.buttonsLayout,
+    buttonsLayout = _ref$buttonsLayout === void 0 ? null : _ref$buttonsLayout,
+    _ref$buttonsStyle = _ref.buttonsStyle,
+    buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
+    _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
+    inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
+    _ref$buttonsTextStyle = _ref.buttonsTextStyle,
+    buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
+    _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
+    inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
+    _ref$feedbackTextStyl = _ref.feedbackTextStyle,
+    feedbackTextStyle = _ref$feedbackTextStyl === void 0 ? null : _ref$feedbackTextStyl,
+    _ref$numbersTextStyle = _ref.numbersTextStyle,
+    numbersTextStyle = _ref$numbersTextStyle === void 0 ? null : _ref$numbersTextStyle,
+    _ref$goodAnswerColor = _ref.goodAnswerColor,
+    goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
+    _ref$badAnswerColor = _ref.badAnswerColor,
+    badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
+    _ref$withoutTrueFalse = _ref.withoutTrueFalse,
+    withoutTrueFalse = _ref$withoutTrueFalse === void 0 ? false : _ref$withoutTrueFalse,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
+    _ref$header = _ref.header,
+    header = _ref$header === void 0 ? null : _ref$header,
+    _ref$footer = _ref.footer,
+    footer = _ref$footer === void 0 ? null : _ref$footer,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? null : _ref$background,
+    _ref$current = _ref.current,
+    current = _ref$current === void 0 ? true : _ref$current,
+    _ref$preload = _ref.preload,
+    preload = _ref$preload === void 0 ? true : _ref$preload,
+    _ref$ready = _ref.ready,
+    ready = _ref$ready === void 0 ? true : _ref$ready,
+    _ref$transitions = _ref.transitions,
+    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
+    _ref$transitionStagge = _ref.transitionStagger,
+    transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? null : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   var screenId = id || 'screen-id';
   var trackScreenEvent = useTrackScreenEvent(type);
   var _useScreenSize = useScreenSize(),
@@ -1004,50 +893,33 @@ var QuizScreen = function QuizScreen(_ref) {
     withoutVideo: isPreview,
     className: styles$2.background
   }) : null);
-};
-QuizScreen.propTypes = propTypes$3;
-QuizScreen.defaultProps = defaultProps$3;
+}
 
-var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyTitle":"micromag-screen-quiz-results-emptyTitle","emptyDescription":"micromag-screen-quiz-results-emptyDescription","title":"micromag-screen-quiz-results-title"};
+var styles$1 = {"container":"container","title":"title","emptyTitle":"emptyTitle","emptyDescription":"emptyDescription"};
 
-var propTypes$2 = {
-  title: PropTypes$1.textElement,
-  description: PropTypes$1.textElement,
-  resultsHeadingStyle: PropTypes$1.textStyle,
-  resultsTextStyle: PropTypes$1.textStyle,
-  layout: PropTypes.string,
-  transitions: PropTypes$1.transitions,
-  transitionPlaying: PropTypes.bool,
-  transitionStagger: PropTypes.number,
-  transitionDisabled: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
-};
-var defaultProps$2 = {
-  title: null,
-  description: null,
-  resultsHeadingStyle: null,
-  resultsTextStyle: null,
-  layout: null,
-  transitions: null,
-  transitionPlaying: false,
-  transitionStagger: 100,
-  transitionDisabled: false,
-  className: null,
-  style: null
-};
-var Results = function Results(_ref) {
-  var layout = _ref.layout,
-    title = _ref.title,
-    description = _ref.description,
-    resultsHeadingStyle = _ref.resultsHeadingStyle,
-    resultsTextStyle = _ref.resultsTextStyle,
-    transitions = _ref.transitions,
-    transitionPlaying = _ref.transitionPlaying,
-    transitionStagger = _ref.transitionStagger,
-    transitionDisabled = _ref.transitionDisabled,
-    className = _ref.className,
-    style = _ref.style;
+function Results(_ref) {
+  var _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? null : _ref$layout,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    _ref$resultsHeadingSt = _ref.resultsHeadingStyle,
+    resultsHeadingStyle = _ref$resultsHeadingSt === void 0 ? null : _ref$resultsHeadingSt,
+    _ref$resultsTextStyle = _ref.resultsTextStyle,
+    resultsTextStyle = _ref$resultsTextStyle === void 0 ? null : _ref$resultsTextStyle,
+    _ref$transitions = _ref.transitions,
+    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
+    _ref$transitionPlayin = _ref.transitionPlaying,
+    transitionPlaying = _ref$transitionPlayin === void 0 ? false : _ref$transitionPlayin,
+    _ref$transitionStagge = _ref.transitionStagger,
+    transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
+    _ref$transitionDisabl = _ref.transitionDisabled,
+    transitionDisabled = _ref$transitionDisabl === void 0 ? false : _ref$transitionDisabl,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style;
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasTitle = isTextFilled(title);
@@ -1105,44 +977,29 @@ var Results = function Results(_ref) {
     className: styles$1.description,
     textStyle: _objectSpread(_objectSpread({}, resultsTextStyle), descriptionTextStyle)
   }))) : null)]);
-};
-Results.propTypes = propTypes$2;
-Results.defaultProps = defaultProps$2;
+}
 
-var styles = {"container":"micromag-screen-quiz-title-container","emptyTitle":"micromag-screen-quiz-title-emptyTitle","emptyDescription":"micromag-screen-quiz-title-emptyDescription","title":"micromag-screen-quiz-title-title","description":"micromag-screen-quiz-title-description"};
+var styles = {"container":"container","title":"title","description":"description","emptyTitle":"emptyTitle","emptyDescription":"emptyDescription"};
 
-var propTypes$1 = {
-  title: PropTypes$1.textElement,
-  description: PropTypes$1.textElement,
-  button: PropTypes$1.textElement,
-  layout: PropTypes.string,
-  focusable: PropTypes.bool,
-  buttonDisabled: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-  onClickButton: PropTypes.func
-};
-var defaultProps$1 = {
-  title: null,
-  description: null,
-  layout: null,
-  button: null,
-  buttonDisabled: false,
-  focusable: false,
-  className: null,
-  style: null,
-  onClickButton: null
-};
-var Title = function Title(_ref) {
-  var layout = _ref.layout,
-    title = _ref.title,
-    description = _ref.description,
-    button = _ref.button,
-    buttonDisabled = _ref.buttonDisabled,
-    focusable = _ref.focusable,
-    className = _ref.className,
-    style = _ref.style,
-    onClickButton = _ref.onClickButton;
+function Title(_ref) {
+  var _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? null : _ref$layout,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    _ref$button = _ref.button,
+    button = _ref$button === void 0 ? null : _ref$button,
+    _ref$buttonDisabled = _ref.buttonDisabled,
+    buttonDisabled = _ref$buttonDisabled === void 0 ? false : _ref$buttonDisabled,
+    _ref$focusable = _ref.focusable,
+    focusable = _ref$focusable === void 0 ? false : _ref$focusable,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style,
+    _ref$onClickButton = _ref.onClickButton,
+    onClickButton = _ref$onClickButton === void 0 ? null : _ref$onClickButton;
   // const { isPreview, isEdit } = useScreenRenderContext();
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
@@ -1202,114 +1059,71 @@ var Title = function Title(_ref) {
       "value": "Start"
     }]
   })))]);
-};
-Title.propTypes = propTypes$1;
-Title.defaultProps = defaultProps$1;
+}
 
-var propTypes = {
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  introLayout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  title: PropTypes$1.textElement,
-  description: PropTypes$1.textElement,
-  questions: PropTypes.arrayOf(PropTypes.shape({
-    text: PropTypes$1.textElement,
-    answers: PropTypes$1.quizAnswers
-  })),
-  results: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes$1.textElement,
-    description: PropTypes$1.textElement
-  })),
-  buttonsStyle: PropTypes$1.boxStyle,
-  inactiveButtonsStyle: PropTypes$1.boxStyle,
-  buttonsTextStyle: PropTypes$1.textStyle,
-  inactiveButtonsTextStyle: PropTypes$1.textStyle,
-  questionsHeadingStyle: PropTypes$1.textStyle,
-  resultsHeadingStyle: PropTypes$1.textStyle,
-  resultsTextStyle: PropTypes$1.textStyle,
-  feedbackTextStyle: PropTypes$1.textStyle,
-  numbersTextStyle: PropTypes$1.textStyle,
-  goodAnswerColor: PropTypes$1.color,
-  badAnswerColor: PropTypes$1.color,
-  spacing: PropTypes.number,
-  background: PropTypes$1.backgroundElement,
-  introButton: PropTypes$1.textElement,
-  introBackground: PropTypes$1.backgroundElement,
-  nextButton: PropTypes$1.textElement,
-  header: PropTypes$1.header,
-  footer: PropTypes$1.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  transitions: PropTypes$1.transitions,
-  transitionStagger: PropTypes.number,
-  type: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps = {
-  id: null,
-  layout: 'middle',
-  introLayout: null,
-  title: null,
-  description: null,
-  questions: null,
-  results: null,
-  buttonsStyle: null,
-  inactiveButtonsStyle: null,
-  buttonsTextStyle: null,
-  inactiveButtonsTextStyle: null,
-  questionsHeadingStyle: null,
-  resultsHeadingStyle: null,
-  resultsTextStyle: null,
-  feedbackTextStyle: null,
-  numbersTextStyle: null,
-  goodAnswerColor: null,
-  badAnswerColor: null,
-  spacing: 20,
-  background: null,
-  introButton: null,
-  introBackground: null,
-  nextButton: null,
-  header: null,
-  footer: null,
-  current: true,
-  active: true,
-  transitions: null,
-  transitionStagger: 100,
-  type: null,
-  className: null
-};
-var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
-  var id = _ref.id,
-    layout = _ref.layout,
-    introLayout = _ref.introLayout,
-    title = _ref.title,
-    description = _ref.description,
-    questions = _ref.questions,
-    results = _ref.results,
-    buttonsStyle = _ref.buttonsStyle,
-    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
-    questionsHeadingStyle = _ref.questionsHeadingStyle,
-    resultsHeadingStyle = _ref.resultsHeadingStyle,
-    resultsTextStyle = _ref.resultsTextStyle,
-    feedbackTextStyle = _ref.feedbackTextStyle,
-    numbersTextStyle = _ref.numbersTextStyle,
-    goodAnswerColor = _ref.goodAnswerColor,
-    badAnswerColor = _ref.badAnswerColor,
-    spacing = _ref.spacing,
-    background = _ref.background,
-    introBackground = _ref.introBackground,
-    introButton = _ref.introButton,
-    nextButton = _ref.nextButton,
-    header = _ref.header,
-    footer = _ref.footer,
-    current = _ref.current,
-    active = _ref.active,
-    transitions = _ref.transitions,
-    transitionStagger = _ref.transitionStagger,
-    type = _ref.type,
-    className = _ref.className;
+function QuizMultipleScreen(_ref) {
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
+    _ref$introLayout = _ref.introLayout,
+    introLayout = _ref$introLayout === void 0 ? null : _ref$introLayout,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    _ref$questions = _ref.questions,
+    questions = _ref$questions === void 0 ? null : _ref$questions,
+    _ref$results = _ref.results,
+    results = _ref$results === void 0 ? null : _ref$results,
+    _ref$buttonsStyle = _ref.buttonsStyle,
+    buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
+    _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
+    inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
+    _ref$buttonsTextStyle = _ref.buttonsTextStyle,
+    buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
+    _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
+    inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
+    _ref$questionsHeading = _ref.questionsHeadingStyle,
+    questionsHeadingStyle = _ref$questionsHeading === void 0 ? null : _ref$questionsHeading,
+    _ref$resultsHeadingSt = _ref.resultsHeadingStyle,
+    resultsHeadingStyle = _ref$resultsHeadingSt === void 0 ? null : _ref$resultsHeadingSt,
+    _ref$resultsTextStyle = _ref.resultsTextStyle,
+    resultsTextStyle = _ref$resultsTextStyle === void 0 ? null : _ref$resultsTextStyle,
+    _ref$feedbackTextStyl = _ref.feedbackTextStyle,
+    feedbackTextStyle = _ref$feedbackTextStyl === void 0 ? null : _ref$feedbackTextStyl,
+    _ref$numbersTextStyle = _ref.numbersTextStyle,
+    numbersTextStyle = _ref$numbersTextStyle === void 0 ? null : _ref$numbersTextStyle,
+    _ref$goodAnswerColor = _ref.goodAnswerColor,
+    goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
+    _ref$badAnswerColor = _ref.badAnswerColor,
+    badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? null : _ref$background,
+    _ref$introBackground = _ref.introBackground,
+    introBackground = _ref$introBackground === void 0 ? null : _ref$introBackground,
+    _ref$introButton = _ref.introButton,
+    introButton = _ref$introButton === void 0 ? null : _ref$introButton,
+    _ref$nextButton = _ref.nextButton,
+    nextButton = _ref$nextButton === void 0 ? null : _ref$nextButton,
+    _ref$header = _ref.header,
+    header = _ref$header === void 0 ? null : _ref$header,
+    _ref$footer = _ref.footer,
+    footer = _ref$footer === void 0 ? null : _ref$footer,
+    _ref$current = _ref.current,
+    current = _ref$current === void 0 ? true : _ref$current,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? true : _ref$active,
+    _ref$transitions = _ref.transitions,
+    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
+    _ref$transitionStagge = _ref.transitionStagger,
+    transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? null : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   var screenId = id || 'screen-id';
   var trackScreenEvent = useTrackScreenEvent(type);
   var _useScreenSize = useScreenSize(),
@@ -1609,8 +1423,184 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   }
   var showPoints = isEdit;
   var showReset = isEdit && currentAnsweredIndex !== null;
+
+  // Content transition items (captured for leaving animations)
+  var contentItems = [];
+  if (isIntro) {
+    contentItems.push({
+      key: 'intro',
+      element: /*#__PURE__*/React.createElement(Title, {
+        title: title,
+        description: description,
+        layout: introLayout || layout,
+        button: introButton,
+        buttonDisabled: (questions || []).length < 1 || isEdit || isPreview,
+        focusable: current && isView,
+        transitions: transitions,
+        transitionPlaying: transitionPlaying,
+        transitionStagger: transitionStagger,
+        transitionDisabled: transitionDisabled,
+        className: styles$2.intro,
+        style: !isPlaceholder ? {
+          paddingLeft: spacing,
+          paddingRight: spacing,
+          paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+          paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
+        } : null,
+        onClickButton: onClickIntroButton
+      })
+    });
+  }
+  if (isQuestion) {
+    contentItems.push({
+      key: "question-".concat(questionIndex),
+      element: /*#__PURE__*/React.createElement(Question, {
+        index: questionIndex,
+        totalCount: (questions || []).length,
+        question: text,
+        answers: answers,
+        keypadLayout: keypadLayout,
+        answeredIndex: currentAnsweredIndex,
+        buttonsStyle: buttonsStyle,
+        inactiveButtonsStyle: inactiveButtonsStyle,
+        buttonsTextStyle: buttonsTextStyle,
+        inactiveButtonsTextStyle: inactiveButtonsTextStyle,
+        questionsHeadingStyle: questionsHeadingStyle,
+        feedbackTextStyle: feedbackTextStyle,
+        numbersTextStyle: numbersTextStyle,
+        goodAnswerColor: goodAnswerColor,
+        badAnswerColor: badAnswerColor,
+        focusable: current && isView,
+        showInstantAnswer: showInstantAnswer,
+        layout: questionLayout || layout,
+        result: questionResult,
+        resultImage: questionResultImage,
+        withResult: hasResult,
+        withoutGoodAnswer: withoutGoodAnswer,
+        withoutTrueFalse: !hasTrueFalse,
+        withoutCollapse: hasTrueFalse,
+        transitions: transitions,
+        transitionPlaying: transitionPlaying,
+        transitionStagger: transitionStagger,
+        transitionDisabled: transitionDisabled,
+        onAnswerClick: onAnswerClick,
+        onAnswerTransitionEnd: hasResult ? null : onNextSlide,
+        className: styles$2.question,
+        style: !isPlaceholder ? {
+          padding: spacing,
+          paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+          paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
+        } : null
+      })
+    });
+  }
+  if (hasResult && currentAnsweredIndex !== null) {
+    contentItems.push({
+      key: 'next',
+      element: /*#__PURE__*/React.createElement("div", {
+        className: styles$2.next,
+        style: !isPlaceholder ? {
+          padding: spacing,
+          paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+          paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
+        } : null
+      }, /*#__PURE__*/React.createElement(Button$1, {
+        disabled: currentAnsweredIndex === null,
+        focusable: true,
+        buttonStyle: nextButton !== null ? nextButton.buttonStyle : null,
+        className: styles$2.nextButton,
+        onClick: onNextSlide
+      }, hasButtonText ? /*#__PURE__*/React.createElement(Text, Object.assign({}, nextButton, {
+        className: styles$2.label
+      })) : /*#__PURE__*/React.createElement("span", {
+        className: styles$2.label
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "SVLGTA",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Next"
+        }]
+      }))))
+    });
+  }
+  if (isResults) {
+    contentItems.push({
+      key: 'results',
+      element: /*#__PURE__*/React.createElement(Results, Object.assign({}, currentResult, {
+        resultsHeadingStyle: resultsHeadingStyle,
+        resultsTextStyle: resultsTextStyle,
+        layout: resultLayout || layout,
+        transitions: transitions,
+        transitionPlaying: transitionPlaying,
+        transitionStagger: transitionStagger,
+        transitionDisabled: transitionDisabled,
+        className: styles$2.results,
+        style: !isPlaceholder ? {
+          padding: spacing,
+          paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+          paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
+        } : null
+      }))
+    });
+  }
+  var contentTransitions = useTransition(contentItems, {
+    keys: function keys(item) {
+      return item.key;
+    },
+    from: function from(item) {
+      return item.key === 'next' ? {
+        transform: 'translateX(0%)'
+      } : {
+        transform: direction === 'left' ? 'translateX(-100%)' : 'translateX(100%)'
+      };
+    },
+    enter: {
+      transform: 'translateX(0%)'
+    },
+    leave: function leave(item) {
+      return item.key === 'next' ? {
+        transform: 'translateX(0%)'
+      } : {
+        transform: direction === 'left' ? 'translateX(100%)' : 'translateX(-100%)'
+      };
+    },
+    config: function config(item) {
+      return item.key === 'next' ? {
+        duration: 0
+      } : {
+        duration: 1000,
+        easing: easings.easeInOutSine
+      };
+    }
+  });
+
+  // Background transition
+  var bgItem = useMemo(function () {
+    return {
+      key: backgroundKey,
+      background: finalBackground
+    };
+  }, [backgroundKey, finalBackground]);
+  var bgTransitions = useTransition(bgItem, {
+    keys: function keys(item) {
+      return item.key;
+    },
+    from: {
+      opacity: 0
+    },
+    enter: {
+      opacity: 1
+    },
+    leave: {
+      opacity: 0
+    },
+    config: {
+      duration: 1000,
+      easing: easings.easeInOutSine
+    }
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2[direction], direction !== null), className, className !== null)]),
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -1649,116 +1639,33 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     onScrolledNotBottom: onScrolledNotBottom,
     onScrollHeightChange: onScrollHeightChange,
     withShadow: true
-  }, /*#__PURE__*/React.createElement(TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(CSSTransition, {
-    key: "intro",
-    classNames: styles$2,
-    timeout: 1000
-  }, /*#__PURE__*/React.createElement(Title, {
-    title: title,
-    description: description,
-    layout: introLayout || layout,
-    button: introButton,
-    buttonDisabled: (questions || []).length < 1 || isEdit || isPreview,
-    focusable: current && isView,
-    transitions: transitions,
-    transitionPlaying: transitionPlaying,
-    transitionStagger: transitionStagger,
-    transitionDisabled: transitionDisabled,
-    className: styles$2.intro,
-    style: !isPlaceholder ? {
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
-    } : null,
-    onClickButton: onClickIntroButton
-  })) : null, isQuestion ? /*#__PURE__*/React.createElement(CSSTransition, {
-    key: "question-".concat(questionIndex),
-    classNames: styles$2,
-    timeout: 1000
-  }, /*#__PURE__*/React.createElement(Question, {
-    index: questionIndex,
-    totalCount: (questions || []).length,
-    question: text,
-    answers: answers,
-    keypadLayout: keypadLayout,
-    answeredIndex: currentAnsweredIndex,
-    buttonsStyle: buttonsStyle,
-    inactiveButtonsStyle: inactiveButtonsStyle,
-    buttonsTextStyle: buttonsTextStyle,
-    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
-    questionsHeadingStyle: questionsHeadingStyle,
-    feedbackTextStyle: feedbackTextStyle,
-    numbersTextStyle: numbersTextStyle,
-    goodAnswerColor: goodAnswerColor,
-    badAnswerColor: badAnswerColor,
-    focusable: current && isView,
-    showInstantAnswer: showInstantAnswer,
-    layout: questionLayout || layout,
-    result: questionResult,
-    resultImage: questionResultImage,
-    withResult: hasResult,
-    withoutGoodAnswer: withoutGoodAnswer,
-    withoutTrueFalse: !hasTrueFalse,
-    withoutCollapse: hasTrueFalse,
-    transitions: transitions,
-    transitionPlaying: transitionPlaying,
-    transitionStagger: transitionStagger,
-    transitionDisabled: transitionDisabled,
-    onAnswerClick: onAnswerClick,
-    onAnswerTransitionEnd: hasResult ? null : onNextSlide,
-    className: styles$2.question,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
-    } : null
-  })) : null, hasResult && currentAnsweredIndex !== null ? /*#__PURE__*/React.createElement(CSSTransition, {
-    key: "next",
-    classNames: styles$2,
-    timeout: 0
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.next,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
-    } : null
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    disabled: currentAnsweredIndex === null,
-    focusable: true,
-    buttonStyle: nextButton !== null ? nextButton.buttonStyle : null,
-    className: styles$2.nextButton,
-    onClick: onNextSlide
-  }, hasButtonText ? /*#__PURE__*/React.createElement(Text, Object.assign({}, nextButton, {
-    className: styles$2.label
-  })) : /*#__PURE__*/React.createElement("span", {
-    className: styles$2.label
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "SVLGTA",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Next"
-    }]
-  }))))) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
-    key: "results",
-    classNames: styles$2,
-    timeout: 2000
-  }, /*#__PURE__*/React.createElement(Results, Object.assign({}, currentResult, {
-    resultsHeadingStyle: resultsHeadingStyle,
-    resultsTextStyle: resultsTextStyle,
-    layout: resultLayout || layout,
-    transitions: transitions,
-    transitionPlaying: transitionPlaying,
-    transitionStagger: transitionStagger,
-    transitionDisabled: transitionDisabled,
-    className: styles$2.results,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
-    } : null
-  }))) : null])), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: '0'
+    }
+  }, contentTransitions(function (springStyle, item) {
+    var isActive = contentItems.some(function (ci) {
+      return ci.key === item.key;
+    });
+    return /*#__PURE__*/React.createElement(animated.div, {
+      style: _objectSpread(_objectSpread({}, springStyle), !isActive ? {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        minHeight: '100%',
+        zIndex: 0
+      } : {
+        position: 'relative',
+        zIndex: 1,
+        top: 0,
+        left: 0,
+        width: '100%',
+        minHeight: '100%'
+      })
+    }, item.element);
+  }))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     ref: footerRef,
     className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
     style: {
@@ -1768,25 +1675,30 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       paddingBottom: spacing / 2,
       transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
     }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
-    key: backgroundKey,
-    classNames: styles$2,
-    timeout: 1000
-  }, /*#__PURE__*/React.createElement(Background, {
-    background: finalBackground,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: backgroundShouldLoad,
-    mediaRef: mediaRef,
-    className: styles$2.background,
-    withoutVideo: isPreview
-  }))) : null);
-};
-QuizMultipleScreen.propTypes = propTypes;
-QuizMultipleScreen.defaultProps = defaultProps;
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? bgTransitions(function (springStyle, item) {
+    return /*#__PURE__*/React.createElement(animated.div, {
+      style: _objectSpread(_objectSpread({}, springStyle), {}, {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: item.key === bgItem.key ? 1 : 0
+      })
+    }, /*#__PURE__*/React.createElement(Background, {
+      background: item.background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: backgroundShouldLoad,
+      mediaRef: mediaRef,
+      className: styles$2.background,
+      withoutVideo: isPreview
+    }));
+  }) : null);
+}
 
 var definition = [{
   id: 'quiz',