@micromag/viewer 0.3.591 → 0.3.593

package/es/index.js

@@ -220,10 +220,10 @@ function checkDraggable(el) {
   return false;
 }
 
-var styles$g = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled"};
+var styles$h = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled"};
 
 var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "ariaLabel", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$n = {
+var propTypes$p = {
   type: PropTypes.string,
   theme: PropTypes$1.buttonTheme,
   size: PropTypes$1.buttonSize,
@@ -251,7 +251,7 @@ var propTypes$n = {
     current: PropTypes.any // eslint-disable-line
   })])
 };
-var defaultProps$n = {
+var defaultProps$p = {
   type: 'button',
   theme: null,
   size: null,
@@ -309,7 +309,7 @@ var Button = function Button(_ref) {
   var hasIcon = icon !== null;
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
-  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 buttonClassNames = classNames([styles$h.container, styles$h["icon-".concat(iconPosition)], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$h.withIcon, hasIcon), styles$h.withIconColumns, hasIconColumns), styles$h.withText, text !== null), styles$h.isLink, href !== null), styles$h.asLink, asLink), styles$h.isDisabled, disabled), styles$h.isLoading, loading), className, className !== null)]);
   var _ref3 = theme || {},
     _ref3$colors = _ref3.colors,
     colors = _ref3$colors === void 0 ? null : _ref3$colors;
@@ -319,20 +319,20 @@ var Button = function Button(_ref) {
   var primaryColor = getStyleFromColor(brandPrimaryColor, 'color');
   var buttonStyles = _objectSpread({}, primaryColor);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$g.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$h.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$g.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$h.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')])
+    className: classNames([styles$h.icon, styles$h.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)])
+    className: classNames([styles$h.center, styles$h.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')])
+    className: classNames([styles$h.icon, styles$h.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([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$g.linkDisabled, disabled)]);
+    }, styles$h.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -361,17 +361,17 @@ var Button = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button.propTypes = propTypes$n;
-Button.defaultProps = defaultProps$n;
+Button.propTypes = propTypes$p;
+Button.defaultProps = defaultProps$p;
 
-var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
+var styles$g = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
 
 var _excluded$9 = ["iconClassName", "className"];
-var propTypes$m = {
+var propTypes$o = {
   iconClassName: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$m = {
+var defaultProps$o = {
   iconClassName: null,
   className: null
 };
@@ -380,20 +380,20 @@ var IconButton = function IconButton(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
-    labelClassName: styles$f.label,
-    iconClassName: classNames([styles$f.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$g.container, _defineProperty({}, className, className !== null)]),
+    labelClassName: styles$g.label,
+    iconClassName: classNames([styles$g.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, props));
 };
-IconButton.propTypes = propTypes$m;
-IconButton.defaultProps = defaultProps$m;
+IconButton.propTypes = propTypes$o;
+IconButton.defaultProps = defaultProps$o;
 
 var _excluded$8 = ["single", "className"];
-var propTypes$l = {
+var propTypes$n = {
   single: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$l = {
+var defaultProps$n = {
   single: false,
   className: null
 };
@@ -443,15 +443,15 @@ var CloseMenuButton = function CloseMenuButton(_ref) {
     }))
   }, props));
 };
-CloseMenuButton.propTypes = propTypes$l;
-CloseMenuButton.defaultProps = defaultProps$l;
+CloseMenuButton.propTypes = propTypes$n;
+CloseMenuButton.defaultProps = defaultProps$n;
 
 var _excluded$7 = ["className", "iconClassName"];
-var propTypes$k = {
+var propTypes$m = {
   className: PropTypes.string,
   iconClassName: PropTypes.string
 };
-var defaultProps$k = {
+var defaultProps$m = {
   className: null,
   iconClassName: null
 };
@@ -495,14 +495,14 @@ var MenuButton = function MenuButton(_ref) {
     }))
   }, props));
 };
-MenuButton.propTypes = propTypes$k;
-MenuButton.defaultProps = defaultProps$k;
+MenuButton.propTypes = propTypes$m;
+MenuButton.defaultProps = defaultProps$m;
 
 var _excluded$6 = ["className"];
-var propTypes$j = {
+var propTypes$l = {
   className: PropTypes.string
 };
-var defaultProps$j = {
+var defaultProps$l = {
   className: null
 };
 var ShareButton = function ShareButton(_ref) {
@@ -538,12 +538,12 @@ var ShareButton = function ShareButton(_ref) {
     }))
   }, props));
 };
-ShareButton.propTypes = propTypes$j;
-ShareButton.defaultProps = defaultProps$j;
+ShareButton.propTypes = propTypes$l;
+ShareButton.defaultProps = defaultProps$l;
 
-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 styles$f = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
 
