@micromag/screen-quiz 0.4.49 → 0.4.50

package/es/index.js

@@ -1,10 +1,11 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { ScreenElement, Transitions, Button } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -15,7 +16,6 @@ import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
 import Header from '@micromag/element-header';
 import Scroll from '@micromag/element-scroll';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import Heading from '@micromag/element-heading';
 import Layout, { Spacer } from '@micromag/element-layout';
 import Text from '@micromag/element-text';
@@ -25,6 +25,7 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import Button$1, { RichButton } from '@micromag/element-button';
 import Keypad from '@micromag/element-keypad';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTransition, easings, animated } from '@react-spring/web';
 import isArray from 'lodash/isArray';
 
@@ -335,60 +336,65 @@ function Answers(_ref) {
       }
       return acc;
     }, {})), inactiveButtonTextStyle), answerButtonTextStyle);
-    return /*#__PURE__*/React.createElement("div", {
-      key: "answer-".concat(answerI),
+    return /*#__PURE__*/jsx("div", {
       className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, isUserAnswer), styles$4.otherAnswer, isOtherAnswer), styles$4.withoutOpacity, !hasOpacity)])
       // onTransitionEnd={onAnswerTransitionEnd}
       ,
-      style: _objectSpread({}, style)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$4.itemContent,
-      ref: function ref(el) {
-        itemsRefs.current[answerI] = el;
-      }
-    }, /*#__PURE__*/React.createElement(ScreenElement, {
-      placeholder: "quizAnswer",
-      placeholderProps: {
-        good: answerI === 0
-      },
-      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "+Ok+7S",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Answer"
-        }]
-      }),
-      emptyClassName: styles$4.emptyAnswer,
-      isEmpty: !hasAnswer
-    }, hasAnswer ? /*#__PURE__*/React.createElement(RichButton, {
-      className: styles$4.button,
-      onPointerUp: function onPointerUp(e) {
-        if (e.pointerType !== 'mouse' || e.button === 0) {
-          onClick(answer, answerI);
-        }
-      },
-      disabled: !visible || isPreview || answered,
-      focusable: focusable,
-      buttonStyle: finalButtonStyle,
-      textStyle: finalTextStyle,
-      label: label,
-      visual: visual,
-      visualClassName: styles$4.optionVisual,
-      imageClassName: styles$4.optionImage,
-      layout: buttonLayout || buttonsLayout || (hasVisual ? 'label-right' : null)
-    }, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React.createElement("span", {
-      className: styles$4.resultIcon,
-      style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$4.faIcon,
-      icon: faCheck
-    })) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/React.createElement("span", {
-      className: styles$4.resultIcon,
-      style: getStyleFromColor(badAnswerColor, 'backgroundColor')
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$4.faIcon,
-      icon: faTimes
-    })) : null) : null)));
+      style: _objectSpread({}, style),
+      children: /*#__PURE__*/jsx("div", {
+        className: styles$4.itemContent,
+        ref: function ref(el) {
+          itemsRefs.current[answerI] = el;
+        },
+        children: /*#__PURE__*/jsx(ScreenElement, {
+          placeholder: "quizAnswer",
+          placeholderProps: {
+            good: answerI === 0
+          },
+          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "+Ok+7S",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Answer"
+            }]
+          }),
+          emptyClassName: styles$4.emptyAnswer,
+          isEmpty: !hasAnswer,
+          children: hasAnswer ? /*#__PURE__*/jsxs(RichButton, {
+            className: styles$4.button,
+            onPointerUp: function onPointerUp(e) {
+              if (e.pointerType !== 'mouse' || e.button === 0) {
+                onClick(answer, answerI);
+              }
+            },
+            disabled: !visible || isPreview || answered,
+            focusable: focusable,
+            buttonStyle: finalButtonStyle,
+            textStyle: finalTextStyle,
+            label: label,
+            visual: visual,
+            visualClassName: styles$4.optionVisual,
+            imageClassName: styles$4.optionImage,
+            layout: buttonLayout || buttonsLayout || (hasVisual ? 'label-right' : null),
+            children: [answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/jsx("span", {
+              className: styles$4.resultIcon,
+              style: getStyleFromColor(goodAnswerColor, 'backgroundColor'),
+              children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                className: styles$4.faIcon,
+                icon: faCheck
+              })
+            }) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/jsx("span", {
+              className: styles$4.resultIcon,
+              style: getStyleFromColor(badAnswerColor, 'backgroundColor'),
+              children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                className: styles$4.faIcon,
+                icon: faTimes
+              })
+            }) : null]
+          }) : null
+        })
+      })
+    }, "answer-".concat(answerI));
   });
   var _ref10 = keypadLayout || {},
     _ref10$columnAlign = _ref10.columnAlign,
