@micromag/viewer 0.4.49 → 0.4.50

package/es/index.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { useRoutes, useUrlGenerator, useMemoryRouter, RoutesProvider } from '@folklore/routes';
 import isEmpty from 'lodash/isEmpty';
 import uniq from 'lodash/uniq';
-import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import { Link, useLocation, Switch, Route, Router } from 'wouter';
 import { useViewerSize, usePlaybackContext, useViewerWebView, useViewerInteraction, useStory, StoryProvider, ScreenSizeProvider, ViewerProvider, SettingsProvider, GoogleKeysProvider, GoogleMapsClientProvider, ComponentsProvider, SCREENS_NAMESPACE, VisitorProvider, PlaybackProvider, TrackingProvider } from '@micromag/core/contexts';
 import { useIsVisible, useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaCurrentTime, useMediaDuration, useMediaReady, useMediaState, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen, useActivityDetector, useSupportsWebp } from '@micromag/core/hooks';
@@ -20,6 +20,7 @@ import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$1,
 import { getStyleFromColor, easings, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { ShareIncentive } from '@micromag/elements/all';
 import FocusLock from 'react-focus-lock';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useSpringRef, useSpring } from '@react-spring/core';
 import Scroll from '@micromag/element-scroll';
 import ShareOptions from '@micromag/element-share-options';
@@ -292,7 +293,9 @@ function Button(_ref) {
     refButton = _ref$refButton === void 0 ? null : _ref$refButton,
     props = _objectWithoutProperties(_ref, _excluded$a);
   var finalLabel = label || children;
-  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
+  var text = finalLabel !== null ? /*#__PURE__*/jsx(Label, {
+    children: finalLabel
+  }) : null;
   var hasChildren = label !== null && children !== null;
   var hasIcon = icon !== null;
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
@@ -306,39 +309,52 @@ function Button(_ref) {
     brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
   var primaryColor = getStyleFromColor(brandPrimaryColor, 'color');
   var buttonStyles = _objectSpread({}, primaryColor);
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.icon, iconClassName])
-  }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.label, labelClassName])
-  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, iconPosition === 'left' ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.icon, styles$i.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
-  }, icon) : null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.center, styles$i.label, labelClassName])
-  }, text), iconPosition === 'right' ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.icon, styles$i.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
-  }, icon) : null, hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
+  var content = /*#__PURE__*/jsxs(Fragment, {
+    children: [hasInlineIcon ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("span", {
+        className: classNames([styles$i.icon, iconClassName]),
+        children: icon
+      }), text !== null ? /*#__PURE__*/jsx("span", {
+        className: classNames([styles$i.label, labelClassName]),
+        children: text
+      }) : null]
+    }) : null, hasIconColumns ? /*#__PURE__*/jsxs(Fragment, {
+      children: [iconPosition === 'left' ? /*#__PURE__*/jsx("span", {
+        className: classNames([styles$i.icon, styles$i.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')]),
+        children: icon
+      }) : null, /*#__PURE__*/jsx("span", {
+        className: classNames([styles$i.center, styles$i.label, labelClassName]),
+        children: text
+      }), iconPosition === 'right' ? /*#__PURE__*/jsx("span", {
+        className: classNames([styles$i.icon, styles$i.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')]),
+        children: icon
+      }) : null, hasChildren ? children : null]
+    }) : null, !hasIcon ? text : null, hasChildren ? children : null]
+  });
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
     }, styles$i.linkDisabled, disabled)]);
-    return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
+    return external || direct ? /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({}, props), {}, {
       href: disabled ? null : href,
       className: linkClassNames,
       style: buttonStyles,
       onClick: onClick,
       target: external ? target : null,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
+      tabIndex: focusable ? '' : '-1',
+      children: content
+    })) : /*#__PURE__*/jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
       href: href,
       className: linkClassNames,
       style: buttonStyles,
       onClick: onClick,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1'
-    }), content);
+      tabIndex: focusable ? '' : '-1',
+      children: content
+    }));
   }
-  return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
+  return /*#__PURE__*/jsx("button", _objectSpread(_objectSpread({}, props), {}, {
     type: type,
     className: buttonClassNames,
     style: buttonStyles,
@@ -346,8 +362,9 @@ function Button(_ref) {
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
     "aria-label": ariaLabel,
-    tabIndex: focusable ? '0' : '-1'
-  }), content);
+    tabIndex: focusable ? '0' : '-1',
+    children: content
+  }));
 }
 
 var styles$h = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
@@ -359,7 +376,7 @@ function IconButton(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
+  return /*#__PURE__*/jsx(Button, _objectSpread({
     className: classNames([styles$h.container, className]),
     labelClassName: styles$h.label,
     iconClassName: classNames([styles$h.icon, iconClassName])
@@ -374,7 +391,7 @@ function CloseMenuButton(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$8);
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
     className: classNames([className]),
     label: intl.formatMessage({
       id: "dIvwcD",
@@ -383,36 +400,40 @@ function CloseMenuButton(_ref) {
         "value": "Close"
       }]
     }),
-    icon: /*#__PURE__*/React.createElement("svg", {
+    icon: /*#__PURE__*/jsxs("svg", {
       width: "19",
       height: "23",
       viewBox: "0 0 19 23",
       fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, !single ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mask", {
-      id: "path-1-inside-1_560_19911",
-      fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
-    })), /*#__PURE__*/React.createElement("path", {
-      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
-      fill: "currentColor",
-      mask: "url(#path-1-inside-1_560_19911)"
-    })) : null, /*#__PURE__*/React.createElement("rect", {
-      x: "3.5",
-      y: "0.5",
-      width: "15",
-      height: "19",
-      rx: "2.5",
-      stroke: "currentColor"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M7.35333 6.35333L14.6467 13.6467",
-      stroke: "currentColor",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M7.35333 13.6467L14.6467 6.35333",
-      stroke: "currentColor"
-    }))
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [!single ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("mask", {
+          id: "path-1-inside-1_560_19911",
+          fill: "currentColor",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
+          })
+        }), /*#__PURE__*/jsx("path", {
+          d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
+          fill: "currentColor",
+          mask: "url(#path-1-inside-1_560_19911)"
+        })]
+      }) : null, /*#__PURE__*/jsx("rect", {
+        x: "3.5",
+        y: "0.5",
+        width: "15",
+        height: "19",
+        rx: "2.5",
+        stroke: "currentColor"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M7.35333 6.35333L14.6467 13.6467",
+        stroke: "currentColor",
+        strokeLinejoin: "round"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M7.35333 13.6467L14.6467 6.35333",
+        stroke: "currentColor"
+      })]
+    })
   }, props));
 }
 
@@ -423,7 +444,7 @@ function MenuButton(_ref) {
     _ref.iconClassName;
     var props = _objectWithoutProperties(_ref, _excluded$7);
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
     className: classNames([className]),
     label: intl.formatMessage({
       id: "F/gl4b",
@@ -433,29 +454,31 @@ function MenuButton(_ref) {
       }]
     }),
     iconPosition: "right",
-    icon: /*#__PURE__*/React.createElement("svg", {
+    icon: /*#__PURE__*/jsxs("svg", {
       width: "19",
       height: "23",
       viewBox: "0 0 19 23",
       fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("mask", {
-      id: "path-1-inside-1_572_15622",
-      fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
-    })), /*#__PURE__*/React.createElement("path", {
-      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
-      fill: "currentColor",
-      mask: "url(#path-1-inside-1_572_15622)"
-    }), /*#__PURE__*/React.createElement("rect", {
-      x: "3.5",
-      y: "0.5",
-      width: "15",
-      height: "19",
-      rx: "2.5",
-      stroke: "currentColor"
-    }))
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/jsx("mask", {
+        id: "path-1-inside-1_572_15622",
+        fill: "currentColor",
+        children: /*#__PURE__*/jsx("path", {
+          d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
+        })
+      }), /*#__PURE__*/jsx("path", {
+        d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
+        fill: "currentColor",
+        mask: "url(#path-1-inside-1_572_15622)"
+      }), /*#__PURE__*/jsx("rect", {
+        x: "3.5",
+        y: "0.5",
+        width: "15",
+        height: "19",
+        rx: "2.5",
+        stroke: "currentColor"
+      })]
+    })
   }, props));
 }
 
@@ -465,7 +488,7 @@ function ShareButton(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$6);
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
     className: classNames([className]),
     label: intl.formatMessage({
       id: "7tw6U2",
@@ -475,23 +498,24 @@ function ShareButton(_ref) {
       }]
     }),
     iconPosition: "left",
-    icon: /*#__PURE__*/React.createElement("svg", {
+    icon: /*#__PURE__*/jsxs("svg", {
       width: "16",
       height: "22",
       viewBox: "0 0 16 22",
       fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.55806 0.183058C7.80213 -0.0610194 8.19786 -0.0610194 8.44194 0.183058L12.4194 4.16053C12.6635 4.40461 12.6635 4.80034 12.4194 5.04442C12.1753 5.2885 11.7796 5.2885 11.5355 5.04442L8.625 2.13388V11.25H7.375V2.13388L4.46446 5.04442C4.22039 5.2885 3.82466 5.2885 3.58058 5.04442C3.3365 4.80034 3.3365 4.40461 3.58058 4.16053L7.55806 0.183058Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M16 18.25V10.25C16 8.59315 14.6569 7.25 13 7.25C14.1046 7.25 15 8.59315 15 10.25V18.25C15 19.3546 14.1046 20.25 13 20.25H3C1.89543 20.25 1 19.3546 1 18.25V10.25C1 8.59315 1.89543 7.25 3 7.25C1.34315 7.25 0 8.59315 0 10.25V18.25C0 19.9069 1.34315 21.25 3 21.25H13C14.6569 21.25 16 19.9069 16 18.25Z",
-      fill: "currentColor"
-    }))
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7.55806 0.183058C7.80213 -0.0610194 8.19786 -0.0610194 8.44194 0.183058L12.4194 4.16053C12.6635 4.40461 12.6635 4.80034 12.4194 5.04442C12.1753 5.2885 11.7796 5.2885 11.5355 5.04442L8.625 2.13388V11.25H7.375V2.13388L4.46446 5.04442C4.22039 5.2885 3.82466 5.2885 3.58058 5.04442C3.3365 4.80034 3.3365 4.40461 3.58058 4.16053L7.55806 0.183058Z",
+        fill: "currentColor"
+      }), /*#__PURE__*/jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16 18.25V10.25C16 8.59315 14.6569 7.25 13 7.25C14.1046 7.25 15 8.59315 15 10.25V18.25C15 19.3546 14.1046 20.25 13 20.25H3C1.89543 20.25 1 19.3546 1 18.25V10.25C1 8.59315 1.89543 7.25 3 7.25C1.34315 7.25 0 8.59315 0 10.25V18.25C0 19.9069 1.34315 21.25 3 21.25H13C14.6569 21.25 16 19.9069 16 18.25Z",
+        fill: "currentColor"
+      })]
+    })
   }, props));
 }
 
@@ -510,23 +534,26 @@ function ToggleButton(_ref) {
     _ref$toggledButtonCla = _ref.toggledButtonClassName,
     toggledButtonClassName = _ref$toggledButtonCla === void 0 ? null : _ref$toggledButtonCla;
   if (button === null) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.container, className])
-  }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$g.normal,
-    style: {
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat(p * -100, "%)");
-      })
-    }
-  }, button), /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames([styles$g.toggled, toggledButtonClassName]),
-    style: {
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat((p - 1) * -100, "%)");
-      })
-    }
-  }, toggledButton));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$g.container, className]),
+    children: [/*#__PURE__*/jsx(animated.div, {
+      className: styles$g.normal,
+      style: {
+        transform: progressSpring.to(function (p) {
+          return "translateY(".concat(p * -100, "%)");
+        })
+      },
+      children: button
+    }), /*#__PURE__*/jsx(animated.div, {
+      className: classNames([styles$g.toggled, toggledButtonClassName]),
+      style: {
+        transform: progressSpring.to(function (p) {
+          return "translateY(".concat((p - 1) * -100, "%)");
+        })
+      },
+      children: toggledButton
+    })]
+  });
 }
 
 var styles$f = {"container":"micromag-viewer-menus-menu-container-container","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","backdrop":"micromag-viewer-menus-menu-container-backdrop"};