-var propTypes$i = {
+var propTypes$k = {
   className: PropTypes.string,
   progressSpring: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
@@ -551,7 +551,7 @@ var propTypes$i = {
   toggledButton: PropTypes.node,
   toggledButtonClassName: PropTypes.string
 };
-var defaultProps$i = {
+var defaultProps$k = {
   className: null,
   progressSpring: null,
   button: null,
@@ -566,16 +566,16 @@ var ToggleButton = function ToggleButton(_ref) {
     toggledButtonClassName = _ref.toggledButtonClassName;
   if (button === null) return false;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$e.normal,
+    className: styles$f.normal,
     style: {
       transform: progressSpring.to(function (p) {
         return "translateY(".concat(p * -100, "%)");
       })
     }
   }, button), /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames([styles$e.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
+    className: classNames([styles$f.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
     style: {
       transform: progressSpring.to(function (p) {
         return "translateY(".concat((p - 1) * -100, "%)");
@@ -583,19 +583,19 @@ var ToggleButton = function ToggleButton(_ref) {
     }
   }, toggledButton));
 };
-ToggleButton.propTypes = propTypes$i;
-ToggleButton.defaultProps = defaultProps$i;
+ToggleButton.propTypes = propTypes$k;
+ToggleButton.defaultProps = defaultProps$k;
 
-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 styles$e = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
 
-var propTypes$h = {
+var propTypes$j = {
   className: PropTypes.string,
   progressSpring: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
   theme: PropTypes$1.viewerTheme,
   children: PropTypes.node
 };
-var defaultProps$h = {
+var defaultProps$j = {
   className: null,
   progressSpring: null,
   theme: null,
@@ -614,12 +614,12 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
   var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)]),
     style: {
       pointerEvents: 'none'
     }
   }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$d.heightContainer,
+    className: styles$e.heightContainer,
     style: _objectSpread({
       opacity: progressSpring,
       transform: progressSpring.to(function (p) {
@@ -633,7 +633,7 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
       })
     }, backgroundColorStyle)
   }, children), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$d.backdrop,
+    className: styles$e.backdrop,
     style: {
       opacity: progressSpring.to(function (p) {
         return easings.easeOutQuint(p);
@@ -641,12 +641,12 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     }
   }));
 };
-ViewerMenuContainer.propTypes = propTypes$h;
-ViewerMenuContainer.defaultProps = defaultProps$h;
+ViewerMenuContainer.propTypes = propTypes$j;
+ViewerMenuContainer.defaultProps = defaultProps$j;
 
-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 styles$d = {"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 = {
+var propTypes$i = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -659,7 +659,7 @@ var propTypes$g = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$g = {
+var defaultProps$i = {
   current: false,
   active: false,
   colors: null,
@@ -705,11 +705,11 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     });
   }, [active, current, subIndex, count, setDotSpringProps]);
   return /*#__PURE__*/React.createElement("li", {
-    className: classNames([styles$c.container, _defineProperty(_defineProperty(_defineProperty({}, styles$c.active, current), styles$c.vertical, vertical), className, className !== null)]),
+    className: classNames([styles$d.container, _defineProperty(_defineProperty(_defineProperty({}, styles$d.active, current), styles$d.vertical, vertical), className, className !== null)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$c.button,
+    className: styles$d.button,
     onClick: function onClick() {
       var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (e !== null) {
@@ -721,24 +721,24 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     },
     tabIndex: "-1"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.dot,
+    className: styles$d.dot,
     style: {
       backgroundColor: secondary
     }
   }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$c.progress,
+    className: styles$d.progress,
     style: _objectSpread(_objectSpread({}, dotSpringStyles), {}, {
       backgroundColor: primary
     })
   }))));
 };
-ViewerMenuDot.propTypes = propTypes$g;
-ViewerMenuDot.defaultProps = defaultProps$g;
+ViewerMenuDot.propTypes = propTypes$i;
+ViewerMenuDot.defaultProps = defaultProps$i;
 
-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","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
+var styles$c = {"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","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
 var _excluded$5 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "buttons", "withItemClick", "withoutScreensMenu", "onClose", "className"];
-var propTypes$f = {
+var propTypes$h = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   items: PropTypes$1.menuItems,
   onClickDot: PropTypes.func,
@@ -754,7 +754,7 @@ var propTypes$f = {
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$f = {
+var defaultProps$h = {
   direction: 'horizontal',
   items: [],
   onClickDot: null,
@@ -792,7 +792,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   var _ref4 = props || {},
     style = _ref4.style;
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$b.container, _defineProperty(_defineProperty({}, className, className !== null), styles$b.vertical, direction === 'vertical')]),
+    className: classNames([styles$c.container, _defineProperty(_defineProperty({}, className, className !== null), styles$c.vertical, direction === 'vertical')]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -817,7 +817,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     }),
     style: style
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$b.items
+    className: styles$c.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
       _ref6$current = _ref6.current,
@@ -843,13 +843,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       vertical: direction === 'vertical'
     });
   }), closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$b.closeButton,
+    className: styles$c.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$b.closeButton,
+    className: styles$c.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -866,16 +866,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       }]
     })
   }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null, buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$b.buttons
+    className: styles$c.buttons
   }, buttons) : null));
 };
-ViewerMenuDots.propTypes = propTypes$f;
-ViewerMenuDots.defaultProps = defaultProps$f;
+ViewerMenuDots.propTypes = propTypes$h;
+ViewerMenuDots.defaultProps = defaultProps$h;
 
-var propTypes$e = {
+var propTypes$g = {
   className: PropTypes.string
 };
-var defaultProps$e = {
+var defaultProps$g = {
   className: null
 };
 var StackIcon = function StackIcon(_ref) {
@@ -893,12 +893,12 @@ var StackIcon = function StackIcon(_ref) {
     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;
+StackIcon.propTypes = propTypes$g;
+StackIcon.defaultProps = defaultProps$g;
 
-var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon","screen":"micromag-viewer-menus-menu-screen-screen","pulse":"micromag-viewer-menus-menu-screen-pulse"};
+var styles$b = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon","screen":"micromag-viewer-menus-menu-screen-screen","pulse":"micromag-viewer-menus-menu-screen-pulse"};
 
-var propTypes$d = {
+var propTypes$f = {
   className: PropTypes.string,
   item: PropTypes$1.menuItem,
   index: PropTypes.number,
@@ -906,7 +906,7 @@ var propTypes$d = {
   screenSize: PropTypes$1.screenSize,
   focusable: PropTypes.bool
 };
-var defaultProps$d = {
+var defaultProps$f = {
   className: null,
   item: PropTypes$1.menuItem,
   index: 0,
@@ -950,13 +950,13 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     }]
   })) : '');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, _defineProperty(_defineProperty({}, className, className !== null), styles$a.isCurrent, current)]),
