@micromag/viewer 0.3.426 → 0.3.429

package/lib/index.js

@@ -31,26 +31,10 @@ var ShareOptions = require('@micromag/element-share-options');
 var react = require('@use-gesture/react');
 var WebView = require('@micromag/element-webview');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var fieldsManager__default = /*#__PURE__*/_interopDefaultLegacy(fieldsManager);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
-var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
-var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
-var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
-
 // eslint-disable-next-line import/prefer-default-export
-var routes = PropTypes__default["default"].shape({
-  home: PropTypes__default["default"].string.isRequired,
-  screen: PropTypes__default["default"].string.isRequired
+var routes = PropTypes.shape({
+  home: PropTypes.string.isRequired,
+  screen: PropTypes.string.isRequired
 });
 
 function useKeyboardShortcuts() {
@@ -137,9 +121,9 @@ function useScreenInteraction() {
     onNavigate = _ref$onNavigate === void 0 ? null : _ref$onNavigate;
   var _useState = React.useState(screens.reduce(function (map, _ref2) {
       var id = _ref2.id;
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, true));
+      return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, true));
     }, {})),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     screensInteractionEnabled = _useState2[0],
     setScreensInteractionEnabled = _useState2[1];
   var _ref3 = screens[screenIndex] || {},
@@ -153,7 +137,7 @@ function useScreenInteraction() {
     if (currentValue !== newValue) {
       setScreensInteractionEnabled(screens.reduce(function (map, _ref4) {
         var id = _ref4.id;
-        return screenId === id ? _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, newValue)) : _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, typeof screensInteractionEnabled[id] === 'undefined' || screensInteractionEnabled[id] === true));
+        return screenId === id ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, newValue)) : _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, typeof screensInteractionEnabled[id] === 'undefined' || screensInteractionEnabled[id] === true));
       }, {}));
     }
   }, [screens, screenId, screensInteractionEnabled, setScreensInteractionEnabled]);
@@ -219,30 +203,30 @@ var styles$g = {"container":"micromag-viewer-buttons-button-container","asLink":
 
 var _excluded$9 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$n = {
-  type: PropTypes__default["default"].string,
+  type: PropTypes.string,
   theme: core.PropTypes.buttonTheme,
   size: core.PropTypes.buttonSize,
-  href: PropTypes__default["default"].string,
-  external: PropTypes__default["default"].bool,
-  direct: PropTypes__default["default"].bool,
-  target: PropTypes__default["default"].string,
+  href: PropTypes.string,
+  external: PropTypes.bool,
+  direct: PropTypes.bool,
+  target: PropTypes.string,
   label: core.PropTypes.label,
   children: core.PropTypes.label,
-  focusable: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool,
-  icon: PropTypes__default["default"].node,
-  iconPosition: PropTypes__default["default"].oneOf(['left', 'right', 'inline']),
-  disabled: PropTypes__default["default"].bool,
-  loading: PropTypes__default["default"].bool,
-  disableOnLoading: PropTypes__default["default"].bool,
-  withoutTheme: PropTypes__default["default"].bool,
-  asLink: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  iconClassName: PropTypes__default["default"].string,
-  labelClassName: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
-  refButton: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any // eslint-disable-line
+  focusable: PropTypes.bool,
+  active: PropTypes.bool,
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  disableOnLoading: PropTypes.bool,
+  withoutTheme: PropTypes.bool,
+  asLink: PropTypes.bool,
+  className: PropTypes.string,
+  iconClassName: PropTypes.string,
+  labelClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
   })])
 };
 
@@ -272,7 +256,6 @@ var defaultProps$n = {
   refButton: null
 };
 var Button = function Button(_ref) {
-  var _ref2;
   var type = _ref.type,
     theme = _ref.theme;
     _ref.size;
@@ -296,14 +279,14 @@ var Button = function Button(_ref) {
     iconClassName = _ref.iconClassName,
     labelClassName = _ref.labelClassName,
     refButton = _ref.refButton,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var finalLabel = label || children;
-  var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(components.Label, null, finalLabel) : null;
+  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(components.Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
   var hasIcon = icon !== null;
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
-  var buttonClassNames = classNames__default["default"]([styles$g.container, styles$g["icon-".concat(iconPosition)], (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.withIcon, hasIcon), _defineProperty__default["default"](_ref2, styles$g.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref2, styles$g.withText, text !== null), _defineProperty__default["default"](_ref2, styles$g.isLink, href !== null), _defineProperty__default["default"](_ref2, styles$g.asLink, asLink), _defineProperty__default["default"](_ref2, styles$g.isDisabled, disabled), _defineProperty__default["default"](_ref2, styles$g.isLoading, loading), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]);
+  var buttonClassNames = classNames([styles$g.container, styles$g["icon-".concat(iconPosition)], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$g.withIcon, hasIcon), styles$g.withIconColumns, hasIconColumns), styles$g.withText, text !== null), styles$g.isLink, href !== null), styles$g.asLink, asLink), styles$g.isDisabled, disabled), styles$g.isLoading, loading), className, className !== null)]);
   var _ref3 = theme || {},
     _ref3$colors = _ref3.colors,
     colors = _ref3$colors === void 0 ? null : _ref3$colors;
@@ -311,23 +294,23 @@ var Button = function Button(_ref) {
     _ref4$primary = _ref4.primary,
     brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
   var primaryColor = utils.getStyleFromColor(brandPrimaryColor, 'color');
-  var buttonStyles = _objectSpread__default["default"]({}, primaryColor);
-  var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasInlineIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$g.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
-  }, icon), text !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$g.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
-  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, iconPosition === 'left' ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$g.icon, styles$g.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
-  }, icon) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$g.center, styles$g.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
-  }, text), iconPosition === 'right' ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$g.icon, styles$g.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+  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$g.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+  }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, iconPosition === 'left' ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.icon, styles$g.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+  }, icon) : null, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.center, styles$g.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text), iconPosition === 'right' ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.icon, styles$g.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, icon) : null, hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   if (href !== null) {
-    var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
+    var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
     }, styles$g.linkDisabled, disabled)]);
-    return external || direct ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, props, {
+    return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
       style: buttonStyles,
@@ -335,7 +318,7 @@ var Button = function Button(_ref) {
       target: external ? target : null,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, props, {
+    }), content) : /*#__PURE__*/React.createElement(reactRouterDom.Link, Object.assign({}, props, {
       to: href,
       className: linkClassNames,
       style: buttonStyles,
@@ -344,7 +327,7 @@ var Button = function Button(_ref) {
       tabIndex: focusable ? '' : '-1'
     }), content);
   }
-  return /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
     type: type,
     className: buttonClassNames,
     style: buttonStyles,