@@ -399,15 +405,16 @@ function Answers(_ref) {
     spacing = _ref10$spacing === void 0 ? null : _ref10$spacing,
     _ref10$withSquareItem = _ref10.withSquareItems,
     withSquareItems = _ref10$withSquareItem === void 0 ? false : _ref10$withSquareItem;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon && hasGoodOrBadAnswerInList), styles$4.withSquareItems, withSquareItems === true), styles$4.isPlaceholder, isPlaceholder)])
-  }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement(Keypad, {
-    className: styles$4.items,
-    items: keypadItems,
-    align: align,
-    columns: columns,
-    spacing: spacing
-  }) : null);
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$4.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon && hasGoodOrBadAnswerInList), styles$4.withSquareItems, withSquareItems === true), styles$4.isPlaceholder, isPlaceholder)]),
+    children: filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/jsx(Keypad, {
+      className: styles$4.items,
+      items: keypadItems,
+      align: align,
+      columns: columns,
+      spacing: spacing
+    }) : null
+  });
 }
 
 var styles$3 = {"container":"micromag-screen-quiz-question-container","question":"micromag-screen-quiz-question-question","index":"micromag-screen-quiz-question-index","resultContent":"micromag-screen-quiz-question-resultContent","result":"micromag-screen-quiz-question-result","emptyQuestion":"micromag-screen-quiz-question-emptyQuestion","emptyResult":"micromag-screen-quiz-question-emptyResult","resultVisible":"micromag-screen-quiz-question-resultVisible","resultHidden":"micromag-screen-quiz-question-resultHidden","isPlaceholder":"micromag-screen-quiz-question-isPlaceholder"};
@@ -514,97 +521,101 @@ function Question(_ref) {
     setResultVisible(true);
   }, [setResultVisible]);
   var hasIndex = index !== null && totalCount !== null;
