@micromag/core 0.3.32 → 0.3.35

package/assets/css/styles.css

@@ -22,9 +22,9 @@
 .micromag-core-placeholders-map-container:before{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-core-placeholders-map-container{position:relative}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon{position:absolute;width:15%;height:15%;color:#1c1c1c}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:first-child{top:10%;left:40%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(2){top:35%;left:60%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(3){top:50%;left:15%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(4){top:70%;left:60%}.micromag-core-placeholders-map-container:before{content:"";display:block;opacity:.2;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAEyCAYAAABnKjtfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDU4NzhDN0UyODU2MTFFQkI3MTBBRTZGMTAwMEE1QTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDU4NzhDN0QyODU2MTFFQkI3MTBBRTZGMTAwMEE1QTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNTg3OEM3OTI4NTYxMUVCQjcxMEFFNkYxMDAwQTVBMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNTg3OEM3QTI4NTYxMUVCQjcxMEFFNkYxMDAwQTVBMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpB4mwIAAAxNSURBVHja7J1BchpJFoZTCl2ACPkCtepZs/WSvXtDX0ARHEH4CDKcQI5oDiCtxLa1pVfDfliMToDMETzkdOWomhGigMp872V+XwRht6MNRenzX68yX2Zd/NziAIxwySkAhAVAWACEBYQFQFgAhAWEBUBYAIQFhAVAWACEBYQFQFgAhAWEBUBYAIQFhAVIxfqKcwAWRN2+5tvXE8KCdlH/9KJuXzP/BwgLWlnUr3HzDxEWtF7+Z7WwDmEhtYCe6/r313v+v9X2NQmX/n0gLKRkn6yzWtbVoTe4YKsiSJy21zv//emYN2AcFqQSdnGsrJQEIMWnRm17FCQspC4JfjlVVhIWUvLZvTNMhbCgMVX/cU6qMkoAKbno8s2oYSEW865lRViIWQZMYrwxwkLXLLq6wUJYSCHrjWsxxYqwkL2sCAtd4SUdx5YVYaErWW9i1awIC13LOkklK8LCubLO3IGGa4QFDazdW9O1Q1jQLutUQlaEhVOYScnqoVsLji0DppIHQbcWtMU3s3yRPghKAmhbBtxqOBCEhTay+q2CVhoOhpIAPiJJfwAJC12QrD8AYaGLEYGkU64IC+fIOnaJp1zbwjgs7JYBM62ykrCwy5MTnMUiYeGYMmCqXVYSFgJzC7IirM0kXHf8njMrsiIshGRdWTlgalhbXJcsKwlLsi6sHTjClsfCqqwIWx4ry7J66NYqBz+68KtlWUnYsmSdWpcVYcvBxCwWwoJHbecVNSzs4kW9yekLkbB5yzrO7UshbJ6EiYE1woJ2wsTAKscvRw2bF17SL7nKSsLml6w3OcuKsHklq+kpV4QtT9Z5CV8WYfOQdVbKF0ZYu4TtL2clfWmEtStrNv0BCJs/8xJlRVibZNcfgLB5yzop+QQw02WHIiYGDsEyb1s166r0E0FJoB8v6e+ugFkshM1D1ltXyCwWJYH9mnWGrCSsBda1qDNOBaMEFrhBVkoCK8k6pQxAWCsUPzFADWuHiRN+8DA1LLRlXteta04FCYusCAsdynqLrAhrgTDluuJUIKwFWZlyRVgzsk6QFWEtycosFsKqZ42s58NMVzpZNSzJ9ttvDurfb478u73G3wm//w1h80TDkuy77WtUy9YFG4kvgbBlJGvXsnqWCJufrCsnvwv2fV0G9Dp+X4TNcETgs5JkdRFkfWSUIB9Cf4AUVZ2sw0jv/0jC5pWs0kuyR5GSVTRdSdjuCZtdSC7Jvo8o66aW9UXqy5Gw3Y8ISMnaq0UdRrjBCjxvX98kTzLCdier9BMHxwlGJJ6lTzTCdlOzPimQdRT5M8RutBC2WyZOR7L2In7Gpk5XhM2gZpWU1afqXYLP8en6XcNJR9jTmTvZWaw7F2+cdTddl1pOOsKeLqtkM0uoWXsJPmupJV0R9nRZb53cxMBdQlnDuKsamDiwJevYxR1n3eVZU7oi7HEsFMjqk7VK9HkvTsG4K8KeLuukIFlVpivCtiMMX0mtcg3TrSllXWpMV2662sl6Iyjr2KUZZ30vXR81/kBI2I9lnQrLOhD43BenaNwVYdsjuVdrqFklhNWarr4s+kFJsD9ZZ8KyVgKfrbZ2rf/x9hBWZ7JWQp+vOV37lATvyyq1C/ZIWNal4tp1EIQlYd8I/QESe7VKJ+tGcboOmrU8CfsXkrNYQ5d+nPW9kYGvitP1f+eGhP1L1rGgrA8KzsF3xbL+bSXFFbL+V1aJhYMxl2IfW7u+KP35+Lr1b40+l4XLOhGSdVjL2ldwHh6dzqGsgXunQb3UhJXsDxgpkvXZ6R53/b9zdFmorFJLsjXJGoTVOJTVd3tm+UoUVmoWa6hQVlPpWmJJ4OvVJ6FkHSqSNSx9WSqVde/iytISduXSD1+FH8BA0XnwowJah7L6H/3DvipQ2NTJ6vtZe8rOwzfFP6MPl66XlrDrxCd+qFBWrTdarr4ZrhA2vbDhBmug7PuLb5fZonz68B94aSXBayJZx4pusHbTVWvt2uqclZSw6wQJq23oajddtQ5jVa7lg0NKEvY18k3XaKcM2Cj7/prTtfUoSknCriInxO5J13SztXG6h7Fab2pXWkkQ+5KmFc1rtfrHlFAlCRuzK6un+Hv7dP2mWNajtiylJMgfzT0DfXfkSguEzRvNU7DulDKKGpZ0lWKMsKSrlRutkK49hEXYprCPSo/t5FbLUoRdIKsqTt7yvgRhfe36L8oB++laUsLOC5L1xUi6bhAWwhSs5nQN466UBHt4LUhYXwpoX01w1pZMpdSwpaTrUrmsZ/dblNDAXULChpusr8qF7SHsYXIeIWhuk6n5RmvgOmpqL0HYXMdgw7TrN+XHWbkO976lJLB5+Q8buC0NHG/PdfjU8dyF9emay7TspnHpfzZ03OMu3yx3YV8zGSUI67EejR13Z7VrKcJavuHyifpS16iqH/Z2QNgKYfOvX8P06lfD537YZe1KwlKnmkvX3IVdG0tYK8NUbdi7ITHCflwOWBiDDbNUWvdrPbUcqBA2L14aoj5n9L2O2hgDYd9Ima7H9nZ6Sb9nJmog6hMdc69hU9G2qWPZEPUlw3Pe+bhraTWspsv/o9O97BphhdEypPXd6X3wcNeyDmN/SM7Cpuwh2OypU58zvvwnrV1zFzb1GGxvp07NbZiqTbom2b0xV2FTN72E5SnhpqoUUcM/1pP3GTiWi59bMjyJfkjrs4NUwv5I9WG5LkKc41HS2tUh7Pk1LKQrBxD2TFlXuJTsZqtK+YE51rBe2E+4FD1ZvawPqT84R2F9uv6CU9ER8SbXkgDiIvbgvByFfcWn6OXAHwhLwlqRdeMEH/N0maGsC7yKxkaqds31posRgvgJ+0PyAHJLWOrXuNw1kpaE7QB6COIi7kpuCcsMV7xSYCSZrIHc2gsZIYh3s3Wv4UAuM5OVEYI4jLQcSC41rJfVtxTe4FaUcuDfTnDsNceEnSJrVGF7Wg7Geg27rmV9wqtoDDUdjOWSwI8IzLavCU5FxZcDlZaDuTIs66QWFuKma6XpgCwKu6hFRdb4so61HdQlssIHwva1HdSVMVl9GcCK2Pj4cdeBxgOzIOy6UbMia3yqOll7CHsaf25fX/AoqbAjrQenvYadO4atJGpXtVwpl/XW0YGVWlbVwmpN2BmyijDQWrtqFjbMXiFr+nQdaD9IbSWBF3Xq6GuVStcKYduxrpMVWald1QsbZB3jjRhqx1130dCtdeOYapWW9Q8rwkombGgPZPaKkQH1wtIeKM+4vskaWDroKyFZb0lWkRuryr31ClSWklVKWDqu0l7qq8avJgWVvOla1TdYLMWOx6iRnv0cBJVKWJ+ovyNrlBQd1mJmk6LSwoYyAFnPp2pc5gclCJpaWC/pr47Zq3Po13ImeZZrycKG9kBkPUyv8Wu/8RpwatIIG6ZakfWwqA+53iDF4BJZk+PPjd/F+mf96wBZ0yesl/O6/mGwpOVNwI17W9/f57ToKgmQ9W14aeQUL+QrXdh1LeuscFHHjhZJE8JOC5S1eTc/pga1IWxJTSxhj9QwHko9akzYknZieXBvc/NgUNickzVsgLbbPMIl36iwoYklB1n7jVq0chl3OJUqbA5NLM30HHCZz1dYy9sGDXYEJUEzFzZsyLYyJmjzUo+kmXBoxYGX1D+7dW1E1GbHPRSWsGGPKwuyelHHiFqusGEJ9sqIrENkLVdYS3tcDUnWcoW1tiHb2LFspFhhrW3INkLWcoUNz2u10st6R81aLhfGHjWLrCSsCZpd/EwCkLDquXcsOQGn/zldftbqwRnZzhzKLgnC8hNkBfXChr4AZAX1JQGygpmEHTrFjz4HhN2VlR1SwERJgKxgJmHDhACygnphabwGM8LSHghmhL1z9AWAAWFpYgFTwoaaFUC1sH3H7BUYEpYdqcGMsP9kJAC6IuZMl+8HCHurcoMFqhN2UN9c0cQC6oWlLwDMCBtGApAV1AtLXwCYEZa+ADAzSsC2QWAmYX2y3nEawULC0hcAJhKWjiswI6wfrhqSrGBB2MqxEwsYEZb2QDAjbL8eCaAvAMQ5tN2mLwPukRW08NGwlr/8PyArWBA27HFFEwuor2FpDwQzwrJtEJgRlvZAMCMs7YFgRliefQVm8OOwPxxNLGBI2J+cBrDCJacAEBYAYQEQFhAWAGEBEBYQFgBhARAWEBYAYQEQFhAWAGEBEBYQFgBhARAWEBYAYQEQFhAWAGEBEBZy4D8CDACfbQUc6LQcNAAAAABJRU5ErkJggg==");background-size:cover}
 .micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-box{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-icon{margin-bottom:5px;color:#1c1c1c}.micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-label{font-size:.75em;color:#1c1c1c}
 .micromag-core-screens-screen-sizer-container,.micromag-core-screens-screen-sizer-frame{position:relative}.micromag-core-screens-screen-sizer-screen{position:absolute;top:0;left:0;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}
-.micromag-core-screens-screen-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-core-screens-screen-container address,.micromag-core-screens-screen-container blockquote,.micromag-core-screens-screen-container caption,.micromag-core-screens-screen-container dl,.micromag-core-screens-screen-container figure,.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container label,.micromag-core-screens-screen-container legend,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container ol,.micromag-core-screens-screen-container p,.micromag-core-screens-screen-container pre,.micromag-core-screens-screen-container ul{margin:0;padding:0}.micromag-core-screens-screen-container *,.micromag-core-screens-screen-container :after,.micromag-core-screens-screen-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-core-screens-screen-container{background-color:#1c1c1c;color:#fff}
+.micromag-core-screens-screen-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-core-screens-screen-container address,.micromag-core-screens-screen-container blockquote,.micromag-core-screens-screen-container caption,.micromag-core-screens-screen-container dl,.micromag-core-screens-screen-container figure,.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container label,.micromag-core-screens-screen-container legend,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container ol,.micromag-core-screens-screen-container p,.micromag-core-screens-screen-container pre,.micromag-core-screens-screen-container ul{margin:0;padding:0}.micromag-core-screens-screen-container *,.micromag-core-screens-screen-container :after,.micromag-core-screens-screen-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container p{font-weight:400}.micromag-core-screens-screen-container{background-color:#1c1c1c;color:#fff}
 .micromag-core-screens-screen-placeholder-screen{overflow:hidden;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.micromag-core-screens-preview-screen{overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.micromag-core-screens-preview-stack{position:relative;overflow:hidden}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackScreen{position:relative;z-index:10}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem{position:absolute;top:0;left:0;border:1px solid #adadad;background-color:#494949}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:first-child{z-index:3}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(2){z-index:2}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(3){z-index:1}.micromag-core-screens-preview-screen{overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .micromag-core-placeholders-conversation-container{padding:10px;text-align:center;mix-blend-mode:difference}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-icon{width:25px;height:auto;margin:3px auto auto;color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-message{width:80%;height:23px;margin:3px 1px 0;background-color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage0{width:65%}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage1{margin-left:auto}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage2{width:65%}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage3{width:50%;margin-left:auto}
 .micromag-core-placeholders-quiz-answer-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;mix-blend-mode:difference}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-block{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-answer{width:12px;margin-right:6px;padding:0 1px;color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-answerIcon{display:block;width:100%;height:100%;color:hsla(0,0%,100%,.6)}.micromag-core-placeholders-quiz-answer-container.micromag-core-placeholders-quiz-answer-good .micromag-core-placeholders-quiz-answer-answer{padding:0}
 .micromag-core-placeholders-survey-answer-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;mix-blend-mode:difference}.micromag-core-placeholders-survey-answer-container .micromag-core-placeholders-survey-answer-block{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-core-placeholders-survey-answer-container .micromag-core-placeholders-survey-answer-percent{margin-left:4px}.micromag-core-placeholders-survey-answer-container .micromag-core-placeholders-survey-answer-percentIcon{padding:1px;color:hsla(0,0%,100%,.6)}

package/es/components.js

@@ -3589,7 +3589,7 @@ ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
 
-var styles$5 = {"screen":"micromag-core-screens-preview-screen"};
+var styles$5 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
 var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
 var propTypes$7 = {
@@ -3631,13 +3631,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames([styles$5.screen, _defineProperty({}, className, !withSize)])
   }, props));
-  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+  var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
   }, screenElement) : screenElement;
+  return screenWithSize;
 };
 
 ScreenPreview.propTypes = propTypes$7;

package/es/hooks.js

@@ -549,7 +549,7 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
 
       if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
         return _objectSpread(_objectSpread({}, newConfig), {}, _defineProperty({}, type, {
-          families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [name])
+          families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? "".concat(name, ":400,700") : name])
         }));
       }
 
@@ -1125,17 +1125,20 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
   var fullHeight = height !== null ? height : calculatedHeight;
 
   var _ref6 = opts || {},
+      _ref6$screenWidth = _ref6.screenWidth,
+      screenWidth = _ref6$screenWidth === void 0 ? 320 : _ref6$screenWidth,
+      _ref6$screenHeight = _ref6.screenHeight,
+      screenHeight = _ref6$screenHeight === void 0 ? 480 : _ref6$screenHeight,
       _ref6$withoutMaxSize = _ref6.withoutMaxSize,
       withoutMaxSize = _ref6$withoutMaxSize === void 0 ? false : _ref6$withoutMaxSize,
       _ref6$landscapeMinHei = _ref6.landscapeMinHeight,
       landscapeMinHeight = _ref6$landscapeMinHei === void 0 ? 600 : _ref6$landscapeMinHei,
-      _ref6$landscapeHeight = _ref6.landscapeHeightRatio,
-      landscapeHeightRatio = _ref6$landscapeHeight === void 0 ? 2 / 3 : _ref6$landscapeHeight,
-      _ref6$screenRatio = _ref6.screenRatio,
-      screenRatio = _ref6$screenRatio === void 0 ? 320 / 480 : _ref6$screenRatio,
       _ref6$landscapeMinRat = _ref6.landscapeMinRatio,
-      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat;
+      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat,
+      _ref6$withoutScale = _ref6.withoutScale,
+      withoutScale = _ref6$withoutScale === void 0 ? false : _ref6$withoutScale;
 
+  var screenRatio = screenWidth / screenHeight;
   var elementRatio = fullWidth / fullHeight;
   var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
   var landscapeWithMaxSize = landscape && !withoutMaxSize;
@@ -1147,7 +1150,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     if (fullHeight < landscapeMinHeight) {
       menuOverScreen = true;
     } else {
-      finalHeight = Math.round(fullHeight * landscapeHeightRatio);
+      finalHeight = fullHeight - 100;
     }
 
     finalWidth = Math.round(finalHeight * screenRatio);
@@ -1161,15 +1164,17 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     finalHeight -= 1;
   }
 