@@ -547,33 +574,35 @@ function ViewerMenuContainer(_ref) {
     _ref3$color = _ref3.color,
     brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
   var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles$f.container, className]),
     style: {
       pointerEvents: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$f.heightContainer,
-    style: _objectSpread({
-      opacity: progressSpring,
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat((1 - p) * -2, "rem)");
-      }),
-      pointerEvents: progressSpring.to(function (p) {
-        return p < 0.25 ? 'none' : 'auto';
-      }),
-      zIndex: progressSpring.to(function (p) {
-        return Math.round(2 + p);
-      })
-    }, backgroundColorStyle)
-  }, children), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$f.backdrop,
-    style: {
-      opacity: progressSpring.to(function (p) {
-        return easings.easeOutQuint(p);
-      })
-    }
-  }));
+    },
+    children: [/*#__PURE__*/jsx(animated.div, {
+      className: styles$f.heightContainer,
+      style: _objectSpread({
+        opacity: progressSpring,
+        transform: progressSpring.to(function (p) {
+          return "translateY(".concat((1 - p) * -2, "rem)");
+        }),
+        pointerEvents: progressSpring.to(function (p) {
+          return p < 0.25 ? 'none' : 'auto';
+        }),
+        zIndex: progressSpring.to(function (p) {
+          return Math.round(2 + p);
+        })
+      }, backgroundColorStyle),
+      children: children
+    }), /*#__PURE__*/jsx(animated.div, {
+      className: styles$f.backdrop,
+      style: {
+        opacity: progressSpring.to(function (p) {
+          return easings.easeOutQuint(p);
+        })
+      }
+    })]
+  });
 }
 
 var styles$e = {"container":"micromag-viewer-menus-menu-dot-container","dot":"micromag-viewer-menus-menu-dot-dot","progress":"micromag-viewer-menus-menu-dot-progress","vertical":"micromag-viewer-menus-menu-dot-vertical"};
@@ -627,7 +656,7 @@ function ViewerMenuDot(_ref) {
       immediate: !current
     });
   }, [active, current, subIndex, count, setDotSpringProps]);
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/jsx("button", {
     type: "button",
     className: classNames([styles$e.container, className, _defineProperty(_defineProperty({}, styles$e.active, current), styles$e.vertical, vertical)]),
     onClick: function onClick() {
@@ -640,18 +669,20 @@ function ViewerMenuDot(_ref) {
       }
     },
     tabIndex: "-1",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$e.dot,
-    style: {
-      backgroundColor: secondary
-    }
-  }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$e.progress,
-    style: _objectSpread(_objectSpread({}, dotSpringStyles), {}, {
-      backgroundColor: primary
+    "aria-hidden": "true",
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$e.dot,
+      style: {
+        backgroundColor: secondary
+      },
+      children: /*#__PURE__*/jsx(animated.div, {
+        className: styles$e.progress,
+        style: _objectSpread(_objectSpread({}, dotSpringStyles), {}, {
+          backgroundColor: primary
+        })
+      })
     })
-  })));
+  });
 }
 
 var styles$d = {"container":"micromag-viewer-menus-menu-dots-container","dot":"micromag-viewer-menus-menu-dots-dot","withButtons":"micromag-viewer-menus-menu-dots-withButtons","closeButton":"micromag-viewer-menus-menu-dots-closeButton","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
@@ -693,7 +724,7 @@ function ViewerMenuDots(_ref) {
   });
   var _ref4 = props || {},
     style = _ref4.style;
-  return /*#__PURE__*/React.createElement("nav", {
+  return /*#__PURE__*/jsxs("nav", {
     className: classNames([styles$d.container, _defineProperty(_defineProperty({}, styles$d.withButtons, closeable || buttons !== null), styles$d.vertical, direction === 'vertical'), className]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
@@ -717,55 +748,58 @@ function ViewerMenuDots(_ref) {
       current: currentIndex + 1,
       total: items.length
     }),
-    style: style
-  }, items.map(function (item, index) {
-    var _ref6 = item || {},
-      _ref6$current = _ref6.current,
-      current = _ref6$current === void 0 ? false : _ref6$current,
-      _ref6$count = _ref6.count,
-      count = _ref6$count === void 0 ? 1 : _ref6$count,
-      _ref6$subIndex = _ref6.subIndex,
-      subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
-    return /*#__PURE__*/React.createElement(ViewerMenuDot, {
-      current: current,
-      active: index <= currentIndex,
-      colors: colors,
-      count: count,
-      subIndex: subIndex,
-      className: styles$d.dot,
-      onClick: function onClick() {
-        if ((withItemClick || withoutScreensMenu) && onClickDot !== null) {
-          onClickDot(item);
-        } else if (!withItemClick && onClickScreensMenu !== null) {
-          onClickScreensMenu();
-        }
+    style: style,
+    children: [items.map(function (item, index) {
+      var _ref6 = item || {},
+        _ref6$current = _ref6.current,
+        current = _ref6$current === void 0 ? false : _ref6$current,
+        _ref6$count = _ref6.count,
+        count = _ref6$count === void 0 ? 1 : _ref6$count,
+        _ref6$subIndex = _ref6.subIndex,
+        subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
+      return /*#__PURE__*/jsx(ViewerMenuDot, {
+        current: current,
+        active: index <= currentIndex,
+        colors: colors,
+        count: count,
+        subIndex: subIndex,
+        className: styles$d.dot,
+        onClick: function onClick() {
+          if ((withItemClick || withoutScreensMenu) && onClickDot !== null) {
+            onClickDot(item);
+          } else if (!withItemClick && onClickScreensMenu !== null) {
+            onClickScreensMenu();
+          }
+        },
+        vertical: direction === 'vertical'
+      });
+    }), closeable ? /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: styles$d.closeButton,
+      onClick: onClose,
+      title: intl.formatMessage({
+        id: "dj/p/q",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Close"
+        }]
+      }),
+      "aria-label": intl.formatMessage({
+        id: "dj/p/q",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Close"
+        }]
+      }),
+      style: {
+        color: primary
       },
-      vertical: direction === 'vertical'
-    });
-  }), closeable ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles$d.closeButton,
-    onClick: onClose,
-    title: intl.formatMessage({
-      id: "dj/p/q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      id: "dj/p/q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    style: {
-      color: primary
-    }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null, buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$d.buttons
-  }, buttons) : null);
+      children: /*#__PURE__*/jsx(CloseIcon, {})
+    }) : null, buttons !== null ? /*#__PURE__*/jsx("div", {
+      className: styles$d.buttons,
+      children: buttons
+    }) : null]
+  });
 }
 
 function MicromagIcon(_ref) {
@@ -773,49 +807,50 @@ function MicromagIcon(_ref) {
     color = _ref$color === void 0 ? 'currentColor' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 315.77 56.94",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m34.3.69v55.55h-10.42v-23.82l-4.31,23.82h-4.86l-4.31-23.82v23.82H0V.69h10.42l6.74,32.08L23.89.69h10.42Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m46.8.69v55.55h-10.42V.69h10.42Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m64.57,16.53c0-4.72-.35-6.11-2.64-6.11s-2.64,1.39-2.64,6.11v23.89c0,4.72.35,6.11,2.64,6.11s2.64-1.39,2.64-6.11v-6.74h10.42v7.43c0,11.18-4.65,15.83-13.05,15.83s-13.05-4.65-13.05-15.83V15.83c0-11.18,4.65-15.83,13.05-15.83s13.05,4.65,13.05,15.83v7.43h-10.42v-6.74Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m104.08,56.24h-10.42c-.69-.83-.76-2.85-.76-4.93v-10.69c0-4.03-1.39-4.72-5.42-4.72v20.35h-10.42V.69h10.42c11.87,0,15.83,3.96,15.83,15.14v4.93c0,6.11-1.87,10.07-5.14,12.43,3.54,1.46,5.14,4.31,5.14,9.51v8.61c0,2.08.07,4.1.76,4.93Zm-16.6-45.13v14.37c4.03,0,5.42-.69,5.42-4.72v-4.93c0-4.03-1.39-4.72-5.42-4.72Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m173.63.69v55.55h-10.42v-23.82l-4.31,23.82h-4.86l-4.31-23.82v23.82h-10.42V.69h10.42l6.74,32.08L163.22.69h10.42Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m191.68,46.8h-5.49l-.76,9.44h-10.42L181.82.69h14.23l6.81,55.55h-10.42l-.76-9.44Zm-.83-10.42l-1.87-24.65-1.94,24.65h3.82Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m219.25,23.26v-6.74c0-4.72-.42-6.11-2.64-6.11s-2.64,1.39-2.64,6.11v23.89c0,4.72.35,6.11,2.64,6.11s2.64-1.39,2.64-6.11v-2.57h-2.64v-10.42h13.05v28.82h-4.17l-1.67-3.96c-2.15,2.71-5.07,4.65-8.82,4.65-7.5,0-11.46-4.65-11.46-15.83V15.83c0-11.18,4.65-15.83,13.05-15.83s13.05,4.65,13.05,15.83v7.43h-10.42Z"
-  }), /*#__PURE__*/React.createElement("rect", {
-    fill: color,
-    x: "105.65",
-    y: ".69",
-    width: "31.25",
-    height: "55.55",
-    rx: "3",
-    ry: "3"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m304.96,7.72c-2.02,0-2.55,1.05-2.55,4.29v13.04c0,3.24.52,4.29,2.55,4.29s2.55-1.05,2.55-4.29v-13.04c0-3.24-.52-4.29-2.55-4.29Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m283.9,8.07h-.7v20.93h.7c3.42,0,4.46-.52,4.46-3.94v-13.04c0-3.42-1.05-3.94-4.46-3.94Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "m313.68.68h-75.86c-1.15,0-2.08.93-2.08,2.08v31.54c0,1.15.93,2.08,2.08,2.08h75.86c1.15,0,2.08-.93,2.08-2.08V2.76c0-1.15-.93-2.08-2.08-2.08Zm-67,32.15c-4.53,0-6.31-2.34-6.31-9.87h3.49c0,5.34.77,6.38,2.83,6.38,1.64,0,2.27-.84,2.27-3.77s-.98-4.19-3.56-6.21c-2.48-1.92-4.85-3.84-4.85-8.41,0-4.12,1.74-6.73,5.79-6.73s5.93,2.62,5.93,8.48h-3.49c0-4.19-.94-4.99-2.44-4.99s-2.3.8-2.3,3.24,1.22,3.77,3.28,5.34c2.96,2.27,5.13,4.22,5.13,9.28,0,4.6-1.67,7.25-5.75,7.25Zm17.82-24.76h-3.94v24.41h-3.49V8.07h-3.94v-3.49h11.37v3.49Zm13.46,16.99c0,5.62-1.99,7.78-6.03,7.78s-6.03-2.16-6.03-7.78V4.58h3.49v20.47c0,3.24.52,4.29,2.55,4.29s2.55-1.05,2.55-4.29V4.58h3.49v20.47Zm13.88,0c0,6.03-2.34,7.43-7.95,7.43h-4.19V4.58h4.19c5.62,0,7.95,1.33,7.95,7.43v13.04Zm5.33,7.43h-3.49V4.58h3.49v27.9Zm13.81-7.43c0,5.62-1.99,7.78-6.03,7.78s-6.03-2.16-6.03-7.78v-13.04c0-5.62,1.99-7.78,6.03-7.78s6.03,2.16,6.03,7.78v13.04Z"
-  }));
+    className: className,
+    children: [/*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m34.3.69v55.55h-10.42v-23.82l-4.31,23.82h-4.86l-4.31-23.82v23.82H0V.69h10.42l6.74,32.08L23.89.69h10.42Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m46.8.69v55.55h-10.42V.69h10.42Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m64.57,16.53c0-4.72-.35-6.11-2.64-6.11s-2.64,1.39-2.64,6.11v23.89c0,4.72.35,6.11,2.64,6.11s2.64-1.39,2.64-6.11v-6.74h10.42v7.43c0,11.18-4.65,15.83-13.05,15.83s-13.05-4.65-13.05-15.83V15.83c0-11.18,4.65-15.83,13.05-15.83s13.05,4.65,13.05,15.83v7.43h-10.42v-6.74Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m104.08,56.24h-10.42c-.69-.83-.76-2.85-.76-4.93v-10.69c0-4.03-1.39-4.72-5.42-4.72v20.35h-10.42V.69h10.42c11.87,0,15.83,3.96,15.83,15.14v4.93c0,6.11-1.87,10.07-5.14,12.43,3.54,1.46,5.14,4.31,5.14,9.51v8.61c0,2.08.07,4.1.76,4.93Zm-16.6-45.13v14.37c4.03,0,5.42-.69,5.42-4.72v-4.93c0-4.03-1.39-4.72-5.42-4.72Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m173.63.69v55.55h-10.42v-23.82l-4.31,23.82h-4.86l-4.31-23.82v23.82h-10.42V.69h10.42l6.74,32.08L163.22.69h10.42Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m191.68,46.8h-5.49l-.76,9.44h-10.42L181.82.69h14.23l6.81,55.55h-10.42l-.76-9.44Zm-.83-10.42l-1.87-24.65-1.94,24.65h3.82Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m219.25,23.26v-6.74c0-4.72-.42-6.11-2.64-6.11s-2.64,1.39-2.64,6.11v23.89c0,4.72.35,6.11,2.64,6.11s2.64-1.39,2.64-6.11v-2.57h-2.64v-10.42h13.05v28.82h-4.17l-1.67-3.96c-2.15,2.71-5.07,4.65-8.82,4.65-7.5,0-11.46-4.65-11.46-15.83V15.83c0-11.18,4.65-15.83,13.05-15.83s13.05,4.65,13.05,15.83v7.43h-10.42Z"
+    }), /*#__PURE__*/jsx("rect", {
+      fill: color,
+      x: "105.65",
+      y: ".69",
+      width: "31.25",
+      height: "55.55",
+      rx: "3",
+      ry: "3"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m304.96,7.72c-2.02,0-2.55,1.05-2.55,4.29v13.04c0,3.24.52,4.29,2.55,4.29s2.55-1.05,2.55-4.29v-13.04c0-3.24-.52-4.29-2.55-4.29Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m283.9,8.07h-.7v20.93h.7c3.42,0,4.46-.52,4.46-3.94v-13.04c0-3.42-1.05-3.94-4.46-3.94Z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "m313.68.68h-75.86c-1.15,0-2.08.93-2.08,2.08v31.54c0,1.15.93,2.08,2.08,2.08h75.86c1.15,0,2.08-.93,2.08-2.08V2.76c0-1.15-.93-2.08-2.08-2.08Zm-67,32.15c-4.53,0-6.31-2.34-6.31-9.87h3.49c0,5.34.77,6.38,2.83,6.38,1.64,0,2.27-.84,2.27-3.77s-.98-4.19-3.56-6.21c-2.48-1.92-4.85-3.84-4.85-8.41,0-4.12,1.74-6.73,5.79-6.73s5.93,2.62,5.93,8.48h-3.49c0-4.19-.94-4.99-2.44-4.99s-2.3.8-2.3,3.24,1.22,3.77,3.28,5.34c2.96,2.27,5.13,4.22,5.13,9.28,0,4.6-1.67,7.25-5.75,7.25Zm17.82-24.76h-3.94v24.41h-3.49V8.07h-3.94v-3.49h11.37v3.49Zm13.46,16.99c0,5.62-1.99,7.78-6.03,7.78s-6.03-2.16-6.03-7.78V4.58h3.49v20.47c0,3.24.52,4.29,2.55,4.29s2.55-1.05,2.55-4.29V4.58h3.49v20.47Zm13.88,0c0,6.03-2.34,7.43-7.95,7.43h-4.19V4.58h4.19c5.62,0,7.95,1.33,7.95,7.43v13.04Zm5.33,7.43h-3.49V4.58h3.49v27.9Zm13.81-7.43c0,5.62-1.99,7.78-6.03,7.78s-6.03-2.16-6.03-7.78v-13.04c0-5.62,1.99-7.78,6.03-7.78s6.03,2.16,6.03,7.78v13.04Z"
+    })]
+  });
 }
 
 var styles$c = {"container":"micromag-viewer-partials-micromag-branding-container","link":"micromag-viewer-partials-micromag-branding-link","text":"micromag-viewer-partials-micromag-branding-text","icon":"micromag-viewer-partials-micromag-branding-icon"};
