@micromag/screen-quiz 0.3.541 → 0.3.556

package/lib/index.js

@@ -1,2027 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var faRedo = require('@fortawesome/free-solid-svg-icons/faRedo');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var data = require('@micromag/data');
-var Background = require('@micromag/element-background');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Scroll = require('@micromag/element-scroll');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var Heading = require('@micromag/element-heading');
-var Layout = require('@micromag/element-layout');
-var Text = require('@micromag/element-text');
-var Visual = require('@micromag/element-visual');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
-var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
-var web = require('@react-spring/web');
-var Button = require('@micromag/element-button');
-var reactTransitionGroup = require('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","withIcon":"micromag-screen-quiz-answers-withIcon","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 propTypes$5 = {
-  items: core.PropTypes.quizAnswers.isRequired,
-  answeredIndex: PropTypes.number,
-  answersCollapseDelay: PropTypes.number,
-  buttonsStyle: core.PropTypes.boxStyle,
-  buttonsTextStyle: core.PropTypes.textStyle,
-  goodAnswerColor: core.PropTypes.color,
-  badAnswerColor: core.PropTypes.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,
-  className: PropTypes.string
-};
-var defaultProps$5 = {
-  answeredIndex: null,
-  answersCollapseDelay: 1000,
-  buttonsStyle: null,
-  buttonsTextStyle: 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,
-  className: null
-};
-var Answers = function Answers(_ref) {
-  var items = _ref.items,
-    answeredIndex = _ref.answeredIndex,
-    answersCollapseDelay = _ref.answersCollapseDelay,
-    buttonsStyle = _ref.buttonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    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,
-    className = _ref.className;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit;
-  var answered = answeredIndex !== null;
-  var _ref2 = answeredIndex !== null ? items[answeredIndex] : {},
-    _ref2$good = _ref2.good,
-    hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
-  var _useState = React.useState(true),
-    _useState2 = _slicedToArray(_useState, 1),
-    visible = _useState2[0];
-  var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, answer) {
-    var _ref3 = answer || {},
-      _ref3$good = _ref3.good,
-      good = _ref3$good === void 0 ? false : _ref3$good;
-    return hasGood || good;
-  }, false) : false;
-  var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
-  var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
-  var _useState3 = React.useState(answeredIndex !== null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    answersCollapsed = _useState4[0],
-    setAnswersCollapsed = _useState4[1];
-  var _useState5 = React.useState(initialCollapsed || answeredIndex !== null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    answersDidCollapse = _useState6[0],
-    setAnswersDidCollapse = _useState6[1];
-  var _useState7 = React.useState(initialCollapsed || answeredIndex !== null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    answersFinalCollapse = _useState8[0],
-    setAnswersFinalCollapse = _useState8[1];
-  React.useEffect(function () {
-    var timeout = null;
-    if (answeredIndex !== null && shouldCollapse) {
-      timeout = setTimeout(function () {
-        setAnswersCollapsed(true);
-        if (onCollapse !== null) {
-          onCollapse();
-        }
-      }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
-    } else if (answeredIndex === null && shouldCollapse) {
-      setAnswersCollapsed(false);
-    }
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
-  React.useEffect(function () {
-    var timeout = null;
-    if (answersCollapsed) {
-      timeout = setTimeout(function () {
-        setAnswersFinalCollapse(true);
-      }, 300);
-    }
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [answersCollapsed]);
-  var onAnswerTransitionEnd = React.useCallback(function () {
-    if (onTransitionEnd !== null) {
-      onTransitionEnd();
-    }
-    if (shouldCollapse && answersCollapsed && !answersDidCollapse) {
-      setAnswersDidCollapse(true);
-      if (onCollapsed !== null) {
-        onCollapsed();
-      }
-    }
-  }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
-  var itemsRefs = React.useRef([]);
-  var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
-  var heights = React.useMemo(function () {
-    if (web.animated) {
-      var allHeights = listOfItems.reduce(function (acc, it, i) {
-        if (itemsRefs.current[i] && collapseAnimated) {
-          var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
-            _ref4$height = _ref4.height,
-            height = _ref4$height === void 0 ? 0 : _ref4$height;
-          acc.push(height);
-        }
-        return acc;
-      }, []);
-      return allHeights;
-    }
-    return [];
-  }, [web.animated, answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
-  var showAnimation = isView || isEdit;
-  var filteredListOfItems = listOfItems.map(function (answer, answerI) {
-    var height = heights[answerI] ? heights[answerI] : 0;
-    var userAnswer = answerI === answeredIndex;
-    var _ref5 = answer || {},
-      _ref5$good = _ref5.good,
-      rightAnswer = _ref5$good === void 0 ? false : _ref5$good;
-    var hidden = false;
-    if (answeredIndex !== null && showAnimation && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
-      hidden = true;
-    }
-    if (answeredIndex !== null && showAnimation && answersCollapsed && !rightAnswer) {
-      hidden = true;
-    }
-    return _objectSpread(_objectSpread({}, answer), {}, {
-      hidden: hidden,
-      userAnswer: userAnswer,
-      index: answerI,
-      maxHeight: height
-    });
-  });
-  var transitions = web.useTransition(filteredListOfItems, {
-    key: function key(_ref6) {
-      var _ref6$index = _ref6.index,
-        index = _ref6$index === void 0 ? 0 : _ref6$index,
-        _ref6$label = _ref6.label,
-        label = _ref6$label === void 0 ? null : _ref6$label;
-      return "key-".concat(index, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
-    },
-    update: function update(_ref7) {
-      var _ref7$hidden = _ref7.hidden,
-        hidden = _ref7$hidden === void 0 ? false : _ref7$hidden,
-        _ref7$maxHeight = _ref7.maxHeight,
-        maxHeight = _ref7$maxHeight === void 0 ? 0 : _ref7$maxHeight;
-      return {
-        opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
-        // Animate this, not height
-        maxHeight:
-        // eslint-disable-next-line no-nested-ternary
-        hidden && showAnimation && !withoutGoodAnswer && collapseAnimated && answersFinalCollapse ? 0 : maxHeight > 0 ? maxHeight : null,
-        height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated && answersFinalCollapse ? 0 : 'auto'
-      };
-    },
-    // config: { tension: 300, friction: 35 },
-    config: {
-      duration: 300,
-      easing: web.easings.easeOutSine
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon), styles$4.isPlaceholder, isPlaceholder), className, className !== null)])
-  }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    className: styles$4.items
-  }, transitions(function (style, answer, t, answerI) {
-    var userAnswer = answerI === answeredIndex;
-    var _ref9 = answer || {},
-      _ref9$good = _ref9.good,
-      rightAnswer = _ref9$good === void 0 ? null : _ref9$good,
-      _ref9$label = _ref9.label,
-      label = _ref9$label === void 0 ? null : _ref9$label,
-      _ref9$buttonStyle = _ref9.buttonStyle,
-      answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle,
-      _ref9$textStyle = _ref9.textStyle,
-      answerButtonTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
-    var _ref10 = label || {},
-      _ref10$textStyle = _ref10.textStyle,
-      textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
-    var hasAnswer = utils.isTextFilled(label);
-    return /*#__PURE__*/React.createElement(web.animated.div, {
-      key: "answer-".concat(answerI),
-      className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, withoutGoodAnswer && userAnswer), styles$4.otherAnswer, withoutGoodAnswer && !userAnswer)]),
-      style: _objectSpread({}, style)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$4.itemContent,
-      ref: function ref(el) {
-        itemsRefs.current[answerI] = el;
-      }
-    }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-      placeholder: "quizAnswer",
-      placeholderProps: {
-        good: answerI === 0
-      },
-      emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-        id: "+Ok+7S",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Answer"
-        }]
-      }),
-      emptyClassName: styles$4.emptyAnswer,
-      isEmpty: !hasAnswer
-    }, hasAnswer ? /*#__PURE__*/React.createElement(Button, {
-      className: styles$4.button,
-      onPointerUp: function onPointerUp(e) {
-        if (e.pointerType !== 'mouse' || e.button === 0) {
-          onClick(answer, answerI);
-          onAnswerTransitionEnd();
-        }
-      },
-      disabled: !visible || isPreview || answered,
-      focusable: focusable,
-      buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle),
-      textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), answerButtonTextStyle)
-    }, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React.createElement("span", {
-      className: styles$4.resultIcon,
-      style: utils.getStyleFromColor(goodAnswerColor, 'backgroundColor')
-    }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$4.faIcon,
-      icon: faCheck.faCheck
-    })) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/React.createElement("span", {
-      className: styles$4.resultIcon,
-      style: utils.getStyleFromColor(badAnswerColor, 'backgroundColor')
-    }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$4.faIcon,
-      icon: faTimes.faTimes
-    })) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-      className: styles$4.optionLabel,
-      textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
-    }))) : null)));
-  })) : null);
-};
-Answers.propTypes = propTypes$5;
-Answers.defaultProps = defaultProps$5;
-var Answers$1 = Answers;
-
-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","result":"micromag-screen-quiz-question-result","resultContent":"micromag-screen-quiz-question-resultContent","resultVisible":"micromag-screen-quiz-question-resultVisible","isPlaceholder":"micromag-screen-quiz-question-isPlaceholder"};
-
-var propTypes$4 = {
-  question: core.PropTypes.textElement,
-  answers: core.PropTypes.quizAnswers,
-  result: PropTypes.shape({
-    image: core.PropTypes.imageElement,
-    text: core.PropTypes.textElement
-  }),
-  resultImage: core.PropTypes.visualElement,
-  index: PropTypes.number,
-  totalCount: PropTypes.number,
-  answeredIndex: PropTypes.number,
-  buttonsStyle: core.PropTypes.boxStyle,
-  buttonsTextStyle: core.PropTypes.textStyle,
-  questionsHeadingStyle: core.PropTypes.textStyle,
-  goodAnswerColor: core.PropTypes.color,
-  badAnswerColor: core.PropTypes.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: core.PropTypes.transitions,
-  transitionPlaying: PropTypes.bool,
-  transitionStagger: PropTypes.number,
-  transitionDisabled: PropTypes.bool,
-  onAnswerClick: PropTypes.func,
-  onAnswerTransitionEnd: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
-};
-var defaultProps$4 = {
-  question: null,
-  answers: null,
-  result: null,
-  resultImage: null,
-  index: null,
-  totalCount: null,
-  answeredIndex: null,
-  buttonsStyle: null,
-  buttonsTextStyle: null,
-  questionsHeadingStyle: 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,
-  className: null,
-  style: null
-};
-var Question = function Question(_ref) {
-  var question = _ref.question,
-    answers = _ref.answers,
-    result = _ref.result,
-    resultImage = _ref.resultImage,
-    index = _ref.index,
-    totalCount = _ref.totalCount,
-    answeredIndex = _ref.answeredIndex,
-    buttonsStyle = _ref.buttonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    questionsHeadingStyle = _ref.questionsHeadingStyle,
-    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,
-    className = _ref.className,
-    style = _ref.style;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isPlaceholder = _useScreenRenderConte.isPlaceholder;
-  var isSplitted = layout === 'split';
-  var verticalAlign = isSplitted ? null : layout;
-  var hasQuestion = utils.isTextFilled(question);
-  var _ref2 = question || {},
-    _ref2$textStyle = _ref2.textStyle,
-    questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-  var _useState = React.useState(showInstantAnswer),
-    _useState2 = _slicedToArray(_useState, 2),
-    resultVisible = _useState2[0],
-    setResultVisible = _useState2[1];
-  var answered = answeredIndex !== null;
-  var answer = answeredIndex !== null && answers[answeredIndex] ? answers[answeredIndex] : null;
-  var _ref3 = answer || {},
-    _ref3$customAnswerLab = _ref3.customAnswerLabel,
-    customAnswerLabel = _ref3$customAnswerLab === void 0 ? null : _ref3$customAnswerLab,
-    _ref3$answerImage = _ref3.answerImage,
-    answerImage = _ref3$answerImage === void 0 ? null : _ref3$answerImage;
-  var hasResult = utils.isTextFilled(customAnswerLabel) || utils.isTextFilled(result);
-  var hasResultVisual = utils.isImageFilled(answerImage) || utils.isImageFilled(resultImage);
-  var defaultResult = utils.isTextFilled(result) ? result : null;
-  var customResult = utils.isTextFilled(customAnswerLabel) ? customAnswerLabel : null;
-  var onAnswersCollapse = React.useCallback(function () {
-    setResultVisible(true);
-  }, [setResultVisible]);
-  var hasIndex = index !== null && totalCount !== null;
-  return /*#__PURE__*/React.createElement(Layout, {
-    className: classNames([styles$3.container, _defineProperty(_defineProperty(_defineProperty({}, styles$3.isPlaceholder, isPlaceholder), styles$3.resultVisible, resultVisible), className, className !== null)]),
-    verticalAlign: verticalAlign,
-    style: style
-  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "stats",
-    placeholder: /*#__PURE__*/React.createElement("div", {
-      className: styles$3.index
-    }, "1 / 10")
-  }, totalCount > 1 ? /*#__PURE__*/React.createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.index
-  }, index + 1, " / ", totalCount)) : null) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "question",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "FOmgqv",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Question"
-      }]
-    }),
-    emptyClassName: styles$3.emptyQuestion,
-    isEmpty: !hasQuestion
-  }, hasQuestion ? /*#__PURE__*/React.createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
-    className: styles$3.question,
-    textStyle: _objectSpread(_objectSpread({}, questionsHeadingStyle), questionTextStyle)
-  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React.createElement(Answers$1, {
-    key: "answers",
-    items: answers || [],
-    answeredIndex: answeredIndex,
-    goodAnswerColor: goodAnswerColor,
-    badAnswerColor: badAnswerColor,
-    withoutGoodAnswer: withoutGoodAnswer,
-    withoutIcon: withoutTrueFalse,
-    showUserAnswer: withoutTrueFalse,
-    buttonsStyle: buttonsStyle,
-    buttonsTextStyle: buttonsTextStyle,
-    focusable: focusable,
-    animated: animated,
-    transitions: transitions,
-    transitionStagger: transitionStagger,
-    transitionPlaying: transitionPlaying,
-    transitionDisabled: transitionDisabled,
-    onClick: onAnswerClick,
-    onCollapse: onAnswersCollapse,
-    onTransitionEnd: onAnswerTransitionEnd
-  }), withResult ? /*#__PURE__*/React.createElement("div", {
-    className: styles$3.result,
-    key: "results"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.resultContent
-  }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    emptyLabel: answered ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "li7ADr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Result"
-      }]
-    }) : null,
-    isEmpty: answered && !hasResult,
-    emptyClassName: styles$3.emptyResult
-  }, (hasResult || hasResultVisual) && answers !== null ? /*#__PURE__*/React.createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    delay: (1 + answers.length) * transitionStagger,
-    disabled: transitionDisabled
-  }, hasResult ? /*#__PURE__*/React.createElement(Text, Object.assign({}, customResult || defaultResult, {
-    className: styles$3.resultText
-  })) : null, hasResultVisual ? /*#__PURE__*/React.createElement(Visual, {
-    media: answerImage || resultImage,
-    width: "100%",
-    height: "auto"
-  }) : null) : null))) : null]);
-};
-Question.propTypes = propTypes$4;
-Question.defaultProps = defaultProps$4;
-var Question$1 = Question;
-
-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","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"};
-
-var propTypes$3 = {
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  question: core.PropTypes.textElement,
-  answers: core.PropTypes.quizAnswers,
-  result: PropTypes.shape({
-    image: core.PropTypes.imageElement,
-    text: core.PropTypes.textElement
-  }),
-  resultImage: core.PropTypes.visualElement,
-  buttonsStyle: core.PropTypes.boxStyle,
-  buttonsTextStyle: core.PropTypes.textStyle,
-  goodAnswerColor: core.PropTypes.color,
-  badAnswerColor: core.PropTypes.color,
-  withoutTrueFalse: PropTypes.bool,
-  spacing: PropTypes.number,
-  background: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  ready: PropTypes.bool,
-  transitions: core.PropTypes.transitions,
-  transitionStagger: PropTypes.number,
-  type: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$3 = {
-  id: null,
-  layout: 'middle',
-  question: null,
-  answers: null,
-  result: null,
-  resultImage: null,
-  buttonsStyle: null,
-  buttonsTextStyle: null,
-  goodAnswerColor: null,
-  badAnswerColor: null,
-  withoutTrueFalse: false,
-  spacing: 20,
-  header: null,
-  footer: null,
-  background: null,
-  current: true,
-  active: true,
-  ready: true,
-  transitions: null,
-  transitionStagger: 100,
-  type: null,
-  className: null
-};
-var QuizScreen = function QuizScreen(_ref) {
-  var id = _ref.id,
-    layout = _ref.layout,
-    question = _ref.question,
-    answers = _ref.answers,
-    result = _ref.result,
-    resultImage = _ref.resultImage,
-    buttonsStyle = _ref.buttonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    goodAnswerColor = _ref.goodAnswerColor,
-    badAnswerColor = _ref.badAnswerColor,
-    withoutTrueFalse = _ref.withoutTrueFalse,
-    spacing = _ref.spacing,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    current = _ref.current,
-    active = _ref.active,
-    ready = _ref.ready,
-    transitions = _ref.transitions,
-    transitionStagger = _ref.transitionStagger,
-    type = _ref.type,
-    className = _ref.className;
-  var screenId = id || 'screen-id';
-  var trackScreenEvent = hooks.useTrackScreenEvent(type);
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var clickDisabled = !ready;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var transitionPlaying = current && ready;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    headerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var _useDimensionObserver3 = hooks.useDimensionObserver(),
-    footerRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.height,
-    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var showInstantAnswer = isStatic || isCapture;
-  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
-    return answer !== null && answer.good;
-  }) : null;
-  var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
-  var _useState = React.useState(showInstantAnswer ? goodAnswerIndex : null),
-    _useState2 = _slicedToArray(_useState, 2),
-    userAnswerIndex = _useState2[0],
-    setUserAnswerIndex = _useState2[1];
-  var _useQuizCreate = data.useQuizCreate({
-      screenId: screenId
-    }),
-    submitQuiz = _useQuizCreate.create;
-  var onAnswerClick = React.useCallback(function (answer, answerI) {
-    if (userAnswerIndex !== null) {
-      return;
-    }
-    setUserAnswerIndex(answerI);
-    trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
-      answer: answer,
-      answerIndex: answerI
-    });
-  }, [userAnswerIndex, setUserAnswerIndex, trackScreenEvent, answers]);
-  React.useEffect(function () {
-    if (!current && isEdit && userAnswerIndex !== null) {
-      setUserAnswerIndex(null);
-    }
-  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
-  React.useEffect(function () {
-    if (!isView) {
-      return;
-    }
-    if (userAnswerIndex !== null) {
-      var _ref2 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
-        _ref2$good = _ref2.good,
-        isGood = _ref2$good === void 0 ? false : _ref2$good,
-        _ref2$label = _ref2.label,
-        label = _ref2$label === void 0 ? {} : _ref2$label;
-      var _ref3 = label || {},
-        _ref3$body = _ref3.body,
-        body = _ref3$body === void 0 ? '' : _ref3$body;
-      submitQuiz({
-        choice: body || userAnswerIndex,
-        value: isGood ? 1 : 0
-      });
-    }
-  }, [isView, userAnswerIndex, answers, submitQuiz]);
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scrolledBottom = _useState4[0],
-    setScrolledBottom = _useState4[1];
-  var onScrolledBottom = React.useCallback(function (_ref4) {
-    var initial = _ref4.initial;
-    if (initial) {
-      trackScreenEvent('scroll', 'Screen');
-    }
-    setScrolledBottom(true);
-  }, [trackScreenEvent]);
-  var onScrolledNotBottom = React.useCallback(function () {
-    setScrolledBottom(false);
-  }, [setScrolledBottom]);
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasScroll = _useState6[0],
-    setHasScroll = _useState6[1];
-  var onScrollHeightChange = React.useCallback(function (_ref5) {
-    var _ref5$canScroll = _ref5.canScroll,
-      canScroll = _ref5$canScroll === void 0 ? false : _ref5$canScroll;
-    setHasScroll(canScroll);
-  }, [setHasScroll]);
-  var onQuizReset = React.useCallback(function () {
-    setUserAnswerIndex(null);
-  }, [setUserAnswerIndex]);
-  var numberOfAnswers = (answers || []).length;
-  React.useEffect(function () {
-    onQuizReset();
-  }, [numberOfAnswers, onQuizReset]);
-  var isSplitted = layout === 'split';
-  var verticalAlign = isSplitted ? null : layout;
-  var showReset = isEdit;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2.disabled, clickDisabled), className, className !== null)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles$2.content
-  }, showReset ? /*#__PURE__*/React.createElement(components.Button, {
-    className: styles$2.reset,
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faRedo.faRedo,
-      size: "md"
-    }),
-    onClick: onQuizReset
-  }) : null, /*#__PURE__*/React.createElement(Scroll, {
-    verticalAlign: verticalAlign
-    // disabled={scrollingDisabled || userAnswerIndex !== null}
-    ,
-    disabled: scrollingDisabled,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    onScrollHeightChange: onScrollHeightChange,
-    withShadow: true
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, userAnswerIndex !== null || scrolledBottom && !scrollingDisabled && hasScroll)]),
-    ref: headerRef,
-    style: {
-      paddingTop: spacing / 2,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      paddingBottom: spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Question$1, {
-    question: question,
-    answers: answers,
-    result: result,
-    resultImage: resultImage,
-    answeredIndex: userAnswerIndex,
-    buttonsStyle: buttonsStyle,
-    buttonsTextStyle: buttonsTextStyle,
-    goodAnswerColor: goodAnswerColor,
-    badAnswerColor: badAnswerColor,
-    withoutTrueFalse: withoutTrueFalse,
-    withoutGoodAnswer: withoutGoodAnswer,
-    focusable: current && isView,
-    animated: isView,
-    showInstantAnswer: showInstantAnswer,
-    withResult: true,
-    layout: layout,
-    transitions: transitions,
-    transitionPlaying: transitionPlaying,
-    transitionStagger: transitionStagger,
-    transitionDisabled: transitionDisabled,
-    onAnswerClick: onAnswerClick,
-    className: styles$2.question,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
-    } : null
-  })), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    ref: footerRef,
-    className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom && hasScroll)]),
-    style: {
-      transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingTop: spacing / 2,
-      paddingBottom: spacing / 2
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles$2.background
-  }) : null);
-};
-QuizScreen.propTypes = propTypes$3;
-QuizScreen.defaultProps = defaultProps$3;
-var QuizScreen$1 = QuizScreen;
-
-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","isPlaceholder":"micromag-screen-quiz-results-isPlaceholder"};
-
-var propTypes$2 = {
-  title: core.PropTypes.textElement,
-  description: core.PropTypes.textElement,
-  resultsHeadingStyle: core.PropTypes.textStyle,
-  resultsTextStyle: core.PropTypes.textStyle,
-  layout: PropTypes.string,
-  transitions: core.PropTypes.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;
-  var isSplitted = layout === 'split';
-  var verticalAlign = isSplitted ? null : layout;
-  var hasTitle = utils.isTextFilled(title);
-  var _ref2 = title || {},
-    _ref2$textStyle = _ref2.textStyle,
-    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-  var hasDescription = utils.isTextFilled(description);
-  var _ref3 = description || {},
-    _ref3$textStyle = _ref3.textStyle,
-    descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
-  return /*#__PURE__*/React.createElement(Layout, {
-    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
-    fullscreen: true,
-    verticalAlign: verticalAlign,
-    style: style
-  }, [/*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "BSTWf8",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: styles$1.emptyTitle,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
-    className: styles$1.title,
-    textStyle: _objectSpread(_objectSpread({}, resultsHeadingStyle), titleTextStyle)
-  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "description",
-    placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "hoDz0O",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    }),
-    emptyClassName: styles$1.emptyDescription,
-    isEmpty: !hasDescription
-  }, hasTitle ? /*#__PURE__*/React.createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled,
-    delay: transitionStagger
-  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
-    className: styles$1.description,
-    textStyle: _objectSpread(_objectSpread({}, resultsTextStyle), descriptionTextStyle)
-  }))) : null)]);
-};
-Results.propTypes = propTypes$2;
-Results.defaultProps = defaultProps$2;
-var Results$1 = Results;
-
-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","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
-
-var propTypes$1 = {
-  title: core.PropTypes.textElement,
-  description: core.PropTypes.textElement,
-  button: core.PropTypes.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;
-  // const { isPreview, isEdit } = useScreenRenderContext();
-  var isSplitted = layout === 'split';
-  var verticalAlign = isSplitted ? null : layout;
-  var hasTitle = utils.isTextFilled(title);
-  var hasDescription = utils.isTextFilled(description);
-  var hasButton = utils.isTextFilled(button);
-  return /*#__PURE__*/React.createElement(Layout, {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    fullscreen: true,
-    verticalAlign: verticalAlign,
-    style: style
-  }, [/*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "BSTWf8",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: styles.emptyTitle,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
-    className: styles.title
-  })) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "description",
-    placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "hoDz0O",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    }),
-    emptyClassName: styles.emptyDescription,
-    isEmpty: !hasDescription
-  }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
-    className: styles.description
-  })) : null), isSplitted ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "button",
-    placeholder: "button"
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: buttonDisabled,
-    focusable: focusable,
-    buttonStyle: button !== null ? button.buttonStyle : null,
-    className: styles.button,
-    onClick: onClickButton
-  }, hasButton ? /*#__PURE__*/React.createElement(Text, Object.assign({}, button, {
-    className: styles.label
-  })) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "D7LIZQ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Start"
-    }]
-  })))]);
-};
-Title.propTypes = propTypes$1;
-Title.defaultProps = defaultProps$1;
-var Title$1 = Title;
-
-var propTypes = {
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  introLayout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  title: core.PropTypes.textElement,
-  description: core.PropTypes.textElement,
-  questions: PropTypes.arrayOf(PropTypes.shape({
-    text: core.PropTypes.textElement,
-    answers: core.PropTypes.quizAnswers
-  })),
-  results: PropTypes.arrayOf(PropTypes.shape({
-    title: core.PropTypes.textElement,
-    description: core.PropTypes.textElement
-  })),
-  buttonsStyle: core.PropTypes.boxStyle,
-  buttonsTextStyle: core.PropTypes.textStyle,
-  questionsHeadingStyle: core.PropTypes.textStyle,
-  resultsHeadingStyle: core.PropTypes.textStyle,
-  resultsTextStyle: core.PropTypes.textStyle,
-  goodAnswerColor: core.PropTypes.color,
-  badAnswerColor: core.PropTypes.color,
-  spacing: PropTypes.number,
-  background: core.PropTypes.backgroundElement,
-  introButton: core.PropTypes.textElement,
-  introBackground: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  transitions: core.PropTypes.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,
-  buttonsTextStyle: null,
-  questionsHeadingStyle: null,
-  resultsHeadingStyle: null,
-  resultsTextStyle: null,
-  goodAnswerColor: null,
-  badAnswerColor: null,
-  spacing: 20,
-  background: null,
-  introButton: null,
-  introBackground: 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,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    questionsHeadingStyle = _ref.questionsHeadingStyle,
-    resultsHeadingStyle = _ref.resultsHeadingStyle,
-    resultsTextStyle = _ref.resultsTextStyle,
-    goodAnswerColor = _ref.goodAnswerColor,
-    badAnswerColor = _ref.badAnswerColor,
-    spacing = _ref.spacing,
-    background = _ref.background,
-    introBackground = _ref.introBackground,
-    introButton = _ref.introButton,
-    header = _ref.header,
-    footer = _ref.footer,
-    current = _ref.current,
-    active = _ref.active,
-    transitions = _ref.transitions,
-    transitionStagger = _ref.transitionStagger,
-    type = _ref.type,
-    className = _ref.className;
-  var screenId = id || 'screen-id';
-  var trackScreenEvent = hooks.useTrackScreenEvent(type);
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var screenState = contexts.useScreenState();
-  var _ref2 = screenState !== null ? screenState.split('.') : [],
-    _ref3 = _slicedToArray(_ref2, 2),
-    _ref3$ = _ref3[0],
-    stateId = _ref3$ === void 0 ? null : _ref3$,
-    _ref3$2 = _ref3[1],
-    stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
-  var transitionPlaying = current;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var backgroundPlaying = current && (isView || isEdit);
-  var backgroundShouldLoad = current || active;
-
-  // Call to Action
-
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    headerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var _useDimensionObserver3 = hooks.useDimensionObserver(),
-    footerRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.height,
-    callToActionHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var showInstantAnswer = isStatic || isCapture;
-  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
-  var _useState = React.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    userAnswers = _useState2[0],
-    setUserAnswers = _useState2[1];
-  var initialQuestionIndex = 'intro';
-  if (stateId !== null) {
-    initialQuestionIndex = stateId === 'questions' ? parseInt(stateIndex, 10) : stateId;
-  } else if (isPlaceholder || !hasIntro) {
-    initialQuestionIndex = 0;
-  }
-  var _useState3 = React.useState(initialQuestionIndex),
-    _useState4 = _slicedToArray(_useState3, 2),
-    questionIndex = _useState4[0],
-    setQuestionIndex = _useState4[1];
-  React.useEffect(function () {
-    if (isPreview && hasIntro && questionIndex !== 'intro') {
-      setQuestionIndex('intro');
-    }
-  }, [isPreview, hasIntro, questionIndex, setQuestionIndex]);
-  var onAnswerClick = React.useCallback(function (answer, answerIndex) {
-    setUserAnswers(_objectSpread(_objectSpread({}, userAnswers), {}, _defineProperty({}, questionIndex, answerIndex)));
-    trackScreenEvent('click_answer', "Question #".concat(questionIndex + 1, " ").concat(answerIndex + 1, ": ").concat(answer.label.body), {
-      question: questions[questionIndex],
-      questionIndex: questionIndex,
-      answer: answer,
-      answerIndex: answerIndex
-    });
-  }, [userAnswers, setUserAnswers, trackScreenEvent, questions, questionIndex]);
-  var onAnswerTransitionEnd = React.useCallback(function () {
-    if (isEdit) {
-      return;
-    }
-    var nextIndex = questionIndex + 1;
-    var questionsCount = questions.length;
-    if (nextIndex < questionsCount) {
-      setQuestionIndex(nextIndex);
-    } else if (nextIndex === questionsCount) {
-      setQuestionIndex('results');
-    }
-  }, [questions, questionIndex, setQuestionIndex, isEdit]);
-  var onClickIntroButton = React.useCallback(function () {
-    setQuestionIndex(0);
-  }, [setQuestionIndex]);
-  React.useEffect(function () {
-    if (!current && isEdit && userAnswers !== null) {
-      setUserAnswers(null);
-    }
-  }, [isEdit, current, userAnswers, setUserAnswers]);
-  var hasQuestions = questions !== null && questions.length > 0;
-  var currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
-  var _currentQuestion$text = currentQuestion.text,
-    text = _currentQuestion$text === void 0 ? null : _currentQuestion$text,
-    _currentQuestion$answ = currentQuestion.answers,
-    answers = _currentQuestion$answ === void 0 ? [] : _currentQuestion$answ,
-    _currentQuestion$back = currentQuestion.background,
-    questionBackground = _currentQuestion$back === void 0 ? null : _currentQuestion$back,
-    _currentQuestion$layo = currentQuestion.layout,
-    questionLayout = _currentQuestion$layo === void 0 ? null : _currentQuestion$layo;
-  var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
-  var currentPoints = React.useMemo(function () {
-    return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
-      var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
-        _ref4$answers = _ref4.answers,
-        questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
-      var answerIndex = userAnswers[answerQuestionIndex];
-      var _ref5 = questionAnswers[answerIndex] || {},
-        _ref5$points = _ref5.points,
-        points = _ref5$points === void 0 ? 0 : _ref5$points;
-      return points + totalPoints;
-    }, 0) : 0;
-  }, [userAnswers, questions]);
-  var isIntro = hasIntro && questionIndex === 'intro';
-  var isResults = questionIndex === 'results';
-  var isQuestion = !isIntro && !isResults;
-  var currentResult = React.useMemo(function () {
-    if (!isResults) {
-      return null;
-    }
-    if (stateId === 'results') {
-      return (results || [])[parseInt(stateIndex, 10)] || null;
-    }
-    return (results || []).sort(function (_ref6, _ref7) {
-      var _ref6$points = _ref6.points,
-        pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
-      var _ref7$points = _ref7.points,
-        pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
-      if (pointsA === pointsB) {
-        return 0;
-      }
-      return pointsA > pointsB ? 1 : -1;
-    }).reduce(function (lastResult, result) {
-      var _ref8 = lastResult || {},
-        _ref8$points = _ref8.points,
-        lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
-      var _ref9 = result || {},
-        _ref9$points = _ref9.points,
-        points = _ref9$points === void 0 ? 0 : _ref9$points;
-      return currentPoints >= (lastPoints || 0) && currentPoints >= points ? result : lastResult;
-    }, null);
-  }, [isResults, results, currentPoints, stateId, stateIndex]);
-  var _ref10 = currentResult || {},
-    _ref10$background = _ref10.background,
-    resultBackground = _ref10$background === void 0 ? null : _ref10$background,
-    _ref10$layout = _ref10.layout,
-    resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
-  var _useQuizCreate = data.useQuizCreate({
-      screenId: screenId
-    }),
-    submitQuiz = _useQuizCreate.create;
-  React.useEffect(function () {
-    if (!isResults || !isView) {
-      return;
-    }
-    submitQuiz({
-      choice: userAnswers,
-      value: currentPoints
-    });
-  }, [isView, isResults, userAnswers, submitQuiz]);
-
-  // Switch state
-  React.useEffect(function () {
-    if (!isEdit && !isPreview) {
-      return;
-    }
-    if (stateId === 'questions') {
-      setQuestionIndex(parseInt(stateIndex, 10));
-    } else if (stateId === 'results') {
-      setQuestionIndex('results');
-    } else if (stateId === 'intro') {
-      setQuestionIndex('intro');
-    }
-  }, [stateId, stateIndex, isEdit, setQuestionIndex]);
-  var finalBackground = background;
-  var backgroundKey = 'background';
-  if (isIntro && introBackground !== null) {
-    finalBackground = introBackground;
-    backgroundKey = 'results';
-  } else if (isResults && resultBackground !== null) {
-    finalBackground = resultBackground;
-    backgroundKey = 'results';
-  } else if (isQuestion && questionBackground !== null) {
-    finalBackground = questionBackground;
-    backgroundKey = "question_".concat(questionIndex);
-  }
-
-  // Transition direction
-  var lastQuestionIndexRef = React.useRef(questionIndex);
-  var direction = React.useMemo(function () {
-    if (questionIndex === lastQuestionIndexRef.current) {
-      return null;
-    }
-    var lastQuestionIndex = lastQuestionIndexRef.current;
-    lastQuestionIndexRef.current = questionIndex;
-    if (questionIndex === 'intro' || lastQuestionIndex === 'results' || lastQuestionIndex > questionIndex) {
-      return 'left';
-    }
-    lastQuestionIndexRef.current = questionIndex;
-    return 'right';
-  }, [questionIndex]);
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    scrolledBottom = _useState6[0],
-    setScrolledBottom = _useState6[1];
-  var onScrolledBottom = React.useCallback(function (_ref11) {
-    var initial = _ref11.initial;
-    if (initial) {
-      trackScreenEvent('scroll', 'Screen');
-    }
-    setScrolledBottom(true);
-  }, [trackScreenEvent]);
-  var onScrolledNotBottom = React.useCallback(function () {
-    setScrolledBottom(false);
-  }, [setScrolledBottom]);
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    hasScroll = _useState8[0],
-    setHasScroll = _useState8[1];
-  var onScrollHeightChange = React.useCallback(function (_ref12) {
-    var _ref12$canScroll = _ref12.canScroll,
-      canScroll = _ref12$canScroll === void 0 ? false : _ref12$canScroll;
-    setHasScroll(canScroll);
-  }, [setHasScroll]);
-  var onQuizReset = React.useCallback(function () {
-    setUserAnswers(null);
-  }, [setUserAnswers]);
-  var verticalAlign = layout;
-  if (isIntro && introLayout !== null) {
-    verticalAlign = introLayout;
-  } else if (isQuestion && questionLayout !== null) {
-    verticalAlign = questionLayout;
-  } else if (isResults && resultLayout !== null) {
-    verticalAlign = questionLayout;
-  }
-  var showPoints = isEdit;
-  var showReset = isEdit;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2[direction], direction !== null), className, className !== null)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles$2.content
-  }, showPoints && currentPoints !== null && currentPoints > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: styles$2.points
-  }, "".concat(currentPoints, " "), /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "Xr1v8l",
-    defaultMessage: [{
-      "type": 0,
-      "value": "points gained"
-    }]
-  })) : null, showReset ? /*#__PURE__*/React.createElement(components.Button, {
-    className: styles$2.reset,
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faRedo.faRedo,
-      size: "md"
-    }),
-    onClick: onQuizReset
-  }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
-    ref: headerRef,
-    style: {
-      paddingTop: spacing / 2,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      paddingBottom: spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Scroll, {
-    verticalAlign: verticalAlign,
-    disabled: scrollingDisabled,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    onScrollHeightChange: onScrollHeightChange,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
-    key: "intro",
-    classNames: styles$2,
-    timeout: 1000
-  }, /*#__PURE__*/React.createElement(Title$1, {
-    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(reactTransitionGroup.CSSTransition, {
-    key: "question-".concat(questionIndex),
-    classNames: styles$2,
-    timeout: 1000
-  }, /*#__PURE__*/React.createElement(Question$1, {
-    index: questionIndex,
-    totalCount: (questions || []).length,
-    question: text,
-    answers: answers,
-    answeredIndex: currentAnsweredIndex,
-    buttonsStyle: buttonsStyle,
-    buttonsTextStyle: buttonsTextStyle,
-    questionsHeadingStyle: questionsHeadingStyle,
-    goodAnswerColor: goodAnswerColor,
-    badAnswerColor: badAnswerColor,
-    focusable: current && isView,
-    showInstantAnswer: showInstantAnswer,
-    layout: questionLayout || layout,
-    withoutGoodAnswer: true,
-    withoutTrueFalse: true,
-    transitions: transitions,
-    transitionPlaying: transitionPlaying,
-    transitionStagger: transitionStagger,
-    transitionDisabled: transitionDisabled,
-    onAnswerClick: onAnswerClick,
-    onAnswerTransitionEnd: onAnswerTransitionEnd,
-    className: styles$2.question,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
-    } : null
-  })) : null, isResults ? /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
-    key: "results",
-    classNames: styles$2,
-    timeout: 2000
-  }, /*#__PURE__*/React.createElement(Results$1, 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", {
-    ref: footerRef,
-    className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
-    style: {
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingTop: spacing / 2,
-      paddingBottom: spacing / 2,
-      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React.createElement(reactTransitionGroup.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;
-var QuizMultipleScreen$1 = QuizMultipleScreen;
-
-var definition = [{
-  id: 'quiz',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "ZiWlL6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Questions"
-      }]
-    }),
-    order: 7
-  },
-  title: reactIntl.defineMessage({
-    id: "zW7IVm",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Quiz"
-    }]
-  }),
-  component: QuizScreen$1,
-  layouts: ['top', 'middle', 'bottom', 'split'],
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'question',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading2'
-    },
-    label: reactIntl.defineMessage({
-      id: "hVE7TA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Question"
-      }]
-    })
-  }, {
-    name: 'answers',
-    type: 'quiz-answers',
-    theme: {
-      label: {
-        textStyle: 'button'
-      }
-    },
-    label: reactIntl.defineMessage({
-      id: "KHWeV7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Answers"
-      }]
-    })
-  }, {
-    name: 'withoutTrueFalse',
-    type: 'toggle',
-    label: reactIntl.defineMessage({
-      id: "LFziCV",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Without right/wrong icon"
-      }]
-    })
-  }, {
-    name: 'result',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: reactIntl.defineMessage({
-      id: "iQ5Uf7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Default feedback"
-      }]
-    })
-  }, {
-    name: 'resultImage',
-    type: 'visual',
-    label: reactIntl.defineMessage({
-      id: "yA4B6h",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Result feedback image"
-      }]
-    })
-  }, {
-    type: 'fields',
-    isList: true,
-    label: reactIntl.defineMessage({
-      id: "R9DB4a",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Styles"
-      }]
-    }),
-    fields: [{
-      name: 'buttonsTextStyle',
-      type: 'text-style-form',
-      label: reactIntl.defineMessage({
-        id: "gwPu/I",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Buttons text"
-        }]
-      })
-    }, {
-      name: 'buttonsStyle',
-      type: 'box-style-form',
-      label: reactIntl.defineMessage({
-        id: "l5uLMd",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Buttons"
-        }]
-      })
-    }, {
-      name: 'goodAnswerColor',
-      type: 'color',
-      label: reactIntl.defineMessage({
-        id: "I2bIHm",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Good answer color"
-        }]
-      })
-    }, {
-      name: 'badAnswerColor',
-      type: 'color',
-      label: reactIntl.defineMessage({
-        id: "ru3tjH",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Bad answer color"
-        }]
-      })
-    }]
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}, {
-  id: 'quiz-multiple',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "ZiWlL6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Questions"
-      }]
-    }),
-    order: 7
-  },
-  title: reactIntl.defineMessage({
-    id: "ACkeH6",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Quiz with multiple questions"
-    }]
-  }),
-  component: QuizMultipleScreen$1,
-  layouts: ['top', 'middle', 'bottom', 'split'],
-  states: [{
-    id: 'intro',
-    label: reactIntl.defineMessage({
-      id: "BgrRxZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Intro"
-      }]
-    }),
-    fields: [{
-      name: 'introLayout',
-      type: 'screen-layout',
-      defaultValue: 'middle',
-      screenState: 'intro',
-      label: reactIntl.defineMessage({
-        id: "4iBXj2",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Layout"
-        }]
-      })
-    }, {
-      name: 'title',
-      type: 'heading-element',
-      theme: {
-        textStyle: 'heading2'
-      },
-      label: reactIntl.defineMessage({
-        id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      })
-    }, {
-      name: 'description',
-      type: 'text-element',
-      theme: {
-        textStyle: 'text'
-      },
-      label: reactIntl.defineMessage({
-        id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      })
-    }, {
-      name: 'introButton',
-      type: 'button-element',
-      theme: {
-        textStyle: 'button'
-      },
-      label: reactIntl.defineMessage({
-        id: "i6bmbD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
-      })
-    }, {
-      name: 'introBackground',
-      type: 'background',
-      label: reactIntl.defineMessage({
-        id: "cDj1mZ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Background"
-        }]
-      })
-    }]
-  }, {
-    id: 'questions',
-    label: reactIntl.defineMessage({
-      id: "VMd1oG",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Questions"
-      }]
-    }),
-    repeatable: true,
-    fieldName: 'questions',
-    fields: [{
-      name: 'text',
-      type: 'heading-element',
-      theme: {
-        textStyle: 'heading2'
-      },
-      label: reactIntl.defineMessage({
-        id: "hVE7TA",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Question"
-        }]
-      })
-    }, {
-      name: 'answers',
-      type: 'quiz-points-answers',
-      theme: {
-        label: {
-          textStyle: 'button'
-        }
-      },
-      label: reactIntl.defineMessage({
-        id: "KHWeV7",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Answers"
-        }]
-      })
-    }, {
-      name: 'background',
-      type: 'background',
-      label: reactIntl.defineMessage({
-        id: "cDj1mZ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Background"
-        }]
-      })
-    }]
-  }, {
-    id: 'results',
-    label: reactIntl.defineMessage({
-      id: "uiTxd7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Results"
-      }]
-    }),
-    repeatable: true,
-    fields: [{
-      name: 'layout',
-      type: 'screen-layout',
-      defaultValue: 'top',
-      screenState: 'results',
-      label: reactIntl.defineMessage({
-        id: "4iBXj2",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Layout"
-        }]
-      })
-    }, {
-      name: 'title',
-      type: 'heading-element',
-      theme: {
-        textStyle: 'heading2'
-      },
-      label: reactIntl.defineMessage({
-        id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      })
-    }, {
-      name: 'description',
-      type: 'text-element',
-      theme: {
-        textStyle: 'text'
-      },
-      label: reactIntl.defineMessage({
-        id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      })
-    }, {
-      name: 'points',
-      type: 'number',
-      isHorizontal: true,
-      label: reactIntl.defineMessage({
-        id: "jWAJW4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Points"
-        }]
-      }),
-      help: reactIntl.defineMessage({
-        id: "JoyIgA",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Minimum points for this result"
-        }]
-      })
-    }, {
-      name: 'background',
-      type: 'background',
-      label: reactIntl.defineMessage({
-        id: "cDj1mZ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Background"
-        }]
-      })
-    }]
-  }],
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: reactIntl.defineMessage({
-      id: "OPxJx/",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    type: 'fields',
-    label: reactIntl.defineMessage({
-      id: "LOknw0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Styles"
-      }]
-    }),
-    isList: true,
-    fields: [{
-      name: 'buttonsStyle',
-      type: 'box-style-form',
-      label: reactIntl.defineMessage({
-        id: "l5uLMd",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Buttons"
-        }]
-      })
-    }, {
-      name: 'buttonsTextStyle',
-      type: 'text-style-form',
-      label: reactIntl.defineMessage({
-        id: "gwPu/I",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Buttons text"
-        }]
-      })
-    }, {
-      name: 'questionsHeadingStyle',
-      type: 'text-style-form',
-      label: reactIntl.defineMessage({
-        id: "+FHxPO",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Questions title"
-        }]
-      })
-    }, {
-      name: 'resultsHeadingStyle',
-      type: 'text-style-form',
-      label: reactIntl.defineMessage({
-        id: "BnRW4y",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Results title"
-        }]
-      })
-    }, {
-      name: 'resultsTextStyle',
-      type: 'text-style-form',
-      label: reactIntl.defineMessage({
-        id: "uDHTZn",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Results description"
-        }]
-      })
-    }]
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "cDj1mZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}];
-
-exports.QuizMultipleScreen = QuizMultipleScreen$1;
-exports.QuizScreen = QuizScreen$1;
-exports.default = definition;