@micromag/screen-survey 0.4.71 → 0.4.76

package/es/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ForwardedRef } from 'react';
-import { TextElement, Answer, BoxStyle, TextStyle, Color, Header, Footer, BackgroundElement, Transitions } from '@micromag/core';
+import { TextElement, Answer, BoxStyle, TextStyle, Color, Header, Footer, BackgroundElement, Transitions, MediaElement } from '@micromag/core';
 
 interface SurveyScreenProps {
     id?: string | null;
@@ -28,7 +28,7 @@ interface SurveyScreenProps {
     transitions?: Transitions | null;
     resultTransitionDuration?: number;
     type?: string | null;
-    mediaRef?: ForwardedRef<HTMLMediaElement> | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
 declare function SurveyScreen({ id, layout, question, answers, result, buttonsStyle, buttonsTextStyle, resultsStyle, spacing, header, footer, background, customAnswer, showCount, withoutPercentage, withoutBar, current, preload, transitions, resultTransitionDuration, type, mediaRef: customMediaRef, className, }: SurveyScreenProps): react_jsx_runtime.JSX.Element;

package/es/index.js

@@ -1,8 +1,4 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
@@ -28,236 +24,200 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","content":"micromag-screen-survey-content","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","disabled":"micromag-screen-survey-disabled","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","resultText":"micromag-screen-survey-resultText","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","userAnswer":"micromag-screen-survey-userAnswer","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","submit":"micromag-screen-survey-submit","focused":"micromag-screen-survey-focused","filled":"micromag-screen-survey-filled","multiline":"micromag-screen-survey-multiline","icon":"micromag-screen-survey-icon","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","withBar":"micromag-screen-survey-withBar","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout","reset":"micromag-screen-survey-reset"};
 
-function SurveyScreen(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
-    _ref$question = _ref.question,
-    question = _ref$question === void 0 ? null : _ref$question,
-    _ref$answers = _ref.answers,
-    answers = _ref$answers === void 0 ? null : _ref$answers,
-    _ref$result = _ref.result,
-    result = _ref$result === void 0 ? null : _ref$result,
-    _ref$buttonsStyle = _ref.buttonsStyle,
-    buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
-    _ref$buttonsTextStyle = _ref.buttonsTextStyle,
-    buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
-    _ref$resultsStyle = _ref.resultsStyle,
-    resultsStyle = _ref$resultsStyle === void 0 ? null : _ref$resultsStyle,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$customAnswer = _ref.customAnswer,
-    customAnswer = _ref$customAnswer === void 0 ? false : _ref$customAnswer,
-    _ref$showCount = _ref.showCount,
-    showCount = _ref$showCount === void 0 ? false : _ref$showCount,
-    _ref$withoutPercentag = _ref.withoutPercentage,
-    withoutPercentage = _ref$withoutPercentag === void 0 ? false : _ref$withoutPercentag,
-    _ref$withoutBar = _ref.withoutBar,
-    withoutBar = _ref$withoutBar === void 0 ? false : _ref$withoutBar,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$transitions = _ref.transitions,
-    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
-    _ref$resultTransition = _ref.resultTransitionDuration,
-    resultTransitionDuration = _ref$resultTransition === void 0 ? 500 : _ref$resultTransition,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? null : _ref$type,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var screenId = id || 'screen-id';
-  var trackScreenEvent = useTrackScreenEvent(type);
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useQuizCreate = useQuizCreate({
-      screenId: screenId
-    }),
-    submitQuiz = _useQuizCreate.create;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var _useQuiz = 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;
+function SurveyScreen({
+  id = null,
+  layout = 'middle',
+  question = null,
+  answers = null,
+  result = null,
+  buttonsStyle = null,
+  buttonsTextStyle = null,
+  resultsStyle = null,
+  spacing = 20,
+  header = null,
+  footer = null,
+  background = null,
+  customAnswer = false,
+  showCount = false,
+  withoutPercentage = false,
+  withoutBar = false,
+  current = true,
+  preload = true,
+  transitions = null,
+  resultTransitionDuration = 500,
+  type = null,
+  mediaRef: customMediaRef = null,
+  className = null
+}) {
+  const screenId = id || 'screen-id';
+  const trackScreenEvent = useTrackScreenEvent(type);
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    create: submitQuiz
+  } = useQuizCreate({
+    screenId
+  });
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    muted
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: isCurrentMedia = false
+  } = usePlaybackMediaRef(current, true);
+  const {
+    quiz: allQuizAnswers = []
+  } = useQuiz({
+    screenId,
+    opts: {
+      autoload: !isPlaceholder
+    }
+  });
+  const quizAnswers = allQuizAnswers.filter(item => {
+    const {
+      choice = null
+    } = item || {};
+    const answersBody = (answers || []).map(answer => {
+      const {
+        label = null
+      } = answer || {};
+      const {
+        body = null
+      } = label || {};
       return body;
-    }).filter(function (body) {
-      return body !== null;
-    });
-    var hasResult = answersBody.find(function (body) {
-      return body === choice;
-    });
+    }).filter(body_0 => body_0 !== null);
+    const hasResult = answersBody.find(body_1 => body_1 === choice);
     if (hasResult) {
       return true;
     }
     return false;
   });