@@ -823,47 +858,51 @@ var styles$c = {"container":"micromag-viewer-partials-micromag-branding-containe
 function MicromagBranding(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, className])
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "https://micromag.media",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    className: styles$c.link
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$c.text
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "LiMAIC",
-    defaultMessage: [{
-      "type": 0,
-      "value": "This Micromag was"
-    }]
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "TDAOl2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "created with"
-    }]
-  })), /*#__PURE__*/React.createElement(MicromagIcon, {
-    className: styles$c.icon
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$c.container, className]),
+    children: /*#__PURE__*/jsxs("a", {
+      href: "https://micromag.media",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: styles$c.link,
+      children: [/*#__PURE__*/jsxs("span", {
+        className: styles$c.text,
+        children: [/*#__PURE__*/jsx(FormattedMessage, {
+          id: "LiMAIC",
+          defaultMessage: [{
+            "type": 0,
+            "value": "This Micromag was"
+          }]
+        }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx(FormattedMessage, {
+          id: "TDAOl2",
+          defaultMessage: [{
+            "type": 0,
+            "value": "created with"
+          }]
+        })]
+      }), /*#__PURE__*/jsx(MicromagIcon, {
+        className: styles$c.icon
+      })]
+    })
+  });
 }
 
 function StackIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "11.5px",
     height: "17.5px",
     viewBox: "0 0 11.5 17.5",
-    className: classNames([className])
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "10",
-    height: "16"
-  }), /*#__PURE__*/React.createElement("polygon", {
-    points: "10.5 1.5 10.5 16.5 1.5 16.5 1.5 17.5 11.5 17.5 11.5 1.5 10.5 1.5"
-  }));
+    className: classNames([className]),
+    children: [/*#__PURE__*/jsx("rect", {
+      width: "10",
+      height: "16"
+    }), /*#__PURE__*/jsx("polygon", {
+      points: "10.5 1.5 10.5 16.5 1.5 16.5 1.5 17.5 11.5 17.5 11.5 1.5 10.5 1.5"
+    })]
+  });
 }
 
 var styles$b = {"container":"micromag-viewer-menus-menu-screen-container","button":"micromag-viewer-menus-menu-screen-button","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon","screen":"micromag-viewer-menus-menu-screen-screen"};
@@ -918,43 +957,47 @@ function ViewerMenuScreen(_ref) {
       "value": "(current screen)"
     }]
   })) : '');
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles$b.container, className, _defineProperty({}, styles$b.isCurrent, current)]),
     style: {
       paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
     },
-    ref: refVisible
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles$b.button,
-    onClick: function onClick() {
-      var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      if (e !== null) {
-        e.stopPropagation();
-      }
-      if (_onClick !== null) {
-        _onClick(item);
-      }
-    },
-    "aria-label": screenAriaLabel,
-    tabIndex: focusable ? '0' : '-1'
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$b.inner
-  }, count > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: styles$b.subScreenBadge
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$b.subScreenCount
-  }, count), /*#__PURE__*/React.createElement(StackIcon, {
-    className: styles$b.subScreenIcon
-  })) : null, screenWidth > 0 && screenHeight > 0 && (visible || alwaysRender) ? /*#__PURE__*/React.createElement(ScreenPreview, {
-    className: styles$b.screen,
-    screenWidth: screenWidth,
-    screenHeight: screenHeight,
-    screen: screen,
-    focusable: focusable,
-    active: focusable,
-    withSize: true
-  }) : null));
+    ref: refVisible,
+    children: [/*#__PURE__*/jsx("button", {
+      type: "button",
+      className: styles$b.button,
+      onClick: function onClick() {
+        var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        if (e !== null) {
+          e.stopPropagation();
+        }
+        if (_onClick !== null) {
+          _onClick(item);
+        }
+      },
+      "aria-label": screenAriaLabel,
+      tabIndex: focusable ? '0' : '-1'
+    }), /*#__PURE__*/jsxs("div", {
+      className: styles$b.inner,
+      children: [count > 1 ? /*#__PURE__*/jsxs("div", {
+        className: styles$b.subScreenBadge,
+        children: [/*#__PURE__*/jsx("span", {
+          className: styles$b.subScreenCount,
+          children: count
+        }), /*#__PURE__*/jsx(StackIcon, {
+          className: styles$b.subScreenIcon
+        })]
+      }) : null, screenWidth > 0 && screenHeight > 0 && (visible || alwaysRender) ? /*#__PURE__*/jsx(ScreenPreview, {
+        className: styles$b.screen,
+        screenWidth: screenWidth,
+        screenHeight: screenHeight,
+        screen: screen,
+        focusable: focusable,
+        active: focusable,
+        withSize: true
+      }) : null]
+    })]
+  });
 }
 
 var styles$a = {"container":"micromag-viewer-menus-menu-preview-container","content":"micromag-viewer-menus-menu-preview-content","scroll":"micromag-viewer-menus-menu-preview-scroll","scrollee":"micromag-viewer-menus-menu-preview-scrollee","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","micromagBrandingSeparator":"micromag-viewer-menus-menu-preview-micromagBrandingSeparator","micromagBrandingContainer":"micromag-viewer-menus-menu-preview-micromagBrandingContainer"};