+  var scale = finalWidth / screenWidth;
   var screenSize = useScreenSize(_objectSpread({
-    width: finalWidth,
-    height: finalHeight,
+    width: withoutScale ? finalWidth : screenWidth,
+    height: withoutScale ? finalHeight : finalHeight / scale,
     landscape: landscape,
     menuOverScreen: menuOverScreen
   }, opts));
   return {
     ref: ref,
-    screenSize: screenSize
+    screenSize: screenSize,
+    scale: !withoutScale ? scale : null
   };
 };
 

package/lib/components.js

@@ -3612,7 +3612,7 @@ ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React__default["default"].memo(ScreenPlaceholder);
 
-var styles$5 = {"screen":"micromag-core-screens-preview-screen"};
+var styles$5 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
 var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
 var propTypes$7 = {
@@ -3654,13 +3654,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames__default["default"]([styles$5.screen, _defineProperty__default["default"]({}, className, !withSize)])
   }, props));
-  return withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
+  var screenWithSize = withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
   }, screenElement) : screenElement;
+  return screenWithSize;
 };
 
 ScreenPreview.propTypes = propTypes$7;

package/lib/hooks.js

@@ -585,7 +585,7 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
 
       if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
         return _objectSpread__default["default"](_objectSpread__default["default"]({}, newConfig), {}, _defineProperty__default["default"]({}, type, {
-          families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [name])
+          families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? "".concat(name, ":400,700") : name])
         }));
       }
 