+    className: classNames([styles$b.container, _defineProperty(_defineProperty({}, className, className !== null), styles$b.isCurrent, current)]),
     style: {
       paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$a.button,
+    className: styles$b.button,
     onClick: function onClick() {
       var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (e !== null) {
@@ -969,15 +969,15 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     "aria-label": screenAriaLabel,
     tabIndex: focusable ? '0' : '-1'
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inner
+    className: styles$b.inner
   }, count > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: styles$a.subScreenBadge
+    className: styles$b.subScreenBadge
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$a.subScreenCount
+    className: styles$b.subScreenCount
   }, count), /*#__PURE__*/React.createElement(StackIcon, {
-    className: styles$a.subScreenIcon
+    className: styles$b.subScreenIcon
   })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
-    className: styles$a.screen,
+    className: styles$b.screen,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     screen: screen,
@@ -986,13 +986,13 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     withSize: true
   }) : null));
 };
-ViewerMenuScreen.propTypes = propTypes$d;
-ViewerMenuScreen.defaultProps = defaultProps$d;
+ViewerMenuScreen.propTypes = propTypes$f;
+ViewerMenuScreen.defaultProps = defaultProps$f;
 
-var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","badge":"micromag-viewer-menus-menu-preview-badge","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
+var styles$a = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","badge":"micromag-viewer-menus-menu-preview-badge","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
 
 var _excluded$4 = ["textAlign"];
-var propTypes$c = {
+var propTypes$e = {
   viewerTheme: PropTypes$1.viewerTheme,
   header: PropTypes.node,
   footer: PropTypes.node,
@@ -1012,7 +1012,7 @@ var propTypes$c = {
   // fullscreenEnabled: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$c = {
+var defaultProps$e = {
   viewerTheme: null,
   header: null,
   footer: null,
@@ -1101,37 +1101,37 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }, [items, screensMounted, setScreensMounted]);
   var menuPaddingTop = paddingTop + 10;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
     style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.content,
+    className: styles$a.content,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$9.scroll,
+    className: styles$a.scroll,
     disabled: scrollDisabled
   }, hasTitle && header === null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$9.titleContainer,
+    className: styles$a.titleContainer,
     style: {
       paddingTop: menuPaddingTop
     }
   }, /*#__PURE__*/React.createElement("h1", {
-    className: styles$9.title,
+    className: styles$a.title,
     style: _objectSpread({}, finalTitleStyles)
   }, title)) : /*#__PURE__*/React.createElement("div", {
-    className: styles$9.headerContainer,
+    className: styles$a.headerContainer,
     style: {
       paddingTop: menuPaddingTop
     }
   }, header), /*#__PURE__*/React.createElement("nav", {
-    className: styles$9.nav,
+    className: styles$a.nav,
     style: !hasTitle ? {
       paddingTop: paddingTop
     } : null
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$9.items
+    className: styles$a.items
   }, items.map(function (item, index) {
     var _ref8 = item || {},
       screenId = _ref8.screenId;
@@ -1144,17 +1144,17 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     var screenMounted = screensMounted[index] || false;
     return /*#__PURE__*/React.createElement("li", {
       key: "item-".concat(screenId),
-      className: styles$9.item,
+      className: styles$a.item,
       style: itemStyles
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$9.inner
+      className: styles$a.inner
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles$9.frame, _defineProperty({}, styles$9.isLoading, !screenMounted)]),
+      className: classNames([styles$a.frame, _defineProperty({}, styles$a.isLoading, !screenMounted)]),
       style: {
         paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
       }
     }, screenMounted ? /*#__PURE__*/React.createElement(ViewerMenuScreen, {
-      className: styles$9.screen,
+      className: styles$a.screen,
       item: item,
       index: index,
       screenSize: screenSize,
@@ -1163,19 +1163,19 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }) : null)));
   }))), footer)));
 };
-ViewerMenuPreview.propTypes = propTypes$c;
-ViewerMenuPreview.defaultProps = defaultProps$c;
+ViewerMenuPreview.propTypes = propTypes$e;
+ViewerMenuPreview.defaultProps = defaultProps$e;
 
-var styles$8 = {"container":"micromag-viewer-partials-micromag-preview-container","cover":"micromag-viewer-partials-micromag-preview-cover","info":"micromag-viewer-partials-micromag-preview-info","url":"micromag-viewer-partials-micromag-preview-url","title":"micromag-viewer-partials-micromag-preview-title"};
+var styles$9 = {"container":"micromag-viewer-partials-micromag-preview-container","cover":"micromag-viewer-partials-micromag-preview-cover","info":"micromag-viewer-partials-micromag-preview-info","url":"micromag-viewer-partials-micromag-preview-url","title":"micromag-viewer-partials-micromag-preview-title"};
 
-var propTypes$b = {
+var propTypes$d = {
   screen: PropTypes$1.screen,
   title: PropTypes.string,
   url: PropTypes.string,
   description: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$b = {
+var defaultProps$d = {
   screen: null,
   title: null,
   url: null,
@@ -1189,28 +1189,28 @@ var MicromagPreview = function MicromagPreview(_ref) {
     description = _ref.description,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, _defineProperty({}, className, className)])
+    className: classNames([styles$9.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.cover
+    className: styles$9.cover
   }, /*#__PURE__*/React.createElement(ScreenPreview, {
     screen: screen,
     width: 100,
     height: 150,
     withSize: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$8.info
+    className: styles$9.info
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$8.title
+    className: styles$9.title
   }, title), url ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.url
+    className: styles$9.url
   }, url) : null, /*#__PURE__*/React.createElement("p", null, description)));
 };