@@ -1031,72 +1074,84 @@ function ViewerMenuPreview(_ref) {
   // );
 
   var menuPaddingTop = paddingTop + 10;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames([styles$a.container, className]),
     style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
-    "aria-hidden": focusable ? null : 'true'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.content,
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$a.scroll,
-    scrolleeClassName: styles$a.scrollee,
-    disabled: scrollDisabled
-  }, hasTitle && header === null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$a.titleContainer,
-    style: {
-      paddingTop: menuPaddingTop
-    }
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: styles$a.title,
-    style: _objectSpread({}, finalTitleStyles)
-  }, title)) : /*#__PURE__*/React.createElement("div", {
-    className: styles$a.headerContainer,
-    style: {
-      paddingTop: menuPaddingTop
-    }
-  }, header), /*#__PURE__*/React.createElement("nav", {
-    className: styles$a.nav,
-    style: !hasTitle ? {
-      paddingTop: paddingTop
-    } : null
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$a.items
-  }, items.map(function (item, index) {
-    var _ref7 = item || {},
-      screenId = _ref7.screenId;
-    var itemStyles = {
-      width: "".concat(100 / thumbsPerLine, "%")
-    };
-    var _ref8 = screenSize || {},
-      screenWidth = _ref8.width,
-      screenHeight = _ref8.height;
-    return /*#__PURE__*/React.createElement("li", {
-      key: "item-".concat(screenId),
-      className: styles$a.item,
-      style: itemStyles
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$a.inner
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles$a.frame, _defineProperty({}, styles$a.isLoading, false)]),
-      style: {
-        paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
-      }
-    }, /*#__PURE__*/React.createElement(ViewerMenuScreen, {
-      className: styles$a.screen,
-      item: item,
-      index: index,
-      screenSize: screenSize,
-      onClick: onClickScreen,
-      focusable: focusable
-    }))));
-  }))), footer, withMicromagBranding ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.micromagBrandingSeparator
-  }), /*#__PURE__*/React.createElement(MicromagBranding, {
-    className: styles$a.micromagBrandingContainer
-  })) : null)));
+    "aria-hidden": focusable ? null : 'true',
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$a.content,
+      ref: containerRef,
+      children: /*#__PURE__*/jsxs(Scroll, {
+        className: styles$a.scroll,
+        scrolleeClassName: styles$a.scrollee,
+        disabled: scrollDisabled,
+        children: [hasTitle && header === null ? /*#__PURE__*/jsx("div", {
+          className: styles$a.titleContainer,
+          style: {
+            paddingTop: menuPaddingTop
+          },
+          children: /*#__PURE__*/jsx("h1", {
+            className: styles$a.title,
+            style: _objectSpread({}, finalTitleStyles),
+            children: title
+          })
+        }) : /*#__PURE__*/jsx("div", {
+          className: styles$a.headerContainer,
+          style: {
+            paddingTop: menuPaddingTop
+          },
+          children: header
+        }), /*#__PURE__*/jsx("nav", {
+          className: styles$a.nav,
+          style: !hasTitle ? {
+            paddingTop: paddingTop
+          } : null,
+          children: /*#__PURE__*/jsx("ul", {
+            className: styles$a.items,
+            children: items.map(function (item, index) {
+              var _ref7 = item || {},
+                screenId = _ref7.screenId;
+              var itemStyles = {
+                width: "".concat(100 / thumbsPerLine, "%")
+              };
+              var _ref8 = screenSize || {},
+                screenWidth = _ref8.width,
+                screenHeight = _ref8.height;
+              return /*#__PURE__*/jsx("li", {
+                className: styles$a.item,
+                style: itemStyles,
+                children: /*#__PURE__*/jsx("div", {
+                  className: styles$a.inner,
+                  children: /*#__PURE__*/jsx("div", {
+                    className: classNames([styles$a.frame, _defineProperty({}, styles$a.isLoading, false)]),
+                    style: {
+                      paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
+                    },
+                    children: /*#__PURE__*/jsx(ViewerMenuScreen, {
+                      className: styles$a.screen,
+                      item: item,
+                      index: index,
+                      screenSize: screenSize,
+                      onClick: onClickScreen,
+                      focusable: focusable
+                    })
+                  })
+                })
+              }, "item-".concat(screenId));
+            })
+          })
+        }), footer, withMicromagBranding ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("div", {
+            className: styles$a.micromagBrandingSeparator
+          }), /*#__PURE__*/jsx(MicromagBranding, {
+            className: styles$a.micromagBrandingContainer
+          })]
+        }) : null]
+      })
+    })
+  });
 }
 
 var styles$9 = {"container":"micromag-viewer-partials-micromag-preview-container","title":"micromag-viewer-partials-micromag-preview-title","cover":"micromag-viewer-partials-micromag-preview-cover","info":"micromag-viewer-partials-micromag-preview-info","url":"micromag-viewer-partials-micromag-preview-url"};
@@ -1112,22 +1167,29 @@ function MicromagPreview(_ref) {
     description = _ref$description === void 0 ? null : _ref$description,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.cover
-  }, /*#__PURE__*/React.createElement(ScreenPreview, {
-    screen: screen,
-    width: 100,
-    height: 150,
-    withSize: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$9.info
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$9.title
-  }, title), url ? /*#__PURE__*/React.createElement("div", {
-    className: styles$9.url
-  }, url) : null, /*#__PURE__*/React.createElement("p", null, description)));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$9.container, className]),
+    children: [/*#__PURE__*/jsx("div", {
+      className: styles$9.cover,
+      children: /*#__PURE__*/jsx(ScreenPreview, {
+        screen: screen,
+        width: 100,
+        height: 150,
+        withSize: true
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: styles$9.info,
+      children: [/*#__PURE__*/jsx("h3", {
+        className: styles$9.title,
+        children: title
+      }), url ? /*#__PURE__*/jsx("div", {
+        className: styles$9.url,
+        children: url
+      }) : null, /*#__PURE__*/jsx("p", {
+        children: description
+      })]
+    })]
+  });
 }
 
 var styles$8 = {"container":"micromag-viewer-menus-menu-share-container","content":"micromag-viewer-menus-menu-share-content","scroll":"micromag-viewer-menus-menu-share-scroll","inner":"micromag-viewer-menus-menu-share-inner","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","options":"micromag-viewer-menus-menu-share-options"};
@@ -1201,55 +1263,63 @@ function ViewerMenuShare(_ref) {
   var finalShareUrl = useMemo(function () {
     return shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex + 1) : shareUrl;
   }, [shareUrl, shareCurrentScreen, currentScreenIndex]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames([styles$8.container, className]),
     style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
-    "aria-hidden": focusable ? null : 'true'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$8.scroll
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner,
-    style: {
-      paddingTop: paddingTop
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.header
-  }, /*#__PURE__*/React.createElement(MicromagPreview, {
-    className: styles$8.preview,
-    screen: shareCurrentScreen ? currentScreen : coverScreen,
-    title: title,
-    url: finalShareUrl,
-    description: description
-  }), currentScreenIndex !== 0 ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.mode
-  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    name: "currentScreen",
-    value: "currentScreen",
-    onChange: onShareModeChange,
-    checked: shareCurrentScreen
-  }), /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "xuPbeq",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Start from the current screen"
-    }]
-  }))) : null), /*#__PURE__*/React.createElement(ShareOptions, {
-    className: styles$8.options,
-    itemClassName: styles$8.optionItem,
-    buttonClassName: styles$8.optionButton,
-    title: title,
-    options: shareOptions,
-    url: finalShareUrl,
-    focusable: focusable,
-    onShare: onShare,
-    theme: viewerTheme,
-    shareCurrentScreen: shareCurrentScreen
-  })))));
+    "aria-hidden": focusable ? null : 'true',
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$8.content,
+      children: /*#__PURE__*/jsx(Scroll, {
+        className: styles$8.scroll,
+        children: /*#__PURE__*/jsxs("div", {
+          className: styles$8.inner,
+          style: {
+            paddingTop: paddingTop
+          },
+          children: [/*#__PURE__*/jsxs("div", {
+            className: styles$8.header,
+            children: [/*#__PURE__*/jsx(MicromagPreview, {
+              className: styles$8.preview,
+              screen: shareCurrentScreen ? currentScreen : coverScreen,
+              title: title,
+              url: finalShareUrl,
+              description: description
+            }), currentScreenIndex !== 0 ? /*#__PURE__*/jsx("div", {
+              className: styles$8.mode,
+              children: /*#__PURE__*/jsxs("label", {
+                children: [/*#__PURE__*/jsx("input", {
+                  type: "checkbox",
+                  name: "currentScreen",
+                  value: "currentScreen",
+                  onChange: onShareModeChange,
+                  checked: shareCurrentScreen
+                }), /*#__PURE__*/jsx(FormattedMessage, {
+                  id: "xuPbeq",
+                  defaultMessage: [{
+                    "type": 0,
+                    "value": "Start from the current screen"
+                  }]
+                })]
+              })
+            }) : null]
+          }), /*#__PURE__*/jsx(ShareOptions, {
+            className: styles$8.options,
+            itemClassName: styles$8.optionItem,
+            buttonClassName: styles$8.optionButton,
+            title: title,
+            options: shareOptions,
+            url: finalShareUrl,
+            focusable: focusable,
+            onShare: onShare,
+            theme: viewerTheme,
+            shareCurrentScreen: shareCurrentScreen
+          })]
+        })
+      })
+    })
+  });
 }
 
 var styles$7 = {"container":"micromag-viewer-container","landscape":"micromag-viewer-landscape","screensFrame":"micromag-viewer-screensFrame","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","ariaAnnouncement":"micromag-viewer-ariaAnnouncement","accessibilityLinks":"micromag-viewer-accessibilityLinks","accessibilityButton":"micromag-viewer-accessibilityButton","disabled":"micromag-viewer-disabled","tooltip":"micromag-viewer-tooltip","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","menuContainer":"micromag-viewer-menuContainer","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screenContainer":"micromag-viewer-screenContainer","screen":"micromag-viewer-screen","preload":"micromag-viewer-preload","visible":"micromag-viewer-visible","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","navigationHint":"micromag-viewer-navigationHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
@@ -1558,134 +1628,148 @@ function ViewerMenu(_ref) {
       setMenuMounted(false);
     }
   }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.menuNavContainer, _defineProperty(_defineProperty({}, styles$7.withShadow, withShadow), styles$7.isOpened, menuOpened || shareOpened)]),