-  return /*#__PURE__*/React.createElement(Layout, {
+  return /*#__PURE__*/jsx(Layout, {
     className: classNames([styles$3.container, className, _defineProperty(_defineProperty(_defineProperty({}, styles$3.isPlaceholder, isPlaceholder), styles$3.resultVisible, resultVisible), styles$3.resultHidden, !hasResult)]),
     verticalAlign: verticalAlign,
-    style: style
-  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "stats",
-    placeholder: /*#__PURE__*/React.createElement("div", {
-      className: styles$3.index
-    }, "1 / 10")
-  }, totalCount > 1 ? /*#__PURE__*/React.createElement(Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: styles$3.index,
-    body: "".concat(index + 1, " / ").concat(totalCount),
-    textStyle: numbersTextStyle
-  })) : null) : null, /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "question",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "FOmgqv",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Question"
-      }]
-    }),
-    emptyClassName: styles$3.emptyQuestion,
-    isEmpty: !hasQuestion
-  }, hasQuestion ? /*#__PURE__*/React.createElement(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(Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React.createElement(Answers, {
-    key: "answers",
-    items: answers || [],
-    keypadLayout: keypadLayout,
-    answeredIndex: answeredIndex,
-    goodAnswerColor: goodAnswerColor,
-    badAnswerColor: badAnswerColor,
-    withoutGoodAnswer: withoutGoodAnswer,
-    withoutIcon: withoutTrueFalse,
-    showUserAnswer: withoutTrueFalse,
-    buttonsLayout: buttonsLayout,
-    buttonsStyle: buttonsStyle,
-    inactiveButtonsStyle: inactiveButtonsStyle,
-    buttonsTextStyle: buttonsTextStyle,
-    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
-    focusable: focusable,
-    animated: animated,
-    transitions: transitions,
-    transitionStagger: transitionStagger,
-    transitionPlaying: transitionPlaying,
-    transitionDisabled: transitionDisabled,
-    onClick: onAnswerClick,
-    onCollapse: onAnswersCollapse,
-    onTransitionEnd: onAnswerTransitionEnd,
-    withoutCollapse: withoutCollapse
-  }), withResult ? /*#__PURE__*/React.createElement("div", {
-    className: styles$3.result,
-    key: "results"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.resultContent
-  }, /*#__PURE__*/React.createElement(ScreenElement, {
-    emptyLabel: answered ? /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "li7ADr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Result"
-      }]
-    }) : null,
-    isEmpty: answered && !hasResult,
-    emptyClassName: styles$3.emptyResult
-  }, (hasResult || hasResultVisual) && answers !== null ? /*#__PURE__*/React.createElement(Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    delay: (1 + answers.length) * transitionStagger,
-    disabled: transitionDisabled
-  }, hasResult ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalResult || {}, {
-    className: styles$3.resultText,
-    textStyle: _objectSpread(_objectSpread({}, feedbackTextStyle || null), resultTextStyle || null)
-  })) : null, hasResultVisual ? /*#__PURE__*/React.createElement(Visual, {
-    media: answerImage || resultImage,
-    width: "100%",
-    height: "auto"
-  }) : null) : null))) : null]);
+    style: style,
+    children: [!withoutIndex && hasIndex ? /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: /*#__PURE__*/jsx("div", {
+        className: styles$3.index,
+        children: "1 / 10"
+      }),
+      children: totalCount > 1 ? /*#__PURE__*/jsx(Transitions, {
+        transitions: transitions,
+        playing: transitionPlaying,
+        disabled: transitionDisabled,
+        children: /*#__PURE__*/jsx(Text, {
+          className: styles$3.index,
+          body: "".concat(index + 1, " / ").concat(totalCount),
+          textStyle: numbersTextStyle
+        })
+      }) : null
+    }, "stats") : null, /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "title",
+      emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "FOmgqv",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Question"
+        }]
+      }),
+      emptyClassName: styles$3.emptyQuestion,
+      isEmpty: !hasQuestion,
+      children: hasQuestion ? /*#__PURE__*/jsx(Transitions, {
+        transitions: transitions,
+        playing: transitionPlaying,
+        disabled: transitionDisabled,
+        children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, question), {}, {
+          className: styles$3.question,
+          textStyle: _objectSpread(_objectSpread({}, questionsHeadingStyle), questionTextStyle)
+        }))
+      }) : null
+    }, "question"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(Answers, {
+      items: answers || [],
+      keypadLayout: keypadLayout,
+      answeredIndex: answeredIndex,
+      goodAnswerColor: goodAnswerColor,
+      badAnswerColor: badAnswerColor,
+      withoutGoodAnswer: withoutGoodAnswer,
+      withoutIcon: withoutTrueFalse,
+      showUserAnswer: withoutTrueFalse,
+      buttonsLayout: buttonsLayout,
+      buttonsStyle: buttonsStyle,
+      inactiveButtonsStyle: inactiveButtonsStyle,
+      buttonsTextStyle: buttonsTextStyle,
+      inactiveButtonsTextStyle: inactiveButtonsTextStyle,
+      focusable: focusable,
+      animated: animated,
+      transitions: transitions,
+      transitionStagger: transitionStagger,
+      transitionPlaying: transitionPlaying,
+      transitionDisabled: transitionDisabled,
+      onClick: onAnswerClick,
+      onCollapse: onAnswersCollapse,
+      onTransitionEnd: onAnswerTransitionEnd,
+      withoutCollapse: withoutCollapse
+    }, "answers"), withResult ? /*#__PURE__*/jsx("div", {
+      className: styles$3.result,
+      children: /*#__PURE__*/jsx("div", {
+        className: styles$3.resultContent,
+        children: /*#__PURE__*/jsx(ScreenElement, {
+          emptyLabel: answered ? /*#__PURE__*/jsx(FormattedMessage, {
+            id: "li7ADr",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Result"
+            }]
+          }) : null,
+          isEmpty: answered && !hasResult,
+          emptyClassName: styles$3.emptyResult,
+          children: (hasResult || hasResultVisual) && answers !== null ? /*#__PURE__*/jsxs(Transitions, {
+            transitions: transitions,
+            playing: transitionPlaying,
+            delay: (1 + answers.length) * transitionStagger,
+            disabled: transitionDisabled,
+            children: [hasResult ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, finalResult || {}), {}, {
+              className: styles$3.resultText,
+              textStyle: _objectSpread(_objectSpread({}, feedbackTextStyle || null), resultTextStyle || null)
+            })) : null, hasResultVisual ? /*#__PURE__*/jsx(Visual, {
+              media: answerImage || resultImage,
+              width: "100%",
+              height: "auto"
+            }) : null]
+          }) : null
+        })
+      })
+    }, "results") : null]
+  });
 }
 
 var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","content":"micromag-screen-quiz-content","disabled":"micromag-screen-quiz-disabled","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","nextButton":"micromag-screen-quiz-nextButton","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro"};