-MicromagPreview.propTypes = propTypes$b;
-MicromagPreview.defaultProps = defaultProps$b;
+MicromagPreview.propTypes = propTypes$d;
+MicromagPreview.defaultProps = defaultProps$d;
 
-var styles$7 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","content":"micromag-viewer-menus-menu-share-content","inner":"micromag-viewer-menus-menu-share-inner","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options"};
+var styles$8 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","content":"micromag-viewer-menus-menu-share-content","inner":"micromag-viewer-menus-menu-share-inner","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options"};
 
-var propTypes$a = {
+var propTypes$c = {
   viewerTheme: PropTypes$1.viewerTheme,
   menuWidth: PropTypes.number,
   title: PropTypes.string,
@@ -1223,7 +1223,7 @@ var propTypes$a = {
   onShare: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$a = {
+var defaultProps$c = {
   viewerTheme: null,
   menuWidth: null,
   title: null,
@@ -1292,30 +1292,30 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     return shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex + 1) : shareUrl;
   }, [shareUrl, shareCurrentScreen, currentScreenIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)]),
     style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.content
+    className: styles$8.content
   }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$7.scroll
+    className: styles$8.scroll
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.inner,
+    className: styles$8.inner,
     style: {
       paddingTop: paddingTop
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.header
+    className: styles$8.header
   }, /*#__PURE__*/React.createElement(MicromagPreview, {
-    className: styles$7.preview,
+    className: styles$8.preview,
     screen: shareCurrentScreen ? currentScreen : coverScreen,
     title: title,
     url: finalShareUrl,
     description: description
   }), currentScreenIndex !== 0 ? /*#__PURE__*/React.createElement("div", {
-    className: styles$7.mode
+    className: styles$8.mode
   }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     name: "currentScreen",
@@ -1329,9 +1329,9 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
       "value": "Start from the current screen"
     }]
   }))) : null), /*#__PURE__*/React.createElement(ShareOptions, {
-    className: styles$7.options,
-    itemClassName: styles$7.optionItem,
-    buttonClassName: styles$7.optionButton,
+    className: styles$8.options,
+    itemClassName: styles$8.optionItem,
+    buttonClassName: styles$8.optionButton,
     title: title,
     url: finalShareUrl,
     focusable: focusable,
@@ -1340,12 +1340,12 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     shareCurrentScreen: shareCurrentScreen
   })))));
 };
-ViewerMenuShare.propTypes = propTypes$a;
-ViewerMenuShare.defaultProps = defaultProps$a;
+ViewerMenuShare.propTypes = propTypes$c;
+ViewerMenuShare.defaultProps = defaultProps$c;
 
-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","ariaAnnouncement":"micromag-viewer-ariaAnnouncement","accessibilityLinks":"micromag-viewer-accessibilityLinks","accessibilityButton":"micromag-viewer-accessibilityButton","disabled":"micromag-viewer-disabled","tooltip":"micromag-viewer-tooltip","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","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$7 = {"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","ariaAnnouncement":"micromag-viewer-ariaAnnouncement","accessibilityLinks":"micromag-viewer-accessibilityLinks","accessibilityButton":"micromag-viewer-accessibilityButton","disabled":"micromag-viewer-disabled","tooltip":"micromag-viewer-tooltip","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","navigationHint":"micromag-viewer-navigationHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
 
-var propTypes$9 = {
+var propTypes$b = {
   story: PropTypes$1.story.isRequired,
   currentScreenIndex: PropTypes.number,
   toggleFullscreen: PropTypes.func,
@@ -1374,7 +1374,7 @@ var propTypes$9 = {
     current: PropTypes.any // eslint-disable-line
   })
 };
-var defaultProps$9 = {
+var defaultProps$b = {
   currentScreenIndex: 0,
   toggleFullscreen: null,
   fullscreenActive: false,
@@ -1673,20 +1673,20 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
   }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
   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)]),
+    className: classNames([styles$7.menuNavContainer, _defineProperty(_defineProperty({}, styles$7.withShadow, withShadow), styles$7.isOpened, menuOpened || shareOpened)]),
     ref: refDots,
     style: {
       width: menuWidth
     }
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$6.menuTopContainer,
+    className: styles$7.menuTopContainer,
     ref: navContainerRef
   }, !withoutShareMenu || afterShareMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.menuItem
+    className: styles$7.menuItem
   }, bindShareDrag()), !withoutShareMenu ? /*#__PURE__*/React.createElement(ToggleButton, {
-    className: styles$6.slidingButton,
+    className: styles$7.slidingButton,
     button: /*#__PURE__*/React.createElement(ShareButton, {
-      className: styles$6.menuButton,
+      className: styles$7.menuButton,
       onClick: onOpenShare,
       theme: menuTheme,
       iconPosition: "left",
@@ -1697,7 +1697,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       disabled: !shareOpened,
       returnFocus: true
     }, /*#__PURE__*/React.createElement(CloseMenuButton, {
-      className: styles$6.menuButton,
+      className: styles$7.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
       iconPosition: "left",
@@ -1706,12 +1706,12 @@ var ViewerMenu = function ViewerMenu(_ref) {
     })),
     progressSpring: shareOpenedProgress
   }) : null, afterShareMenuButton) : null, !withoutScreensMenu || beforeScreensMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.menuItem
