@micromag/viewer 0.3.55 → 0.3.58

package/es/index.js

@@ -219,13 +219,13 @@ function useScreenInteraction() {
   };
 }
 
-var styles$7 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSibblings":"micromag-viewer-withSibblings","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+var styles$8 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","handTap":"micromag-viewer-handTap","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSiblings":"micromag-viewer-withSiblings","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready","hasInteracted":"micromag-viewer-hasInteracted"};
 
-var styles$6 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
+var styles$7 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
 
-var styles$5 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
+var styles$6 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
 
-var propTypes$a = {
+var propTypes$c = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -238,7 +238,7 @@ var propTypes$a = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$a = {
+var defaultProps$c = {
   current: false,
   active: false,
   colors: null,
@@ -301,44 +301,44 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     });
   }, [playing, duration, currentTime, setSpringProps]);
   var inner = current && count > 1 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$5.dots
+    className: styles$6.dots
   }, _toConsumableArray(Array(count).keys()).map(function (i) {
     return /*#__PURE__*/React.createElement("span", {
-      className: classNames([styles$5.dot, styles$5.subDot]),
+      className: classNames([styles$6.dot, styles$6.subDot]),
       style: {
         width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
         backgroundColor: active && i <= subIndex ? primary : secondary
       }
     });
   })) : /*#__PURE__*/React.createElement("span", {
-    className: styles$5.dot,
+    className: styles$6.dot,
     style: {
       backgroundColor: active ? primary : secondary
     }
   });
   return /*#__PURE__*/React.createElement("li", {
-    className: classNames([styles$5.container, (_ref3 = {}, _defineProperty(_ref3, styles$5.active, current), _defineProperty(_ref3, styles$5.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    className: classNames([styles$6.container, (_ref3 = {}, _defineProperty(_ref3, styles$6.active, current), _defineProperty(_ref3, styles$6.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$5.button,
+    className: styles$6.button,
     onClick: onClick,
     tabIndex: "-1"
   }, inner));
 };
 
-ViewerMenuDot.propTypes = propTypes$a;
-ViewerMenuDot.defaultProps = defaultProps$a;
+ViewerMenuDot.propTypes = propTypes$c;
+ViewerMenuDot.defaultProps = defaultProps$c;
 
-var styles$4 = {};
+var styles$5 = {};
 
-var propTypes$9 = {
+var propTypes$b = {
   size: PropTypes.number,
   spacing: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$9 = {
+var defaultProps$b = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -352,7 +352,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -370,10 +370,10 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$9;
-MenuIcon.defaultProps = defaultProps$9;
+MenuIcon.propTypes = propTypes$b;
+MenuIcon.defaultProps = defaultProps$b;
 
-var propTypes$8 = {
+var propTypes$a = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
   items: PropTypes$1.menuItems,
@@ -389,7 +389,7 @@ var propTypes$8 = {
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$8 = {
+var defaultProps$a = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
@@ -429,7 +429,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     return current;
   });
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$6.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$6.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$6.withShadow, withShadow), _ref4)]),
+    className: classNames([styles$7.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$7.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$7.withShadow, withShadow), _ref4)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -453,7 +453,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$6.items
+    className: styles$7.items
   }, items.map(function (item, index) {
     var _ref5 = item || {},
         _ref5$current = _ref5.current,
@@ -480,9 +480,9 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       vertical: direction === 'vertical'
     });
   }), !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
-    className: styles$6.menu
+    className: styles$7.menu
   }, /*#__PURE__*/React.createElement(MenuIcon, {
-    className: styles$6.menuIcon,
+    className: styles$7.menuIcon,
     color: primary
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -500,16 +500,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$6.menuButton,
+    className: styles$7.menuButton,
     onClick: onClickMenu
   })) : null, closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$6.closeButton,
+    className: styles$7.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$6.closeButton,
+    className: styles$7.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -530,14 +530,14 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$8;
-ViewerMenuDots.defaultProps = defaultProps$8;
+ViewerMenuDots.propTypes = propTypes$a;
+ViewerMenuDots.defaultProps = defaultProps$a;
 
-var styles$3 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
 
-var styles$2 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
+var styles$3 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
 
-var propTypes$7 = {
+var propTypes$9 = {
   url: PropTypes.string,
   title: PropTypes.string,
   opened: PropTypes.bool,
@@ -545,7 +545,7 @@ var propTypes$7 = {
   onShare: PropTypes.func,
   onCancel: PropTypes.func
 };
-var defaultProps$7 = {
+var defaultProps$9 = {
   url: null,
   title: null,
   opened: false,
@@ -598,13 +598,13 @@ var ShareModal = function ShareModal(_ref) {
   }, [opened, onCancel]);
   useDocumentEvent('click', onDocumentClick, opened);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$2.opened, opened), _ref2)]),