-  var hasQuestion = isTextFilled(question);
-  var hasDefaultResult = isTextFilled(result);
-  var _ref5 = customAnswer || {},
-    _ref5$active = _ref5.active,
-    allowCustomAnswer = _ref5$active === void 0 ? false : _ref5$active,
-    _ref5$placeholder = _ref5.placeholder,
-    placeholder = _ref5$placeholder === void 0 ? null : _ref5$placeholder,
-    _ref5$textStyle = _ref5.textStyle,
-    customAnswerTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
-    _ref5$boxStyle = _ref5.boxStyle,
-    customAnswerBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle,
-    _ref5$submit = _ref5.submit,
-    customAnswerSubmit = _ref5$submit === void 0 ? null : _ref5$submit,
-    _ref5$multiline = _ref5.multiline,
-    customAnswerMultiline = _ref5$multiline === void 0 ? false : _ref5$multiline;
-  var _ref6 = placeholder || {},
-    _ref6$body = _ref6.body,
-    placeholderBody = _ref6$body === void 0 ? null : _ref6$body,
-    _ref6$textStyle = _ref6.textStyle,
-    placeholderTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
-  var showInstantAnswer = isStatic || isCapture;
-  var _useState = useState(showInstantAnswer ? -1 : null),
-    _useState2 = _slicedToArray(_useState, 2),
-    userAnswerIndex = _useState2[0],
-    setUserAnswerIndex = _useState2[1];
-  var answered = userAnswerIndex !== null;
-  var quizAnswersComputed = useMemo(function () {
-    var total = answers !== null ? (quizAnswers || []).reduce(function (points, _ref7) {
-      var _ref7$count = _ref7.count,
-        count = _ref7$count === void 0 ? 0 : _ref7$count;
-      return points + parseInt(count, 10);
-    }, userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
-    var computed = answers !== null ? (answers || []).reduce(function (answersTotal, ans, i) {
-      var _ref8 = ans || {},
-        _ref8$label = _ref8.label,
-        label = _ref8$label === void 0 ? {} : _ref8$label;
-      var _ref9 = label || {},
-        _ref9$body = _ref9.body,
-        body = _ref9$body === void 0 ? null : _ref9$body;
-      var _ref0 = quizAnswers.find(function (qa) {
-          return qa.choice === body;
-        }) || {},
-        _ref0$count = _ref0.count,
-        count = _ref0$count === void 0 ? 0 : _ref0$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
-        }));
+  const hasQuestion = isTextFilled(question);
+  const hasDefaultResult = isTextFilled(result);
+  const {
+    active: allowCustomAnswer = false,
+    placeholder = null,
+    textStyle: customAnswerTextStyle = null,
+    boxStyle: customAnswerBoxStyle = null,
+    submit: customAnswerSubmit = null,
+    multiline: customAnswerMultiline = false
+  } = customAnswer || {};
+  const {
+    body: placeholderBody = null,
+    textStyle: placeholderTextStyle = null
+  } = placeholder || {};
+  const showInstantAnswer = isStatic || isCapture;
+  const [userAnswerIndex, setUserAnswerIndex] = useState(showInstantAnswer ? -1 : null);
+  const answered = userAnswerIndex !== null;
+  const quizAnswersComputed = useMemo(() => {
+    const total = answers !== null ? (quizAnswers || []).reduce((points, {
+      count = 0
+    }) => points + parseInt(count, 10), userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
+    const computed = answers !== null ? (answers || []).reduce((answersTotal, ans, i) => {
+      const {
+        label: label_0 = {}
+      } = ans || {};
+      const {
+        body: body_2 = null
+      } = label_0 || {};
+      const {
+        count: count_0 = 0
+      } = quizAnswers.find(qa => qa.choice === body_2) || {};
+      const countWithUser = i === userAnswerIndex ? count_0 + 1 : count_0;
+      if (body_2 !== null) {
+        return {
+          ...answersTotal,
+          [body_2]: {
+            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 = 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]
-      })));
-    }, {});
+    const quizAnswersPct = total > 0 ? Object.keys(computed).map(key => computed[key].percent || 0) : [];
+    const evenlySplit = getLargestRemainderRound(quizAnswersPct, 100);
+    return Object.keys(computed).reduce((acc, key_0, i_0) => ({
+      ...acc,
+      [key_0]: {
+        ...computed[key_0],
+        percent: evenlySplit[i_0]
+      }
+    }), {});
   }, [answers, quizAnswers, userAnswerIndex]);
-  var isSplitted = layout === 'split';
-  var isMiddleLayout = layout === 'middle';
-  var verticalAlign = isSplitted ? null : layout;
-  var transitionPlaying = current;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var mediaShouldLoad = current || preload;
-  var onAnswerClick = useCallback(function (answerIndex) {
+  const isSplitted = layout === 'split';
+  const isMiddleLayout = layout === 'middle';
+  const verticalAlign = isSplitted ? null : layout;
+  const transitionPlaying = current;
+  const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const mediaShouldLoad = current || preload;
+  const onAnswerClick = useCallback(answerIndex => {
     if (userAnswerIndex === null) {
       setUserAnswerIndex(answerIndex);
-      var answer = answers !== null ? answers[answerIndex] : null;
+      const answer_0 = answers !== null ? answers[answerIndex] : null;
       submitQuiz({
-        choice: answer.label.body || answerIndex,
+        choice: answer_0.label.body || answerIndex,
         value: 1
       });
-      trackScreenEvent('click_answer', "Answer ".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
+      trackScreenEvent('click_answer', `Answer ${userAnswerIndex + 1}: ${answer_0.label.body}`, {
         linkType: 'survey_answer',
-        answer: answer,
-        answerIndex: answerIndex,
+        answer: answer_0,
+        answerIndex,
         answerType: 'button'
       });
     }
   }, [userAnswerIndex, setUserAnswerIndex, trackScreenEvent, submitQuiz]);
-  useEffect(function () {
+  useEffect(() => {
     if (!current && isEdit && userAnswerIndex !== null) {
       setUserAnswerIndex(null);
     }
   }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
-  var onQuizReset = useCallback(function () {
+  const onQuizReset = useCallback(() => {
     setUserAnswerIndex(null);
   }, [setUserAnswerIndex]);
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    textInput = _useState4[0],
-    setTextInput = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    inputFocused = _useState6[0],
-    setInputFocused = _useState6[1];
-  var inputDisabled = isPreview || answered;
-  var onInputFocused = useCallback(function (e) {
+  const [textInput, setTextInput] = useState(null);
+  const [inputFocused, setInputFocused] = useState(false);
+  const inputDisabled = isPreview || answered;
+  const onInputFocused = useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
     setInputFocused(true);
   }, [setInputFocused]);
-  var onInputBlurred = useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
+  const onInputBlurred = useCallback(e_0 => {
+    e_0.preventDefault();
+    e_0.stopPropagation();
     setInputFocused(false);
   }, [setInputFocused]);
-  var onTextInputChange = useCallback(function (e) {
-    var value = DOMPurify.sanitize(e.currentTarget.value || '');
+  const onTextInputChange = useCallback(e_1 => {
+    const value = DOMPurify.sanitize(e_1.currentTarget.value || '');
     setTextInput(value !== '' ? value : null);
   }, [setTextInput]);
-  var onTextInputClear = useCallback(function () {
+  const onTextInputClear = useCallback(() => {
     setTextInput('');
   }, [setTextInput]);
-  var onSubmitSuggestion = useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
+  const onSubmitSuggestion = useCallback(e_2 => {
+    e_2.preventDefault();
+    e_2.stopPropagation();
     if (textInput !== null && textInput !== '' && !answered) {
       submitQuiz({
         choice: textInput,
@@ -265,72 +225,63 @@ function SurveyScreen(_ref) {
       });
       setUserAnswerIndex('input');
       setInputFocused(false);
-      trackScreenEvent('click_answer', "Answer input: ".concat(textInput), {
-        textInput: textInput,
+      trackScreenEvent('click_answer', `Answer input: ${textInput}`, {
+        textInput,
         answerIndex: null,
         answerType: 'custom'
       });
     }
   }, [textInput, submitQuiz, answered, setUserAnswerIndex, setInputFocused, trackScreenEvent]);
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
+  const hasHeader = isHeaderFilled(header);
+  const hasFooter = isFooterFilled(footer);
+  const footerProps = getFooterProps(footer, {
+    isView,
+    current,
+    openWebView,
+    isPreview
   });
-  var _useDimensionObserver = useDimensionObserver(),
-    headerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var _useDimensionObserver3 = useDimensionObserver(),
-    footerRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.height,
-    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    scrolledBottom = _useState8[0],
-    setScrolledBottom = _useState8[1];
-  var onScrolledBottom = useCallback(function (_ref1) {
-    var initial = _ref1.initial;
+  const {
+    ref: headerRef,
+    height: headerHeight = 0
+  } = useDimensionObserver();
+  const {
+    ref: footerRef,
+    height: footerHeight = 0
+  } = useDimensionObserver();
+  const scrollingDisabled = !isEdit && transitionDisabled || !current;
+  const [scrolledBottom, setScrolledBottom] = useState(false);
+  const onScrolledBottom = useCallback(({
+    initial
+  }) => {
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
     setScrolledBottom(true);
   }, [trackScreenEvent]);
-  var onScrolledNotBottom = useCallback(function () {
+  const onScrolledNotBottom = useCallback(() => {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  var onScrolledTrigger = useCallback(function () {
-    var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  const onScrolledTrigger = useCallback((trigger = null) => {
     if (trigger !== null) {
-      var scrollPercent = Math.round(trigger * 100);
+      const scrollPercent = Math.round(trigger * 100);
       trackScreenEvent('scroll', scrollPercent, {
-        scrollPercent: scrollPercent
+        scrollPercent
       });
     }
   }, [trackScreenEvent]);
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    hasScroll = _useState0[0],
-    setHasScroll = _useState0[1];
-  var onScrollHeightChange = useCallback(function (_ref10) {
-    var _ref10$canScroll = _ref10.canScroll,
-      canScroll = _ref10$canScroll === void 0 ? false : _ref10$canScroll;
+  const [hasScroll, setHasScroll] = useState(false);
+  const onScrollHeightChange = useCallback(({
+    canScroll = false
+  }) => {
     setHasScroll(canScroll);
   }, [setHasScroll]);
 
   // Question
-  var items = [/*#__PURE__*/jsx(ScreenElement, {
+  const items = [/*#__PURE__*/jsx(ScreenElement, {
     placeholder: "title",
     emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "e1I+KU",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Question"
-      }]
+      defaultMessage: "Question"
     }),
     emptyClassName: styles.emptyQuestion,
     isEmpty: !hasQuestion,
@@ -338,79 +289,78 @@ function SurveyScreen(_ref) {
       transitions: transitions,
       playing: transitionPlaying,
       disabled: transitionDisabled,
-      children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, question), {}, {
+      children: /*#__PURE__*/jsx(Heading, {
+        ...question,
         className: styles.question
-      }))
+      })
     }) : null
   }, "question")];
   if (isSplitted || !isPlaceholder && hasFooter && isMiddleLayout) {
     items.push(/*#__PURE__*/jsx(Spacer, {}, "spacer"));
   }
-  var finalTransitionDuration = useMemo(function () {
-    return showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
-  }, [showInstantAnswer, resultTransitionDuration]);
-  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;
-  var finalResult = useMemo(function () {
-    var defaultResult = hasDefaultResult ? result : null;
-    var answer = answers !== null && userAnswerIndex !== null ? answers[userAnswerIndex] : null;
-    var _ref12 = answer || {},
-      _ref12$result = _ref12.result,
-      answerResult = _ref12$result === void 0 ? null : _ref12$result;
+  const finalTransitionDuration = useMemo(() => showInstantAnswer ? 0 : `${resultTransitionDuration}ms`, [showInstantAnswer, resultTransitionDuration]);
+  const {
+    barColor: resultsBarColor = null,
+    textColor: resultsTextColor = null,
+    percentageTextStyle: resultsPercentageTextStyle = null
+  } = resultsStyle || {};
+  const finalResult = useMemo(() => {
+    const defaultResult = hasDefaultResult ? result : null;
+    const answer_1 = answers !== null && userAnswerIndex !== null ? answers[userAnswerIndex] : null;
+    const {
+      result: answerResult = null
+    } = answer_1 || {};
     return answerResult || defaultResult;
   }, [hasDefaultResult, result, answers, userAnswerIndex]);
-  var showReset = isEdit && userAnswerIndex !== null;
+  const showReset = isEdit && userAnswerIndex !== null;
   items.push(/*#__PURE__*/jsx("div", {
     className: styles.answers,
     children: answers !== null || isPlaceholder ? /*#__PURE__*/jsx("div", {
       className: styles.items,
-      children: (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
-        var hasAnswer = answer !== null;
-        var _ref13 = answer || {},
-          _ref13$label = _ref13.label,
-          label = _ref13$label === void 0 ? null : _ref13$label,
-          _ref13$buttonStyle = _ref13.buttonStyle,
-          answerButtonStyle = _ref13$buttonStyle === void 0 ? null : _ref13$buttonStyle,
-          _ref13$textStyle = _ref13.textStyle,
-          answerButtonTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
-          _ref13$resultStyle = _ref13.resultStyle,
-          answerResultStyle = _ref13$resultStyle === void 0 ? null : _ref13$resultStyle;
-        var _ref14 = answerResultStyle || {},
-          _ref14$barColor = _ref14.barColor,
-          answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
-          answerResultTextColor = _ref14.textColor,
-          _ref14$percentageText = _ref14.percentageTextStyle,
-          answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
-        var _ref15 = label || {},
-          _ref15$body = _ref15.body,
-          body = _ref15$body === void 0 ? null : _ref15$body;
-        var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
-          _ref16$percent = _ref16.percent,
-          percent = _ref16$percent === void 0 ? 0 : _ref16$percent,
-          _ref16$count = _ref16.count,
-          count = _ref16$count === void 0 ? 0 : _ref16$count;
-        var _ref17 = label || {},
-          _ref17$textStyle = _ref17.textStyle,
-          textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
-        var _ref18 = textStyle || {},
-          _ref18$color = _ref18.color,
-          labelColor = _ref18$color === void 0 ? null : _ref18$color;
-        var hasAnswerLabel = isTextFilled(label);
-        var userAnswer = userAnswerIndex === answerIndex;
-        var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
-          textAlign: 'left'
-        } : null);
-        var _ref19 = buttonStyles || {},
-          _ref19$borderRadius = _ref19.borderRadius,
-          answerResultBorderRadius = _ref19$borderRadius === void 0 ? null : _ref19$borderRadius;
-        var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
+      children: (isPlaceholder ? [...new Array(3)] : answers).map((answer_2, answerIndex_0) => {
+        const hasAnswer = answer_2 !== null;
+        const {
+          label: label_1 = null,
+          buttonStyle: answerButtonStyle = null,
+          textStyle: answerButtonTextStyle = null,
+          // for backwards compat, leave there
+          resultStyle: answerResultStyle = null
+        } = answer_2 || {};
+        const {
+          barColor: answerResultBarColor = null,
+          textColor: answerResultTextColor,
+          percentageTextStyle: answerResultPercentageTextStyle = null
+        } = answerResultStyle || {};
+        const {
+          body: body_3 = null
+        } = label_1 || {};
+        const {
+          percent = 0,
+          count: count_1 = 0
+        } = body_3 !== null ? quizAnswersComputed[body_3] || {} : {};
+        const {
+          textStyle = null
+        } = label_1 || {};
+        const {
+          color: labelColor = null
+        } = textStyle || {};
+        const hasAnswerLabel = isTextFilled(label_1);
+        const userAnswer = userAnswerIndex === answerIndex_0;
+        const buttonStyles = {
+          ...buttonsStyle,
+          ...answerButtonStyle,
+          ...(answered ? {
+            textAlign: 'left'
+          } : null)
+        };
+        const {
+          borderRadius: answerResultBorderRadius = null
+        } = buttonStyles || {};
+        const finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
         return /*#__PURE__*/jsx("div", {
-          className: classNames([styles.item, _defineProperty({}, styles.userAnswer, userAnswer)]),
+          className: classNames([styles.item, {
+            [styles.userAnswer]: userAnswer
+          }]),
           children: /*#__PURE__*/jsx(ScreenElement, {
             placeholder: "surveyAnswer",
             placeholderProps: {
@@ -418,10 +368,7 @@ function SurveyScreen(_ref) {
             },
             emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
               id: "+Ok+7S",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Answer"
-              }]
+              defaultMessage: "Answer"
             }),
             emptyClassName: styles.emptyAnswer,
             isEmpty: !hasAnswerLabel,
@@ -435,57 +382,86 @@ function SurveyScreen(_ref) {
                 },
                 children: /*#__PURE__*/jsx(Button, {
                   className: styles.button,
-                  onPointerUp: function onPointerUp(e) {
-                    if (e.pointerType !== 'mouse' || e.button === 0) {
-                      onAnswerClick(answerIndex);
+                  onPointerUp: e_3 => {
+                    if (e_3.pointerType !== 'mouse' || e_3.button === 0) {
+                      onAnswerClick(answerIndex_0);
                     }
                   },
                   disabled: isPreview || userAnswerIndex !== null,
                   focusable: current && isView,
                   buttonStyle: buttonStyles,
-                  textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle),
+                  textStyle: {
+                    ...buttonsTextStyle,
+                    ...textStyle,
+                    ...answerButtonTextStyle
+                  },
                   children: /*#__PURE__*/jsxs("span", {
                     className: styles.itemLabel,
-                    children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, label), {}, {
-                      textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle),
+                    children: [/*#__PURE__*/jsx(Text, {
+                      ...label_1,
+                      textStyle: {
+                        ...buttonsTextStyle,
+                        ...textStyle,
+                        ...answerButtonTextStyle
+                      },
                       inline: true,
                       className: styles.itemText
-                    })), !withoutPercentage ? /*#__PURE__*/jsx("div", {
+                    }), !withoutPercentage ? /*#__PURE__*/jsx("div", {
                       className: styles.resultLabel,
-                      style: _objectSpread(_objectSpread({}, getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color')), answered ? {
-                        opacity: 1
-                      } : {
-                        opacity: 0
-                      }),
-                      children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, label), {}, {
-                        textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
+                      style: {
+                        ...getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color'),
+                        ...(answered ? {
+                          opacity: 1
+                        } : {
+                          opacity: 0
+                        })
+                      },
+                      children: /*#__PURE__*/jsx(Text, {
+                        ...label_1,
+                        textStyle: {
+                          ...buttonsTextStyle,
+                          ...textStyle,
+                          ...answerButtonTextStyle,
+                          ...resultsTextColor,
+                          ...resultsPercentageTextStyle,
+                          ...answerResultTextColor,
+                          ...answerResultPercentageTextStyle
+                        },
                         inline: true,
                         className: styles.resultText,
-                        body: showCount ? count : "".concat(percent, "%")
-                      }))
+                        body: showCount ? count_1 : `${percent}%`
+                      })
                     }) : null, !withoutBar ? /*#__PURE__*/jsx("div", {
                       className: styles.resultBar,
-                      style: _objectSpread(_objectSpread({
+                      style: {
                         borderRadius: finalBarBorderRadius,
                         transitionDuration: finalTransitionDuration,
-                        width: percent !== null ? "".concat(percent, "%") : '0%'
-                      }, getStyleFromColor(answerResultBarColor || resultsBarColor || labelColor, 'backgroundColor')), answered ? {
-                        opacity: 0.5
-                      } : {
-                        opacity: 0
-                      })
+                        width: percent !== null ? `${percent}%` : '0%',
+                        ...getStyleFromColor(answerResultBarColor || resultsBarColor || labelColor, 'backgroundColor'),
+                        ...(answered ? {
+                          opacity: 0.5
+                        } : {
+                          opacity: 0
+                        })
+                      }
                     }) : null]
                   })
                 })
               })
             }) : null
           })
-        }, "answer-".concat(answerIndex + 1));
+        }, `answer-${answerIndex_0 + 1}`);
       })
     }) : null
   }, "answers"));
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.answered, answered), styles.inputFocused, inputFocused), styles.withPercentage, !withoutPercentage), styles.withBar, !withoutBar), styles.isPlaceholder, isPlaceholder)]),
+    className: classNames([styles.container, className, {
+      [styles.answered]: answered,
+      [styles.inputFocused]: inputFocused,
+      [styles.withPercentage]: !withoutPercentage,
+      [styles.withBar]: !withoutBar,
+      [styles.isPlaceholder]: isPlaceholder
+    }]),
     children: [/*#__PURE__*/jsxs(Container, {
       width: width,
       height: height,
@@ -506,16 +482,20 @@ function SurveyScreen(_ref) {
           }),
           onClick: onQuizReset
         }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
-          className: classNames([styles.header, _defineProperty({}, styles.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
+          className: classNames([styles.header, {
+            [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
+            transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
           },
-          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+          children: /*#__PURE__*/jsx(Header, {
+            ...header
+          })
         }) : null, /*#__PURE__*/jsxs(Layout, {
           className: styles.layout,
           verticalAlign: verticalAlign,
@@ -526,15 +506,33 @@ function SurveyScreen(_ref) {
             paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
           } : null,
           children: [items, !isPlaceholder && allowCustomAnswer ? /*#__PURE__*/jsxs("form", {
-            className: classNames([styles.input, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.focused, inputFocused), styles.filled, textInput !== null && textInput !== ''), styles.disabled, inputDisabled), styles.selected, userAnswerIndex === 'input'), styles.multiline, customAnswerMultiline)]),
+            className: classNames([styles.input, {
+              [styles.focused]: inputFocused,
+              [styles.filled]: textInput !== null && textInput !== '',
+              [styles.disabled]: inputDisabled,
+              [styles.selected]: userAnswerIndex === 'input',
+              [styles.multiline]: customAnswerMultiline
+            }]),
             onSubmit: onSubmitSuggestion,
             children: [/*#__PURE__*/jsx(TextInput, {
               className: styles.textInput,
               disabled: inputDisabled,
               focusable: current && isView,
-              buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), customAnswerBoxStyle),
-              textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle),
-              placeholderTextStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle), placeholderTextStyle),
+              buttonStyle: {
+                ...buttonsStyle,
+                ...customAnswerBoxStyle
+              },
+              textStyle: {
+                ...buttonsTextStyle,
+                ...customAnswerTextStyle
+                // ...(answered ? { textAlign: 'left' } : null),
+              },
+              placeholderTextStyle: {
+                ...buttonsTextStyle,
+                ...customAnswerTextStyle,
+                ...placeholderTextStyle
+                // ...(answered ? { textAlign: 'left' } : null),
+              },
               value: textInput,
               label: placeholderBody,
               onChange: onTextInputChange,
@@ -542,7 +540,9 @@ function SurveyScreen(_ref) {
               onBlur: onInputBlurred,
               multiline: customAnswerMultiline
             }), !answered ? /*#__PURE__*/jsx(Button, {
-              className: classNames([styles.confirm, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
+              className: classNames([styles.confirm, {
+                [styles.disabled]: inputDisabled || textInput === null || textInput === ''
+              }]),
               type: "button",
               onClick: onTextInputClear,
               disabled: inputDisabled || textInput === null || textInput === '',
@@ -550,34 +550,42 @@ function SurveyScreen(_ref) {
                 className: styles.icon
               })
             }) : null, !answered ? /*#__PURE__*/jsx(Button, {
-              className: classNames([styles.submit, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
+              className: classNames([styles.submit, {
+                [styles.disabled]: inputDisabled || textInput === null || textInput === ''
+              }]),
               type: "submit",
-              buttonStyle: customAnswerSubmit === null || customAnswerSubmit === void 0 ? void 0 : customAnswerSubmit.buttonStyle,
+              buttonStyle: customAnswerSubmit?.buttonStyle,
               disabled: inputDisabled || textInput === null || textInput === '',
-              children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, customAnswerSubmit), {}, {
+              children: /*#__PURE__*/jsx(Text, {
+                ...customAnswerSubmit,
                 inline: true
-              }))
+              })
             }) : null]
           }) : null, userAnswerIndex !== null && finalResult !== null ? /*#__PURE__*/jsx(Transitions, {
             transitions: transitions,
             playing: transitionPlaying,
             disabled: transitionDisabled,
-            children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, finalResult || {}), {}, {
+            children: /*#__PURE__*/jsx(Text, {
+              ...(finalResult || {}),
               className: styles.resultText
-            }))
+            })
           }) : null]
         })]
       }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
         ref: footerRef,
