@micromag/screen-quiz 0.3.622 → 0.3.628

package/es/index.js

@@ -4,9 +4,9 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import PropTypes$1 from 'prop-types';
+import PropTypes from 'prop-types';
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { PropTypes } from '@micromag/core';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, Transitions, Button as Button$1 } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -32,26 +32,26 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withoutOpacity":"micromag-screen-quiz-answers-withoutOpacity","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
 
 var propTypes$5 = {
-  items: PropTypes.quizAnswers.isRequired,
-  answeredIndex: PropTypes$1.number,
-  answersCollapseDelay: PropTypes$1.number,
-  buttonsStyle: PropTypes.boxStyle,
-  inactiveButtonsStyle: PropTypes.boxStyle,
-  buttonsTextStyle: PropTypes.textStyle,
-  inactiveButtonsTextStyle: PropTypes.textStyle,
-  goodAnswerColor: PropTypes.color,
-  badAnswerColor: PropTypes.color,
-  showUserAnswer: PropTypes$1.bool,
-  withoutGoodAnswer: PropTypes$1.bool,
-  withoutIcon: PropTypes$1.bool,
-  focusable: PropTypes$1.bool,
-  animated: PropTypes$1.bool,
-  collapsed: PropTypes$1.bool,
-  onClick: PropTypes$1.func,
-  onCollapse: PropTypes$1.func,
-  onCollapsed: PropTypes$1.func,
-  onTransitionEnd: PropTypes$1.func,
-  className: PropTypes$1.string
+  items: PropTypes$1.quizAnswers.isRequired,
+  answeredIndex: PropTypes.number,
+  answersCollapseDelay: PropTypes.number,
+  buttonsStyle: PropTypes$1.boxStyle,
+  inactiveButtonsStyle: PropTypes$1.boxStyle,
+  buttonsTextStyle: PropTypes$1.textStyle,
+  inactiveButtonsTextStyle: PropTypes$1.textStyle,
+  goodAnswerColor: PropTypes$1.color,
+  badAnswerColor: PropTypes$1.color,
+  showUserAnswer: PropTypes.bool,
+  withoutGoodAnswer: PropTypes.bool,
+  withoutIcon: PropTypes.bool,
+  focusable: PropTypes.bool,
+  animated: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onClick: PropTypes.func,
+  onCollapse: PropTypes.func,
+  onCollapsed: PropTypes.func,
+  onTransitionEnd: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$5 = {
   answeredIndex: null,
@@ -335,39 +335,40 @@ Answers.defaultProps = defaultProps$5;
 var styles$3 = {"container":"micromag-screen-quiz-question-container","emptyQuestion":"micromag-screen-quiz-question-emptyQuestion","emptyResult":"micromag-screen-quiz-question-emptyResult","question":"micromag-screen-quiz-question-question","index":"micromag-screen-quiz-question-index","result":"micromag-screen-quiz-question-result","resultContent":"micromag-screen-quiz-question-resultContent","resultVisible":"micromag-screen-quiz-question-resultVisible","isPlaceholder":"micromag-screen-quiz-question-isPlaceholder"};
 
 var propTypes$4 = {
-  question: PropTypes.textElement,
-  answers: PropTypes.quizAnswers,
-  result: PropTypes$1.shape({
-    image: PropTypes.imageElement,
-    text: PropTypes.textElement
+  question: PropTypes$1.textElement,
+  answers: PropTypes$1.quizAnswers,
+  result: PropTypes.shape({
+    image: PropTypes$1.imageElement,
+    text: PropTypes$1.textElement
   }),
-  resultImage: PropTypes.visualElement,
-  index: PropTypes$1.number,
-  totalCount: PropTypes$1.number,
-  answeredIndex: PropTypes$1.number,
-  buttonsStyle: PropTypes.boxStyle,
-  inactiveButtonsStyle: PropTypes.boxStyle,
-  buttonsTextStyle: PropTypes.textStyle,
-  inactiveButtonsTextStyle: PropTypes.textStyle,
-  questionsHeadingStyle: PropTypes.textStyle,
-  goodAnswerColor: PropTypes.color,
-  badAnswerColor: PropTypes.color,
-  focusable: PropTypes$1.bool,
-  animated: PropTypes$1.bool,
-  layout: PropTypes$1.string,
-  showInstantAnswer: PropTypes$1.bool,
-  withResult: PropTypes$1.bool,
-  withoutGoodAnswer: PropTypes$1.bool,
-  withoutTrueFalse: PropTypes$1.bool,
-  withoutIndex: PropTypes$1.bool,
-  transitions: PropTypes.transitions,
-  transitionPlaying: PropTypes$1.bool,
-  transitionStagger: PropTypes$1.number,
-  transitionDisabled: PropTypes$1.bool,
-  onAnswerClick: PropTypes$1.func,
-  onAnswerTransitionEnd: PropTypes$1.func,
-  className: PropTypes$1.string,
-  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
+  resultImage: PropTypes$1.visualElement,
+  index: PropTypes.number,
+  totalCount: PropTypes.number,
+  answeredIndex: PropTypes.number,
+  buttonsStyle: PropTypes$1.boxStyle,
+  inactiveButtonsStyle: PropTypes$1.boxStyle,
+  buttonsTextStyle: PropTypes$1.textStyle,
+  inactiveButtonsTextStyle: PropTypes$1.textStyle,
+  questionsHeadingStyle: PropTypes$1.textStyle,
+  feedbackTextStyle: PropTypes$1.textStyle,
+  goodAnswerColor: PropTypes$1.color,
+  badAnswerColor: PropTypes$1.color,
+  focusable: PropTypes.bool,
+  animated: PropTypes.bool,
+  layout: PropTypes.string,
+  showInstantAnswer: PropTypes.bool,
+  withResult: PropTypes.bool,
+  withoutGoodAnswer: PropTypes.bool,
+  withoutTrueFalse: PropTypes.bool,
+  withoutIndex: PropTypes.bool,
+  transitions: PropTypes$1.transitions,
+  transitionPlaying: PropTypes.bool,
+  transitionStagger: PropTypes.number,
+  transitionDisabled: PropTypes.bool,
+  onAnswerClick: PropTypes.func,
+  onAnswerTransitionEnd: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 };
 var defaultProps$4 = {
   question: null,
@@ -382,6 +383,7 @@ var defaultProps$4 = {
   buttonsTextStyle: null,
   inactiveButtonsTextStyle: null,
   questionsHeadingStyle: null,
+  feedbackTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   focusable: false,
@@ -414,6 +416,7 @@ var Question = function Question(_ref) {
     buttonsTextStyle = _ref.buttonsTextStyle,
     inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     questionsHeadingStyle = _ref.questionsHeadingStyle,
+    feedbackTextStyle = _ref.feedbackTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     focusable = _ref.focusable,
@@ -455,6 +458,10 @@ var Question = function Question(_ref) {
   var hasResultVisual = isImageFilled(answerImage) || isImageFilled(resultImage);
   var defaultResult = isTextFilled(result) ? result : null;
   var customResult = isTextFilled(customAnswerLabel) ? customAnswerLabel : null;
+  var finalResult = customResult || defaultResult;
+  var _ref4 = finalResult || {},
+    _ref4$textStyle = _ref4.textStyle,
+    resultTextStyle = _ref4$textStyle === undefined ? null : _ref4$textStyle;
   var onAnswersCollapse = useCallback(function () {
     setResultVisible(true);
   }, [setResultVisible]);
@@ -537,8 +544,9 @@ var Question = function Question(_ref) {
     playing: transitionPlaying,
     delay: (1 + answers.length) * transitionStagger,
     disabled: transitionDisabled
-  }, hasResult ? /*#__PURE__*/React.createElement(Text, Object.assign({}, customResult || defaultResult, {
-    className: styles$3.resultText
+  }, 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%",
@@ -551,33 +559,34 @@ Question.defaultProps = defaultProps$4;
 var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
 
 var propTypes$3 = {
-  id: PropTypes$1.string,
-  layout: PropTypes$1.oneOf(['top', 'middle', 'bottom', 'split']),
-  question: PropTypes.textElement,
-  answers: PropTypes.quizAnswers,
-  result: PropTypes$1.shape({
-    image: PropTypes.imageElement,
-    text: PropTypes.textElement
+  id: PropTypes.string,
+  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
+  question: PropTypes$1.textElement,
+  answers: PropTypes$1.quizAnswers,
+  result: PropTypes.shape({
+    image: PropTypes$1.imageElement,
+    text: PropTypes$1.textElement
   }),
-  resultImage: PropTypes.visualElement,
-  buttonsStyle: PropTypes.boxStyle,
-  inactiveButtonsStyle: PropTypes.boxStyle,
-  buttonsTextStyle: PropTypes.textStyle,
-  inactiveButtonsTextStyle: PropTypes.textStyle,
-  goodAnswerColor: PropTypes.color,
-  badAnswerColor: PropTypes.color,
-  withoutTrueFalse: PropTypes$1.bool,
-  spacing: PropTypes$1.number,
-  background: PropTypes.backgroundElement,
-  header: PropTypes.header,
-  footer: PropTypes.footer,
-  current: PropTypes$1.bool,
-  preload: PropTypes$1.bool,
-  ready: PropTypes$1.bool,
-  transitions: PropTypes.transitions,
-  transitionStagger: PropTypes$1.number,
-  type: PropTypes$1.string,
-  className: PropTypes$1.string
+  resultImage: PropTypes$1.visualElement,
+  buttonsStyle: PropTypes$1.boxStyle,
+  inactiveButtonsStyle: PropTypes$1.boxStyle,
+  buttonsTextStyle: PropTypes$1.textStyle,
+  inactiveButtonsTextStyle: PropTypes$1.textStyle,
+  feedbackTextStyle: PropTypes$1.textStyle,
+  goodAnswerColor: PropTypes$1.color,
+  badAnswerColor: PropTypes$1.color,
+  withoutTrueFalse: PropTypes.bool,
+  spacing: PropTypes.number,
+  background: PropTypes$1.backgroundElement,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
+  current: PropTypes.bool,
+  preload: PropTypes.bool,
+  ready: PropTypes.bool,
+  transitions: PropTypes$1.transitions,
+  transitionStagger: PropTypes.number,
+  type: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps$3 = {
   id: null,
@@ -590,6 +599,7 @@ var defaultProps$3 = {
   inactiveButtonsStyle: null,
   buttonsTextStyle: null,
   inactiveButtonsTextStyle: null,
+  feedbackTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   withoutTrueFalse: false,
@@ -616,6 +626,7 @@ var QuizScreen = function QuizScreen(_ref) {
     inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
     inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
+    feedbackTextStyle = _ref.feedbackTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     withoutTrueFalse = _ref.withoutTrueFalse,
@@ -797,6 +808,7 @@ var QuizScreen = function QuizScreen(_ref) {
     buttonsTextStyle: buttonsTextStyle,
     inactiveButtonsStyle: inactiveButtonsStyle,
     inactiveButtonsTextStyle: inactiveButtonsTextStyle,
+    feedbackTextStyle: feedbackTextStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
     withoutTrueFalse: withoutTrueFalse,
@@ -843,20 +855,20 @@ var QuizScreen = function QuizScreen(_ref) {
 QuizScreen.propTypes = propTypes$3;
 QuizScreen.defaultProps = defaultProps$3;
 
-var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyTitle":"micromag-screen-quiz-results-emptyTitle","emptyDescription":"micromag-screen-quiz-results-emptyDescription","title":"micromag-screen-quiz-results-title","isPlaceholder":"micromag-screen-quiz-results-isPlaceholder"};
+var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyTitle":"micromag-screen-quiz-results-emptyTitle","emptyDescription":"micromag-screen-quiz-results-emptyDescription","title":"micromag-screen-quiz-results-title"};
 
 var propTypes$2 = {
-  title: PropTypes.textElement,
-  description: PropTypes.textElement,
-  resultsHeadingStyle: PropTypes.textStyle,
-  resultsTextStyle: PropTypes.textStyle,
-  layout: PropTypes$1.string,
-  transitions: PropTypes.transitions,
-  transitionPlaying: PropTypes$1.bool,
-  transitionStagger: PropTypes$1.number,
-  transitionDisabled: PropTypes$1.bool,
-  className: PropTypes$1.string,
-  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
+  title: PropTypes$1.textElement,
+  description: PropTypes$1.textElement,
+  resultsHeadingStyle: PropTypes$1.textStyle,
+  resultsTextStyle: PropTypes$1.textStyle,
+  layout: PropTypes.string,
+  transitions: PropTypes$1.transitions,
+  transitionPlaying: PropTypes.bool,
+  transitionStagger: PropTypes.number,
+  transitionDisabled: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 };
 var defaultProps$2 = {
   title: null,
@@ -944,18 +956,18 @@ var Results = function Results(_ref) {
 Results.propTypes = propTypes$2;
 Results.defaultProps = defaultProps$2;
 
-var styles = {"container":"micromag-screen-quiz-title-container","emptyTitle":"micromag-screen-quiz-title-emptyTitle","emptyDescription":"micromag-screen-quiz-title-emptyDescription","title":"micromag-screen-quiz-title-title","description":"micromag-screen-quiz-title-description","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
+var styles = {"container":"micromag-screen-quiz-title-container","emptyTitle":"micromag-screen-quiz-title-emptyTitle","emptyDescription":"micromag-screen-quiz-title-emptyDescription","title":"micromag-screen-quiz-title-title","description":"micromag-screen-quiz-title-description"};
 
 var propTypes$1 = {
-  title: PropTypes.textElement,
-  description: PropTypes.textElement,
-  button: PropTypes.textElement,
-  layout: PropTypes$1.string,
-  focusable: PropTypes$1.bool,
-  buttonDisabled: PropTypes$1.bool,
-  className: PropTypes$1.string,
-  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])),
-  onClickButton: PropTypes$1.func
+  title: PropTypes$1.textElement,
+  description: PropTypes$1.textElement,
+  button: PropTypes$1.textElement,
+  layout: PropTypes.string,
+  focusable: PropTypes.bool,
+  buttonDisabled: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  onClickButton: PropTypes.func
 };
 var defaultProps$1 = {
   title: null,
@@ -1042,40 +1054,40 @@ Title.propTypes = propTypes$1;
 Title.defaultProps = defaultProps$1;
 
 var propTypes = {
-  id: PropTypes$1.string,
-  layout: PropTypes$1.oneOf(['top', 'middle', 'bottom', 'split']),
-  introLayout: PropTypes$1.oneOf(['top', 'middle', 'bottom', 'split']),
-  title: PropTypes.textElement,
-  description: PropTypes.textElement,
-  questions: PropTypes$1.arrayOf(PropTypes$1.shape({
-    text: PropTypes.textElement,
-    answers: PropTypes.quizAnswers
+  id: PropTypes.string,
+  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
+  introLayout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
+  title: PropTypes$1.textElement,
+  description: PropTypes$1.textElement,
+  questions: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes$1.textElement,
+    answers: PropTypes$1.quizAnswers
   })),
-  results: PropTypes$1.arrayOf(PropTypes$1.shape({
-    title: PropTypes.textElement,
-    description: PropTypes.textElement
+  results: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes$1.textElement,
+    description: PropTypes$1.textElement
   })),
-  buttonsStyle: PropTypes.boxStyle,
-  inactiveButtonsStyle: PropTypes.boxStyle,
-  buttonsTextStyle: PropTypes.textStyle,
-  inactiveButtonsTextStyle: PropTypes.textStyle,
-  questionsHeadingStyle: PropTypes.textStyle,
-  resultsHeadingStyle: PropTypes.textStyle,
-  resultsTextStyle: PropTypes.textStyle,
-  goodAnswerColor: PropTypes.color,
-  badAnswerColor: PropTypes.color,
-  spacing: PropTypes$1.number,
-  background: PropTypes.backgroundElement,
-  introButton: PropTypes.textElement,
-  introBackground: PropTypes.backgroundElement,
-  header: PropTypes.header,
-  footer: PropTypes.footer,
-  current: PropTypes$1.bool,
-  active: PropTypes$1.bool,
-  transitions: PropTypes.transitions,
-  transitionStagger: PropTypes$1.number,
-  type: PropTypes$1.string,
-  className: PropTypes$1.string
+  buttonsStyle: PropTypes$1.boxStyle,
+  inactiveButtonsStyle: PropTypes$1.boxStyle,
+  buttonsTextStyle: PropTypes$1.textStyle,
+  inactiveButtonsTextStyle: PropTypes$1.textStyle,
+  questionsHeadingStyle: PropTypes$1.textStyle,
+  resultsHeadingStyle: PropTypes$1.textStyle,
+  resultsTextStyle: PropTypes$1.textStyle,
+  goodAnswerColor: PropTypes$1.color,
+  badAnswerColor: PropTypes$1.color,
+  spacing: PropTypes.number,
+  background: PropTypes$1.backgroundElement,
+  introButton: PropTypes$1.textElement,
+  introBackground: PropTypes$1.backgroundElement,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  transitions: PropTypes$1.transitions,
+  transitionStagger: PropTypes.number,
+  type: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps = {
   id: null,
@@ -1674,6 +1686,16 @@ var definition = [{
           "value": "Inactive buttons"
         }]
       })
+    }, {
+      name: 'feedbackTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "4w7K2K",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Feedback text"
+        }]
+      })
     }, {
       name: 'goodAnswerColor',
       type: 'color',
@@ -2004,6 +2026,26 @@ var definition = [{
           "value": "Buttons text"
         }]
       })
+    }, {
+      name: 'inactiveButtonsTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "my7Kox",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Inactive buttons text"
+        }]
+      })
+    }, {
+      name: 'inactiveButtonsStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "xlFOg3",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Inactive buttons"
+        }]
+      })
     }, {
       name: 'questionsHeadingStyle',
       type: 'text-style-form',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.622",
+    "version": "0.3.628",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,19 +63,19 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.619",
-        "@micromag/data": "^0.3.619",
-        "@micromag/element-background": "^0.3.619",
-        "@micromag/element-button": "^0.3.619",
-        "@micromag/element-container": "^0.3.619",
-        "@micromag/element-footer": "^0.3.619",
-        "@micromag/element-header": "^0.3.619",
-        "@micromag/element-heading": "^0.3.619",
-        "@micromag/element-layout": "^0.3.619",
-        "@micromag/element-scroll": "^0.3.619",
-        "@micromag/element-text": "^0.3.619",
-        "@micromag/element-visual": "^0.3.619",
-        "@micromag/transforms": "^0.3.619",
+        "@micromag/core": "^0.3.628",
+        "@micromag/data": "^0.3.628",
+        "@micromag/element-background": "^0.3.628",
+        "@micromag/element-button": "^0.3.628",
+        "@micromag/element-container": "^0.3.628",
+        "@micromag/element-footer": "^0.3.628",
+        "@micromag/element-header": "^0.3.628",
+        "@micromag/element-heading": "^0.3.628",
+        "@micromag/element-layout": "^0.3.628",
+        "@micromag/element-scroll": "^0.3.628",
+        "@micromag/element-text": "^0.3.628",
+        "@micromag/element-visual": "^0.3.628",
+        "@micromag/transforms": "^0.3.628",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "classnames": "^2.2.6",
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "deaf9f7c2e43028aca2614bb20fc58665b63e458"
+    "gitHead": "6f1230244a2966c16e85b7d44583276421a38cca"
 }