+    className: classNames([styles$3.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$3.opened, opened), _ref2)]),
     ref: containerRef,
     "aria-hidden": opened ? null : '-1'
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.content
+    className: styles$3.content
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.buttons
+    className: styles$3.buttons
   }, /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
     quote: title,
     beforeOnClick: function beforeOnClick() {
@@ -629,12 +629,12 @@ var ShareModal = function ShareModal(_ref) {
   }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps)))));
 };
 
-ShareModal.propTypes = propTypes$7;
-ShareModal.defaultProps = defaultProps$7;
+ShareModal.propTypes = propTypes$9;
+ShareModal.defaultProps = defaultProps$9;
 
-var styles$1 = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
+var styles$2 = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
 
-var propTypes$6 = {
+var propTypes$8 = {
   title: PropTypes.string,
   url: PropTypes.string,
   className: PropTypes.string,
@@ -643,7 +643,7 @@ var propTypes$6 = {
   children: PropTypes.node,
   focusable: PropTypes.bool
 };
-var defaultProps$6 = {
+var defaultProps$8 = {
   title: null,
   url: null,
   className: null,
@@ -684,7 +684,7 @@ var ShareButton = function ShareButton(_ref) {
     setStoryShareModalOpened(false);
   }, [setStoryShareModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Button, {
     className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
     onClick: onShareIconClick,
@@ -704,7 +704,7 @@ var ShareButton = function ShareButton(_ref) {
     }),
     focusable: focusable
   }, children), /*#__PURE__*/React.createElement(ShareModal, {
-    className: styles$1.shareModal,
+    className: styles$2.shareModal,
     opened: storyShareModalOpened,
     title: title,
     url: url,
@@ -713,10 +713,10 @@ var ShareButton = function ShareButton(_ref) {
   }));
 };
 
-ShareButton.propTypes = propTypes$6;
-ShareButton.defaultProps = defaultProps$6;
+ShareButton.propTypes = propTypes$8;
+ShareButton.defaultProps = defaultProps$8;
 
-var propTypes$5 = {
+var propTypes$7 = {
   viewerTheme: PropTypes$1.viewerTheme,
   screenSize: PropTypes$1.screenSize,
   menuWidth: PropTypes.number,
@@ -733,7 +733,7 @@ var propTypes$5 = {
   fullscreenEnabled: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$5 = {
+var defaultProps$7 = {
   viewerTheme: null,
   screenSize: null,
   menuWidth: null,
@@ -861,36 +861,36 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)]),
     style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
   }, dragBind()), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.header
+    className: styles$4.header
   }, brandLogoUrl !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$3.organisation,
+    className: styles$4.organisation,
     style: {
       backgroundImage: "url(".concat(brandLogoUrl, ")")
     }
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.title,
+    className: styles$4.title,
     style: titleStyle
   }, title), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.buttons,
+    className: styles$4.buttons,
     style: colorSecondaryColorStyle
   }, /*#__PURE__*/React.createElement(ShareButton, {
-    className: styles$3.shareButton,
-    buttonClassName: styles$3.button,
+    className: styles$4.shareButton,
+    buttonClassName: styles$4.button,
     onShare: onShare,
     url: shareUrl,
     title: title,
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$3.icon,
+    className: styles$4.icon,
     icon: faShare
   })), fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
-    className: styles$3.button,
+    className: styles$4.button,
     onClick: toggleFullscreen,
     title: intl.formatMessage({
       id: "AuxqcG",
@@ -908,10 +908,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$3.icon,
+    className: styles$4.icon,
     icon: fullscreenActive ? faCompress : faExpand
   })) : null, /*#__PURE__*/React.createElement(Button, {
-    className: styles$3.button,
+    className: styles$4.button,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -929,19 +929,19 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$3.icon,
+    className: styles$4.icon,
     icon: faTimes
   })))), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.content,