+    className: styles$7.menuItem
   }, bindMenuDrag()), beforeScreensMenuButton, !withoutScreensMenu ? /*#__PURE__*/React.createElement(ToggleButton, {
-    className: styles$6.slidingButton,
+    className: styles$7.slidingButton,
     button: /*#__PURE__*/React.createElement(MenuButton, {
-      className: styles$6.menuButton,
-      iconClassName: styles$6.menuButtonIcon,
+      className: styles$7.menuButton,
+      iconClassName: styles$7.menuButtonIcon,
       onClick: onOpenMenu,
       theme: menuTheme,
       focusable: !menuOpened
@@ -1721,14 +1721,14 @@ var ViewerMenu = function ViewerMenu(_ref) {
       disabled: !menuOpened,
       returnFocus: true
     }, /*#__PURE__*/React.createElement(CloseMenuButton, {
-      className: styles$6.menuButton,
+      className: styles$7.menuButton,
       onClick: onCloseMenu,
       theme: menuTheme,
       iconPosition: "right",
       focusable: menuOpened
     })),
     progressSpring: menuOpenedProgress,
-    toggledButtonClassName: styles$6.screensMenuButtonToggled
+    toggledButtonClassName: styles$7.screensMenuButtonToggled
   }) : null) : null), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     items: items,
@@ -1740,9 +1740,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
-    className: styles$6.dots
+    className: styles$7.dots
   }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
-    className: styles$6.menuContainer,
+    className: styles$7.menuContainer,
     progressSpring: shareOpenedProgress,
     theme: viewerTheme
   }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(FocusLock, {
@@ -1751,7 +1751,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     returnFocus: true
   }, /*#__PURE__*/React.createElement(ViewerMenuShare, {
     viewerTheme: viewerTheme,
-    className: styles$6.menuShare,
+    className: styles$7.menuShare,
     title: title,
     description: description,
     menuWidth: menuWidth,
@@ -1763,7 +1763,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onShare: onShare,
     onClose: onCloseShare
   })) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
-    className: styles$6.menuContainer,
+    className: styles$7.menuContainer,
     progressSpring: menuOpenedProgress,
     theme: viewerTheme
   }, menuMounted ? /*#__PURE__*/React.createElement(FocusLock, {
@@ -1775,7 +1775,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     header: previewHeader,
     footer: previewFooter,
     title: title,
-    className: styles$6.menuPreview,
+    className: styles$7.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
     paddingTop: navContainerHeight,
@@ -1791,13 +1791,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
     fullscreenEnabled: fullscreenEnabled
   })) : null));
 };
-ViewerMenu.propTypes = propTypes$9;
-ViewerMenu.defaultProps = defaultProps$9;
+ViewerMenu.propTypes = propTypes$b;
+ViewerMenu.defaultProps = defaultProps$b;
 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 styles$6 = {"container":"micromag-viewer-screen-container","inner":"micromag-viewer-screen-inner","navigationHint":"micromag-viewer-screen-navigationHint"};
 
-var propTypes$8 = {
+var propTypes$a = {
   screen: PropTypes$1.screenComponent,
   renderContext: PropTypes$1.renderContext,
   screenState: PropTypes.string,
@@ -1812,7 +1812,7 @@ var propTypes$8 = {
   // withNavigationHint: PropTypes.bool,  // @todo
   className: PropTypes.string
 };
-var defaultProps$8 = {
+var defaultProps$a = {
   screen: null,
   renderContext: null,
   screenState: null,
@@ -1858,9 +1858,9 @@ function ViewerScreen(_ref) {
     };
   }, [active, mounted, setMounted, index]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.inner,
+    className: styles$6.inner,
     style: {
       width: width,
       height: height,
@@ -1879,18 +1879,18 @@ function ViewerScreen(_ref) {
     mediaRef: mediaRef
   }) : null));
 }
-ViewerScreen.propTypes = propTypes$8;
-ViewerScreen.defaultProps = defaultProps$8;
+ViewerScreen.propTypes = propTypes$a;
+ViewerScreen.defaultProps = defaultProps$a;
 
-var styles$4 = {"container":"micromag-viewer-buttons-navigation-button-container","arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
+var styles$5 = {"container":"micromag-viewer-buttons-navigation-button-container","arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
 
 var _excluded$3 = ["direction", "onClick", "className"];
-var propTypes$7 = {
+var propTypes$9 = {
   direction: PropTypes.oneOf(['previous', 'next']),
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$7 = {
+var defaultProps$9 = {
   direction: 'next',
   onClick: null,
   className: null
@@ -1901,14 +1901,14 @@ var NavigationButton = function NavigationButton(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    className: classNames([styles$4.container, styles$4[direction], _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$5.container, styles$5[direction], _defineProperty({}, className, className !== null)]),
     onClick: function onClick(e) {
       e.stopPropagation();
       _onClick();
     },
     iconPosition: direction === 'next' ? 'right' : 'left',
     icon: /*#__PURE__*/React.createElement("svg", {
-      className: styles$4.arrow,
+      className: styles$5.arrow,
       xmlns: "http://www.w3.org/2000/svg",
       width: "10",
       height: "16",
@@ -1919,31 +1919,31 @@ var NavigationButton = function NavigationButton(_ref) {
     }))
   }, props));
 };
-NavigationButton.propTypes = propTypes$7;
-NavigationButton.defaultProps = defaultProps$7;
+NavigationButton.propTypes = propTypes$9;
+NavigationButton.defaultProps = defaultProps$9;
 
-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 styles$4 = {"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 = {
+var propTypes$8 = {
   className: PropTypes.string
 };
-var defaultProps$6 = {
+var defaultProps$8 = {
   className: null
 };
 var ArrowHint = function ArrowHint(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.inner
+    className: styles$4.inner
   }, /*#__PURE__*/React.createElement(ArrowIcon, {
-    className: styles$3.arrow
+    className: styles$4.arrow
   })));
 };
-ArrowHint.propTypes = propTypes$6;
-ArrowHint.defaultProps = defaultProps$6;
+ArrowHint.propTypes = propTypes$8;
+ArrowHint.defaultProps = defaultProps$8;
 
-var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
+var styles$3 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
 
 var stopDragEventsPropagation = {
   onTouchMove: function onTouchMove(e) {
@@ -1983,7 +1983,7 @@ function getFormattedTimestamp() {
 }
 var SHOW_MILLISECONDS_THRESHOLD = 5; // show milliseconds when scrubbing if length of video is shorter than 5 seconds
 
-var propTypes$5 = {
+var propTypes$7 = {
   media: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   }) // eslint-disable-line
@@ -2000,7 +2000,7 @@ var propTypes$5 = {
   className: PropTypes.string,
   withSeekHead: PropTypes.bool
 };
-var defaultProps$5 = {
+var defaultProps$7 = {
   media: null,
   playing: false,
   backgroundColor: null,
@@ -2100,29 +2100,29 @@ var SeekBar = function SeekBar(_ref3) {
     }
   });
   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)])
+    className: classNames([styles$3.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$3.withSeekHead, withSeekHead), styles$3.showTimestamp, showTimestamp)])
   }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.inner