-    ref: refDots,
-    style: {
-      width: menuWidth
-    }
-  }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$7.menuTopContainer,
-    ref: navContainerRef
-  }, menuItems.map(function (item) {
-    if (item === 'share') {
-      return !withoutShareMenu || afterShareMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
-        className: styles$7.menuItem
-      }, bindShareDrag()), !withoutShareMenu ? /*#__PURE__*/React.createElement(ToggleButton, {
-        className: styles$7.slidingButton,
-        button: /*#__PURE__*/React.createElement(ShareButton, {
-          className: styles$7.menuButton,
-          onClick: onOpenShare,
-          theme: menuTheme,
-          iconPosition: "left",
-          focusable: !shareOpened
-        }),
-        toggledButton: /*#__PURE__*/React.createElement(FocusLock, {
-          group: "share",
-          disabled: !shareOpened,
-          returnFocus: true
-        }, /*#__PURE__*/React.createElement(CloseMenuButton, {
-          className: styles$7.menuButton,
-          onClick: onCloseShare,
-          theme: menuTheme,
-          iconPosition: "left",
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames([styles$7.menuNavContainer, _defineProperty(_defineProperty({}, styles$7.withShadow, withShadow), styles$7.isOpened, menuOpened || shareOpened)]),
+      ref: refDots,
+      style: {
+        width: menuWidth
+      },
+      children: [/*#__PURE__*/jsx("nav", {
+        className: styles$7.menuTopContainer,
+        ref: navContainerRef,
+        children: menuItems.map(function (item) {
+          if (item === 'share') {
+            return !withoutShareMenu || afterShareMenuButton !== null ? /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+              className: styles$7.menuItem
+            }, bindShareDrag()), {}, {
+              children: [!withoutShareMenu ? /*#__PURE__*/jsx(ToggleButton, {
+                className: styles$7.slidingButton,
+                button: /*#__PURE__*/jsx(ShareButton, {
+                  className: styles$7.menuButton,
+                  onClick: onOpenShare,
+                  theme: menuTheme,
+                  iconPosition: "left",
+                  focusable: !shareOpened
+                }),
+                toggledButton: /*#__PURE__*/jsx(FocusLock, {
+                  group: "share",
+                  disabled: !shareOpened,
+                  returnFocus: true,
+                  children: /*#__PURE__*/jsx(CloseMenuButton, {
+                    className: styles$7.menuButton,
+                    onClick: onCloseShare,
+                    theme: menuTheme,
+                    iconPosition: "left",
+                    focusable: shareOpened,
+                    single: true
+                  })
+                }),
+                progressSpring: shareOpenedProgress
+              }) : null, afterShareMenuButton]
+            })) : null;
+          }
+          if (item === 'main') {
+            return !withoutScreensMenu || beforeScreensMenuButton !== null ? /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+              className: styles$7.menuItem
+            }, bindMenuDrag()), {}, {
+              children: [beforeScreensMenuButton, !withoutScreensMenu ? /*#__PURE__*/jsx(ToggleButton, {
+                className: styles$7.slidingButton,
+                button: /*#__PURE__*/jsx(MenuButton, {
+                  className: styles$7.menuButton,
+                  iconClassName: styles$7.menuButtonIcon,
+                  onClick: onOpenMenu,
+                  theme: menuTheme,
+                  focusable: !menuOpened
+                }),
+                toggledButton: /*#__PURE__*/jsx(FocusLock, {
+                  group: "screens",
+                  disabled: !menuOpened,
+                  returnFocus: true,
+                  children: /*#__PURE__*/jsx(CloseMenuButton, {
+                    className: styles$7.menuButton,
+                    onClick: onCloseMenu,
+                    theme: menuTheme,
+                    iconPosition: "right",
+                    focusable: menuOpened
+                  })
+                }),
+                progressSpring: menuOpenedProgress,
+                toggledButtonClassName: styles$7.screensMenuButtonToggled
+              }) : null]
+            })) : null;
+          }
+          return item || null;
+        })
+      }), /*#__PURE__*/jsx(ViewerMenuDots, _objectSpread(_objectSpread({}, menuTheme), {}, {
+        direction: "horizontal",
+        items: items,
+        onClickDot: onClickScreen,
+        onClickScreensMenu: onOpenMenu,
+        buttons: menuDotsButtons,
+        closeable: closeable,
+        withItemClick: withDotItemClick,
+        withoutScreensMenu: withoutScreensMenu,
+        withoutShareMenu: withoutShareMenu,
+        onClose: onClickCloseViewer,
+        className: styles$7.dots
+      }))]
+    }), /*#__PURE__*/jsx(ViewerMenuContainer, {
+      className: styles$7.menuContainer,
+      progressSpring: shareOpenedProgress,
+      theme: viewerTheme,
+      children: draggingShare || shareOpened ? /*#__PURE__*/jsx(FocusLock, {
+        group: "share",
+        disabled: !shareOpened,
+        returnFocus: true,
+        children: /*#__PURE__*/jsx(ViewerMenuShare, {
+          viewerTheme: viewerTheme,
+          className: styles$7.menuShare,
+          title: title,
+          description: description,
+          menuWidth: menuWidth,
+          paddingTop: navContainerHeight,
           focusable: shareOpened,
-          single: true
-        })),
-        progressSpring: shareOpenedProgress
-      }) : null, afterShareMenuButton) : null;
-    }
-    if (item === 'main') {
-      return !withoutScreensMenu || beforeScreensMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
-        className: styles$7.menuItem
-      }, bindMenuDrag()), beforeScreensMenuButton, !withoutScreensMenu ? /*#__PURE__*/React.createElement(ToggleButton, {
-        className: styles$7.slidingButton,
-        button: /*#__PURE__*/React.createElement(MenuButton, {
-          className: styles$7.menuButton,
-          iconClassName: styles$7.menuButtonIcon,
-          onClick: onOpenMenu,
-          theme: menuTheme,
-          focusable: !menuOpened
-        }),
-        toggledButton: /*#__PURE__*/React.createElement(FocusLock, {
-          group: "screens",
-          disabled: !menuOpened,
-          returnFocus: true
-        }, /*#__PURE__*/React.createElement(CloseMenuButton, {
-          className: styles$7.menuButton,
-          onClick: onCloseMenu,
-          theme: menuTheme,
-          iconPosition: "right",
-          focusable: menuOpened
-        })),
-        progressSpring: menuOpenedProgress,
-        toggledButtonClassName: styles$7.screensMenuButtonToggled
-      }) : null) : null;
-    }
-    return item || null;
-  })), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
-    direction: "horizontal",
-    items: items,
-    onClickDot: onClickScreen,
-    onClickScreensMenu: onOpenMenu,
-    buttons: menuDotsButtons,
-    closeable: closeable,
-    withItemClick: withDotItemClick,
-    withoutScreensMenu: withoutScreensMenu,
-    withoutShareMenu: withoutShareMenu,
-    onClose: onClickCloseViewer,
-    className: styles$7.dots
-  }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
-    className: styles$7.menuContainer,
-    progressSpring: shareOpenedProgress,
-    theme: viewerTheme
-  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(FocusLock, {
-    group: "share",
-    disabled: !shareOpened,
-    returnFocus: true
-  }, /*#__PURE__*/React.createElement(ViewerMenuShare, {
-    viewerTheme: viewerTheme,
-    className: styles$7.menuShare,
-    title: title,
-    description: description,
-    menuWidth: menuWidth,
-    paddingTop: navContainerHeight,
-    focusable: shareOpened,
-    items: items,
-    shareOptions: shareOptions,
-    currentScreenIndex: currentScreenIndex,
-    shareUrl: shareUrl,
-    onShare: onShare,
-    onClose: onCloseShare
-  })) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
-    className: styles$7.menuContainer,
-    progressSpring: menuOpenedProgress,
-    theme: viewerTheme
-  }, menuMounted ? /*#__PURE__*/React.createElement(FocusLock, {
-    group: "screens",
-    disabled: !menuOpened,
-    returnFocus: true
-  }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
-    viewerTheme: viewerTheme,
-    header: previewHeader,
-    footer: previewFooter,
-    title: title,
-    className: styles$7.menuPreview,
-    screenSize: screenSize,
-    menuWidth: menuWidth,
-    paddingTop: navContainerHeight,
-    items: items,
-    currentScreenIndex: currentScreenIndex,
-    shareUrl: shareUrl,
-    onShare: onShare,
-    onClickScreen: onClickScreen,
-    onClose: onCloseMenu,
-    scrollDisabled: draggingMenu,
-    toggleFullscreen: toggleFullscreen,
-    fullscreenActive: fullscreenActive,
-    fullscreenEnabled: fullscreenEnabled,
-    withMicromagBranding: withMicromagBranding
-  })) : null));
+          items: items,
+          shareOptions: shareOptions,
+          currentScreenIndex: currentScreenIndex,
+          shareUrl: shareUrl,
+          onShare: onShare,
+          onClose: onCloseShare
+        })
+      }) : null
+    }), /*#__PURE__*/jsx(ViewerMenuContainer, {
+      className: styles$7.menuContainer,
+      progressSpring: menuOpenedProgress,
+      theme: viewerTheme,
+      children: menuMounted ? /*#__PURE__*/jsx(FocusLock, {
+        group: "screens",
+        disabled: !menuOpened,
+        returnFocus: true,
+        children: /*#__PURE__*/jsx(ViewerMenuPreview, {
+          viewerTheme: viewerTheme,
+          header: previewHeader,
+          footer: previewFooter,
+          title: title,
+          className: styles$7.menuPreview,
+          screenSize: screenSize,
+          menuWidth: menuWidth,
+          paddingTop: navContainerHeight,
+          items: items,
+          currentScreenIndex: currentScreenIndex,
+          shareUrl: shareUrl,
+          onShare: onShare,
+          onClickScreen: onClickScreen,
+          onClose: onCloseMenu,
+          scrollDisabled: draggingMenu,
+          toggleFullscreen: toggleFullscreen,
+          fullscreenActive: fullscreenActive,
+          fullscreenEnabled: fullscreenEnabled,
+          withMicromagBranding: withMicromagBranding
+        })
+      }) : null
+    })]
+  });
 }
 
 var styles$6 = {"container":"micromag-viewer-screen-container","inner":"micromag-viewer-screen-inner"};
@@ -1735,27 +1819,29 @@ function ViewerScreen(_ref) {
   if (!mounted && !current) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.inner,
-    style: {
-      width: width,
-      height: height,
-      transform: scale !== null ? "scale(".concat(scale, ")") : null,
-      transformOrigin: scale !== null ? '0 0' : null,
-      opacity: mounted ? 1 : null
-    }
-  }, mounted || current ? /*#__PURE__*/React.createElement(Screen, {
-    screen: screen,
-    renderContext: renderContext,
-    screenState: screenState,
-    index: index,
-    active: active,
-    preload: preload,
-    current: current,
-    mediaRef: mediaRef
-  }) : null));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$6.container, className]),
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$6.inner,
+      style: {
+        width: width,
+        height: height,
+        transform: scale !== null ? "scale(".concat(scale, ")") : null,
+        transformOrigin: scale !== null ? '0 0' : null,
+        opacity: mounted ? 1 : null
+      },
+      children: mounted || current ? /*#__PURE__*/jsx(Screen, {
+        screen: screen,
+        renderContext: renderContext,
+        screenState: screenState,
+        index: index,
+        active: active,
+        preload: preload,
+        current: current,
+        mediaRef: mediaRef
+      }) : null
+    })
+  });
 }
 
 var styles$5 = {"container":"micromag-viewer-buttons-navigation-button-container","arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
@@ -1769,23 +1855,24 @@ function NavigationButton(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$3);
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
     className: classNames([styles$5.container, styles$5[direction], className]),
     onClick: function onClick(e) {
       e.stopPropagation();
       _onClick();
     },
     iconPosition: direction === 'next' ? 'right' : 'left',
-    icon: /*#__PURE__*/React.createElement("svg", {
+    icon: /*#__PURE__*/jsx("svg", {
       className: styles$5.arrow,
       xmlns: "http://www.w3.org/2000/svg",
       width: "10",
       height: "16",
       viewBox: "0 0 10 16",
-      fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("polygon", {
-      points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
-    }))
+      fill: "currentColor",
+      children: /*#__PURE__*/jsx("polygon", {
+        points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
+      })
+    })
   }, props));
 }
 
@@ -1796,13 +1883,15 @@ function ArrowHint(_ref) {
     withoutShadow = _ref$withoutShadow === void 0 ? false : _ref$withoutShadow,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, className, _defineProperty({}, styles$4.withoutShadow, withoutShadow)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.inner
-  }, /*#__PURE__*/React.createElement(ArrowIcon, {
-    className: styles$4.arrow
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$4.container, className, _defineProperty({}, styles$4.withoutShadow, withoutShadow)]),
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$4.inner,
+      children: /*#__PURE__*/jsx(ArrowIcon, {
+        className: styles$4.arrow
+      })
+    })
+  });
 }
 
 function HandIcon(_ref) {
@@ -1810,16 +1899,17 @@ function HandIcon(_ref) {
     color = _ref$color === void 0 ? 'currentColor' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     className: className,
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 367.24 482.87"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M488.84,255.91a44.68,44.68,0,0,0-19.15,4.3A44.77,44.77,0,0,0,406,226.49a44.75,44.75,0,0,0-62.67-32.66V105.4a44.81,44.81,0,1,0-89.61,0V265.17l-1.15-2.7a44.78,44.78,0,1,0-82.84,34.06l64.87,157.76.34.73a156.29,156.29,0,0,0,141.42,88.44c86.7,0,157.24-70.53,157.24-157.26V300.7a44.82,44.82,0,0,0-44.78-44.79ZM507.46,386.2c0,72.3-58.78,131.1-131.07,131.1a130.29,130.29,0,0,1-117.73-73.36L193.93,286.61a18.64,18.64,0,1,1,34.53-14.07L279.91,394V105.4a18.64,18.64,0,1,1,37.28,0v196a13.08,13.08,0,0,0,26.16,0V234.56a18.64,18.64,0,0,1,37.27,0v89.95a13.07,13.07,0,1,0,26.13,0V266.86a18.64,18.64,0,1,1,37.28,0v80.71h0s0,.08,0,.11a13.08,13.08,0,0,0,26.15,0v-47a18.63,18.63,0,1,1,37.26,0v85.5Z",
-    transform: "translate(-166.38 -60.59)",
-    fill: color,
-    fillRule: "evenodd"
-  }));
+    viewBox: "0 0 367.24 482.87",
+    children: /*#__PURE__*/jsx("path", {
+      d: "M488.84,255.91a44.68,44.68,0,0,0-19.15,4.3A44.77,44.77,0,0,0,406,226.49a44.75,44.75,0,0,0-62.67-32.66V105.4a44.81,44.81,0,1,0-89.61,0V265.17l-1.15-2.7a44.78,44.78,0,1,0-82.84,34.06l64.87,157.76.34.73a156.29,156.29,0,0,0,141.42,88.44c86.7,0,157.24-70.53,157.24-157.26V300.7a44.82,44.82,0,0,0-44.78-44.79ZM507.46,386.2c0,72.3-58.78,131.1-131.07,131.1a130.29,130.29,0,0,1-117.73-73.36L193.93,286.61a18.64,18.64,0,1,1,34.53-14.07L279.91,394V105.4a18.64,18.64,0,1,1,37.28,0v196a13.08,13.08,0,0,0,26.16,0V234.56a18.64,18.64,0,0,1,37.27,0v89.95a13.07,13.07,0,1,0,26.13,0V266.86a18.64,18.64,0,1,1,37.28,0v80.71h0s0,.08,0,.11a13.08,13.08,0,0,0,26.15,0v-47a18.63,18.63,0,1,1,37.26,0v85.5Z",
+      transform: "translate(-166.38 -60.59)",
+      fill: color,
+      fillRule: "evenodd"
+    })
+  });
 }
 
 var styles$3 = {"container":"micromag-viewer-partials-hand-tap-container","circle":"micromag-viewer-partials-hand-tap-circle","hand":"micromag-viewer-partials-hand-tap-hand","withoutShadow":"micromag-viewer-partials-hand-tap-withoutShadow","inner":"micromag-viewer-partials-hand-tap-inner"};