+    className: styles$4.content,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$3.scroll,
+    className: styles$4.scroll,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$3.nav
+    className: styles$4.nav
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$3.items
+    className: styles$4.items
   }, items.map(function (item, index) {
     var _item$current = item.current,
         current = _item$current === void 0 ? false : _item$current,
@@ -966,15 +966,15 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       }]
     })) : '');
     return /*#__PURE__*/React.createElement("li", {
-      className: classNames([styles$3.item, _defineProperty({}, styles$3.active, current)]),
+      className: classNames([styles$4.item, _defineProperty({}, styles$4.active, current)]),
       key: "item-".concat(index),
       style: {
         width: "".concat(100 / thumbsPerLine, "%")
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$3.itemContent
+      className: styles$4.itemContent
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$3.screenContainer,
+      className: styles$4.screenContainer,
       ref: index === 0 ? firstScreenContainerRef : null
     }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
       screenWidth: screenWidth,
@@ -986,11 +986,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       // stackCount={count}
 
     }) : null, current ? /*#__PURE__*/React.createElement("div", {
-      className: styles$3.activeScreenBorder,
+      className: styles$4.activeScreenBorder,
       style: borderPrimaryColorStyle
     }) : null)), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$3.screenButton,
+      className: styles$4.screenButton,
       onClick: function onClick() {
         if (onClickItem !== null) {
           onClickItem(item);
@@ -1007,10 +1007,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }))))));
 };
 
-ViewerMenuPreview.propTypes = propTypes$5;
-ViewerMenuPreview.defaultProps = defaultProps$5;
+ViewerMenuPreview.propTypes = propTypes$7;
+ViewerMenuPreview.defaultProps = defaultProps$7;
 
-var propTypes$4 = {
+var propTypes$6 = {
   story: PropTypes$1.story.isRequired,
   currentScreenIndex: PropTypes.number,
   opened: PropTypes.bool,
@@ -1036,7 +1036,7 @@ var propTypes$4 = {
 
   })
 };
-var defaultProps$4 = {
+var defaultProps$6 = {
   currentScreenIndex: 0,
   opened: false,
   toggleFullscreen: null,
@@ -1254,7 +1254,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       menuTheme = _ref7$menuTheme === void 0 ? null : _ref7$menuTheme;
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$7.menuDotsContainer,
+    className: styles$8.menuDotsContainer,
     ref: refDots,
     style: {
       width: menuWidth
@@ -1269,16 +1269,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
     onClose: onClickCloseViewer,
-    className: styles$7.menuDots
+    className: styles$8.menuDots
   }))), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$7.menuPreviewContainer,
+    className: styles$8.menuPreviewContainer,
     style: menuPreviewStyle,
     ref: menuPreviewContainerRef
   }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     title: title,
     shareUrl: shareUrl,
-    className: styles$7.menuPreview,
+    className: styles$8.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
     focusable: opened,
@@ -1292,12 +1292,12 @@ var ViewerMenu = function ViewerMenu(_ref) {
   })));
 };
 
-ViewerMenu.propTypes = propTypes$4;
-ViewerMenu.defaultProps = defaultProps$4;
+ViewerMenu.propTypes = propTypes$6;
+ViewerMenu.defaultProps = defaultProps$6;
 
-var styles = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+var styles$1 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
 
-var propTypes$3 = {
+var propTypes$5 = {
   screen: PropTypes$1.screenComponent,
   renderContext: PropTypes$1.renderContext,
   screenState: PropTypes.string,
@@ -1309,7 +1309,7 @@ var propTypes$3 = {
   onDisableInteraction: PropTypes.func,
   getMediaRef: PropTypes.func
 };
-var defaultProps$3 = {
+var defaultProps$5 = {
   screen: null,
   renderContext: null,
   screenState: null,
@@ -1336,7 +1336,7 @@ var ViewerScreen = function ViewerScreen(_ref) {
       onDisableInteraction = _ref.onDisableInteraction,
       getMediaRef = _ref.getMediaRef;
   return screen !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, styles.active, active), _defineProperty(_ref2, styles.current, current), _ref2)]),
+    className: classNames([styles$1.container, (_ref2 = {}, _defineProperty(_ref2, styles$1.active, active), _defineProperty(_ref2, styles$1.current, current), _ref2)]),
     "aria-hidden": current ? null : 'true'
   }, /*#__PURE__*/React.createElement(Screen, {
     screen: screen,
@@ -1352,8 +1352,60 @@ var ViewerScreen = function ViewerScreen(_ref) {
   })) : null;
 };
 