@@ -804,96 +815,101 @@ function QuizScreen(_ref) {
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var showReset = isEdit && userAnswerIndex !== null;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles$2.container, className, _defineProperty({}, styles$2.disabled, clickDisabled)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles$2.content
-  }, showReset ? /*#__PURE__*/React.createElement(Button, {
-    className: styles$2.reset,
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faRedo,
-      size: "md"
-    }),
-    onClick: onQuizReset
-  }) : null, /*#__PURE__*/React.createElement(Scroll, {
-    verticalAlign: verticalAlign
-    // disabled={scrollingDisabled || userAnswerIndex !== null}
-    ,
-    disabled: scrollingDisabled,
-    onScrolledTrigger: onScrolledTrigger,
-    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, {
-    question: question,
-    answers: answers,
-    keypadLayout: keypadLayout,
-    result: result,
-    resultImage: resultImage,
-    answeredIndex: userAnswerIndex,
-    buttonsLayout: buttonsLayout,
-    buttonsStyle: buttonsStyle,
-    buttonsTextStyle: buttonsTextStyle,
-    inactiveButtonsStyle: inactiveButtonsStyle,
-    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
-    feedbackTextStyle: feedbackTextStyle,
-    numbersTextStyle: numbersTextStyle,
-    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);
+    "data-screen-ready": true,
+    children: [/*#__PURE__*/jsxs(Container, {
+      width: width,
+      height: height,
+      className: styles$2.content,
+      children: [showReset ? /*#__PURE__*/jsx(Button, {
+        className: styles$2.reset,
+        icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: faRedo,
+          size: "md"
+        }),
+        onClick: onQuizReset
+      }) : null, /*#__PURE__*/jsxs(Scroll, {
+        verticalAlign: verticalAlign
+        // disabled={scrollingDisabled || userAnswerIndex !== null}
+        ,
+        disabled: scrollingDisabled,
+        onScrolledTrigger: onScrolledTrigger,
+        onScrolledBottom: onScrolledBottom,
+        onScrolledNotBottom: onScrolledNotBottom,
+        onScrollHeightChange: onScrollHeightChange,
+        withShadow: true,
+        children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("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
+          },
+          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+        }) : null, /*#__PURE__*/jsx(Question, {
+          question: question,
+          answers: answers,
+          keypadLayout: keypadLayout,
+          result: result,
+          resultImage: resultImage,
+          answeredIndex: userAnswerIndex,
+          buttonsLayout: buttonsLayout,
+          buttonsStyle: buttonsStyle,
+          buttonsTextStyle: buttonsTextStyle,
+          inactiveButtonsStyle: inactiveButtonsStyle,
+          inactiveButtonsTextStyle: inactiveButtonsTextStyle,
+          feedbackTextStyle: feedbackTextStyle,
+          numbersTextStyle: numbersTextStyle,
+          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__*/jsx("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
+        },
+        children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+      }) : null]
+    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: mediaShouldLoad,
+      mediaRef: mediaRef,
+      withoutVideo: isPreview,
+      className: styles$2.background
+    }) : null]
+  });
 }
 
 var styles$1 = {"container":"micromag-screen-quiz-results-container","title":"micromag-screen-quiz-results-title","emptyTitle":"micromag-screen-quiz-results-emptyTitle","emptyDescription":"micromag-screen-quiz-results-emptyDescription"};