+    className: styles$3.inner
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progressBarContainer
+    className: styles$3.progressBarContainer
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progressBar,
+    className: styles$3.progressBar,
     style: {
       backgroundColor: backgroundColor
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.playHead,
+    className: styles$3.playHead,
     style: {
       left: "".concat(progress * 100, "%"),
       backgroundColor: progressColor
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.scrubbedTime,
+    className: styles$3.scrubbedTime,
     style: {
       borderColor: progressColor
     }
   }, getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD))), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progress,
+    className: styles$3.progress,
     style: {
       transform: "scaleX(".concat(progress, ")"),
       backgroundColor: progressColor
@@ -2150,7 +2150,7 @@ var SeekBar = function SeekBar(_ref3) {
       duration: getFormattedTimestamp(duration, duration < SHOW_MILLISECONDS_THRESHOLD)
     }),
     "data-draggable": true,
-    className: styles$2.track,
+    className: styles$3.track,
     title: intl.formatMessage({
       id: "G1Gyjn",
       defaultMessage: [{
@@ -2168,12 +2168,12 @@ var SeekBar = function SeekBar(_ref3) {
     tabIndex: focusable ? '0' : '-1'
   }))));
 };
-SeekBar.propTypes = propTypes$5;
-SeekBar.defaultProps = defaultProps$5;
+SeekBar.propTypes = propTypes$7;
+SeekBar.defaultProps = defaultProps$7;
 
-var styles$1 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","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","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","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 styles$2 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","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","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","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 = {
+var propTypes$6 = {
   defaultColor: PropTypes.shape({
     color: PropTypes.string,
     alpha: PropTypes.number
@@ -2186,7 +2186,7 @@ var propTypes$4 = {
   className: PropTypes.string,
   collapsedClassName: PropTypes.string
 };
-var defaultProps$4 = {
+var defaultProps$6 = {
   defaultColor: {
     color: '#FFFFFF',
     alpha: 1
@@ -2336,21 +2336,26 @@ function PlaybackControls(_ref) {
     seekBarOnly = _ref3.seekBarOnly;
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
   var playIcon = playing ? /*#__PURE__*/React.createElement(PauseIcon, {
-    className: styles$1.icon
+    className: styles$2.icon
   }) : /*#__PURE__*/React.createElement(PlayIcon, {
-    className: styles$1.icon
+    className: styles$2.icon
+  });
+  console.log({
+    controlsVisible: controlsVisible,
+    controlsSuggestPlay: controlsSuggestPlay,
+    controls: controls
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$1.withPlayPause, controlsVisible && controls && (!seekBarOnly || !playing)), styles$1.withSuggestPlay, controlsSuggestPlay), 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)])
+    className: classNames([styles$2.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$2.withPlayPause, controls && !seekBarOnly), styles$2.withSuggestPlay, controlsSuggestPlay), styles$2.withMute, hasMedia || controls), styles$2.withSeekBar, controls), styles$2.withSeekBarOnly, seekBarOnly), styles$2.isCollapsed, isCollapsed), styles$2.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
   }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(Button$1, {
-    className: classNames([styles$1.suggest]),
+    className: classNames([styles$2.suggest]),
     style: {
       color: color
     },
     onClick: playing ? onPause : onPlay,
     focusable: controlsVisible,
     icon: /*#__PURE__*/React.createElement(PlayIcon, {
-      className: classNames([styles$1.icon, styles$1.offset])
+      className: classNames([styles$2.icon, styles$2.offset])
     }),
     "aria-pressed": !playing,
     "aria-label": intl.formatMessage({
@@ -2362,7 +2367,7 @@ function PlaybackControls(_ref) {
     }),
     withoutBootstrapStyles: true
   }) : null, /*#__PURE__*/React.createElement(Button$1, {
-    className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, !controlsVisible || controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
+    className: classNames([styles$2.playPauseButton, _defineProperty(_defineProperty({}, styles$2.hidden, controlsSuggestPlay && !controls), styles$2.loading, finalShowLoading)]),
     style: {
       color: color
     },
@@ -2370,7 +2375,7 @@ function PlaybackControls(_ref) {
     focusable: controls && controlsVisible && (!seekBarOnly || !playing),
     disabled: finalShowLoading,
     icon: finalShowLoading ? /*#__PURE__*/React.createElement(Spinner, {
-      className: classNames([styles$1.spinner, styles$1.offset])
+      className: classNames([styles$2.spinner, styles$2.offset])
     }) : playIcon,
     "aria-pressed": !playing,
     "aria-label": finalShowLoading ? intl.formatMessage({
@@ -2388,7 +2393,7 @@ function PlaybackControls(_ref) {
     }),
     withoutBootstrapStyles: true
   }), /*#__PURE__*/React.createElement(SeekBar, {
-    className: styles$1.seekBar,
+    className: styles$2.seekBar,
     media: mediaElement,
     playing: playing,
     onClick: onSeekClick,
@@ -2401,16 +2406,16 @@ function PlaybackControls(_ref) {
     backgroundColor: color,
     progressColor: progressColor
   }), /*#__PURE__*/React.createElement(Button$1, {
-    className: styles$1.muteButton,
+    className: styles$2.muteButton,
     style: {
       color: color
     },
     onClick: muted ? onUnmute : onMute,
     focusable: controlsVisible || mediaHasAudio,
     icon: muted ? /*#__PURE__*/React.createElement(UnmuteIcon, {
-      className: styles$1.icon
+      className: styles$2.icon
     }) : /*#__PURE__*/React.createElement(MuteIcon, {
-      className: styles$1.icon
+      className: styles$2.icon
     }),
     "aria-pressed": !muted,
     "aria-label": intl.formatMessage({
@@ -2423,18 +2428,18 @@ function PlaybackControls(_ref) {
     withoutBootstrapStyles: true
   }));
 }
-PlaybackControls.propTypes = propTypes$4;
-PlaybackControls.defaultProps = defaultProps$4;
+PlaybackControls.propTypes = propTypes$6;
+PlaybackControls.defaultProps = defaultProps$6;
 
-var styles = {"container":"micromag-viewer-partials-web-view-container","focusLock":"micromag-viewer-partials-web-view-focusLock","opened":"micromag-viewer-partials-web-view-opened"};
+var styles$1 = {"container":"micromag-viewer-partials-web-view-container","focusLock":"micromag-viewer-partials-web-view-focusLock","opened":"micromag-viewer-partials-web-view-opened"};
 
 var _excluded$2 = ["opened", "close", "open", "update", "url"];
-var propTypes$3 = {
+var propTypes$5 = {
   onChange: PropTypes.func,
   className: PropTypes.string,
   style: PropTypes.object
 };
-var defaultProps$3 = {
+var defaultProps$5 = {
   onChange: null,
   className: null,
   style: null
@@ -2508,7 +2513,7 @@ function WebViewContainer(_ref) {
   }, [close]);
   useKeyboardShortcuts(keyboardShortcuts);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, styles.opened, opened), className, className !== null)]),
+    className: classNames([styles$1.container, _defineProperty(_defineProperty({}, styles$1.opened, opened), className, className !== null)]),
     style: style,
     onTransitionEnd: onTransitionEnd,
     ref: ref
@@ -2517,12 +2522,60 @@ function WebViewContainer(_ref) {
   }, webViewProps, {
     closeable: opened,
     focusable: opened,
-    className: styles.webView,
+    className: styles$1.webView,
     onClose: close
   })));
 }