@@ -361,8 +344,8 @@ var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","lab
 
 var _excluded$8 = ["iconClassName", "className"];
 var propTypes$m = {
-  iconClassName: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string
+  iconClassName: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps$m = {
   iconClassName: null,
@@ -371,11 +354,11 @@ var defaultProps$m = {
 var IconButton = function IconButton(_ref) {
   var iconClassName = _ref.iconClassName,
     className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
-  return /*#__PURE__*/React__default["default"].createElement(Button, Object.assign({
-    className: classNames__default["default"]([styles$f.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
     labelClassName: styles$f.label,
-    iconClassName: classNames__default["default"]([styles$f.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
+    iconClassName: classNames([styles$f.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, props));
 };
 IconButton.propTypes = propTypes$m;
@@ -383,8 +366,8 @@ IconButton.defaultProps = defaultProps$m;
 
 var _excluded$7 = ["single", "className"];
 var propTypes$l = {
-  single: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string
+  single: PropTypes.bool,
+  className: PropTypes.string
 };
 var defaultProps$l = {
   single: false,
@@ -393,10 +376,10 @@ var defaultProps$l = {
 var CloseMenuButton = function CloseMenuButton(_ref) {
   var single = _ref.single,
     className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, Object.assign({
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "dIvwcD",
       defaultMessage: [{
@@ -404,33 +387,33 @@ var CloseMenuButton = function CloseMenuButton(_ref) {
         "value": "Close"
       }]
     }),
-    icon: /*#__PURE__*/React__default["default"].createElement("svg", {
+    icon: /*#__PURE__*/React.createElement("svg", {
       width: "19",
       height: "23",
       viewBox: "0 0 19 23",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, !single ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("mask", {
+    }, !single ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mask", {
       id: "path-1-inside-1_560_19911",
       fill: "currentColor"
-    }, /*#__PURE__*/React__default["default"].createElement("path", {
+    }, /*#__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__default["default"].createElement("path", {
+    })), /*#__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__default["default"].createElement("rect", {
+    })) : null, /*#__PURE__*/React.createElement("rect", {
       x: "3.5",
       y: "0.5",
       width: "15",
       height: "19",
       rx: "2.5",
       stroke: "currentColor"
-    }), /*#__PURE__*/React__default["default"].createElement("path", {
+    }), /*#__PURE__*/React.createElement("path", {
       d: "M7.35333 6.35333L14.6467 13.6467",
       stroke: "currentColor",
       strokeLinejoin: "round"
-    }), /*#__PURE__*/React__default["default"].createElement("path", {
+    }), /*#__PURE__*/React.createElement("path", {
       d: "M7.35333 13.6467L14.6467 6.35333",
       stroke: "currentColor"
     }))
@@ -441,8 +424,8 @@ CloseMenuButton.defaultProps = defaultProps$l;
 
 var _excluded$6 = ["className", "iconClassName"];
 var propTypes$k = {
-  className: PropTypes__default["default"].string,
-  iconClassName: PropTypes__default["default"].string
+  className: PropTypes.string,
+  iconClassName: PropTypes.string
 };
 var defaultProps$k = {
   className: null,
@@ -451,10 +434,10 @@ var defaultProps$k = {
 var MenuButton = function MenuButton(_ref) {
   var className = _ref.className;
     _ref.iconClassName;
-    var props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+    var props = _objectWithoutProperties(_ref, _excluded$6);
   var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, Object.assign({
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "F/gl4b",
       defaultMessage: [{
@@ -463,22 +446,22 @@ var MenuButton = function MenuButton(_ref) {
       }]
     }),
     iconPosition: "right",
-    icon: /*#__PURE__*/React__default["default"].createElement("svg", {
+    icon: /*#__PURE__*/React.createElement("svg", {
       width: "19",
       height: "23",
       viewBox: "0 0 19 23",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__default["default"].createElement("mask", {
+    }, /*#__PURE__*/React.createElement("mask", {
       id: "path-1-inside-1_572_15622",
       fill: "currentColor"
-    }, /*#__PURE__*/React__default["default"].createElement("path", {
+    }, /*#__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__default["default"].createElement("path", {
+    })), /*#__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__default["default"].createElement("rect", {
+    }), /*#__PURE__*/React.createElement("rect", {
       x: "3.5",
       y: "0.5",
       width: "15",
@@ -493,17 +476,17 @@ MenuButton.defaultProps = defaultProps$k;
 
 var _excluded$5 = ["className"];
 var propTypes$j = {
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$j = {
   className: null
 };
 var ShareButton = function ShareButton(_ref) {
   var className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, Object.assign({
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "7tw6U2",
       defaultMessage: [{
@@ -512,18 +495,18 @@ var ShareButton = function ShareButton(_ref) {
       }]
     }),
     iconPosition: "left",
-    icon: /*#__PURE__*/React__default["default"].createElement("svg", {
+    icon: /*#__PURE__*/React.createElement("svg", {
       width: "16",
       height: "22",
       viewBox: "0 0 16 22",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__default["default"].createElement("path", {
+    }, /*#__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__default["default"].createElement("path", {
+    }), /*#__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",
@@ -537,12 +520,12 @@ ShareButton.defaultProps = defaultProps$j;
 var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
 
 var propTypes$i = {
-  className: PropTypes__default["default"].string,
-  progressSpring: PropTypes__default["default"].object,
+  className: PropTypes.string,
+  progressSpring: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
-  button: PropTypes__default["default"].node,
-  toggledButton: PropTypes__default["default"].node,
-  toggledButtonClassName: PropTypes__default["default"].string
+  button: PropTypes.node,
+  toggledButton: PropTypes.node,
+  toggledButtonClassName: PropTypes.string
 };
 var defaultProps$i = {
   className: null,
@@ -558,17 +541,17 @@ var ToggleButton = function ToggleButton(_ref) {
     toggledButton = _ref.toggledButton,
     toggledButtonClassName = _ref.toggledButtonClassName;
   if (button === null) return false;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement(web.animated.div, {
     className: styles$e.normal,
     style: {
       transform: progressSpring.to(function (p) {
         return "translateY(".concat(p * -100, "%)");
       })
     }
-  }, button), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
-    className: classNames__default["default"]([styles$e.toggled, _defineProperty__default["default"]({}, toggledButtonClassName, toggledButtonClassName !== null)]),
+  }, button), /*#__PURE__*/React.createElement(web.animated.div, {
+    className: classNames([styles$e.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
     style: {
       transform: progressSpring.to(function (p) {
         return "translateY(".concat((p - 1) * -100, "%)");
@@ -582,11 +565,11 @@ ToggleButton.defaultProps = defaultProps$i;
 var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
 
 var propTypes$h = {
-  className: PropTypes__default["default"].string,
-  progressSpring: PropTypes__default["default"].object,
+  className: PropTypes.string,
+  progressSpring: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
   theme: core.PropTypes.viewerTheme,
-  children: PropTypes__default["default"].node
+  children: PropTypes.node
 };
 var defaultProps$h = {
   className: null,
@@ -606,14 +589,14 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     _ref3$color = _ref3.color,
     brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
   var backgroundColorStyle = utils.getStyleFromColor(brandBackgroundColor, 'backgroundColor');
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, /*#__PURE__*/React.createElement(web.animated.div, {
     className: styles$d.heightContainer,
-    style: _objectSpread__default["default"]({
+    style: _objectSpread({
       opacity: progressSpring,
       transform: progressSpring.to(function (p) {
         return "translateY(".concat((1 - p) * -2, "rem)");
@@ -625,7 +608,7 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
         return Math.round(2 + p);
       })
     }, backgroundColorStyle)
-  }, children), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, children), /*#__PURE__*/React.createElement(web.animated.div, {
     className: styles$d.backdrop,
     style: {
       opacity: progressSpring.to(function (p) {
@@ -640,17 +623,17 @@ ViewerMenuContainer.defaultProps = defaultProps$h;
 var styles$c = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","outlineBounce":"micromag-viewer-menus-menu-dot-outlineBounce"};
 
 var propTypes$g = {
-  current: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool,
-  colors: PropTypes__default["default"].shape({
-    primary: PropTypes__default["default"].string,
-    secondary: PropTypes__default["default"].string
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  colors: PropTypes.shape({
+    primary: PropTypes.string,
+    secondary: PropTypes.string
   }),
-  count: PropTypes__default["default"].number,
-  subIndex: PropTypes__default["default"].number,
-  vertical: PropTypes__default["default"].bool,
-  onClick: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  count: PropTypes.number,
+  subIndex: PropTypes.number,
+  vertical: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$g = {
   current: false,
@@ -663,7 +646,6 @@ var defaultProps$g = {
   className: null
 };
 var ViewerMenuDot = function ViewerMenuDot(_ref) {
-  var _ref3;
   var current = _ref.current,
     active = _ref.active,
     colors = _ref.colors,
@@ -686,7 +668,7 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
         }
       };
     }),
-    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+    _useSpring2 = _slicedToArray(_useSpring, 2),
     dotSpringStyles = _useSpring2[0],
     setDotSpringProps = _useSpring2[1];
   React.useEffect(function () {
@@ -698,10 +680,10 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
       immediate: !current
     });
   }, [active, current, subIndex, count, setDotSpringProps]);
-  return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: classNames__default["default"]([styles$c.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$c.active, current), _defineProperty__default["default"](_ref3, styles$c.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames([styles$c.container, _defineProperty(_defineProperty(_defineProperty({}, styles$c.active, current), styles$c.vertical, vertical), className, className !== null)]),
     "aria-hidden": "true"
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: styles$c.button,
     onClick: function onClick() {
@@ -714,14 +696,14 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
       }
     },
     tabIndex: "-1"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$c.dot,
     style: {
       backgroundColor: secondary
     }
-  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, /*#__PURE__*/React.createElement(web.animated.div, {
     className: styles$c.progress,
-    style: _objectSpread__default["default"](_objectSpread__default["default"]({}, dotSpringStyles), {}, {
+    style: _objectSpread(_objectSpread({}, dotSpringStyles), {}, {
       backgroundColor: primary
     })
   }))));
@@ -729,23 +711,23 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
 ViewerMenuDot.propTypes = propTypes$g;
 ViewerMenuDot.defaultProps = defaultProps$g;
 
-var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","vertical":"micromag-viewer-menus-menu-dots-vertical"};
+var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
 var _excluded$4 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "withItemClick", "withoutScreensMenu", "onClose", "className"];
 var propTypes$f = {
-  direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   items: core.PropTypes.menuItems,
-  onClickDot: PropTypes__default["default"].func,
-  onClickScreensMenu: PropTypes__default["default"].func,
-  colors: PropTypes__default["default"].shape({
-    primary: PropTypes__default["default"].string,
-    secondary: PropTypes__default["default"].string
+  onClickDot: PropTypes.func,
+  onClickScreensMenu: PropTypes.func,
+  colors: PropTypes.shape({
+    primary: PropTypes.string,
+    secondary: PropTypes.string
   }),
-  closeable: PropTypes__default["default"].bool,
-  withItemClick: PropTypes__default["default"].bool,
-  withoutScreensMenu: PropTypes__default["default"].bool,
-  onClose: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  closeable: PropTypes.bool,
+  withItemClick: PropTypes.bool,
+  withoutScreensMenu: PropTypes.bool,
+  onClose: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$f = {
   direction: 'horizontal',
@@ -760,7 +742,6 @@ var defaultProps$f = {
   className: null
 };
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref5;
   var direction = _ref.direction,
     items = _ref.items,
     onClickDot = _ref.onClickDot,
@@ -771,7 +752,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     withoutScreensMenu = _ref.withoutScreensMenu,
     onClose = _ref.onClose,
     className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var _ref2 = colors || {},
     _ref2$primary = _ref2.primary,
     primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
@@ -783,8 +764,8 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   });
   var _ref4 = props || {},
     style = _ref4.style;
-  return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$b.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles$b.vertical, direction === 'vertical'), _ref5)]),
+  return /*#__PURE__*/React.createElement("nav", {
+    className: classNames([styles$b.container, _defineProperty(_defineProperty({}, className, className !== null), styles$b.vertical, direction === 'vertical')]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -808,7 +789,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     }),
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement("ul", {
+  }, /*#__PURE__*/React.createElement("ul", {
     className: styles$b.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
@@ -818,7 +799,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       count = _ref6$count === void 0 ? 1 : _ref6$count,
       _ref6$subIndex = _ref6.subIndex,
       subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
-    return /*#__PURE__*/React__default["default"].createElement(ViewerMenuDot, {
+    return /*#__PURE__*/React.createElement(ViewerMenuDot, {
       key: "item-".concat(index + 1),
       current: current,
       active: index <= currentIndex,
@@ -834,12 +815,12 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       },
       vertical: direction === 'vertical'
     });
-  }), closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
+  }), closeable ? /*#__PURE__*/React.createElement("li", {
     className: styles$b.closeButton,
     style: {
       color: primary
     }
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: styles$b.closeButton,
     onClick: onClose,
@@ -857,44 +838,44 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Close"
       }]
     })
-  }, /*#__PURE__*/React__default["default"].createElement(components.CloseIcon, null))) : null));
+  }, /*#__PURE__*/React.createElement(components.CloseIcon, null))) : null));
 };
 ViewerMenuDots.propTypes = propTypes$f;
 ViewerMenuDots.defaultProps = defaultProps$f;
 
 var propTypes$e = {
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$e = {
   className: null
 };
 var StackIcon = function StackIcon(_ref) {
   var className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "11.5px",
     height: "17.5px",
     viewBox: "0 0 11.5 17.5",
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("rect", {
+    className: classNames([_defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("rect", {
     width: "10",
     height: "16"
-  }), /*#__PURE__*/React__default["default"].createElement("polygon", {
+  }), /*#__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"
   }));
 };
 StackIcon.propTypes = propTypes$e;
 StackIcon.defaultProps = defaultProps$e;
 
-var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","pulse":"micromag-viewer-menus-menu-screen-pulse","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"};
+var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","focus-visible":"micromag-viewer-menus-menu-screen-focus-visible","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","pulse":"micromag-viewer-menus-menu-screen-pulse","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"};
 
 var propTypes$d = {
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   item: core.PropTypes.menuItem,
-  index: PropTypes__default["default"].number,
-  onClick: PropTypes__default["default"].func,
+  index: PropTypes.number,
+  onClick: PropTypes.func,
   screenSize: core.PropTypes.screenSize,
-  focusable: PropTypes__default["default"].bool
+  focusable: PropTypes.bool
 };
 var defaultProps$d = {
   className: null,
@@ -905,7 +886,6 @@ var defaultProps$d = {
   focusable: true
 };
 var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
-  var _ref4;
   var className = _ref.className,
     item = _ref.item,
     index = _ref.index,
@@ -940,12 +920,12 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
       "value": "(current screen)"
     }]
   })) : '');
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$a.isCurrent, current), _ref4)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$a.container, _defineProperty(_defineProperty({}, className, className !== null), styles$a.isCurrent, current)]),
     style: {
       paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
     }
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: styles$a.button,
     onClick: function onClick() {
@@ -959,15 +939,15 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     },
     "aria-label": screenAriaLabel,
     tabIndex: focusable ? '0' : '-1'
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles$a.inner
-  }, count > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, count > 1 ? /*#__PURE__*/React.createElement("div", {
     className: styles$a.subScreenBadge
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: styles$a.subScreenCount
-  }, count), /*#__PURE__*/React__default["default"].createElement(StackIcon, {
+  }, count), /*#__PURE__*/React.createElement(StackIcon, {
     className: styles$a.subScreenIcon
-  })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
+  })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(components.ScreenPreview, {
     className: styles$a.screen,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
@@ -985,22 +965,22 @@ var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container"
 var _excluded$3 = ["textAlign"];
 var propTypes$c = {
   viewerTheme: core.PropTypes.viewerTheme,
-  header: PropTypes__default["default"].node,
+  header: PropTypes.node,
   screenSize: core.PropTypes.screenSize,
-  title: PropTypes__default["default"].string,
-  menuWidth: PropTypes__default["default"].number,
+  title: PropTypes.string,
+  menuWidth: PropTypes.number,
   items: core.PropTypes.menuItems,
-  focusable: PropTypes__default["default"].bool,
-  onClickScreen: PropTypes__default["default"].func,
-  maxThumbsWidth: PropTypes__default["default"].number,
-  paddingTop: PropTypes__default["default"].number,
-  scrollDisabled: PropTypes__default["default"].bool,
+  focusable: PropTypes.bool,
+  onClickScreen: PropTypes.func,
+  maxThumbsWidth: PropTypes.number,
+  paddingTop: PropTypes.number,
+  scrollDisabled: PropTypes.bool,
   // @todo to reimplement:
   // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
   // fullscreenActive: PropTypes.bool,
   // fullscreenEnabled: PropTypes.bool,
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$c = {
   viewerTheme: null,
@@ -1061,11 +1041,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   // eslint-disable-next-line no-unused-vars
   var _ref6 = titleStyles || {};
     _ref6.textAlign;
-    var otherTitleStyles = _objectWithoutProperties__default["default"](_ref6, _excluded$3);
+    var otherTitleStyles = _objectWithoutProperties(_ref6, _excluded$3);
   var finalTitleStyles = titleStyles !== null ? utils.getStyleFromText(otherTitleStyles) : null;
   // const { url: brandLogoUrl = null } = brandLogo || {};
   var _useState = React.useState([]),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     screensMounted = _useState2[0],
     setScreensMounted = _useState2[1];
   var hasTitle = title !== null;
@@ -1081,44 +1061,44 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       return function () {};
     }
     var timeout = setTimeout(function () {
-      setScreensMounted([].concat(_toConsumableArray__default["default"](screensMounted), [true]));
+      setScreensMounted([].concat(_toConsumableArray(screensMounted), [true]));
     }, 40);
     return function () {
       clearTimeout(timeout);
     };
   }, [items, screensMounted, setScreensMounted]);
   var menuPaddingTop = paddingTop + 10;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
-    style: _objectSpread__default["default"](_objectSpread__default["default"]({}, brandImageStyle), {}, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$9.content,
     ref: containerRef
-  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
+  }, /*#__PURE__*/React.createElement(Scroll, {
     className: styles$9.scroll,
     disabled: scrollDisabled
-  }, hasTitle && header === null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, hasTitle && header === null ? /*#__PURE__*/React.createElement("div", {
     className: styles$9.titleContainer,
     style: {
       paddingTop: menuPaddingTop
     }
-  }, /*#__PURE__*/React__default["default"].createElement("h1", {
+  }, /*#__PURE__*/React.createElement("h1", {
     className: styles$9.title,
-    style: _objectSpread__default["default"]({}, finalTitleStyles)
-  }, title)) : /*#__PURE__*/React__default["default"].createElement("div", {
+    style: _objectSpread({}, finalTitleStyles)
+  }, title)) : /*#__PURE__*/React.createElement("div", {
     className: styles$9.headerContainer,
     style: {
       paddingTop: menuPaddingTop
     }
-  }, header), /*#__PURE__*/React__default["default"].createElement("nav", {
+  }, header), /*#__PURE__*/React.createElement("nav", {
     className: styles$9.nav,
     style: !hasTitle ? {
       paddingTop: paddingTop
     } : null
-  }, /*#__PURE__*/React__default["default"].createElement("ul", {
+  }, /*#__PURE__*/React.createElement("ul", {
     className: styles$9.items
   }, items.map(function (item, index) {
     var _ref8 = item || {},
@@ -1130,18 +1110,18 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       screenWidth = _ref9.width,
       screenHeight = _ref9.height;
     var screenMounted = screensMounted[index] || false;
-    return /*#__PURE__*/React__default["default"].createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       key: "item-".concat(screenId),
       className: styles$9.item,
       style: itemStyles
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: styles$9.inner
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]([styles$9.frame, _defineProperty__default["default"]({}, styles$9.isLoading, !screenMounted)]),
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames([styles$9.frame, _defineProperty({}, styles$9.isLoading, !screenMounted)]),
       style: {
         paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
       }
-    }, screenMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuScreen, {
+    }, screenMounted ? /*#__PURE__*/React.createElement(ViewerMenuScreen, {
       className: styles$9.screen,
       item: item,
       index: index,
@@ -1158,10 +1138,10 @@ var styles$8 = {"container":"micromag-viewer-partials-micromag-preview-container
 
 var propTypes$b = {
   screen: core.PropTypes.screen,
-  title: PropTypes__default["default"].string,
-  url: PropTypes__default["default"].string,
-  description: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string
+  title: PropTypes.string,
+  url: PropTypes.string,
+  description: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps$b = {
   screen: null,
@@ -1176,22 +1156,22 @@ var MicromagPreview = function MicromagPreview(_ref) {
     url = _ref.url,
     description = _ref.description,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$8.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$8.cover
-  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
+  }, /*#__PURE__*/React.createElement(components.ScreenPreview, {
     screen: screen,
     width: 100,
     height: 150,
     withSize: true
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles$8.info
-  }, /*#__PURE__*/React__default["default"].createElement("h3", {
+  }, /*#__PURE__*/React.createElement("h3", {
     className: styles$8.title
-  }, title), url ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, title), url ? /*#__PURE__*/React.createElement("div", {
     className: styles$8.url
-  }, url) : null, /*#__PURE__*/React__default["default"].createElement("p", null, description)));
+  }, url) : null, /*#__PURE__*/React.createElement("p", null, description)));
 };
 MicromagPreview.propTypes = propTypes$b;
 MicromagPreview.defaultProps = defaultProps$b;
@@ -1200,16 +1180,16 @@ var styles$7 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"
 
 var propTypes$a = {
   viewerTheme: core.PropTypes.viewerTheme,
-  menuWidth: PropTypes__default["default"].number,
-  title: PropTypes__default["default"].string,
-  description: PropTypes__default["default"].string,
+  menuWidth: PropTypes.number,
+  title: PropTypes.string,
+  description: PropTypes.string,
   items: core.PropTypes.menuItems,
-  focusable: PropTypes__default["default"].bool,
-  paddingTop: PropTypes__default["default"].number,
-  currentScreenIndex: PropTypes__default["default"].number,
-  shareUrl: PropTypes__default["default"].string,
-  onShare: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  focusable: PropTypes.bool,
+  paddingTop: PropTypes.number,
+  currentScreenIndex: PropTypes.number,
+  shareUrl: PropTypes.string,
+  onShare: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$a = {
   viewerTheme: null,
@@ -1268,7 +1248,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     return screen;
   }, [items, currentScreenIndex, focusable]);
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     shareCurrentScreen = _useState2[0],
     setShareCurrentScreen = _useState2[1];
   var onShareModeChange = React.useCallback(function () {
@@ -1277,50 +1257,50 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     });
   }, [setShareCurrentScreen]);
   var _useState3 = React.useState(shareUrl),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     finalShareUrl = _useState4[0],
     setFinalShareUrl = _useState4[1];
   React.useEffect(function () {
     setFinalShareUrl(shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex + 1) : shareUrl);
   }, [shareCurrentScreen, currentScreenIndex, setFinalShareUrl]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({}, className, className !== null)]),
-    style: _objectSpread__default["default"](_objectSpread__default["default"]({}, brandImageStyle), {}, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
+    style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.content
-  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
+  }, /*#__PURE__*/React.createElement(Scroll, {
     className: styles$7.scroll
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.inner,
     style: {
       paddingTop: paddingTop
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.header
-  }, /*#__PURE__*/React__default["default"].createElement(MicromagPreview, {
+  }, /*#__PURE__*/React.createElement(MicromagPreview, {
     className: styles$7.preview,
     screen: shareCurrentScreen ? currentScreen : coverScreen,
     title: title,
     url: finalShareUrl,
     description: description
-  }), currentScreenIndex !== 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }), currentScreenIndex !== 0 ? /*#__PURE__*/React.createElement("div", {
     className: styles$7.mode
-  }, /*#__PURE__*/React__default["default"].createElement("label", null, /*#__PURE__*/React__default["default"].createElement("input", {
+  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     name: "currentScreen",
     value: "currentScreen",
     onChange: onShareModeChange,
     checked: shareCurrentScreen
-  }), /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }), /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "xuPbeq",
     defaultMessage: [{
       "type": 0,
       "value": "Start from the current screen"
     }]
-  }))) : null), /*#__PURE__*/React__default["default"].createElement(ShareOptions__default["default"], {
+  }))) : null), /*#__PURE__*/React.createElement(ShareOptions, {
     className: styles$7.options,
     itemClassName: styles$7.optionItem,
     buttonClassName: styles$7.optionButton,
@@ -1335,31 +1315,31 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
 ViewerMenuShare.propTypes = propTypes$a;
 ViewerMenuShare.defaultProps = defaultProps$a;
 
-var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","landscape":"micromag-viewer-landscape","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","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","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
+var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","focus-visible":"micromag-viewer-focus-visible","landscape":"micromag-viewer-landscape","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","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","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
 
 var propTypes$9 = {
   story: core.PropTypes.story.isRequired,
-  currentScreenIndex: PropTypes__default["default"].number,
-  toggleFullscreen: PropTypes__default["default"].func,
-  fullscreenActive: PropTypes__default["default"].bool,
-  fullscreenEnabled: PropTypes__default["default"].bool,
-  closeable: PropTypes__default["default"].bool,
-  withShadow: PropTypes__default["default"].bool,
-  trackingEnabled: PropTypes__default["default"].bool,
-  shareBasePath: PropTypes__default["default"].string,
+  currentScreenIndex: PropTypes.number,
+  toggleFullscreen: PropTypes.func,
+  fullscreenActive: PropTypes.bool,
+  fullscreenEnabled: PropTypes.bool,
+  closeable: PropTypes.bool,
+  withShadow: PropTypes.bool,
+  trackingEnabled: PropTypes.bool,
+  shareBasePath: PropTypes.string,
   theme: core.PropTypes.viewerTheme,
   screenSize: core.PropTypes.screenSize,
-  menuWidth: PropTypes__default["default"].number,
-  previewHeader: PropTypes__default["default"].node,
-  withDotItemClick: PropTypes__default["default"].bool,
-  withoutScreensMenu: PropTypes__default["default"].bool,
-  withoutShareMenu: PropTypes__default["default"].bool,
-  onClickScreen: PropTypes__default["default"].func,
+  menuWidth: PropTypes.number,
+  previewHeader: PropTypes.node,
+  withDotItemClick: PropTypes.bool,
+  withoutScreensMenu: PropTypes.bool,
+  withoutShareMenu: PropTypes.bool,
+  onClickScreen: PropTypes.func,
   // onClickMenu: PropTypes.func,
-  onClickCloseViewer: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func,
-  refDots: PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any // eslint-disable-line
+  onClickCloseViewer: PropTypes.func,
+  onChange: PropTypes.func,
+  refDots: PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
   })
 };
 
@@ -1386,7 +1366,6 @@ var defaultProps$9 = {
   refDots: null
 };
 var ViewerMenu = function ViewerMenu(_ref) {
-  var _ref11;
   var story = _ref.story,
     currentScreenIndex = _ref.currentScreenIndex,
     toggleFullscreen = _ref.toggleFullscreen,
@@ -1428,15 +1407,15 @@ var ViewerMenu = function ViewerMenu(_ref) {
   var _useViewerSize = contexts.useViewerSize(),
     viewerHeight = _useViewerSize.height;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     menuOpened = _useState2[0],
     setMenuOpened = _useState2[1];
   var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     shareOpened = _useState4[0],
     setShareOpened = _useState4[1];
   var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     menuMounted = _useState6[0],
     setMenuMounted = _useState6[1];
   var _useDimensionObserver = hooks.useDimensionObserver(),
@@ -1532,11 +1511,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, [trackScreenEvent]);
   var computeShareProgress = React.useCallback(function (_ref7) {
     var active = _ref7.active,
-      _ref7$direction = _slicedToArray__default["default"](_ref7.direction, 2),
+      _ref7$direction = _slicedToArray(_ref7.direction, 2),
       dy = _ref7$direction[1],
-      _ref7$movement = _slicedToArray__default["default"](_ref7.movement, 2),
+      _ref7$movement = _slicedToArray(_ref7.movement, 2),
       my = _ref7$movement[1],
-      _ref7$velocity = _slicedToArray__default["default"](_ref7.velocity, 2),
+      _ref7$velocity = _slicedToArray(_ref7.velocity, 2),
       vy = _ref7$velocity[1];
     var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
@@ -1548,11 +1527,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, [onOpenShare, viewerHeight]);
   var computeShareProgressClose = React.useCallback(function (_ref8) {
     var active = _ref8.active,
-      _ref8$direction = _slicedToArray__default["default"](_ref8.direction, 2),
+      _ref8$direction = _slicedToArray(_ref8.direction, 2),
       dy = _ref8$direction[1],
-      _ref8$movement = _slicedToArray__default["default"](_ref8.movement, 2),
+      _ref8$movement = _slicedToArray(_ref8.movement, 2),
       my = _ref8$movement[1],
-      _ref8$velocity = _slicedToArray__default["default"](_ref8.velocity, 2),
+      _ref8$velocity = _slicedToArray(_ref8.velocity, 2),
       vy = _ref8$velocity[1];
     var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
@@ -1580,11 +1559,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     shareOpenedProgress = _useDragProgress.progress;
   var computeMenuProgress = React.useCallback(function (_ref9) {
     var active = _ref9.active,
-      _ref9$direction = _slicedToArray__default["default"](_ref9.direction, 2),
+      _ref9$direction = _slicedToArray(_ref9.direction, 2),
       dy = _ref9$direction[1],
-      _ref9$movement = _slicedToArray__default["default"](_ref9.movement, 2),
+      _ref9$movement = _slicedToArray(_ref9.movement, 2),
       my = _ref9$movement[1],
-      _ref9$velocity = _slicedToArray__default["default"](_ref9.velocity, 2),
+      _ref9$velocity = _slicedToArray(_ref9.velocity, 2),
       vy = _ref9$velocity[1];
     var progress = Math.max(0, my) / (window.innerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
@@ -1596,11 +1575,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, [onOpenMenu]);
   var computeMenuProgressClose = React.useCallback(function (_ref10) {
     var active = _ref10.active,
-      _ref10$direction = _slicedToArray__default["default"](_ref10.direction, 2),
+      _ref10$direction = _slicedToArray(_ref10.direction, 2),
       dy = _ref10$direction[1],
-      _ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
+      _ref10$movement = _slicedToArray(_ref10.movement, 2),
       my = _ref10$movement[1],
-      _ref10$velocity = _slicedToArray__default["default"](_ref10.velocity, 2),
+      _ref10$velocity = _slicedToArray(_ref10.velocity, 2),
       vy = _ref10$velocity[1];
     var progress = Math.max(0, my) / (window.innerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
@@ -1647,27 +1626,27 @@ var ViewerMenu = function ViewerMenu(_ref) {
       setMenuMounted(false);
     }
   }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.menuNavContainer, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles$6.withShadow, withShadow), _defineProperty__default["default"](_ref11, styles$6.isOpened, menuOpened || shareOpened), _ref11)]),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$6.menuNavContainer, _defineProperty(_defineProperty({}, styles$6.withShadow, withShadow), styles$6.isOpened, menuOpened || shareOpened)]),
     ref: refDots,
     style: {
       width: menuWidth
     }
-  }, /*#__PURE__*/React__default["default"].createElement("nav", {
+  }, /*#__PURE__*/React.createElement("nav", {
     className: styles$6.menuTopContainer,
     ref: navContainerRef
-  }, !withoutShareMenu ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindShareDrag()), /*#__PURE__*/React__default["default"].createElement(ToggleButton, {
+  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
     className: styles$6.slidingButton,
-    button: /*#__PURE__*/React__default["default"].createElement(ShareButton, {
+    button: /*#__PURE__*/React.createElement(ShareButton, {
       className: styles$6.menuButton,
       onClick: onOpenShare,
       theme: menuTheme,
       iconPosition: "left",
       focusable: !shareOpened
     }),
-    toggledButton: /*#__PURE__*/React__default["default"].createElement(CloseMenuButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
@@ -1676,18 +1655,18 @@ var ViewerMenu = function ViewerMenu(_ref) {
       single: true
     }),
     progressSpring: shareOpenedProgress
-  })) : null, !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindMenuDrag()), /*#__PURE__*/React__default["default"].createElement(ToggleButton, {
+  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
     className: styles$6.slidingButton,
-    button: /*#__PURE__*/React__default["default"].createElement(MenuButton, {
+    button: /*#__PURE__*/React.createElement(MenuButton, {
       className: styles$6.menuButton,
       iconClassName: styles$6.menuButtonIcon,
       onClick: onOpenMenu,
       theme: menuTheme,
       focusable: !menuOpened
     }),
-    toggledButton: /*#__PURE__*/React__default["default"].createElement(CloseMenuButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton, {
       className: styles$6.menuButton,
       onClick: onCloseMenu,
       theme: menuTheme,
@@ -1696,7 +1675,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }),
     progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
-  })) : null), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
+  })) : null), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     items: items,
     onClickDot: onClickScreen,
@@ -1710,11 +1689,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     // style={{
     // opacity: dotsOpacity ** 5, // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
     // }}
-  }))), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
+  }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: shareOpenedProgress,
     theme: viewerTheme
-  }, draggingShare || shareOpened ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuShare, {
+  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -1727,11 +1706,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     shareUrl: shareUrl,
     onShare: onShare,
     onClose: onCloseShare
-  }) : null), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
+  }) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, menuMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
+  }, menuMounted ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     header: previewHeader,
     title: title,
@@ -1753,23 +1732,23 @@ var ViewerMenu = function ViewerMenu(_ref) {
 };
 ViewerMenu.propTypes = propTypes$9;
 ViewerMenu.defaultProps = defaultProps$9;
-var ViewerMenu$1 = /*#__PURE__*/React__default["default"].memo(ViewerMenu);
+var ViewerMenu$1 = /*#__PURE__*/React.memo(ViewerMenu);
 
 var styles$5 = {"container":"micromag-viewer-screen-container","inner":"micromag-viewer-screen-inner","navigationHint":"micromag-viewer-screen-navigationHint"};
 
 var propTypes$8 = {
   screen: core.PropTypes.screenComponent,
   renderContext: core.PropTypes.renderContext,
-  screenState: PropTypes__default["default"].string,
-  current: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool,
-  mediaRef: PropTypes__default["default"].func,
-  width: PropTypes__default["default"].number,
-  index: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  scale: PropTypes__default["default"].number,
+  screenState: PropTypes.string,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  mediaRef: PropTypes.func,
+  width: PropTypes.number,
+  index: PropTypes.number,
+  height: PropTypes.number,
+  scale: PropTypes.number,
   // withNavigationHint: PropTypes.bool,  // @todo
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$8 = {
   screen: null,
@@ -1798,7 +1777,7 @@ function ViewerScreen(_ref) {
     scale = _ref.scale,
     className = _ref.className;
   var _useState = React.useState(active || current),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     mounted = _useState2[0],
     setMounted = _useState2[1];
   React.useEffect(function () {
@@ -1814,9 +1793,9 @@ function ViewerScreen(_ref) {
       }
     };
   }, [active, mounted, setMounted, index]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$5.inner,
     style: {
       width: width,
@@ -1825,7 +1804,7 @@ function ViewerScreen(_ref) {
       transformOrigin: scale !== null ? '0 0' : null,
       opacity: mounted ? 1 : null
     }
-  }, mounted ? /*#__PURE__*/React__default["default"].createElement(components.Screen, {
+  }, mounted ? /*#__PURE__*/React.createElement(components.Screen, {
     screen: screen,
     renderContext: renderContext,
     screenState: screenState,
@@ -1841,9 +1820,9 @@ ViewerScreen.defaultProps = defaultProps$8;
 var styles$4 = {"arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
 
 var propTypes$7 = {
-  direction: PropTypes__default["default"].oneOf(['previous', 'next']),
-  onClick: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  direction: PropTypes.oneOf(['previous', 'next']),
+  onClick: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$7 = {
   direction: 'next',
@@ -1854,32 +1833,32 @@ var NavigationButton = function NavigationButton(_ref) {
   var direction = _ref.direction,
     _onClick = _ref.onClick,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, {
-    className: classNames__default["default"]([styles$4.container, styles$4[direction], _defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement(IconButton, {
+    className: classNames([styles$4.container, styles$4[direction], _defineProperty({}, className, className !== null)]),
     onClick: function onClick(e) {
       e.stopPropagation();
       _onClick();
     },
     iconPosition: direction === 'next' ? 'right' : 'left',
-    icon: /*#__PURE__*/React__default["default"].createElement("svg", {
+    icon: /*#__PURE__*/React.createElement("svg", {
       className: styles$4.arrow,
       xmlns: "http://www.w3.org/2000/svg",
       width: "10",
       height: "16",
       viewBox: "0 0 10 16",
       fill: "currentColor"
-    }, /*#__PURE__*/React__default["default"].createElement("polygon", {
+    }, /*#__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"
     })),
-    label: /*#__PURE__*/React__default["default"].createElement("span", {
+    label: /*#__PURE__*/React.createElement("span", {
       className: "sr-only"
-    }, direction === 'previous' ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, direction === 'previous' ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "zYH/31",
       defaultMessage: [{
         "type": 0,
         "value": "Go to previous screen"
       }]
-    }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "v9bqYj",
       defaultMessage: [{
         "type": 0,
@@ -1894,18 +1873,18 @@ NavigationButton.defaultProps = defaultProps$7;
 var styles$3 = {"container":"micromag-viewer-partials-arrow-hint-container","inner":"micromag-viewer-partials-arrow-hint-inner","shadowFade":"micromag-viewer-partials-arrow-hint-shadowFade","arrow":"micromag-viewer-partials-arrow-hint-arrow","panX":"micromag-viewer-partials-arrow-hint-panX"};
 
 var propTypes$6 = {
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$6 = {
   className: null
 };
 var ArrowHint = function ArrowHint(_ref) {
   var className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.inner
-  }, /*#__PURE__*/React__default["default"].createElement(components.ArrowIcon, {
+  }, /*#__PURE__*/React.createElement(components.ArrowIcon, {
     className: styles$3.arrow
   })));
 };
@@ -1941,7 +1920,7 @@ function getFormattedTimestamp() {
   }
   var parts = "".concat(secondsWithMs).split('.');
   var _ref = parts || [],
-    _ref2 = _slicedToArray__default["default"](_ref, 1),
+    _ref2 = _slicedToArray(_ref, 1),
     _ref2$ = _ref2[0],
     fullSeconds = _ref2$ === void 0 ? 0 : _ref2$;
   var finalFullSeconds = Math.round(fullSeconds);
@@ -1953,20 +1932,20 @@ function getFormattedTimestamp() {
 var SHOW_MILLISECONDS_THRESHOLD = 5; // show milliseconds when scrubbing if length of video is shorter than 5 seconds
 
 var propTypes$5 = {
-  media: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
+  media: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
   }) // eslint-disable-line
   ]),
 
-  playing: PropTypes__default["default"].bool,
-  backgroundColor: PropTypes__default["default"].string,
-  progressColor: PropTypes__default["default"].string,
-  onSeek: PropTypes__default["default"].func,
-  onSeekStart: PropTypes__default["default"].func,
-  onSeekEnd: PropTypes__default["default"].func,
-  focusable: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  withSeekHead: PropTypes__default["default"].bool
+  playing: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  progressColor: PropTypes.string,
+  onSeek: PropTypes.func,
+  onSeekStart: PropTypes.func,
+  onSeekEnd: PropTypes.func,
+  focusable: PropTypes.bool,
+  className: PropTypes.string,
+  withSeekHead: PropTypes.bool
 };
 var defaultProps$5 = {
   media: null,
@@ -1981,7 +1960,6 @@ var defaultProps$5 = {
   withSeekHead: true
 };
 var SeekBar = function SeekBar(_ref3) {
-  var _ref6;
   var media = _ref3.media,
     playing = _ref3.playing,
     backgroundColor = _ref3.backgroundColor,
@@ -2002,11 +1980,11 @@ var SeekBar = function SeekBar(_ref3) {
     _ref4$duration = _ref4.duration,
     duration = _ref4$duration === void 0 ? null : _ref4$duration;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     showTimestamp = _useState2[0],
     setShowTimestamp = _useState2[1];
   var onDrag = React.useCallback(function (_ref5) {
-    var _ref5$xy = _slicedToArray__default["default"](_ref5.xy, 1),
+    var _ref5$xy = _slicedToArray(_ref5.xy, 1),
       x = _ref5$xy[0],
       elapsedTime = _ref5.elapsedTime,
       active = _ref5.active,
@@ -2047,35 +2025,35 @@ var SeekBar = function SeekBar(_ref3) {
       filterTaps: true
     }
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: classNames__default["default"]([styles$2.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles$2.withSeekHead, withSeekHead), _defineProperty__default["default"](_ref6, styles$2.showTimestamp, showTimestamp), _ref6)])
-  }, stopDragEventsPropagation), /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles$2.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$2.withSeekHead, withSeekHead), styles$2.showTimestamp, showTimestamp)])
+  }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
     className: styles$2.inner
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.progressBarContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.progressBar,
     style: {
       backgroundColor: backgroundColor
     }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles$2.playHead,
     style: {
       left: "".concat(progress * 100, "%"),
       backgroundColor: progressColor
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.scrubbedTime,
     style: {
       borderColor: progressColor
     }
-  }, getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD))), /*#__PURE__*/React.createElement("div", {
     className: styles$2.progress,
     style: {
       transform: "scaleX(".concat(progress, ")"),
       backgroundColor: progressColor
     }
-  })), /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, bind(), {
+  })), /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
     type: "button",
     className: styles$2.track,
     title: intl.formatMessage({
@@ -2101,17 +2079,17 @@ SeekBar.defaultProps = defaultProps$5;
 var styles$1 = {"playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","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"};
 
 var propTypes$4 = {
-  defaultColor: PropTypes__default["default"].shape({
-    color: PropTypes__default["default"].string,
-    alpha: PropTypes__default["default"].number
+  defaultColor: PropTypes.shape({
+    color: PropTypes.string,
+    alpha: PropTypes.number
   }),
-  defaultProgressColor: PropTypes__default["default"].shape({
-    color: PropTypes__default["default"].string,
-    alpha: PropTypes__default["default"].number
+  defaultProgressColor: PropTypes.shape({
+    color: PropTypes.string,
+    alpha: PropTypes.number
   }),
-  withLoading: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  collapsedClassName: PropTypes__default["default"].string
+  withLoading: PropTypes.bool,
+  className: PropTypes.string,
+  collapsedClassName: PropTypes.string
 };
 var defaultProps$4 = {
   defaultColor: {
@@ -2127,7 +2105,6 @@ var defaultProps$4 = {
   collapsedClassName: null
 };
 function PlaybackControls(_ref) {
-  var _ref4;
   var defaultColor = _ref.defaultColor,
     defaultProgressColor = _ref.defaultProgressColor,
     withLoading = _ref.withLoading,
@@ -2150,7 +2127,7 @@ function PlaybackControls(_ref) {
     controlsTheme = _usePlaybackContext.controlsTheme,
     showControls = _usePlaybackContext.showControls;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     showLoading = _useState2[0],
     setShowLoading = _useState2[1];
   var mediaUrl = mediaElement !== null ? mediaElement.src : null;
@@ -2177,11 +2154,11 @@ function PlaybackControls(_ref) {
       progressColor: utils.getColorAsString(defaultColor),
       seekBarOnly: false
     }),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     customControlsTheme = _useState4[0],
     setCustomControlsTheme = _useState4[1];
   var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     wasPlaying = _useState6[0],
     setWasPlaying = _useState6[1];
   React.useEffect(function () {
@@ -2245,9 +2222,9 @@ function PlaybackControls(_ref) {
     progressColor = _ref3.progressColor,
     seekBarOnly = _ref3.seekBarOnly;
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
-  var playIcon = playing ? /*#__PURE__*/React__default["default"].createElement(components.PauseIcon, {
+  var playIcon = playing ? /*#__PURE__*/React.createElement(components.PauseIcon, {
     className: styles$1.icon
-  }) : /*#__PURE__*/React__default["default"].createElement(components.PlayIcon, {
+  }) : /*#__PURE__*/React.createElement(components.PlayIcon, {
     className: styles$1.icon
   });
   var playLabel = playing ? intl.formatMessage({
@@ -2263,17 +2240,17 @@ function PlaybackControls(_ref) {
       "value": "Play"
     }]
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$1.withPlayPause, controls && !seekBarOnly), _defineProperty__default["default"](_ref4, styles$1.withMute, hasMedia || controls), _defineProperty__default["default"](_ref4, styles$1.withSeekBar, controls), _defineProperty__default["default"](_ref4, styles$1.withSeekBarOnly, seekBarOnly), _defineProperty__default["default"](_ref4, styles$1.isCollapsed, isCollapsed), _defineProperty__default["default"](_ref4, styles$1.isMuted, muted), _defineProperty__default["default"](_ref4, collapsedClassName, collapsedClassName !== null && isCollapsed), _ref4)])
-  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([styles$1.playPauseButton, _defineProperty__default["default"]({}, styles$1.loading, finalShowLoading)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
+  }, /*#__PURE__*/React.createElement(components.Button, {
+    className: classNames([styles$1.playPauseButton, _defineProperty({}, styles$1.loading, finalShowLoading)]),
     style: {
       color: color
     },
     onClick: playing ? onPause : onPlay,
     focusable: controlsVisible,
     disabled: finalShowLoading,
-    icon: finalShowLoading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
+    icon: finalShowLoading ? /*#__PURE__*/React.createElement(components.Spinner, {
       className: styles$1.spinner
     }) : playIcon,
     "aria-label": finalShowLoading ? intl.formatMessage({
@@ -2284,7 +2261,7 @@ function PlaybackControls(_ref) {
       }]
     }) : playLabel,
     withoutBootstrapStyles: true
-  }), /*#__PURE__*/React__default["default"].createElement(SeekBar, {
+  }), /*#__PURE__*/React.createElement(SeekBar, {
     className: styles$1.seekBar,
     media: mediaElement,
     playing: playing,
@@ -2295,16 +2272,16 @@ function PlaybackControls(_ref) {
     withSeekHead: !isCollapsed && !seekBarOnly,
     backgroundColor: color,
     progressColor: progressColor
-  }), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }), /*#__PURE__*/React.createElement(components.Button, {
     className: styles$1.muteButton,
     style: {
       color: color
     },
     onClick: muted ? onUnmute : onMute,
     focusable: controlsVisible || mediaHasAudio,
-    icon: muted ? /*#__PURE__*/React__default["default"].createElement(components.UnmuteIcon, {
+    icon: muted ? /*#__PURE__*/React.createElement(components.UnmuteIcon, {
       className: styles$1.icon
-    }) : /*#__PURE__*/React__default["default"].createElement(components.MuteIcon, {
+    }) : /*#__PURE__*/React.createElement(components.MuteIcon, {
       className: styles$1.icon
     }),
     "aria-label": muted ? intl.formatMessage({
@@ -2330,15 +2307,14 @@ var styles = {"container":"micromag-viewer-partials-web-view-container","opened"
 
 var _excluded$2 = ["opened", "close", "open", "update", "url"];
 var propTypes$3 = {
-  className: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].object
+  className: PropTypes.string,
+  style: PropTypes.object
 };
 var defaultProps$3 = {
   className: null,
   style: null
 };
 function WebViewContainer(_ref) {
-  var _ref2;
   var className = _ref.className,
     style = _ref.style;
   var _useViewerWebView = contexts.useViewerWebView(),
@@ -2348,7 +2324,7 @@ function WebViewContainer(_ref) {
     _useViewerWebView.update;
     var _useViewerWebView$url = _useViewerWebView.url,
     url = _useViewerWebView$url === void 0 ? null : _useViewerWebView$url,
-    webViewProps = _objectWithoutProperties__default["default"](_useViewerWebView, _excluded$2);
+    webViewProps = _objectWithoutProperties(_useViewerWebView, _excluded$2);
   var _useViewerInteraction = contexts.useViewerInteraction(),
     disableInteraction = _useViewerInteraction.disableInteraction,
     enableInteraction = _useViewerInteraction.enableInteraction;
@@ -2357,7 +2333,7 @@ function WebViewContainer(_ref) {
     setPlaying = _usePlaybackContext.setPlaying;
   var wasPlayingRef = React.useRef(playing);
   var _useState = React.useState(url),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     currentUrl = _useState2[0],
     setCurrentUrl = _useState2[1];
 
@@ -2389,11 +2365,11 @@ function WebViewContainer(_ref) {
       }
     }
   }, [opened]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles.opened, opened), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, styles.opened, opened), className, className !== null)]),
     style: style,
     onTransitionEnd: onTransitionEnd
-  }, /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
+  }, /*#__PURE__*/React.createElement(WebView, Object.assign({
     url: url || currentUrl
   }, webViewProps, {
     closeable: true,
@@ -2417,48 +2393,48 @@ var SHARE_INCENTIVE_TIMEOUT = 6000;
 var propTypes$2 = {
   story: core.PropTypes.story,
   // .isRequired,
-  basePath: PropTypes__default["default"].string,
+  basePath: PropTypes.string,
   theme: core.PropTypes.viewerTheme,
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  screen: PropTypes__default["default"].string,
-  screenState: PropTypes__default["default"].string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  screen: PropTypes.string,
+  screenState: PropTypes.string,
   deviceScreens: core.PropTypes.deviceScreens,
   renderContext: core.PropTypes.renderContext,
-  onScreenChange: PropTypes__default["default"].func,
-  tapNextScreenWidthPercent: PropTypes__default["default"].number,
-  storyIsParsed: PropTypes__default["default"].bool,
-  neighborScreensActive: PropTypes__default["default"].number,
-  neighborScreenOffset: PropTypes__default["default"].number,
-  neighborScreenScale: PropTypes__default["default"].number,
-  withMetadata: PropTypes__default["default"].bool,
-  withoutGestures: PropTypes__default["default"].bool,
-  withoutMenu: PropTypes__default["default"].bool,
-  withoutScreensMenu: PropTypes__default["default"].bool,
-  withoutShareMenu: PropTypes__default["default"].bool,
-  withoutMenuShadow: PropTypes__default["default"].bool,
-  withoutFullscreen: PropTypes__default["default"].bool,
-  withoutNavigationArrow: PropTypes__default["default"].bool,
-  withoutTransitions: PropTypes__default["default"].bool,
-  withNeighborScreens: PropTypes__default["default"].bool,
-  withNavigationHint: PropTypes__default["default"].bool,
-  withoutPlaybackControls: PropTypes__default["default"].bool,
-  closeable: PropTypes__default["default"].bool,
-  onClose: PropTypes__default["default"].func,
-  onInteraction: PropTypes__default["default"].func,
-  onEnd: PropTypes__default["default"].func,
-  onViewModeChange: PropTypes__default["default"].func,
-  onMenuChange: PropTypes__default["default"].func,
+  onScreenChange: PropTypes.func,
+  tapNextScreenWidthPercent: PropTypes.number,
+  storyIsParsed: PropTypes.bool,
+  neighborScreensActive: PropTypes.number,
+  neighborScreenOffset: PropTypes.number,
+  neighborScreenScale: PropTypes.number,
+  withMetadata: PropTypes.bool,
+  withoutGestures: PropTypes.bool,
+  withoutMenu: PropTypes.bool,
+  withoutScreensMenu: PropTypes.bool,
+  withoutShareMenu: PropTypes.bool,
+  withoutMenuShadow: PropTypes.bool,
+  withoutFullscreen: PropTypes.bool,
+  withoutNavigationArrow: PropTypes.bool,
+  withoutTransitions: PropTypes.bool,
+  withNeighborScreens: PropTypes.bool,
+  withNavigationHint: PropTypes.bool,
+  withoutPlaybackControls: PropTypes.bool,
+  closeable: PropTypes.bool,
+  onClose: PropTypes.func,
+  onInteraction: PropTypes.func,
+  onEnd: PropTypes.func,
+  onViewModeChange: PropTypes.func,
+  onMenuChange: PropTypes.func,
   currentScreenMedia: core.PropTypes.ref,
-  menuIsScreenWidth: PropTypes__default["default"].bool,
-  menuHeader: PropTypes__default["default"].node,
+  menuIsScreenWidth: PropTypes.bool,
+  menuHeader: PropTypes.node,
   screensMedias: core.PropTypes.ref,
-  screenSizeOptions: PropTypes__default["default"].shape({
-    withoutMaxSize: PropTypes__default["default"].bool,
-    desktopHeightRatio: PropTypes__default["default"].number,
-    screenRatio: PropTypes__default["default"].number
+  screenSizeOptions: PropTypes.shape({
+    withoutMaxSize: PropTypes.bool,
+    desktopHeightRatio: PropTypes.number,
+    screenRatio: PropTypes.number
   }),
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$2 = {
   story: null,
@@ -2502,7 +2478,6 @@ var defaultProps$2 = {
   className: null
 };
 var Viewer = function Viewer(_ref) {
-  var _ref21;
   var story = _ref.story,
     basePath = _ref.basePath,
     viewerTheme = _ref.theme,
@@ -2558,7 +2533,7 @@ var Viewer = function Viewer(_ref) {
     fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts;
   var screensCount = screens.length;
   var eventsManager = React.useMemo(function () {
-    return new EventEmitter__default["default"]();
+    return new EventEmitter();
   }, [parsedStory]);
   var screenIndex = React.useMemo(function () {
     return Math.max(0, screens.findIndex(function (it) {
@@ -2577,7 +2552,7 @@ var Viewer = function Viewer(_ref) {
     screenDescription = _ref4$description === void 0 ? null : _ref4$description;
   var finalTitle = screenTitle !== null ? screenTitle : title;
   var finalMetadata = React.useMemo(function () {
-    return screenDescription !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, metadata), {}, {
+    return screenDescription !== null ? _objectSpread(_objectSpread({}, metadata), {}, {
       description: screenDescription
     }) : metadata;
   }, [metadata, screenDescription]);
@@ -2603,7 +2578,7 @@ var Viewer = function Viewer(_ref) {
 
   // Fonts
   var finalFonts = React.useMemo(function () {
-    return [].concat(_toConsumableArray__default["default"](fonts || []), [themeFont]).filter(function (font) {
+    return [].concat(_toConsumableArray(fonts || []), [themeFont]).filter(function (font) {
       return font !== null;
     });
   }, [fonts]);
@@ -2628,7 +2603,7 @@ var Viewer = function Viewer(_ref) {
     _useDimensionObserver2 = _useDimensionObserver.height,
     playbackControlsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var trackScreenView = hooks.useTrackScreenView();
-  var _useScreenSizeFromEle = hooks.useScreenSizeFromElement(_objectSpread__default["default"]({
+  var _useScreenSizeFromEle = hooks.useScreenSizeFromElement(_objectSpread({
       width: width,
       height: height,
       screens: deviceScreens
@@ -2713,7 +2688,7 @@ var Viewer = function Viewer(_ref) {
     changeIndex(Math.min(screens.length - 1, screenIndex + 1));
   }, [changeIndex, screenIndex]);
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     hasInteracted = _useState2[0],
     setHasInteracted = _useState2[1];
   var onInteractionPrivate = React.useCallback(function () {
@@ -2741,7 +2716,7 @@ var Viewer = function Viewer(_ref) {
     var currentTarget = _ref10.currentTarget,
       event = _ref10.event,
       target = _ref10.target,
-      _ref10$xy = _slicedToArray__default["default"](_ref10.xy, 2),
+      _ref10$xy = _slicedToArray(_ref10.xy, 2),
       x = _ref10$xy[0],
       y = _ref10$xy[1];
     if (event) {
@@ -2758,9 +2733,9 @@ var Viewer = function Viewer(_ref) {
   }, [interactWithScreen, screenIndex]);
   var computeScreenProgress = React.useCallback(function (_ref11) {
     var active = _ref11.active,
-      _ref11$movement = _slicedToArray__default["default"](_ref11.movement, 1),
+      _ref11$movement = _slicedToArray(_ref11.movement, 1),
       mx = _ref11$movement[0],
-      _ref11$velocity = _slicedToArray__default["default"](_ref11.velocity, 1),
+      _ref11$velocity = _slicedToArray(_ref11.velocity, 1),
       vx = _ref11$velocity[0];
     var p = mx / screenContainerWidth; // drag "ratio": how much of the screen width has been swiped?
     var forwards = mx < 0; // true if swiping to left (to navigate forwards)
@@ -2786,7 +2761,7 @@ var Viewer = function Viewer(_ref) {
     }
   }, [onScreenNavigate, screenIndex]);
   var _useState3 = React.useState(true),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     transitioned = _useState4[0],
     setTransitioned = _useState4[1];
   var onTransitionStart = React.useCallback(function () {
@@ -2885,7 +2860,7 @@ var Viewer = function Viewer(_ref) {
   }, [landscape]);
 
   // hmm?
-  var overscrollStyle = /*#__PURE__*/React__default["default"].createElement("style", {
+  var overscrollStyle = /*#__PURE__*/React.createElement("style", {
     type: "text/css"
   }, "body { overscroll-behavior: contain; }");
   var keyboardShortcuts = React.useMemo(function () {
@@ -2908,11 +2883,11 @@ var Viewer = function Viewer(_ref) {
     disabled: renderContext !== 'view'
   });
   var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     currentShareIncentive = _useState6[0],
     setCurrentShareIncentive = _useState6[1];
   var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    _useState8 = _slicedToArray(_useState7, 2),
     shareIncentiveVisible = _useState8[0],
     setShareIncentiveVisible = _useState8[1];
   var _ref15 = currentScreen || {},
@@ -2949,11 +2924,11 @@ var Viewer = function Viewer(_ref) {
       clearTimeout(timeout);
     };
   }, [shareIncentiveLabel, setShareIncentiveVisible, hasShareIncentive, incentiveLabel, currentIncentiveLabel, setCurrentShareIncentive, isView]);
-  return /*#__PURE__*/React__default["default"].createElement(contexts.StoryProvider, {
+  return /*#__PURE__*/React.createElement(contexts.StoryProvider, {
     story: parsedStory
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.ScreenSizeProvider, {
     size: screenSize
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.ViewerProvider, {
     containerRef: containerRef,
     events: eventsManager,
     menuVisible: menuVisible,
@@ -2967,18 +2942,18 @@ var Viewer = function Viewer(_ref) {
     gotoNextScreen: gotoNextScreen,
     disableInteraction: disableInteraction,
     enableInteraction: enableInteraction
-  }, withMetadata ? /*#__PURE__*/React__default["default"].createElement(components.Meta, {
+  }, withMetadata ? /*#__PURE__*/React.createElement(components.Meta, {
     title: finalTitle,
     metadata: finalMetadata
-  }, overscrollStyle) : /*#__PURE__*/React__default["default"].createElement(reactHelmet.Helmet, null, overscrollStyle), /*#__PURE__*/React__default["default"].createElement(components.FontFaces, {
+  }, overscrollStyle) : /*#__PURE__*/React.createElement(reactHelmet.Helmet, null, overscrollStyle), /*#__PURE__*/React.createElement(components.FontFaces, {
     fonts: finalFonts
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.container, screenSize.screens.map(function (screenName) {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref21 = {}, _defineProperty__default["default"](_ref21, styles$6.landscape, landscape), _defineProperty__default["default"](_ref21, styles$6.withoutGestures, withoutGestures), _defineProperty__default["default"](_ref21, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref21, styles$6.disableMenu, navigationDisabled), _defineProperty__default["default"](_ref21, styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), _defineProperty__default["default"](_ref21, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref21, styles$6.hasInteracted, hasInteracted), _defineProperty__default["default"](_ref21, styles$6.isDragging, isDragging), _defineProperty__default["default"](_ref21, className, className), _ref21)]),
+    }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$6.landscape, landscape), styles$6.withoutGestures, withoutGestures), styles$6.hideMenu, !menuVisible), styles$6.disableMenu, navigationDisabled), styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), styles$6.ready, ready || withoutScreensTransforms), styles$6.hasInteracted, hasInteracted), styles$6.isDragging, isDragging), className, className)]),
     ref: containerRef,
     onContextMenu: onContextMenu
-  }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu$1, {
+  }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu$1, {
     story: parsedStory,
     currentScreenIndex: screenIndex,
     withShadow: menuOverScreen && !withoutMenuShadow,
@@ -2999,13 +2974,13 @@ var Viewer = function Viewer(_ref) {
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
     refDots: menuDotsContainerRef
-  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.content
-  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React__default["default"].createElement(NavigationButton, {
+  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
     direction: "previous",
-    className: classNames__default["default"]([styles$6.navButton, styles$6.previous]),
+    className: classNames([styles$6.navButton, styles$6.previous]),
     onClick: gotoPreviousScreen
-  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: styles$6.screensFrame,
     style: {
       width: screenContainerWidth,
@@ -3016,11 +2991,11 @@ var Viewer = function Viewer(_ref) {
     var current = screenIndex === i;
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
     var screenStyles = getScreenStylesByIndex(i, progressSpring);
-    return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+    return /*#__PURE__*/React.createElement(web.animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
       style: screenStyles,
-      className: classNames__default["default"]([styles$6.screenContainer, _defineProperty__default["default"]({}, styles$6.current, current)])
-    }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(ViewerScreen, {
+      className: classNames([styles$6.screenContainer, _defineProperty({}, styles$6.current, current)])
+    }, screen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
       className: styles$6.screen,
       screen: screen,
       screenState: current ? screenState : null,
@@ -3036,25 +3011,25 @@ var Viewer = function Viewer(_ref) {
       height: screenHeight,
       scale: screenScale
     }) : null);
-  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React__default["default"].createElement(NavigationButton, {
+  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
     direction: "next",
-    className: classNames__default["default"]([styles$6.navButton, styles$6.next]),
+    className: classNames([styles$6.navButton, styles$6.next]),
     onClick: gotoNextScreen
-  }) : null, !withoutPlaybackControls ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
     className: styles$6.playbackControls,
     ref: playbackControlsContainerRef
-  }, /*#__PURE__*/React__default["default"].createElement(PlaybackControls, {
+  }, /*#__PURE__*/React.createElement(PlaybackControls, {
     className: styles$6.controls
-  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React__default["default"].createElement(ArrowHint, {
+  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint, {
     className: styles$6.arrowHint
-  }) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.shareIncentiveContainer, _defineProperty__default["default"]({}, styles$6.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
+  }) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$6.shareIncentiveContainer, _defineProperty({}, styles$6.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
     style: {
       top: isEditor ? 10 : menuDotsContainerHeight - 10
     }
-  }, /*#__PURE__*/React__default["default"].createElement(all.ShareIncentive, Object.assign({
+  }, /*#__PURE__*/React.createElement(all.ShareIncentive, Object.assign({
     className: styles$6.shareIncentive
-  }, currentShareIncentive))), /*#__PURE__*/React__default["default"].createElement(WebViewContainer, {
+  }, currentShareIncentive))), /*#__PURE__*/React.createElement(WebViewContainer, {
     className: styles$6.webView,
     style: {
       maxWidth: Math.max(screenContainerWidth, 600)
@@ -3068,9 +3043,9 @@ var _excluded$1 = ["story", "pathWithIndex", "children", "onScreenChange"];
 var propTypes$1 = {
   story: core.PropTypes.story,
   // .isRequired,
-  pathWithIndex: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].func,
-  onScreenChange: PropTypes__default["default"].func
+  pathWithIndex: PropTypes.bool,
+  children: PropTypes.func,
+  onScreenChange: PropTypes.func
 };
 var defaultProps$1 = {
   story: null,
@@ -3083,7 +3058,7 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     pathWithIndex = _ref.pathWithIndex;
     _ref.children;
     var onScreenChange = _ref.onScreenChange,
-    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
   var routes = contexts.useRoutes();
   var push = contexts.useRoutePush();
   var _ref2 = story || {},
@@ -3101,23 +3076,23 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
       onScreenChange(it);
     }
   }, [push, pathWithIndex, screens, onScreenChange]);
-  return /*#__PURE__*/React__default["default"].createElement(reactRouter.Switch, null, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
+  return /*#__PURE__*/React.createElement(reactRouter.Switch, null, /*#__PURE__*/React.createElement(reactRouter.Route, {
     path: routes.home,
     exact: true,
     render: function render() {
-      return /*#__PURE__*/React__default["default"].createElement(Viewer, Object.assign({}, otherProps, {
+      return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
         story: story,
         onScreenChange: finalOnScreenChange
       }));
     }
-  }), /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
+  }), /*#__PURE__*/React.createElement(reactRouter.Route, {
     path: routes.screen,
     render: function render(_ref3) {
       var _ref3$match$params$sc = _ref3.match.params.screen,
         screenParam = _ref3$match$params$sc === void 0 ? null : _ref3$match$params$sc;
       var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
       var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
-      return /*#__PURE__*/React__default["default"].createElement(Viewer, Object.assign({}, otherProps, {
+      return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
         story: story,
         screen: screenId,
         onScreenChange: finalOnScreenChange
@@ -3138,21 +3113,21 @@ var defaultRoutes = {
 var _excluded = ["story", "paused", "screenComponents", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "visitor", "trackingVariables", "locale", "locales", "translations", "pathWithIndex"];
 var propTypes = {
   story: core.PropTypes.story,
-  paused: PropTypes__default["default"].bool,
-  screen: PropTypes__default["default"].string,
-  screenComponents: PropTypes__default["default"].objectOf(PropTypes__default["default"].elementType),
-  memoryRouter: PropTypes__default["default"].bool,
-  basePath: PropTypes__default["default"].string,
+  paused: PropTypes.bool,
+  screen: PropTypes.string,
+  screenComponents: PropTypes.objectOf(PropTypes.elementType),
+  memoryRouter: PropTypes.bool,
+  basePath: PropTypes.string,
   routes: routes,
-  withoutRouter: PropTypes__default["default"].bool,
-  googleApiKey: PropTypes__default["default"].string,
+  withoutRouter: PropTypes.bool,
+  googleApiKey: PropTypes.string,
   visitor: core.PropTypes.visitor,
   trackingVariables: core.PropTypes.trackingVariables,
-  locale: PropTypes__default["default"].string,
-  locales: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  translations: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
-  pathWithIndex: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].func
+  locale: PropTypes.string,
+  locales: PropTypes.arrayOf(PropTypes.string),
+  translations: PropTypes.objectOf(PropTypes.string),
+  pathWithIndex: PropTypes.bool,
+  children: PropTypes.func
 };
 var defaultProps = {
   story: null,
@@ -3187,7 +3162,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
     locales = _ref.locales,
     translations = _ref.translations,
     pathWithIndex = _ref.pathWithIndex,
-    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   var Router = memoryRouter ? reactRouter.MemoryRouter : reactRouterDom.BrowserRouter;
   var finalTrackingVariables = React.useMemo(function () {
     if (story === null && trackingVariables === null) {
@@ -3201,7 +3176,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
       title = _story$title === void 0 ? null : _story$title,
       _story$components = story.components,
       components = _story$components === void 0 ? [] : _story$components;
-    return _objectSpread__default["default"]({
+    return _objectSpread({
       storyId: id,
       storySlug: slug,
       storyTitle: title,
@@ -3213,36 +3188,36 @@ var ViewerContainer = function ViewerContainer(_ref) {
   var _ref3 = metadata || {},
     _ref3$language = _ref3.language,
     finalLocale = _ref3$language === void 0 ? locale : _ref3$language;
-  var content = /*#__PURE__*/React__default["default"].createElement(intl.IntlProvider, {
+  var content = /*#__PURE__*/React.createElement(intl.IntlProvider, {
     locale: finalLocale,
     locales: locales,
     extraMessages: translations
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.GoogleKeysProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.GoogleKeysProvider, {
     apiKey: googleApiKey
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.GoogleMapsClientProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.GoogleMapsClientProvider, {
     locale: finalLocale
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.FieldsProvider, {
-    manager: fieldsManager__default["default"]
-  }, /*#__PURE__*/React__default["default"].createElement(screens.ScreensProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.FieldsProvider, {
+    manager: fieldsManager
+  }, /*#__PURE__*/React.createElement(screens.ScreensProvider, null, /*#__PURE__*/React.createElement(contexts.ComponentsProvider, {
     namespace: contexts.SCREENS_NAMESPACE,
     components: screenComponents || {}
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.VisitorProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.VisitorProvider, {
     visitor: visitor
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.PlaybackProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.PlaybackProvider, {
     paused: paused
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.TrackingProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.TrackingProvider, {
     variables: finalTrackingVariables
-  }, withoutRouter ? /*#__PURE__*/React__default["default"].createElement(Viewer, Object.assign({
+  }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer, Object.assign({
     story: story,
     basePath: basePath
-  }, otherProps)) : /*#__PURE__*/React__default["default"].createElement(ViewerRoutes, Object.assign({
+  }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes, Object.assign({
     story: story,
     basePath: basePath,
     pathWithIndex: pathWithIndex
   }, otherProps)))))))))));
-  return withoutRouter ? content : /*#__PURE__*/React__default["default"].createElement(Router, {
+  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, {
     basename: !memoryRouter ? basePath : null
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.RoutesProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.RoutesProvider, {
     routes: routes
   }, content));
 };
@@ -3250,4 +3225,4 @@ ViewerContainer.propTypes = propTypes;
 ViewerContainer.defaultProps = defaultProps;
 
 exports.Viewer = Viewer;
-exports["default"] = ViewerContainer;
+exports.default = ViewerContainer;