@@ -931,59 +947,58 @@ function Results(_ref) {
   var _ref3 = description || {},
     _ref3$textStyle = _ref3.textStyle,
     descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
-  return /*#__PURE__*/React.createElement(Layout, {
+  return /*#__PURE__*/jsx(Layout, {
     className: classNames([styles$1.container, className]),
     fullscreen: true,
     verticalAlign: verticalAlign,
-    style: style
-  }, [/*#__PURE__*/React.createElement(ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "BSTWf8",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: styles$1.emptyTitle,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(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(Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "description",
-    placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "hoDz0O",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    }),
-    emptyClassName: styles$1.emptyDescription,
-    isEmpty: !hasDescription
-  }, hasTitle ? /*#__PURE__*/React.createElement(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)]);
+    style: style,
+    children: [/*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "title",
+      emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "BSTWf8",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      }),
+      emptyClassName: styles$1.emptyTitle,
+      isEmpty: !hasTitle,
+      children: hasTitle ? /*#__PURE__*/jsx(Transitions, {
+        transitions: transitions,
+        playing: transitionPlaying,
+        disabled: transitionDisabled,
+        children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, title), {}, {
+          className: styles$1.title,
+          textStyle: _objectSpread(_objectSpread({}, resultsHeadingStyle), titleTextStyle)
+        }))
+      }) : null
+    }, "title"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "text",
+      emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "hoDz0O",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      }),
+      emptyClassName: styles$1.emptyDescription,
+      isEmpty: !hasDescription,
+      children: hasTitle ? /*#__PURE__*/jsx(Transitions, {
+        transitions: transitions,
+        playing: transitionPlaying,
+        disabled: transitionDisabled,
+        delay: transitionStagger,
+        children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
+          className: styles$1.description,
+          textStyle: _objectSpread(_objectSpread({}, resultsTextStyle), descriptionTextStyle)
+        }))
+      }) : null
+    }, "description")]
+  });
 }
 
 var styles = {"container":"micromag-screen-quiz-title-container","title":"micromag-screen-quiz-title-title","description":"micromag-screen-quiz-title-description","emptyTitle":"micromag-screen-quiz-title-emptyTitle","emptyDescription":"micromag-screen-quiz-title-emptyDescription"};
 