@@ -1829,15 +1919,17 @@ function HandTap(_ref) {
     withoutShadow = _ref$withoutShadow === void 0 ? false : _ref$withoutShadow,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, className, _defineProperty({}, styles$3.withoutShadow, withoutShadow)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.circle
-  }), /*#__PURE__*/React.createElement(HandIcon, {
-    className: styles$3.hand
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$3.container, className, _defineProperty({}, styles$3.withoutShadow, withoutShadow)]),
+    children: /*#__PURE__*/jsxs("div", {
+      className: styles$3.inner,
+      children: [/*#__PURE__*/jsx("div", {
+        className: styles$3.circle
+      }), /*#__PURE__*/jsx(HandIcon, {
+        className: styles$3.hand
+      })]
+    })
+  });
 }
 
 var styles$2 = {"inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","progress":"micromag-viewer-partials-seek-bar-progress","track":"micromag-viewer-partials-seek-bar-track","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
@@ -1957,74 +2049,80 @@ function SeekBar(_ref3) {
       filterTaps: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     className: classNames([styles$2.container, className, _defineProperty(_defineProperty({}, styles$2.withSeekHead, withSeekHead), styles$2.showTimestamp, showTimestamp)])
-  }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progressBarContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progressBar,
-    style: {
-      backgroundColor: backgroundColor
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.playHead,
-    style: {
-      left: "".concat(progress * 100, "%"),
-      backgroundColor: progressColor
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.scrubbedTime,
-    style: {
-      borderColor: progressColor
-    }
-  }, getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD))), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progress,
-    style: {
-      transform: "scaleX(".concat(progress, ")"),
-      backgroundColor: progressColor
-    }
-  })), /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
-    type: "button",
-    role: "slider",
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-valuenow": progress,
-    "aria-valuetext": intl.formatMessage({
-      id: "C1VUEY",
-      defaultMessage: [{
-        "type": 1,
-        "value": "current"
-      }, {
-        "type": 0,
-        "value": " of "
-      }, {
-        "type": 1,
-        "value": "duration"
-      }]
-    }, {
-      current: getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD),
-      duration: getFormattedTimestamp(duration, duration < SHOW_MILLISECONDS_THRESHOLD)
-    }),
-    "data-draggable": true,
-    className: styles$2.track,
-    title: intl.formatMessage({
-      id: "G1Gyjn",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Seek"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      id: "2prwZ7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Progress slider"
-      }]
-    }),
-    tabIndex: focusable ? '0' : '-1'
-  }))));
+  }, stopDragEventsPropagation), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: styles$2.inner,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: styles$2.progressBarContainer,
+        children: [/*#__PURE__*/jsx("div", {
+          className: styles$2.progressBar,
+          style: {
+            backgroundColor: backgroundColor
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: styles$2.playHead,
+          style: {
+            left: "".concat(progress * 100, "%"),
+            backgroundColor: progressColor
+          },
+          children: /*#__PURE__*/jsx("div", {
+            className: styles$2.scrubbedTime,
+            style: {
+              borderColor: progressColor
+            },
+            children: getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD)
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: styles$2.progress,
+          style: {
+            transform: "scaleX(".concat(progress, ")"),
+            backgroundColor: progressColor
+          }
+        })]
+      }), /*#__PURE__*/jsx("button", _objectSpread(_objectSpread({}, bind()), {}, {
+        type: "button",
+        role: "slider",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": progress,
+        "aria-valuetext": intl.formatMessage({
+          id: "C1VUEY",
+          defaultMessage: [{
+            "type": 1,
+            "value": "current"
+          }, {
+            "type": 0,
+            "value": " of "
+          }, {
+            "type": 1,
+            "value": "duration"
+          }]
+        }, {
+          current: getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD),
+          duration: getFormattedTimestamp(duration, duration < SHOW_MILLISECONDS_THRESHOLD)
+        }),
+        "data-draggable": true,
+        className: styles$2.track,
+        title: intl.formatMessage({
+          id: "G1Gyjn",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Seek"
+          }]
+        }),
+        "aria-label": intl.formatMessage({
+          id: "2prwZ7",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Progress slider"
+          }]
+        }),
+        tabIndex: focusable ? '0' : '-1'
+      }))]
+    })
+  }));
 }
 
 var styles$1 = {"container":"micromag-viewer-partials-playback-controls-container","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","icon":"micromag-viewer-partials-playback-controls-icon","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","suggest":"micromag-viewer-partials-playback-controls-suggest","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly","withoutShadow":"micromag-viewer-partials-playback-controls-withoutShadow"};
@@ -2179,98 +2277,99 @@ function PlaybackControls(_ref) {
     progressColor = _ref3.progressColor,
     seekBarOnly = _ref3.seekBarOnly;
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
-  var playIcon = playing ? /*#__PURE__*/React.createElement(PauseIcon, {
+  var playIcon = playing ? /*#__PURE__*/jsx(PauseIcon, {
     className: styles$1.icon,
     color: "currentColor"
-  }) : /*#__PURE__*/React.createElement(PlayIcon, {
+  }) : /*#__PURE__*/jsx(PlayIcon, {
     className: styles$1.icon,
     color: "currentColor"
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, className, isCollapsed ? collapsedClassName : null, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.withoutShadow, withoutShadow), styles$1.isMuted, muted)])
-  }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(Button$1, {
-    className: classNames([styles$1.suggest]),
-    style: {
-      color: color
-    },
-    onClick: playing ? onPause : onPlay,
-    focusable: controlsVisible,
-    icon: /*#__PURE__*/React.createElement(PlayIcon, {
-      className: classNames([styles$1.icon, styles$1.offset]),
-      color: "currentColor"
-    }),
-    "aria-pressed": !playing,
-    "aria-label": intl.formatMessage({
-      id: "mTqcmA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Pause"
-      }]
-    }),
-    withoutBootstrapStyles: true
-  }) : null, /*#__PURE__*/React.createElement(Button$1, {
-    className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
-    style: {
-      color: color
-    },
-    onClick: playing ? onPause : onPlay,
-    focusable: controls && controlsVisible && (!seekBarOnly || !playing),
-    disabled: finalShowLoading,
-    icon: finalShowLoading ? /*#__PURE__*/React.createElement(Spinner, {
-      className: classNames([styles$1.spinner, styles$1.offset])
-    }) : playIcon,
-    "aria-pressed": !playing,
-    "aria-label": finalShowLoading ? intl.formatMessage({
-      id: "YyYrXp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Loading"
-      }]
-    }) : intl.formatMessage({
-      id: "mTqcmA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Pause"
-      }]
-    }),
-    withoutBootstrapStyles: true
-  }), /*#__PURE__*/React.createElement(SeekBar, {
-    className: styles$1.seekBar,
-    media: mediaElement,
-    playing: playing,
-    onClick: onSeekClick,
-    onSeek: onSeek,
-    onSeekStart: onSeekStart,
-    onSeekEnd: onSeekEnd,
-    focusable: controls && controlsVisible && !seekBarOnly,
-    collapsed: isCollapsed,
-    withSeekHead: !isCollapsed && !seekBarOnly,
-    backgroundColor: color,
-    progressColor: progressColor
-  }), /*#__PURE__*/React.createElement(Button$1, {
-    className: styles$1.muteButton,
-    style: {
-      color: color
-    },
-    onClick: muted ? onUnmute : onMute,
-    focusable: controlsVisible || mediaHasAudio,
-    icon: muted ? /*#__PURE__*/React.createElement(UnmuteIcon, {
-      className: styles$1.icon,
-      color: "currentColor"
-    }) : /*#__PURE__*/React.createElement(MuteIcon, {
-      className: styles$1.icon,
-      color: "currentColor"
-    }),
-    "aria-pressed": !muted,
-    "aria-label": intl.formatMessage({
-      id: "RK/QEY",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Unmute"
-      }]
-    }),
-    withoutBootstrapStyles: true
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$1.container, className, isCollapsed ? collapsedClassName : null, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.withoutShadow, withoutShadow), styles$1.isMuted, muted)]),
+    children: [controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/jsx(Button$1, {
+      className: classNames([styles$1.suggest]),
+      style: {
+        color: color
+      },
+      onClick: playing ? onPause : onPlay,
+      focusable: controlsVisible,
+      icon: /*#__PURE__*/jsx(PlayIcon, {
+        className: classNames([styles$1.icon, styles$1.offset]),
+        color: "currentColor"
+      }),
+      "aria-pressed": !playing,
+      "aria-label": intl.formatMessage({
+        id: "mTqcmA",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Pause"
+        }]
+      }),
+      withoutBootstrapStyles: true
+    }) : null, /*#__PURE__*/jsx(Button$1, {
+      className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
+      style: {
+        color: color
+      },
+      onClick: playing ? onPause : onPlay,
+      focusable: controls && controlsVisible && (!seekBarOnly || !playing),
+      disabled: finalShowLoading,
+      icon: finalShowLoading ? /*#__PURE__*/jsx(Spinner, {
+        className: classNames([styles$1.spinner, styles$1.offset])
+      }) : playIcon,
+      "aria-pressed": !playing,
+      "aria-label": finalShowLoading ? intl.formatMessage({
+        id: "YyYrXp",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Loading"
+        }]
+      }) : intl.formatMessage({
+        id: "mTqcmA",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Pause"
+        }]
+      }),
+      withoutBootstrapStyles: true
+    }), /*#__PURE__*/jsx(SeekBar, {
+      className: styles$1.seekBar,
+      media: mediaElement,
+      playing: playing,
+      onClick: onSeekClick,
+      onSeek: onSeek,
+      onSeekStart: onSeekStart,
+      onSeekEnd: onSeekEnd,
+      focusable: controls && controlsVisible && !seekBarOnly,
+      collapsed: isCollapsed,
+      withSeekHead: !isCollapsed && !seekBarOnly,
+      backgroundColor: color,
+      progressColor: progressColor
+    }), /*#__PURE__*/jsx(Button$1, {
+      className: styles$1.muteButton,
+      style: {
+        color: color
+      },
+      onClick: muted ? onUnmute : onMute,
+      focusable: controlsVisible || mediaHasAudio,
+      icon: muted ? /*#__PURE__*/jsx(UnmuteIcon, {
+        className: styles$1.icon,
+        color: "currentColor"
+      }) : /*#__PURE__*/jsx(MuteIcon, {
+        className: styles$1.icon,
+        color: "currentColor"
+      }),
+      "aria-pressed": !muted,
+      "aria-label": intl.formatMessage({
+        id: "RK/QEY",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Unmute"
+        }]
+      }),
+      withoutBootstrapStyles: true
+    })]
+  });
 }
 
 var styles = {"container":"micromag-viewer-partials-web-view-container","opened":"micromag-viewer-partials-web-view-opened","webView":"micromag-viewer-partials-web-view-webView"};