-WebViewContainer.propTypes = propTypes$3;
-WebViewContainer.defaultProps = defaultProps$3;
+WebViewContainer.propTypes = propTypes$5;
+WebViewContainer.defaultProps = defaultProps$5;
+
+var styles = {"container":"micromag-viewer-partials-hand-tap-container","circle":"micromag-viewer-partials-hand-tap-circle","pulse":"micromag-viewer-partials-hand-tap-pulse","hand":"micromag-viewer-partials-hand-tap-hand","panY":"micromag-viewer-partials-hand-tap-panY","inner":"micromag-viewer-partials-hand-tap-inner","shadowFade":"micromag-viewer-partials-hand-tap-shadowFade"};
+
+var propTypes$4 = {
+  color: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$4 = {
+  color: 'currentColor',
+  className: null
+};
+var HandIcon = function HandIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 367.24 482.87"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M488.84,255.91a44.68,44.68,0,0,0-19.15,4.3A44.77,44.77,0,0,0,406,226.49a44.75,44.75,0,0,0-62.67-32.66V105.4a44.81,44.81,0,1,0-89.61,0V265.17l-1.15-2.7a44.78,44.78,0,1,0-82.84,34.06l64.87,157.76.34.73a156.29,156.29,0,0,0,141.42,88.44c86.7,0,157.24-70.53,157.24-157.26V300.7a44.82,44.82,0,0,0-44.78-44.79ZM507.46,386.2c0,72.3-58.78,131.1-131.07,131.1a130.29,130.29,0,0,1-117.73-73.36L193.93,286.61a18.64,18.64,0,1,1,34.53-14.07L279.91,394V105.4a18.64,18.64,0,1,1,37.28,0v196a13.08,13.08,0,0,0,26.16,0V234.56a18.64,18.64,0,0,1,37.27,0v89.95a13.07,13.07,0,1,0,26.13,0V266.86a18.64,18.64,0,1,1,37.28,0v80.71h0s0,.08,0,.11a13.08,13.08,0,0,0,26.15,0v-47a18.63,18.63,0,1,1,37.26,0v85.5Z",
+    transform: "translate(-166.38 -60.59)",
+    fill: color,
+    fillRule: "evenodd"
+  }));
+};
+HandIcon.propTypes = propTypes$4;
+HandIcon.defaultProps = defaultProps$4;
+
+var propTypes$3 = {
+  className: PropTypes.string
+};
+var defaultProps$3 = {
+  className: null
+};
+var HandTap = function HandTap(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.circle
+  }), /*#__PURE__*/React.createElement(HandIcon, {
+    className: styles.hand
+  })));
+};
+HandTap.propTypes = propTypes$3;
+HandTap.defaultProps = defaultProps$3;
 
 // @todo export from somewhere else; or use as props in possible component for screen transitions
 var SPRING_CONFIG_TIGHT = {
@@ -2574,7 +2627,7 @@ var propTypes$2 = {
   withoutNavigationArrow: PropTypes.bool,
   withoutTransitions: PropTypes.bool,
   withNeighborScreens: PropTypes.bool,
-  withNavigationHint: PropTypes.bool,
+  withNavigationHint: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   withoutPlaybackControls: PropTypes.bool,
   onClose: PropTypes.func,
   onInteraction: PropTypes.func,
@@ -3177,6 +3230,7 @@ var Viewer = function Viewer(_ref) {
   } else if (playbackControls && (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled) {
     bottomHeight = playbackControlsContainerHeight / screenScale;
   }
+  var NavigationHint = withNavigationHint === 'hand' ? HandTap : ArrowHint;
   return /*#__PURE__*/React.createElement(StoryProvider, {
     story: parsedStory
   }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
@@ -3201,13 +3255,13 @@ var Viewer = function Viewer(_ref) {
   }, overscrollStyle) : /*#__PURE__*/React.createElement(Helmet, null, overscrollStyle), /*#__PURE__*/React.createElement(FontFaces, {
     fonts: finalFonts
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
+    className: classNames([styles$7.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), _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)]),
+    }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$7.landscape, landscape), styles$7.withoutGestures, withoutGestures), styles$7.hideMenu, !menuVisible), styles$7.disableMenu, navigationDisabled), styles$7.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), styles$7.ready, ready || withoutScreensTransforms), styles$7.hasInteracted, hasInteracted), styles$7.isDragging, isDragging), className, className)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.ariaAnnouncement,
+    className: styles$7.ariaAnnouncement,
     id: "announce",
     "aria-live": "polite"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -3237,12 +3291,12 @@ var Viewer = function Viewer(_ref) {
         "value": "Skip Links"
       }]
     }),