-/* eslint-disable react/no-array-index-key */
-
 function Title(_ref) {
   var _ref$layout = _ref.layout,
     layout = _ref$layout === void 0 ? null : _ref$layout,
@@ -1009,59 +1024,59 @@ function Title(_ref) {
   var hasTitle = isTextFilled(title);
   var hasDescription = isTextFilled(description);
   var hasButton = isTextFilled(button);
-  return /*#__PURE__*/React.createElement(Layout, {
+  return /*#__PURE__*/jsx(Layout, {
     className: classNames([styles.container, className]),
     fullscreen: true,
     verticalAlign: verticalAlign,
-    style: style
-  }, [/*#__PURE__*/React.createElement(ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(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(ScreenElement, {
-    key: "description",
-    placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(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(Spacer, {
-    key: "spacer"
-  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "button",
-    placeholder: "button"
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    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(FormattedMessage, {
-    id: "D7LIZQ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Start"
-    }]
-  })))]);
+    style: style,
+    children: [/*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "title",
+      emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "BSTWf8",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      }),
+      emptyClassName: styles.emptyTitle,
+      isEmpty: !hasTitle,
+      children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, title), {}, {
+        className: styles.title
+      })) : null
+    }, "title"), /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "text",
+      emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "hoDz0O",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      }),
+      emptyClassName: styles.emptyDescription,
+      isEmpty: !hasDescription,
+      children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
+        className: styles.description
+      })) : null
+    }, "description"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "button",
+      children: /*#__PURE__*/jsx(Button$1, {
+        disabled: buttonDisabled,
+        focusable: focusable,
+        buttonStyle: button !== null ? button.buttonStyle : null,
+        className: styles.button,
+        onClick: onClickButton,
+        children: hasButton ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, button), {}, {
+          className: styles.label
+        })) : /*#__PURE__*/jsx(FormattedMessage, {
+          id: "D7LIZQ",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Start"
+          }]
+        })
+      })
+    }, "button")]
+  });
 }
 
 function QuizMultipleScreen(_ref) {
@@ -1436,7 +1451,7 @@ function QuizMultipleScreen(_ref) {
   if (isIntro) {
     contentItems.push({
       key: 'intro',
-      element: /*#__PURE__*/React.createElement(Title, {
+      element: /*#__PURE__*/jsx(Title, {
         title: title,
         description: description,
         layout: introLayout || layout,
@@ -1461,7 +1476,7 @@ function QuizMultipleScreen(_ref) {
   if (isQuestion) {
     contentItems.push({
       key: "question-".concat(questionIndex),
-      element: /*#__PURE__*/React.createElement(Question, {
+      element: /*#__PURE__*/jsx(Question, {
         index: questionIndex,
         totalCount: (questions || []).length,
         question: text,
@@ -1504,36 +1519,39 @@ function QuizMultipleScreen(_ref) {
   if (hasResult && currentAnsweredIndex !== null) {
     contentItems.push({
       key: 'next',
-      element: /*#__PURE__*/React.createElement("div", {
+      element: /*#__PURE__*/jsx("div", {
         className: styles$2.next,
         style: !isPlaceholder ? {
           padding: spacing,
           paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
           paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
-        } : null
-      }, /*#__PURE__*/React.createElement(Button$1, {
-        disabled: currentAnsweredIndex === null,
-        focusable: true,
-        buttonStyle: nextButton !== null ? nextButton.buttonStyle : null,
-        className: styles$2.nextButton,
-        onClick: onNextSlide
-      }, hasButtonText ? /*#__PURE__*/React.createElement(Text, Object.assign({}, nextButton, {
-        className: styles$2.label
-      })) : /*#__PURE__*/React.createElement("span", {
-        className: styles$2.label
-      }, /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "SVLGTA",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Next"
-        }]
-      }))))
+        } : null,
+        children: /*#__PURE__*/jsx(Button$1, {
+          disabled: currentAnsweredIndex === null,
+          focusable: true,
+          buttonStyle: nextButton !== null ? nextButton.buttonStyle : null,
+          className: styles$2.nextButton,
+          onClick: onNextSlide,
+          children: hasButtonText ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, nextButton), {}, {
+            className: styles$2.label
+          })) : /*#__PURE__*/jsx("span", {
+            className: styles$2.label,
+            children: /*#__PURE__*/jsx(FormattedMessage, {
+              id: "SVLGTA",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Next"
+              }]
+            })
+          })
+        })
+      })
     });
   }
   if (isResults) {
     contentItems.push({
       key: 'results',
-      element: /*#__PURE__*/React.createElement(Results, Object.assign({}, currentResult, {
+      element: /*#__PURE__*/jsx(Results, _objectSpread(_objectSpread({}, currentResult), {}, {
         resultsHeadingStyle: resultsHeadingStyle,
         resultsTextStyle: resultsTextStyle,
         layout: resultLayout || layout,
@@ -1606,105 +1624,114 @@ function QuizMultipleScreen(_ref) {
       easing: easings.easeInOutSine
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles$2.container, className]),
-    "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(FormattedMessage, {
-    id: "Xr1v8l",
-    defaultMessage: [{
-      "type": 0,
-      "value": "points gained"
-    }]
-  })) : null, showReset ? /*#__PURE__*/React.createElement(Button$1, {
-    className: styles$2.reset,
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: 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,
-    onScrolledTrigger: onScrolledTrigger,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    onScrollHeightChange: onScrollHeightChange,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      inset: '0'
-    }
-  }, contentTransitions(function (springStyle, item) {
-    var isActive = contentItems.some(function (ci) {
-      return ci.key === item.key;
-    });
-    return /*#__PURE__*/React.createElement(animated.div, {
-      style: _objectSpread(_objectSpread({}, springStyle), !isActive ? {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        minHeight: '100%',
-        zIndex: 0
-      } : {
-        position: 'relative',
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        width: '100%',
-        minHeight: hasResult && currentAnsweredIndex !== null ? 0 : '100%'
-      })
-    }, item.element);
-  }))), !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 ? bgTransitions(function (springStyle, item) {
-    return /*#__PURE__*/React.createElement(animated.div, {
-      style: _objectSpread(_objectSpread({}, springStyle), {}, {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: item.key === bgItem.key ? 1 : 0
-      })
-    }, /*#__PURE__*/React.createElement(Background, {
-      background: item.background,
+    "data-screen-ready": true,
+    children: [/*#__PURE__*/jsxs(Container, {
       width: width,
       height: height,
-      resolution: resolution,
-      playing: item.key === bgItem.key && backgroundPlaying,
-      muted: muted,
-      shouldLoad: backgroundShouldLoad,
-      mediaRef: item.key === bgItem.key ? mediaRef : null,
-      className: styles$2.background,
-      withoutVideo: isPreview
-    }));
-  }) : null);
+      className: styles$2.content,
+      children: [showPoints && currentPoints !== null && currentPoints > 0 ? /*#__PURE__*/jsxs("div", {
+        className: styles$2.points,
+        children: ["".concat(currentPoints, " "), /*#__PURE__*/jsx(FormattedMessage, {
+          id: "Xr1v8l",
+          defaultMessage: [{
+            "type": 0,
+            "value": "points gained"
+          }]
+        })]
+      }) : null, showReset ? /*#__PURE__*/jsx(Button$1, {
+        className: styles$2.reset,
+        icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: faRedo,
+          size: "md"
+        }),
+        onClick: onQuizReset
+      }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("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
+        },
+        children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+      }) : null, /*#__PURE__*/jsx(Scroll, {
+        verticalAlign: verticalAlign,
+        disabled: scrollingDisabled,
+        onScrolledTrigger: onScrolledTrigger,
+        onScrolledBottom: onScrolledBottom,
+        onScrolledNotBottom: onScrolledNotBottom,
+        onScrollHeightChange: onScrollHeightChange,
+        withShadow: true,
+        children: /*#__PURE__*/jsx("div", {
+          style: {
+            position: 'absolute',
+            inset: '0'
+          },
+          children: contentTransitions(function (springStyle, item) {
+            var isActive = contentItems.some(function (ci) {
+              return ci.key === item.key;
+            });
+            return /*#__PURE__*/jsx(animated.div, {
+              style: _objectSpread(_objectSpread({}, springStyle), !isActive ? {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                minHeight: '100%',
+                zIndex: 0
+              } : {
+                position: 'relative',
+                zIndex: 1,
+                top: 0,
+                left: 0,
+                width: '100%',
+                minHeight: hasResult && currentAnsweredIndex !== null ? 0 : '100%'
+              }),
+              children: item.element
+            });
+          })
+        })
+      }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("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
+        },
+        children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+      }) : null]
+    }), !isPlaceholder ? bgTransitions(function (springStyle, item) {
+      return /*#__PURE__*/jsx(animated.div, {
+        style: _objectSpread(_objectSpread({}, springStyle), {}, {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          zIndex: item.key === bgItem.key ? 1 : 0
+        }),
+        children: /*#__PURE__*/jsx(Background, {
+          background: item.background,
+          width: width,
+          height: height,
+          resolution: resolution,
+          playing: item.key === bgItem.key && backgroundPlaying,
+          muted: muted,
+          shouldLoad: backgroundShouldLoad,
+          mediaRef: item.key === bgItem.key ? mediaRef : null,
+          className: styles$2.background,
+          withoutVideo: isPreview
+        })
+      });
+    }) : null]
+  });
 }
 
 var definition = [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.4.49",
+    "version": "0.4.50",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,20 +64,20 @@
         "@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.49",
-        "@micromag/data": "^0.4.49",
-        "@micromag/element-background": "^0.4.49",
-        "@micromag/element-button": "^0.4.49",
-        "@micromag/element-container": "^0.4.49",
-        "@micromag/element-footer": "^0.4.49",
-        "@micromag/element-header": "^0.4.49",
-        "@micromag/element-heading": "^0.4.49",
-        "@micromag/element-keypad": "^0.4.49",
-        "@micromag/element-layout": "^0.4.49",
-        "@micromag/element-scroll": "^0.4.49",
-        "@micromag/element-text": "^0.4.49",
-        "@micromag/element-visual": "^0.4.49",
-        "@micromag/transforms": "^0.4.49",
+        "@micromag/core": "^0.4.50",
+        "@micromag/data": "^0.4.50",
+        "@micromag/element-background": "^0.4.50",
+        "@micromag/element-button": "^0.4.50",
+        "@micromag/element-container": "^0.4.50",
+        "@micromag/element-footer": "^0.4.50",
+        "@micromag/element-header": "^0.4.50",
+        "@micromag/element-heading": "^0.4.50",
+        "@micromag/element-keypad": "^0.4.50",
+        "@micromag/element-layout": "^0.4.50",
+        "@micromag/element-scroll": "^0.4.50",
+        "@micromag/element-text": "^0.4.50",
+        "@micromag/element-visual": "^0.4.50",
+        "@micromag/transforms": "^0.4.50",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "classnames": "^2.2.6",
@@ -89,6 +89,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
+    "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
     "types": "es/index.d.ts"
 }