-        className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
+        className: classNames([styles.footer, {
+          [styles.disabled]: !scrolledBottom
+        }]),
         style: {
-          transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+          transform: !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
           paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
           paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
           paddingTop: spacing / 2,
           paddingBottom: spacing / 2
         },
-        children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+        children: /*#__PURE__*/jsx(Footer, {
+          ...footerProps
+        })
       }) : null]
     }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
@@ -600,19 +608,13 @@ var definition = {
   group: {
     label: defineMessage({
       id: "ZiWlL6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Questions"
-      }]
+      defaultMessage: "Questions"
     }),
     order: 7
   },
   title: defineMessage({
     id: "650XRF",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Survey"
-    }]
+    defaultMessage: "Survey"
   }),
   component: SurveyScreen,
   layouts: ['top', 'middle', 'bottom', 'split'],
@@ -622,10 +624,7 @@ var definition = {
     defaultValue: 'top',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'question',
@@ -635,10 +634,7 @@ var definition = {
     },
     label: defineMessage({
       id: "hVE7TA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Question"
-      }]
+      defaultMessage: "Question"
     })
   }, {
     name: 'answers',
@@ -650,10 +646,7 @@ var definition = {
     },
     label: defineMessage({
       id: "KHWeV7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Answers"
-      }]
+      defaultMessage: "Answers"
     })
   }, {
     name: 'result',
@@ -663,10 +656,7 @@ var definition = {
     },
     label: defineMessage({
       id: "iQ5Uf7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Default feedback"
-      }]
+      defaultMessage: "Default feedback"
     })
   }, {
     name: 'customAnswer',
@@ -681,10 +671,7 @@ var definition = {
     isList: true,
     label: defineMessage({
       id: "R9DB4a",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Styles"
-      }]
+      defaultMessage: "Styles"
     }),
     fields: [{
       name: 'showCount',
@@ -692,10 +679,7 @@ var definition = {
       defaultValue: false,
       label: defineMessage({
         id: "ppGXAR",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Show the answer count"
-        }]
+        defaultMessage: "Show the answer count"
       })
     }, {
       name: 'withoutPercentage',
@@ -703,10 +687,7 @@ var definition = {
       defaultValue: false,
       label: defineMessage({
         id: "crLqJd",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Without percentage"
-        }]
+        defaultMessage: "Without percentage"
       })
     }, {
       name: 'withoutBar',
@@ -714,47 +695,32 @@ var definition = {
       defaultValue: false,
       label: defineMessage({
         id: "D7kxD3",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Without bar"
-        }]
+        defaultMessage: "Without bar"
       })
     }, {
       name: 'buttonsStyle',
       type: 'box-style-form',
       label: defineMessage({
         id: "l5uLMd",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Buttons"
-        }]
+        defaultMessage: "Buttons"
       })
     }, {
       name: 'buttonsTextStyle',
       type: 'text-style-form',
       label: defineMessage({
         id: "gwPu/I",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Buttons text"
-        }]
+        defaultMessage: "Buttons text"
       })
     }, {
       name: 'resultsStyle',
       type: 'graph-bar-style-form',
       label: defineMessage({
         id: "e4UTx9",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Results"
-        }]
+        defaultMessage: "Results"
       }),
       noValueLabel: defineMessage({
         id: "65rc70",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Edit style..."
-        }]
+        defaultMessage: "Edit style..."
       })
     }]
   }, {
@@ -762,20 +728,14 @@ var definition = {
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -790,10 +750,7 @@ var definition = {
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-survey",
-    "version": "0.4.71",
+    "version": "0.4.76",
     "private": false,
     "description": "",
     "keywords": [
@@ -36,6 +36,7 @@
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -52,31 +53,31 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@fortawesome/fontawesome-svg-core": "^7.2.0",
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/react-fontawesome": "^3.2.0",
-        "@micromag/core": "^0.4.71",
-        "@micromag/data": "^0.4.71",
-        "@micromag/element-background": "^0.4.71",
-        "@micromag/element-button": "^0.4.71",
-        "@micromag/element-container": "^0.4.71",
-        "@micromag/element-footer": "^0.4.71",
-        "@micromag/element-header": "^0.4.71",
-        "@micromag/element-heading": "^0.4.71",
-        "@micromag/element-layout": "^0.4.71",
-        "@micromag/element-scroll": "^0.4.71",
-        "@micromag/element-text": "^0.4.71",
-        "@micromag/element-text-input": "^0.4.71",
-        "@micromag/transforms": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/data": "^0.4.74",
+        "@micromag/element-background": "^0.4.76",
+        "@micromag/element-button": "^0.4.76",
+        "@micromag/element-container": "^0.4.74",
+        "@micromag/element-footer": "^0.4.76",
+        "@micromag/element-header": "^0.4.74",
+        "@micromag/element-heading": "^0.4.74",
+        "@micromag/element-layout": "^0.4.74",
+        "@micromag/element-scroll": "^0.4.74",
+        "@micromag/element-text": "^0.4.74",
+        "@micromag/element-text-input": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "dompurify": "^3.2.6",
         "lodash": "^4.17.23",
@@ -87,6 +88,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "42a24f578994b23090271013f136b7f78956b632",
     "types": "es/index.d.ts"
 }