@@ -2371,23 +2470,23 @@ function WebViewContainer(_ref) {
       utm_campaign: storyTitle
     }, currentQueryString))) : url;
   }, [webViewUrl, source]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames([styles.container, className, _defineProperty({}, styles.opened, opened)]),
     style: style,
     onTransitionEnd: onTransitionEnd,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(WebView, Object.assign({
-    url: finalUrl,
-    source: source
-  }, webViewProps, {
-    closeable: opened,
-    focusable: opened,
-    className: styles.webView,
-    onClose: close
-  })));
+    ref: ref,
+    children: /*#__PURE__*/jsx(WebView, _objectSpread(_objectSpread({
+      url: finalUrl,
+      source: source
+    }, webViewProps), {}, {
+      closeable: opened,
+      focusable: opened,
+      className: styles.webView,
+      onClose: close
+    }))
+  });
 }
 
-// @todo export from somewhere else; or use as props in possible component for screen transitions
 var SPRING_CONFIG_TIGHT = {
   tension: 300,
   friction: 35
@@ -2999,7 +3098,7 @@ function Viewer(_ref) {
     }
     return true;
   }, [landscape]);
-  var overscrollStyle = /*#__PURE__*/React.createElement("style", {
+  var overscrollStyle = /*#__PURE__*/jsx("style", {
     type: "text/css",
     href: "data-viewer-overscroll",
     precedence: "medium",
@@ -3141,210 +3240,228 @@ function Viewer(_ref) {
   // console.log('mediaCompleted', mediaCompleted, playbackMedia);
   // console.log('activityDetected', activityDetected);
 
-  return /*#__PURE__*/React.createElement(StoryProvider, {
-    story: parsedStory
-  }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React.createElement(ViewerProvider, {
-    containerRef: containerRef,
-    events: eventsManager,
-    menuVisible: menuVisible,
-    menuOverScreen: menuOverScreen,
-    width: viewerWidth,
-    height: viewerHeight,
-    topHeight: topHeight,
-    bottomHeight: bottomHeight,
-    bottomSidesWidth: (playbackControlsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
-    gotoPreviousScreen: gotoPreviousScreen,
-    gotoNextScreen: gotoNextScreen,
-    disableInteraction: disableInteraction,
-    enableInteraction: enableInteraction
-  }, withMetadata ? /*#__PURE__*/React.createElement(Meta, {
-    title: finalTitle,
-    metadata: finalMetadata
-  }, overscrollStyle) : overscrollStyle, /*#__PURE__*/React.createElement(FontFaces, {
-    fonts: finalFonts
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, screenSize.screens.map(function (screenName) {
-      return "story-screen-".concat(screenName);
-    }), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$7.landscape, landscape), styles$7.withoutGestures, withoutGestures), styles$7.hideMenu, !menuVisible), styles$7.disableMenu, navigationDisabled), styles$7.fadeMenu, playing && playbackControls && !playbackControlsVisible), styles$7.ready, ready || withoutScreensTransforms), styles$7.hasInteracted, hasInteracted), styles$7.isDragging, isDragging)]),
-    ref: containerRef,
-    onContextMenu: onContextMenu
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.ariaAnnouncement,
-    id: "announce",
-    "aria-live": "polite"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "AIr8rM",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Screen "
-    }, {
-      "type": 1,
-      "value": "current"
-    }, {
-      "type": 0,
-      "value": " of "
-    }, {
-      "type": 1,
-      "value": "length"
-    }],
-    values: {
-      current: screenIndex + 1,
-      length: screens.length
-    }
-  })), /*#__PURE__*/React.createElement("nav", {
-    "aria-label": intl.formatMessage({
-      id: "gfZs4J",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Skip Links"
-      }]
-    }),
-    className: styles$7.accessibilityLinks
-  }, playbackHelpVisible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: onClickSkipToPlaybackControls,
-    "aria-disabled": withoutPlaybackControls || !playbackControlsVisible,
-    "aria-describedby": "disabledReason",
-    className: classNames([styles$7.accessibilityButton, _defineProperty({}, styles$7.disabled, withoutPlaybackControls || !playbackControlsVisible)])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "CnVj9r",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Skip to controls"
-    }]
-  })), withoutPlaybackControls || !playbackControlsVisible ? /*#__PURE__*/React.createElement("div", {
-    role: "tooltip",
-    className: styles$7.tooltipBox,
-    id: "disabledReason"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$7.tooltip
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "YXhRxW",
-    defaultMessage: [{
-      "type": 0,
-      "value": "No controls available"
-    }]
-  }))) : null) : null), !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu, {
+  return /*#__PURE__*/jsx(StoryProvider, {
     story: parsedStory,
-    currentScreenIndex: screenIndex,
-    withShadow: menuOverScreen && !withoutMenuShadow,
-    toggleFullscreen: toggleFullscreen,
-    fullscreenActive: fullscreenActive,
-    fullscreenEnabled: fullscreenEnabled,
-    menuDotsButtons: menuDotsButtons,
-    closeable: closeable,
-    shareBasePath: shareBasePath || basePath,
-    shareOptions: shareOptions,
-    screenSize: screenSize,
-    menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
-    theme: viewerTheme,
-    previewHeader: menuHeader,
-    previewFooter: menuFooter,
-    trackingEnabled: trackingEnabled,
-    onClickScreen: onClickScreen,
-    onClickCloseViewer: onCloseViewer,
-    onChange: onMenuChange,
-    withDotItemClick: screenContainerWidth > 400,
-    withoutScreensMenu: withoutScreensMenu,
-    withoutShareMenu: withoutShareMenu,
-    menuItems: menuItems,
-    afterShareMenuButton: afterShareMenuButton,
-    beforeScreensMenuButton: beforeScreensMenuButton,
-    withMicromagBranding: withMicromagBranding,
-    refDots: menuDotsContainerRef
-  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$7.content
-  }, clickableAwareBindings), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
-    direction: "previous",
-    className: classNames([styles$7.navButton, styles$7.previous]),
-    onClick: gotoPreviousScreen,
-    ariaLabel: intl.formatMessage({
-      id: "zYH/31",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to previous screen"
-      }]
-    })
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.screensFrame,
-    style: {
-      width: screenContainerWidth,
-      height: screenContainerHeight,
-      overflow: !withNeighborScreens ? 'hidden' : null
-    }
-  }, screens.map(function (screen, i) {
-    var current = screenIndex === i;
-    var isBefore = i < screenIndex;
-    var isAfter = i > screenIndex;
-    var isNext = transitionDirection !== 0 && i === screenIndex + transitionDirection;
-    var activeRange = neighborScreensActive;
-    var isInActiveRange = Math.abs(i - screenIndex) <= activeRange;
-    var preloadRange = neighborPreloadScreens !== null ? neighborPreloadScreens : neighborScreensActive;
-    var isInPreloadRange = Math.abs(i - screenIndex) <= preloadRange;
-    var active = current || isInActiveRange || isNext;
-    var preload = current || preloadNeighbors && (isAfter && isInPreloadRange || neighborPreloadBackward && isBefore && isInPreloadRange) || isNext;
-    var screenStyles = getScreenStylesByIndex(i, progressSpring);
-    var isVisible = current || isDragging && isNext || transitionDirection !== 0 && !isDragging && i === screenIndex - transitionDirection || withNeighborScreens && active;
-    return /*#__PURE__*/React.createElement(animated.div, {
-      key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
-      id: current ? 'content' : null,
-      "aria-hidden": !current,
-      style: screenStyles,
-      tabIndex: current ? 0 : -1,
-      className: classNames([styles$7.screenContainer, _defineProperty(_defineProperty(_defineProperty({}, styles$7.visible, isVisible), styles$7.preload, preload), styles$7.current, current && !transitioning)])
-    }, screen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
-      className: styles$7.screen,
-      screen: screen,
-      screenState: current ? screenState : null,
-      index: i,
-      current: current,
-      active: active || current,
-      ready: current && transitioned,
-      preload: preload || current,
-      mediaRef: function mediaRef(ref) {
-        screensMediasRef.current[i] = ref;
-      },
-      renderContext: renderContext,
-      width: screenWidth,
-      height: screenHeight,
-      scale: screenScale
-    }) : null);
-  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
-    direction: "next",
-    className: classNames([styles$7.navButton, styles$7.next]),
-    onClick: gotoNextScreen,
-    ariaLabel: intl.formatMessage({
-      id: "v9bqYj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen"
-      }]
+    children: /*#__PURE__*/jsx(ScreenSizeProvider, {
+      size: screenSize,
+      children: /*#__PURE__*/jsxs(ViewerProvider, {
+        containerRef: containerRef,
+        events: eventsManager,
+        menuVisible: menuVisible,
+        menuOverScreen: menuOverScreen,
+        width: viewerWidth,
+        height: viewerHeight,
+        topHeight: topHeight,
+        bottomHeight: bottomHeight,
+        bottomSidesWidth: (playbackControlsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
+        gotoPreviousScreen: gotoPreviousScreen,
+        gotoNextScreen: gotoNextScreen,
+        disableInteraction: disableInteraction,
+        enableInteraction: enableInteraction,
+        children: [withMetadata ? /*#__PURE__*/jsx(Meta, {
+          title: finalTitle,
+          metadata: finalMetadata,
+          children: overscrollStyle
+        }) : overscrollStyle, /*#__PURE__*/jsx(FontFaces, {
+          fonts: finalFonts
+        }), /*#__PURE__*/jsxs("div", {
+          className: classNames([styles$7.container, screenSize.screens.map(function (screenName) {
+            return "story-screen-".concat(screenName);
+          }), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$7.landscape, landscape), styles$7.withoutGestures, withoutGestures), styles$7.hideMenu, !menuVisible), styles$7.disableMenu, navigationDisabled), styles$7.fadeMenu, playing && playbackControls && !playbackControlsVisible), styles$7.ready, ready || withoutScreensTransforms), styles$7.hasInteracted, hasInteracted), styles$7.isDragging, isDragging)]),
+          ref: containerRef,
+          onContextMenu: onContextMenu,
+          children: [/*#__PURE__*/jsx("div", {
+            className: styles$7.ariaAnnouncement,
+            id: "announce",
+            "aria-live": "polite",
+            children: /*#__PURE__*/jsx(FormattedMessage, {
+              id: "AIr8rM",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Screen "
+              }, {
+                "type": 1,
+                "value": "current"
+              }, {
+                "type": 0,
+                "value": " of "
+              }, {
+                "type": 1,
+                "value": "length"
+              }],
+              values: {
+                current: screenIndex + 1,
+                length: screens.length
+              }
+            })
+          }), /*#__PURE__*/jsx("nav", {
+            "aria-label": intl.formatMessage({
+              id: "gfZs4J",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Skip Links"
+              }]
+            }),
+            className: styles$7.accessibilityLinks,
+            children: playbackHelpVisible ? /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Button, {
+                onClick: onClickSkipToPlaybackControls,
+                "aria-disabled": withoutPlaybackControls || !playbackControlsVisible,
+                "aria-describedby": "disabledReason",
+                className: classNames([styles$7.accessibilityButton, _defineProperty({}, styles$7.disabled, withoutPlaybackControls || !playbackControlsVisible)]),
+                children: /*#__PURE__*/jsx(FormattedMessage, {
+                  id: "CnVj9r",
+                  defaultMessage: [{
+                    "type": 0,
+                    "value": "Skip to controls"
+                  }]
+                })
+              }), withoutPlaybackControls || !playbackControlsVisible ? /*#__PURE__*/jsx("div", {
+                role: "tooltip",
+                className: styles$7.tooltipBox,
+                id: "disabledReason",
+                children: /*#__PURE__*/jsx("span", {
+                  className: styles$7.tooltip,
+                  children: /*#__PURE__*/jsx(FormattedMessage, {
+                    id: "YXhRxW",
+                    defaultMessage: [{
+                      "type": 0,
+                      "value": "No controls available"
+                    }]
+                  })
+                })
+              }) : null]
+            }) : null
+          }), !withoutMenu ? /*#__PURE__*/jsx(ViewerMenu, {
+            story: parsedStory,
+            currentScreenIndex: screenIndex,
+            withShadow: menuOverScreen && !withoutMenuShadow,
+            toggleFullscreen: toggleFullscreen,
+            fullscreenActive: fullscreenActive,
+            fullscreenEnabled: fullscreenEnabled,
+            menuDotsButtons: menuDotsButtons,
+            closeable: closeable,
+            shareBasePath: shareBasePath || basePath,
+            shareOptions: shareOptions,
+            screenSize: screenSize,
+            menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
+            theme: viewerTheme,
+            previewHeader: menuHeader,
+            previewFooter: menuFooter,
+            trackingEnabled: trackingEnabled,
+            onClickScreen: onClickScreen,
+            onClickCloseViewer: onCloseViewer,
+            onChange: onMenuChange,
+            withDotItemClick: screenContainerWidth > 400,
+            withoutScreensMenu: withoutScreensMenu,
+            withoutShareMenu: withoutShareMenu,
+            menuItems: menuItems,
+            afterShareMenuButton: afterShareMenuButton,
+            beforeScreensMenuButton: beforeScreensMenuButton,
+            withMicromagBranding: withMicromagBranding,
+            refDots: menuDotsContainerRef
+          }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+            className: styles$7.content
+          }, clickableAwareBindings), {}, {
+            children: [!withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/jsx(NavigationButton, {
+              direction: "previous",
+              className: classNames([styles$7.navButton, styles$7.previous]),
+              onClick: gotoPreviousScreen,
+              ariaLabel: intl.formatMessage({
+                id: "zYH/31",
+                defaultMessage: [{
+                  "type": 0,
+                  "value": "Go to previous screen"
+                }]
+              })
+            }) : null, /*#__PURE__*/jsx("div", {
+              className: styles$7.screensFrame,
+              style: {
+                width: screenContainerWidth,
+                height: screenContainerHeight,
+                overflow: !withNeighborScreens ? 'hidden' : null
+              },
+              children: screens.map(function (screen, i) {
+                var current = screenIndex === i;
+                var isBefore = i < screenIndex;
+                var isAfter = i > screenIndex;
+                var isNext = transitionDirection !== 0 && i === screenIndex + transitionDirection;
+                var activeRange = neighborScreensActive;
+                var isInActiveRange = Math.abs(i - screenIndex) <= activeRange;
+                var preloadRange = neighborPreloadScreens !== null ? neighborPreloadScreens : neighborScreensActive;
+                var isInPreloadRange = Math.abs(i - screenIndex) <= preloadRange;
+                var active = current || isInActiveRange || isNext;
+                var preload = current || preloadNeighbors && (isAfter && isInPreloadRange || neighborPreloadBackward && isBefore && isInPreloadRange) || isNext;
+                var screenStyles = getScreenStylesByIndex(i, progressSpring);
+                var isVisible = current || isDragging && isNext || transitionDirection !== 0 && !isDragging && i === screenIndex - transitionDirection || withNeighborScreens && active;
+                return /*#__PURE__*/jsx(animated.div, {
+                  id: current ? 'content' : null,
+                  "aria-hidden": !current,
+                  style: screenStyles,
+                  tabIndex: current ? 0 : -1,
+                  className: classNames([styles$7.screenContainer, _defineProperty(_defineProperty(_defineProperty({}, styles$7.visible, isVisible), styles$7.preload, preload), styles$7.current, current && !transitioning)]),
+                  children: screen !== null ? /*#__PURE__*/jsx(ViewerScreen, {
+                    className: styles$7.screen,
+                    screen: screen,
+                    screenState: current ? screenState : null,
+                    index: i,
+                    current: current,
+                    active: active || current,
+                    ready: current && transitioned,
+                    preload: preload || current,
+                    mediaRef: function mediaRef(ref) {
+                      screensMediasRef.current[i] = ref;
+                    },
+                    renderContext: renderContext,
+                    width: screenWidth,
+                    height: screenHeight,
+                    scale: screenScale
+                  }) : null
+                }, "screen-viewer-".concat(screen.id || '', "-").concat(i + 1));
+              })
+            }), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/jsx(NavigationButton, {
+              direction: "next",
+              className: classNames([styles$7.navButton, styles$7.next]),
+              onClick: gotoNextScreen,
+              ariaLabel: intl.formatMessage({
+                id: "v9bqYj",
+                defaultMessage: [{
+                  "type": 0,
+                  "value": "Go to next screen"
+                }]
+              })
+            }) : null, !withoutPlaybackControls ? /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+              className: styles$7.playbackControls,
+              id: "controls",
+              ref: playbackControlsContainerRef
+            }, stopDragEventsPropagation), {}, {
+              children: /*#__PURE__*/jsx(PlaybackControls, {
+                className: styles$7.controls,
+                withoutShadow: withoutMenuShadow
+              })
+            })) : null, withNavigationHint !== false && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/jsx(NavigationHint, {
+              className: styles$7.navigationHint,
+              withoutShadow: withoutMenuShadow
+            }) : null]
+          })) : null, /*#__PURE__*/jsx("div", {
+            className: classNames([styles$7.shareIncentiveContainer, _defineProperty({}, styles$7.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
+            style: {
+              top: isEditor ? 10 : menuDotsContainerHeight - 10
+            },
+            children: /*#__PURE__*/jsx(ShareIncentive, _objectSpread({
+              className: styles$7.shareIncentive
+            }, currentShareIncentive))
+          }), /*#__PURE__*/jsx(WebViewContainer, {
+            className: styles$7.webView,
+            trackingEnabled: trackingEnabled,
+            style: {
+              maxWidth: withFullscreenWebView ? null : Math.max(screenContainerWidth, 600)
+            }
+          })]
+        })]
+      })
     })