@@ -1161,17 +1161,20 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
   var fullHeight = height !== null ? height : calculatedHeight;
 
   var _ref6 = opts || {},
+      _ref6$screenWidth = _ref6.screenWidth,
+      screenWidth = _ref6$screenWidth === void 0 ? 320 : _ref6$screenWidth,
+      _ref6$screenHeight = _ref6.screenHeight,
+      screenHeight = _ref6$screenHeight === void 0 ? 480 : _ref6$screenHeight,
       _ref6$withoutMaxSize = _ref6.withoutMaxSize,
       withoutMaxSize = _ref6$withoutMaxSize === void 0 ? false : _ref6$withoutMaxSize,
       _ref6$landscapeMinHei = _ref6.landscapeMinHeight,
       landscapeMinHeight = _ref6$landscapeMinHei === void 0 ? 600 : _ref6$landscapeMinHei,
-      _ref6$landscapeHeight = _ref6.landscapeHeightRatio,
-      landscapeHeightRatio = _ref6$landscapeHeight === void 0 ? 2 / 3 : _ref6$landscapeHeight,
-      _ref6$screenRatio = _ref6.screenRatio,
-      screenRatio = _ref6$screenRatio === void 0 ? 320 / 480 : _ref6$screenRatio,
       _ref6$landscapeMinRat = _ref6.landscapeMinRatio,