-    className: styles$6.accessibilityLinks
+    className: styles$7.accessibilityLinks
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: onClickSkipToPlaybackControls,
     "aria-disabled": withoutPlaybackControls || !playbackcontrolsVisible,
     "aria-describedby": "disabledReason",
-    className: classNames([styles$6.accessibilityButton, _defineProperty({}, styles$6.disabled, withoutPlaybackControls || !playbackcontrolsVisible)])
+    className: classNames([styles$7.accessibilityButton, _defineProperty({}, styles$7.disabled, withoutPlaybackControls || !playbackcontrolsVisible)])
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "CnVj9r",
     defaultMessage: [{
@@ -3251,10 +3305,10 @@ var Viewer = function Viewer(_ref) {
     }]
   })), withoutPlaybackControls || !playbackcontrolsVisible ? /*#__PURE__*/React.createElement("div", {
     role: "tooltip",
-    className: styles$6.tooltipBox,
+    className: styles$7.tooltipBox,
     id: "disabledReason"
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$6.tooltip
+    className: styles$7.tooltip
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "YXhRxW",
     defaultMessage: [{
@@ -3287,10 +3341,10 @@ var Viewer = function Viewer(_ref) {
     beforeScreensMenuButton: beforeScreensMenuButton,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.content
+    className: styles$7.content
   }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
     direction: "previous",
-    className: classNames([styles$6.navButton, styles$6.previous]),
+    className: classNames([styles$7.navButton, styles$7.previous]),
     onClick: gotoPreviousScreen,
     ariaLabel: intl.formatMessage({
       id: "zYH/31",
@@ -3300,7 +3354,7 @@ var Viewer = function Viewer(_ref) {
       }]
     })
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.screensFrame,
+    className: styles$7.screensFrame,
     style: {
       width: screenContainerWidth,
       height: screenContainerHeight,
@@ -3324,9 +3378,9 @@ var Viewer = function Viewer(_ref) {
       "aria-hidden": !current,
       style: screenStyles,
       tabIndex: current ? 0 : -1,
-      className: classNames([styles$6.screenContainer, _defineProperty({}, styles$6.current, current)])
+      className: classNames([styles$7.screenContainer, _defineProperty({}, styles$7.current, current)])
     }, screen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
-      className: styles$6.screen,
+      className: styles$7.screen,
       screen: screen,
       screenState: current ? screenState : null,
       index: i,
@@ -3344,7 +3398,7 @@ var Viewer = function Viewer(_ref) {
     }) : null);
   })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
     direction: "next",
-    className: classNames([styles$6.navButton, styles$6.next]),
+    className: classNames([styles$7.navButton, styles$7.next]),
     onClick: gotoNextScreen,
     ariaLabel: intl.formatMessage({
       id: "v9bqYj",
@@ -3354,22 +3408,22 @@ var Viewer = function Viewer(_ref) {
       }]
     })
   }) : null, !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
-    className: styles$6.playbackControls,
+    className: styles$7.playbackControls,
     id: "controls",
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React.createElement(PlaybackControls, {
-    className: styles$6.controls
-  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint, {
-    className: styles$6.arrowHint
+    className: styles$7.controls
+  })) : null, withNavigationHint !== false && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(NavigationHint, {
+    className: styles$7.navigationHint
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.shareIncentiveContainer, _defineProperty({}, styles$6.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
+    className: classNames([styles$7.shareIncentiveContainer, _defineProperty({}, styles$7.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
     style: {
       top: isEditor ? 10 : menuDotsContainerHeight - 10
     }
   }, /*#__PURE__*/React.createElement(ShareIncentive, Object.assign({
-    className: styles$6.shareIncentive
+    className: styles$7.shareIncentive
   }, currentShareIncentive))), /*#__PURE__*/React.createElement(WebViewContainer, {
-    className: styles$6.webView,
+    className: styles$7.webView,
     style: {
       maxWidth: Math.max(screenContainerWidth, 600)
     }