-  }) : null, !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$7.playbackControls,
-    id: "controls",
-    ref: playbackControlsContainerRef
-  }, stopDragEventsPropagation), /*#__PURE__*/React.createElement(PlaybackControls, {
-    className: styles$7.controls,
-    withoutShadow: withoutMenuShadow
-  })) : null, withNavigationHint !== false && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(NavigationHint, {
-    className: styles$7.navigationHint,
-    withoutShadow: withoutMenuShadow
-  }) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.shareIncentiveContainer, _defineProperty({}, styles$7.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
-    style: {
-      top: isEditor ? 10 : menuDotsContainerHeight - 10
-    }
-  }, /*#__PURE__*/React.createElement(ShareIncentive, Object.assign({
-    className: styles$7.shareIncentive
-  }, currentShareIncentive))), /*#__PURE__*/React.createElement(WebViewContainer, {
-    className: styles$7.webView,
-    trackingEnabled: trackingEnabled,
-    style: {
-      maxWidth: withFullscreenWebView ? null : Math.max(screenContainerWidth, 600)
-    }
-  })))));
+  });
 }
 
 var _excluded$1 = ["story", "pathWithIndex", "children", "onScreenChange"];
@@ -3377,22 +3494,27 @@ function ViewerRoutes(_ref) {
       onScreenChange(it);
     }
   }, [navigate, url, pathWithIndex, screens, onScreenChange]);
-  return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
-    path: routes.screen
-  }, function (_ref3) {
-    var _ref3$screen = _ref3.screen,
-      screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
-    var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
-    var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
-    return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
-      story: story,
-      screen: screenId,
-      onScreenChange: finalOnScreenChange
-    }));
-  }), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
-    story: story,
-    onScreenChange: finalOnScreenChange
-  }))));
+  return /*#__PURE__*/jsxs(Switch, {
+    children: [/*#__PURE__*/jsx(Route, {
+      path: routes.screen,
+      children: function children(_ref3) {
+        var _ref3$screen = _ref3.screen,
+          screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
+        var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
+        var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
+        return /*#__PURE__*/jsx(Viewer, _objectSpread(_objectSpread({}, otherProps), {}, {
+          story: story,
+          screen: screenId,
+          onScreenChange: finalOnScreenChange
+        }));
+      }
+    }), /*#__PURE__*/jsx(Route, {
+      children: /*#__PURE__*/jsx(Viewer, _objectSpread(_objectSpread({}, otherProps), {}, {
+        story: story,
+        onScreenChange: finalOnScreenChange
+      }))
+    })]
+  });
 }
 
 var home = "/";
@@ -3500,36 +3622,46 @@ function ViewerContainer(_ref) {
       supportsWebp: supportsWebp
     }, settings);
   }, [settings, supportsWebp]);
-  var content = /*#__PURE__*/React.createElement(SettingsProvider, {
-    settings: finalSettings
-  }, /*#__PURE__*/React.createElement(IntlProvider, {
-    locale: finalLocale,
-    locales: locales,
-    extraMessages: translations
-  }, /*#__PURE__*/React.createElement(GoogleKeysProvider, {
-    apiKey: googleApiKey
-  }, /*#__PURE__*/React.createElement(GoogleMapsClientProvider, {
-    locale: finalLocale
-  }, /*#__PURE__*/React.createElement(ScreensProvider, null, /*#__PURE__*/React.createElement(ComponentsProvider, {
-    namespace: SCREENS_NAMESPACE,
-    components: screenComponents || emptyComponents
-  }, /*#__PURE__*/React.createElement(VisitorProvider, {
-    visitor: visitor
-  }, /*#__PURE__*/React.createElement(PlaybackProvider, {
-    paused: paused,
-    muted: muted
-  }, /*#__PURE__*/React.createElement(TrackingProvider, {
-    variables: finalTrackingVariables,
-    disabled: trackingDisabled,
-    paused: trackingPaused
-  }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer, Object.assign({
-    story: story,
-    basePath: basePath
-  }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes, Object.assign({
-    story: story,
-    basePath: basePath,
-    pathWithIndex: pathWithIndex
-  }, otherProps)))))))))));
+  var content = /*#__PURE__*/jsx(SettingsProvider, {
+    settings: finalSettings,
+    children: /*#__PURE__*/jsx(IntlProvider, {
+      locale: finalLocale,
+      locales: locales,
+      extraMessages: translations,
+      children: /*#__PURE__*/jsx(GoogleKeysProvider, {
+        apiKey: googleApiKey,
+        children: /*#__PURE__*/jsx(GoogleMapsClientProvider, {
+          locale: finalLocale,
+          children: /*#__PURE__*/jsx(ScreensProvider, {
+            children: /*#__PURE__*/jsx(ComponentsProvider, {
+              namespace: SCREENS_NAMESPACE,
+              components: screenComponents || emptyComponents,
+              children: /*#__PURE__*/jsx(VisitorProvider, {
+                visitor: visitor,
+                children: /*#__PURE__*/jsx(PlaybackProvider, {
+                  paused: paused,
+                  muted: muted,
+                  children: /*#__PURE__*/jsx(TrackingProvider, {
+                    variables: finalTrackingVariables,
+                    disabled: trackingDisabled,
+                    paused: trackingPaused,
+                    children: withoutRouter ? /*#__PURE__*/jsx(Viewer, _objectSpread({
+                      story: story,
+                      basePath: basePath
+                    }, otherProps)) : /*#__PURE__*/jsx(ViewerRoutes, _objectSpread({
+                      story: story,
+                      basePath: basePath,
+                      pathWithIndex: pathWithIndex
+                    }, otherProps))
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
   var _useMemoryRouter = useMemoryRouter(),
     memoryRouterHook = _useMemoryRouter.hook,
     memoryRouterSearchHook = _useMemoryRouter.searchHook;
@@ -3540,9 +3672,12 @@ function ViewerContainer(_ref) {
       base: !memoryRouter ? basePath : null
     };
   }, [basePath, memoryRouter]);
-  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, routerProps, /*#__PURE__*/React.createElement(RoutesProvider, {
-    routes: routes
-  }, content));
+  return withoutRouter ? content : /*#__PURE__*/jsx(Router, _objectSpread(_objectSpread({}, routerProps), {}, {
+    children: /*#__PURE__*/jsx(RoutesProvider, {
+      routes: routes,
+      children: content
+    })
+  }));
 }
 
 export { Viewer, ViewerContainer as default };