@micromag/screen-survey 0.3.541 → 0.3.547

package/es/index.js

@@ -461,7 +461,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
 };
 SurveyScreen.propTypes = propTypes;
 SurveyScreen.defaultProps = defaultProps;
-var SurveyScreen$1 = SurveyScreen;
 
 var definition = {
   id: 'survey',
@@ -483,7 +482,7 @@ var definition = {
       "value": "Survey"
     }]
   }),
-  component: SurveyScreen$1,
+  component: SurveyScreen,
   layouts: ['top', 'middle', 'bottom', 'split'],
   fields: [{
     name: 'layout',
@@ -643,4 +642,4 @@ var definition = {
   }]
 };
 
-export { SurveyScreen$1 as SurveyScreen, definition as default };
+export { SurveyScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-survey",
-    "version": "0.3.541",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,12 +30,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -61,18 +60,18 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/data": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-button": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-heading": "^0.3.541",
-        "@micromag/element-layout": "^0.3.541",
-        "@micromag/element-scroll": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/data": "^0.3.547",
+        "@micromag/element-background": "^0.3.547",
+        "@micromag/element-button": "^0.3.547",
+        "@micromag/element-container": "^0.3.547",
+        "@micromag/element-footer": "^0.3.547",
+        "@micromag/element-header": "^0.3.547",
+        "@micromag/element-heading": "^0.3.547",
+        "@micromag/element-layout": "^0.3.547",
+        "@micromag/element-scroll": "^0.3.547",
+        "@micromag/element-text": "^0.3.547",
+        "@micromag/transforms": "^0.3.547",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -83,5 +82,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,651 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
-var isNumber = require('lodash/isNumber');
-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 Button = require('@micromag/element-button');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Heading = require('@micromag/element-heading');
-var Layout = require('@micromag/element-layout');
-var Scroll = require('@micromag/element-scroll');
-var Text = require('@micromag/element-text');
-
-var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
-
-var propTypes = {
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  question: core.PropTypes.textElement,
-  answers: core.PropTypes.answers,
-  buttonsStyle: core.PropTypes.boxStyle,
-  buttonsTextStyle: core.PropTypes.textStyle,
-  resultsStyle: PropTypes.shape({
-    barColor: core.PropTypes.color,
-    textColor: core.PropTypes.color,
-    percentageTextStyle: core.PropTypes.textStyle
-  }),
-  spacing: PropTypes.number,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  background: core.PropTypes.backgroundElement,
-  withoutPercentage: PropTypes.bool,
-  withoutBar: PropTypes.bool,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  transitions: core.PropTypes.transitions,
-  // transitionStagger: PropTypes.number,
-  resultTransitionDuration: PropTypes.number,
-  type: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps = {
-  id: null,
-  layout: 'middle',
-  question: null,
-  answers: null,
-  buttonsStyle: null,
-  buttonsTextStyle: null,
-  resultsStyle: null,
-  spacing: 20,
-  header: null,
-  footer: null,
-  background: null,
-  withoutPercentage: false,
-  withoutBar: false,
-  current: true,
-  active: true,
-  transitions: null,
-  // transitionStagger: 100,
-  resultTransitionDuration: 500,
-  type: null,
-  className: null
-};
-var SurveyScreen = function SurveyScreen(_ref) {
-  var id = _ref.id,
-    layout = _ref.layout,
-    question = _ref.question,
-    answers = _ref.answers,
-    buttonsStyle = _ref.buttonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    resultsStyle = _ref.resultsStyle,
-    spacing = _ref.spacing,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    withoutPercentage = _ref.withoutPercentage,
-    withoutBar = _ref.withoutBar,
-    current = _ref.current,
-    active = _ref.active,
-    transitions = _ref.transitions,
-    resultTransitionDuration = _ref.resultTransitionDuration,
-    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 _useQuizCreate = data.useQuizCreate({
-      screenId: screenId
-    }),
-    submitQuiz = _useQuizCreate.create;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  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 _useQuiz = data.useQuiz({
-      screenId: screenId,
-      opts: {
-        autoload: !isPlaceholder
-      }
-    }),
-    _useQuiz$quiz = _useQuiz.quiz,
-    allQuizAnswers = _useQuiz$quiz === void 0 ? [] : _useQuiz$quiz;
-  var quizAnswers = allQuizAnswers.filter(function (item) {
-    var _ref2 = item || {},
-      _ref2$choice = _ref2.choice,
-      choice = _ref2$choice === void 0 ? null : _ref2$choice;
-    var answersBody = (answers || []).map(function (answer) {
-      var _ref3 = answer || {},
-        _ref3$label = _ref3.label,
-        label = _ref3$label === void 0 ? null : _ref3$label;
-      var _ref4 = label || {},
-        _ref4$body = _ref4.body,
-        body = _ref4$body === void 0 ? null : _ref4$body;
-      return body;
-    }).filter(function (body) {
-      return body !== null;
-    });
-    var hasResult = answersBody.find(function (body) {
-      return body === choice;
-    });
-    if (hasResult) {
-      return true;
-    }
-    return false;
-  });
-  var hasQuestion = utils.isTextFilled(question);
-  var showInstantAnswer = isStatic || isCapture;
-  var _useState = React.useState(showInstantAnswer ? -1 : null),
-    _useState2 = _slicedToArray(_useState, 2),
-    userAnswerIndex = _useState2[0],
-    setUserAnswerIndex = _useState2[1];
-  var answered = userAnswerIndex !== null;
-  var quizAnswersComputed = React.useMemo(function () {
-    var total = answers !== null ? (quizAnswers || []).reduce(function (points, _ref5) {
-      var _ref5$count = _ref5.count,
-        count = _ref5$count === void 0 ? 0 : _ref5$count;
-      return points + parseInt(count, 10);
-    }, userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
-    var computed = answers !== null ? (answers || []).reduce(function (answersTotal, ans, i) {
-      var _ref6 = ans || {},
-        _ref6$label = _ref6.label,
-        label = _ref6$label === void 0 ? {} : _ref6$label;
-      var _ref7 = label || {},
-        _ref7$body = _ref7.body,
-        body = _ref7$body === void 0 ? null : _ref7$body;
-      var _ref8 = quizAnswers.find(function (qa) {
-          return qa.choice === body;
-        }) || {},
-        _ref8$count = _ref8.count,
-        count = _ref8$count === void 0 ? 0 : _ref8$count;
-      var countWithUser = i === userAnswerIndex ? count + 1 : count;
-      if (body !== null) {
-        return _objectSpread(_objectSpread({}, answersTotal), {}, _defineProperty({}, body, {
-          percent: total > 0 ? countWithUser / total * 100 : 0,
-          count: countWithUser
-        }));
-      }
-      return answersTotal;
-    }, {}) : {};
-    var quizAnswersPct = total > 0 ? Object.keys(computed).map(function (key) {
-      return computed[key].percent || 0;
-    }) : [];
-    var evenlySplit = utils.getLargestRemainderRound(quizAnswersPct, 100);
-    return Object.keys(computed).reduce(function (acc, key, i) {
-      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, computed[key]), {}, {
-        percent: evenlySplit[i]
-      })));
-    }, {});
-  }, [answers, quizAnswers, userAnswerIndex]);
-  var isSplitted = layout === 'split';
-  // const isTopLayout = layout === 'top';
-  var isMiddleLayout = layout === 'middle';
-  var verticalAlign = isSplitted ? null : layout;
-  var transitionPlaying = current;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  var onAnswerClick = React.useCallback(function (answerIndex) {
-    if (userAnswerIndex === null) {
-      setUserAnswerIndex(answerIndex);
-      var answer = answers[answerIndex];
-      submitQuiz({
-        choice: answer.label.body || answerIndex,
-        value: 1
-      });
-      trackScreenEvent('click_answer', "Answer ".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
-        answer: answer,
-        answerIndex: answerIndex
-      });
-    }
-  }, [userAnswerIndex, setUserAnswerIndex, trackScreenEvent, submitQuiz]);
-  React.useEffect(function () {
-    if (!current && isEdit && userAnswerIndex !== null) {
-      setUserAnswerIndex(null);
-    }
-  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
-  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 scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scrolledBottom = _useState4[0],
-    setScrolledBottom = _useState4[1];
-  var onScrolledBottom = React.useCallback(function (_ref9) {
-    var initial = _ref9.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 (_ref10) {
-    var _ref10$canScroll = _ref10.canScroll,
-      canScroll = _ref10$canScroll === void 0 ? false : _ref10$canScroll;
-    setHasScroll(canScroll);
-  }, [setHasScroll]);
-
-  // Question
-  var items = [/*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "question",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "e1I+KU",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Question"
-      }]
-    }),
-    emptyClassName: styles.emptyQuestion,
-    isEmpty: !hasQuestion
-  }, hasQuestion ? /*#__PURE__*/React.createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
-    className: styles.question
-  }))) : null)];
-  if (isSplitted || !isPlaceholder && hasFooter && isMiddleLayout) {
-    items.push( /*#__PURE__*/React.createElement(Layout.Spacer, {
-      key: "spacer"
-    }));
-  }
-  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
-  var _ref11 = resultsStyle || {},
-    _ref11$barColor = _ref11.barColor,
-    resultsBarColor = _ref11$barColor === void 0 ? null : _ref11$barColor,
-    _ref11$textColor = _ref11.textColor,
-    resultsTextColor = _ref11$textColor === void 0 ? null : _ref11$textColor,
-    _ref11$percentageText = _ref11.percentageTextStyle,
-    resultsPercentageTextStyle = _ref11$percentageText === void 0 ? null : _ref11$percentageText;
-  items.push( /*#__PURE__*/React.createElement("div", {
-    key: "answers",
-    className: styles.answers
-  }, answers !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    className: styles.items
-  }, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
-    var hasAnswer = answer !== null;
-    var _ref12 = answer || {},
-      _ref12$label = _ref12.label,
-      label = _ref12$label === void 0 ? null : _ref12$label,
-      _ref12$buttonStyle = _ref12.buttonStyle,
-      answerButtonStyle = _ref12$buttonStyle === void 0 ? null : _ref12$buttonStyle,
-      _ref12$textStyle = _ref12.textStyle,
-      answerButtonTextStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle,
-      _ref12$resultStyle = _ref12.resultStyle,
-      answerResultStyle = _ref12$resultStyle === void 0 ? null : _ref12$resultStyle;
-    var _ref13 = answerResultStyle || {},
-      _ref13$barColor = _ref13.barColor,
-      answerResultBarColor = _ref13$barColor === void 0 ? null : _ref13$barColor,
-      answerResultTextColor = _ref13.textColor,
-      _ref13$percentageText = _ref13.percentageTextStyle,
-      answerResultPercentageTextStyle = _ref13$percentageText === void 0 ? null : _ref13$percentageText;
-    var _ref14 = label || {},
-      _ref14$body = _ref14.body,
-      body = _ref14$body === void 0 ? null : _ref14$body;
-    var _ref15 = body !== null ? quizAnswersComputed[body] || {} : {},
-      _ref15$percent = _ref15.percent,
-      percent = _ref15$percent === void 0 ? 0 : _ref15$percent;
-    var _ref16 = label || {},
-      _ref16$textStyle = _ref16.textStyle,
-      textStyle = _ref16$textStyle === void 0 ? null : _ref16$textStyle;
-    var _ref17 = textStyle || {},
-      _ref17$color = _ref17.color,
-      labelColor = _ref17$color === void 0 ? null : _ref17$color;
-    var hasAnswerLabel = utils.isTextFilled(label);
-    var userAnswer = userAnswerIndex === answerIndex;
-    var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
-      textAlign: 'left'
-    } : null);
-    var _ref18 = buttonStyles || {},
-      _ref18$borderRadius = _ref18.borderRadius,
-      answerResultBorderRadius = _ref18$borderRadius === void 0 ? null : _ref18$borderRadius;
-    var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
-    return /*#__PURE__*/React.createElement("div", {
-      key: "answer-".concat(answerIndex),
-      className: classNames([styles.item, _defineProperty({}, styles.userAnswer, userAnswer)])
-    }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-      placeholder: "surveyAnswer",
-      placeholderProps: {
-        className: styles.placeholderAnswer
-      },
-      emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-        id: "+Ok+7S",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Answer"
-        }]
-      }),
-      emptyClassName: styles.emptyAnswer,
-      isEmpty: !hasAnswerLabel
-    }, hasAnswer ? /*#__PURE__*/React.createElement("div", {
-      className: styles.itemContent
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.itemInner,
-      style: {
-        borderRadius: answerResultBorderRadius,
-        transitionDuration: finalTransitionDuration
-      }
-    }, /*#__PURE__*/React.createElement(Button, {
-      className: styles.button,
-      onPointerUp: function onPointerUp(e) {
-        if (e.pointerType !== 'mouse' || e.button === 0) {
-          onAnswerClick(answerIndex);
-        }
-      },
-      disabled: isPreview || userAnswerIndex !== null,
-      focusable: current && isView,
-      buttonStyle: buttonStyles,
-      textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.itemLabel
-    }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-      textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle),
-      inline: true,
-      className: styles.itemText
-    })), !withoutPercentage ? /*#__PURE__*/React.createElement("div", {
-      className: styles.resultLabel,
-      style: _objectSpread(_objectSpread({}, utils.getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color')), answered ? {
-        opacity: 1
-      } : {
-        opacity: 0
-      })
-    }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-      textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
-      inline: true,
-      className: styles.resultText,
-      body: "".concat(percent, "%")
-    }))) : null, !withoutBar ? /*#__PURE__*/React.createElement("div", {
-      className: styles.resultBar,
-      style: _objectSpread(_objectSpread({
-        borderRadius: finalBarBorderRadius,
-        transitionDuration: finalTransitionDuration,
-        width: percent !== null ? "".concat(percent, "%") : '0%'
-      }, utils.getStyleFromColor(answerResultBarColor || resultsBarColor || labelColor, 'backgroundColor')), answered ? {
-        opacity: 0.5
-      } : {
-        opacity: 0
-      })
-    }) : null)))) : null));
-  })) : null));
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.answered, answered), styles.withPercentage, !withoutPercentage), styles.isPlaceholder, isPlaceholder)])
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    verticalAlign: verticalAlign,
-    disabled: scrollingDisabled,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    onScrollHeightChange: onScrollHeightChange,
-    withShadow: true
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.header, _defineProperty({}, styles.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(Layout, {
-    className: styles.layout,
-    verticalAlign: verticalAlign,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
-    } : null
-  }, items)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    ref: footerRef,
-    className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
-    style: {
-      transform: !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.background
-  }) : null);
-};
-SurveyScreen.propTypes = propTypes;
-SurveyScreen.defaultProps = defaultProps;
-var SurveyScreen$1 = SurveyScreen;
-
-var definition = {
-  id: 'survey',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "ZiWlL6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Questions"
-      }]
-    }),
-    order: 7
-  },
-  title: reactIntl.defineMessage({
-    id: "650XRF",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Survey"
-    }]
-  }),
-  component: SurveyScreen$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: 'answers',
-    theme: {
-      label: {
-        textStyle: 'button'
-      }
-    },
-    label: reactIntl.defineMessage({
-      id: "KHWeV7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Answers"
-      }]
-    })
-  }, {
-    type: 'fields',
-    isList: true,
-    label: reactIntl.defineMessage({
-      id: "R9DB4a",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Styles"
-      }]
-    }),
-    fields: [{
-      name: 'withoutPercentage',
-      type: 'toggle',
-      defaultValue: false,
-      label: reactIntl.defineMessage({
-        id: "crLqJd",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Without percentage"
-        }]
-      })
-    }, {
-      name: 'withoutBar',
-      type: 'toggle',
-      defaultValue: false,
-      label: reactIntl.defineMessage({
-        id: "D7kxD3",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Without bar"
-        }]
-      })
-    }, {
-      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: 'resultsStyle',
-      type: 'graph-bar-style-form',
-      label: reactIntl.defineMessage({
-        id: "e4UTx9",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Results"
-        }]
-      }),
-      noValueLabel: reactIntl.defineMessage({
-        id: "65rc70",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Edit style..."
-        }]
-      })
-    }]
-  }, {
-    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'
-      }
-    }
-  }]
-};
-
-exports.SurveyScreen = SurveyScreen$1;
-exports.default = definition;