-ViewerScreen.propTypes = propTypes$3;
-ViewerScreen.defaultProps = defaultProps$3;
+ViewerScreen.propTypes = propTypes$5;
+ViewerScreen.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"};
+
+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;
 
 var propTypes$2 = {
   story: PropTypes$1.story,
@@ -1377,6 +1429,7 @@ var propTypes$2 = {
   withoutMenuShadow: PropTypes.bool,
   withoutFullscreen: PropTypes.bool,
   withLandscapeSiblingsScreens: PropTypes.bool,
+  withNavigationHint: PropTypes.bool,
   closeable: PropTypes.bool,
   onClose: PropTypes.func,
   onInteraction: PropTypes.func,
@@ -1413,6 +1466,7 @@ var defaultProps$2 = {
   withoutMenuShadow: false,
   withoutFullscreen: false,
   withLandscapeSiblingsScreens: false,
+  withNavigationHint: false,
   menuIsScreenWidth: false,
   closeable: false,
   onClose: null,
@@ -1448,6 +1502,7 @@ var Viewer = function Viewer(_ref) {
       withoutMenuShadow = _ref.withoutMenuShadow;
       _ref.withoutFullscreen;
       var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
+      withNavigationHint = _ref.withNavigationHint,
       menuIsScreenWidth = _ref.menuIsScreenWidth,
       closeable = _ref.closeable,
       onCloseViewer = _ref.onClose,
@@ -1582,11 +1637,21 @@ var Viewer = function Viewer(_ref) {
     currentScreenRef.current.focus();
   }, [changeIndex]);
   var screensCount = screens.length;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasInteracted = _useState2[0],
+      setHasInteracted = _useState2[1];
+
   var onInteractionPrivate = useCallback(function () {
     if (onInteraction !== null) {
       onInteraction();
     }
-  }, [onInteraction]);
+
+    if (!hasInteracted) {
+      setHasInteracted(true);
+    }
+  }, [onInteraction, hasInteracted, setHasInteracted]);
 
   var _useScreenInteraction = useScreenInteraction({
     screens: screens,
@@ -1608,10 +1673,10 @@ var Viewer = function Viewer(_ref) {
 
   var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      menuOpened = _useState2[0],
-      setMenuOpened = _useState2[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      menuOpened = _useState4[0],
+      setMenuOpened = _useState4[1];
 
   var onMenuRequestOpen = useCallback(function () {
     return setMenuOpened(true);
@@ -1723,9 +1788,9 @@ 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$7.container, screenSize.screens.map(function (screenName) {
+    className: classNames([styles$8.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref12 = {}, _defineProperty(_ref12, styles$7.landscape, landscape), _defineProperty(_ref12, styles$7.withSibblings, withLandscapeSiblingsScreens), _defineProperty(_ref12, styles$7.hideMenu, !menuVisible), _defineProperty(_ref12, styles$7.ready, ready || withoutScreensTransforms), _defineProperty(_ref12, className, className), _ref12)]),
+    }), (_ref12 = {}, _defineProperty(_ref12, styles$8.landscape, landscape), _defineProperty(_ref12, styles$8.blings, withLandscapeSiblingsScreens), _defineProperty(_ref12, styles$8.hideMenu, !menuVisible), _defineProperty(_ref12, styles$8.ready, ready || withoutScreensTransforms), _defineProperty(_ref12, styles$8.hasInteracted, hasInteracted), _defineProperty(_ref12, className, className), _ref12)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu, {
@@ -1751,7 +1816,7 @@ var Viewer = function Viewer(_ref) {
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: styles$7.content
+    className: styles$8.content
   }, screens.map(function (scr, i) {
     var _ref13;
 
@@ -1803,7 +1868,7 @@ var Viewer = function Viewer(_ref) {
         height: screenContainerHeight,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
-      className: classNames([styles$7.screen, (_ref13 = {}, _defineProperty(_ref13, styles$7.current, current), _defineProperty(_ref13, styles$7.visible, current || withLandscapeSiblingsScreens), _ref13)]),
+      className: classNames([styles$8.screen, (_ref13 = {}, _defineProperty(_ref13, styles$8.current, current), _defineProperty(_ref13, styles$8.visible, current || withLandscapeSiblingsScreens), _ref13)]),
       tabIndex: active ? '0' : '-1'
       /* eslint-disable-line */
       ,
@@ -1829,14 +1894,16 @@ var Viewer = function Viewer(_ref) {
         return onScreenClick(e, i);
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$7.scaler,
+      className: styles$8.scaler,
       style: {
         width: screenWidth,
         height: screenHeight,
         transform: screenScale !== null ? "scale(".concat(screenScale, ")") : null,
         transformOrigin: screenScale !== null ? '0 0' : null
       }
-    }, viewerScreen)), current && screenIndex < screens.length ? /*#__PURE__*/React.createElement("button", {
+    }, viewerScreen), withNavigationHint && !withLandscapeSiblingsScreens && current && screenIndex === 0 ? /*#__PURE__*/React.createElement(HandTap, {
+      className: styles$8.handTap
+    }) : null), current && screenIndex < screens.length ? /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: "sr-only",
       onClick: gotoNextScreen,