-      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat;
+      landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 2 / 3 : _ref6$landscapeMinRat,
+      _ref6$withoutScale = _ref6.withoutScale,
+      withoutScale = _ref6$withoutScale === void 0 ? false : _ref6$withoutScale;
 
+  var screenRatio = screenWidth / screenHeight;
   var elementRatio = fullWidth / fullHeight;
   var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
   var landscapeWithMaxSize = landscape && !withoutMaxSize;
@@ -1183,7 +1186,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     if (fullHeight < landscapeMinHeight) {
       menuOverScreen = true;
     } else {
-      finalHeight = Math.round(fullHeight * landscapeHeightRatio);
+      finalHeight = fullHeight - 100;
     }
 
     finalWidth = Math.round(finalHeight * screenRatio);
@@ -1197,15 +1200,17 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     finalHeight -= 1;
   }
 
+  var scale = finalWidth / screenWidth;
   var screenSize = useScreenSize(_objectSpread__default["default"]({
-    width: finalWidth,
-    height: finalHeight,
+    width: withoutScale ? finalWidth : screenWidth,
+    height: withoutScale ? finalHeight : finalHeight / scale,
     landscape: landscape,
     menuOverScreen: menuOverScreen
   }, opts));
   return {
     ref: ref,
-    screenSize: screenSize
+    screenSize: screenSize,
+    scale: !withoutScale ? scale : null
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.32",
+    "version": "0.3.35",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fff733f2cf1fea7ffc64179d7da0c9601d61e23e"
+    "gitHead": "4fd919d4dadf04fd8265b6bae91a9c5b77981db0"
 }

package/scss/_placeholders.scss

@@ -28,7 +28,7 @@
     *,
     *::before,
     *::after {
-      box-sizing: border-box; // 1
+        box-sizing: border-box; // 1
     }
 
     h1,
@@ -51,6 +51,17 @@
     legend {
         @extend %reset-viewer-elements;
     }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    li {
+        font-weight: normal;
+    }
 }
 
 %reset-button {