@micromag/viewer 0.3.480 → 0.3.483

package/es/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { useRoutes, useUrlGenerator, useMemoryRouter, RoutesProvider } from '@folklore/routes';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
-import { useLocation, Switch, Route, Router } from 'wouter';
+import { Link, useLocation, Switch, Route, Router } from 'wouter';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { useViewerSize, usePlaybackContext, useViewerWebView, useViewerInteraction, StoryProvider, ScreenSizeProvider, ViewerProvider, GoogleKeysProvider, GoogleMapsClientProvider, ComponentsProvider, SCREENS_NAMESPACE, VisitorProvider, PlaybackProvider, TrackingProvider } from '@micromag/core/contexts';
 import { IntlProvider } from '@micromag/intl';
@@ -15,12 +15,11 @@ import { animated } from '@react-spring/web';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import EventEmitter from 'wolfy87-eventemitter';
-import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$1, PlayIcon, Spinner, UnmuteIcon, MuteIcon, PauseIcon, Meta, FontFaces } from '@micromag/core/components';
+import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$2, PlayIcon, Spinner, UnmuteIcon, MuteIcon, PauseIcon, Meta, FontFaces } from '@micromag/core/components';
 import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaReady, useMediaState, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
 import { getStyleFromColor, easings, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { ShareIncentive } from '@micromag/elements/all';
 import { useIntl, FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { useSpring } from '@react-spring/core';
 import Scroll from '@micromag/element-scroll';
 import ShareOptions from '@micromag/element-share-options';
@@ -314,7 +313,7 @@ var Button = function Button(_ref) {
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
     }), content) : /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
-      to: href,
+      href: href,
       className: linkClassNames,
       style: buttonStyles,
       onClick: onClick,
@@ -334,6 +333,7 @@ var Button = function Button(_ref) {
 };
 Button.propTypes = propTypes$n;
 Button.defaultProps = defaultProps$n;
+var Button$1 = Button;
 
 var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
 
@@ -350,7 +350,7 @@ var IconButton = function IconButton(_ref) {
   var iconClassName = _ref.iconClassName,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$8);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
+  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
     labelClassName: styles$f.label,
     iconClassName: classNames([styles$f.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
@@ -358,6 +358,7 @@ var IconButton = function IconButton(_ref) {
 };
 IconButton.propTypes = propTypes$m;
 IconButton.defaultProps = defaultProps$m;
+var IconButton$1 = IconButton;
 
 var _excluded$7 = ["single", "className"];
 var propTypes$l = {
@@ -373,7 +374,7 @@ var CloseMenuButton = function CloseMenuButton(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$7);
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "dIvwcD",
@@ -416,6 +417,7 @@ var CloseMenuButton = function CloseMenuButton(_ref) {
 };
 CloseMenuButton.propTypes = propTypes$l;
 CloseMenuButton.defaultProps = defaultProps$l;
+var CloseMenuButton$1 = CloseMenuButton;
 
 var _excluded$6 = ["className", "iconClassName"];
 var propTypes$k = {
@@ -431,7 +433,7 @@ var MenuButton = function MenuButton(_ref) {
     _ref.iconClassName;
     var props = _objectWithoutProperties(_ref, _excluded$6);
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "F/gl4b",
@@ -468,6 +470,7 @@ var MenuButton = function MenuButton(_ref) {
 };
 MenuButton.propTypes = propTypes$k;
 MenuButton.defaultProps = defaultProps$k;
+var MenuButton$1 = MenuButton;
 
 var _excluded$5 = ["className"];
 var propTypes$j = {
@@ -480,7 +483,7 @@ var ShareButton = function ShareButton(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$5);
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "7tw6U2",
@@ -511,6 +514,7 @@ var ShareButton = function ShareButton(_ref) {
 };
 ShareButton.propTypes = propTypes$j;
 ShareButton.defaultProps = defaultProps$j;
+var ShareButton$1 = ShareButton;
 
 var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
 
@@ -556,6 +560,7 @@ var ToggleButton = function ToggleButton(_ref) {
 };
 ToggleButton.propTypes = propTypes$i;
 ToggleButton.defaultProps = defaultProps$i;
+var ToggleButton$1 = ToggleButton;
 
 var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
 
@@ -614,6 +619,7 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
 };
 ViewerMenuContainer.propTypes = propTypes$h;
 ViewerMenuContainer.defaultProps = defaultProps$h;
+var MenuContainer = ViewerMenuContainer;
 
 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"};
 
@@ -705,6 +711,7 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
 };
 ViewerMenuDot.propTypes = propTypes$g;
 ViewerMenuDot.defaultProps = defaultProps$g;
+var MenuDot = ViewerMenuDot;
 
 var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
@@ -797,7 +804,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       count = _ref6$count === void 0 ? 1 : _ref6$count,
       _ref6$subIndex = _ref6.subIndex,
       subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
-    return /*#__PURE__*/React.createElement(ViewerMenuDot, {
+    return /*#__PURE__*/React.createElement(MenuDot, {
       key: "item-".concat(index + 1),
       current: current,
       active: index <= currentIndex,
@@ -842,6 +849,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
 };
 ViewerMenuDots.propTypes = propTypes$f;
 ViewerMenuDots.defaultProps = defaultProps$f;
+var MenuDots = ViewerMenuDots;
 
 var propTypes$e = {
   className: PropTypes.string
@@ -866,6 +874,7 @@ var StackIcon = function StackIcon(_ref) {
 };
 StackIcon.propTypes = propTypes$e;
 StackIcon.defaultProps = defaultProps$e;
+var StackIcon$1 = StackIcon;
 
 var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","focus-visible":"micromag-viewer-menus-menu-screen-focus-visible","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","pulse":"micromag-viewer-menus-menu-screen-pulse","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon"};
 
@@ -945,7 +954,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     className: styles$a.subScreenBadge
   }, /*#__PURE__*/React.createElement("span", {
     className: styles$a.subScreenCount
-  }, count), /*#__PURE__*/React.createElement(StackIcon, {
+  }, count), /*#__PURE__*/React.createElement(StackIcon$1, {
     className: styles$a.subScreenIcon
   })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
     className: styles$a.screen,
@@ -959,6 +968,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 };
 ViewerMenuScreen.propTypes = propTypes$d;
 ViewerMenuScreen.defaultProps = defaultProps$d;
+var MenuScreen = ViewerMenuScreen;
 
 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"};
 
@@ -1124,7 +1134,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       style: {
         paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
       }
-    }, screenMounted ? /*#__PURE__*/React.createElement(ViewerMenuScreen, {
+    }, screenMounted ? /*#__PURE__*/React.createElement(MenuScreen, {
       className: styles$9.screen,
       item: item,
       index: index,
@@ -1136,6 +1146,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
 };
 ViewerMenuPreview.propTypes = propTypes$c;
 ViewerMenuPreview.defaultProps = defaultProps$c;
+var MenuPreview = ViewerMenuPreview;
 
 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"};
 
@@ -1178,6 +1189,7 @@ var MicromagPreview = function MicromagPreview(_ref) {
 };
 MicromagPreview.propTypes = propTypes$b;
 MicromagPreview.defaultProps = defaultProps$b;
+var MicromagPreview$1 = MicromagPreview;
 
 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"};
 
@@ -1283,7 +1295,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.header
-  }, /*#__PURE__*/React.createElement(MicromagPreview, {
+  }, /*#__PURE__*/React.createElement(MicromagPreview$1, {
     className: styles$7.preview,
     screen: shareCurrentScreen ? currentScreen : coverScreen,
     title: title,
@@ -1317,6 +1329,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
 };
 ViewerMenuShare.propTypes = propTypes$a;
 ViewerMenuShare.defaultProps = defaultProps$a;
+var MenuShare = ViewerMenuShare;
 
 var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","focus-visible":"micromag-viewer-focus-visible","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
 
@@ -1649,16 +1662,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     ref: navContainerRef
   }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
+  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
-    button: /*#__PURE__*/React.createElement(ShareButton, {
+    button: /*#__PURE__*/React.createElement(ShareButton$1, {
       className: styles$6.menuButton,
       onClick: onOpenShare,
       theme: menuTheme,
       iconPosition: "left",
       focusable: !shareOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
@@ -1669,16 +1682,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     progressSpring: shareOpenedProgress
   })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
+  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
-    button: /*#__PURE__*/React.createElement(MenuButton, {
+    button: /*#__PURE__*/React.createElement(MenuButton$1, {
       className: styles$6.menuButton,
       iconClassName: styles$6.menuButtonIcon,
       onClick: onOpenMenu,
       theme: menuTheme,
       focusable: !menuOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseMenu,
       theme: menuTheme,
@@ -1687,7 +1700,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }),
     progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
-  })) : null), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
+  })) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     items: items,
     onClickDot: onClickScreen,
@@ -1699,11 +1712,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
     className: styles$6.dots
-  }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
+  }))), /*#__PURE__*/React.createElement(MenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: shareOpenedProgress,
     theme: viewerTheme
-  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
+  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(MenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -1716,11 +1729,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     shareUrl: shareUrl,
     onShare: onShare,
     onClose: onCloseShare
-  }) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
+  }) : null), /*#__PURE__*/React.createElement(MenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, menuMounted ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
+  }, menuMounted ? /*#__PURE__*/React.createElement(MenuPreview, {
     viewerTheme: viewerTheme,
     header: previewHeader,
     footer: previewFooter,
@@ -1844,7 +1857,7 @@ var NavigationButton = function NavigationButton(_ref) {
   var direction = _ref.direction,
     _onClick = _ref.onClick,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/React.createElement(IconButton$1, {
     className: classNames([styles$4.container, styles$4[direction], _defineProperty({}, className, className !== null)]),
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -1880,6 +1893,7 @@ var NavigationButton = function NavigationButton(_ref) {
 };
 NavigationButton.propTypes = propTypes$7;
 NavigationButton.defaultProps = defaultProps$7;
+var NavigationButton$1 = NavigationButton;
 
 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"};
 
@@ -1901,6 +1915,7 @@ var ArrowHint = function ArrowHint(_ref) {
 };
 ArrowHint.propTypes = propTypes$6;
 ArrowHint.defaultProps = defaultProps$6;
+var ArrowHint$1 = ArrowHint;
 
 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"};
 
@@ -2095,6 +2110,7 @@ var SeekBar = function SeekBar(_ref3) {
 };
 SeekBar.propTypes = propTypes$5;
 SeekBar.defaultProps = defaultProps$5;
+var SeekBar$1 = SeekBar;
 
 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"};
 
@@ -2275,7 +2291,7 @@ function PlaybackControls(_ref) {
   });
   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, 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)])
-  }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(Button$1, {
+  }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(Button$2, {
     className: classNames([styles$1.suggest]),
     style: {
       color: color
@@ -2293,7 +2309,7 @@ function PlaybackControls(_ref) {
       }]
     }),
     withoutBootstrapStyles: true
-  }) : null, /*#__PURE__*/React.createElement(Button$1, {
+  }) : null, /*#__PURE__*/React.createElement(Button$2, {
     className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
     style: {
       color: color
@@ -2312,7 +2328,7 @@ function PlaybackControls(_ref) {
       }]
     }) : playLabel,
     withoutBootstrapStyles: true
-  }), /*#__PURE__*/React.createElement(SeekBar, {
+  }), /*#__PURE__*/React.createElement(SeekBar$1, {
     className: styles$1.seekBar,
     media: mediaElement,
     playing: playing,
@@ -2325,7 +2341,7 @@ function PlaybackControls(_ref) {
     withSeekHead: !isCollapsed && !seekBarOnly,
     backgroundColor: color,
     progressColor: progressColor
-  }), /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement(Button$2, {
     className: styles$1.muteButton,
     style: {
       color: color
@@ -3072,7 +3088,7 @@ var Viewer = function Viewer(_ref) {
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.content
-  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
     direction: "previous",
     className: classNames([styles$6.navButton, styles$6.previous]),
     onClick: gotoPreviousScreen
@@ -3107,7 +3123,7 @@ var Viewer = function Viewer(_ref) {
       height: screenHeight,
       scale: screenScale
     }) : null);
-  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
     direction: "next",
     className: classNames([styles$6.navButton, styles$6.next]),
     onClick: gotoNextScreen
@@ -3116,7 +3132,7 @@ var Viewer = function Viewer(_ref) {
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React.createElement(PlaybackControls, {
     className: styles$6.controls
-  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint, {
+  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint$1, {
     className: styles$6.arrowHint
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$6.shareIncentiveContainer, _defineProperty({}, styles$6.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
@@ -3134,6 +3150,7 @@ var Viewer = function Viewer(_ref) {
 };
 Viewer.propTypes = propTypes$2;
 Viewer.defaultProps = defaultProps$2;
+var Viewer$1 = Viewer;
 
 var _excluded$1 = ["story", "pathWithIndex", "children", "onScreenChange"];
 var propTypes$1 = {
@@ -3176,26 +3193,25 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     }
   }, [navigate, url, pathWithIndex, screens, onScreenChange]);
   return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
-    path: routes.home
-  }, /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
-    story: story,
-    onScreenChange: finalOnScreenChange
-  }))), /*#__PURE__*/React.createElement(Route, {
     path: routes.screen
   }, function (_ref3) {
     var _ref3$screen = _ref3.screen,
       screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
     var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
     var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
-    return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
+    return /*#__PURE__*/React.createElement(Viewer$1, Object.assign({}, otherProps, {
       story: story,
       screen: screenId,
       onScreenChange: finalOnScreenChange
     }));
-  }));
+  }), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Viewer$1, Object.assign({}, otherProps, {
+    story: story,
+    onScreenChange: finalOnScreenChange
+  }))));
 };
 ViewerRoutes.propTypes = propTypes$1;
 ViewerRoutes.defaultProps = defaultProps$1;
+var ViewerRoutes$1 = ViewerRoutes;
 
 var home = "/";
 var screen = "/:screen";
@@ -3298,10 +3314,10 @@ var ViewerContainer = function ViewerContainer(_ref) {
     paused: paused
   }, /*#__PURE__*/React.createElement(TrackingProvider, {
     variables: finalTrackingVariables
-  }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer, Object.assign({
+  }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer$1, Object.assign({
     story: story,
     basePath: basePath
-  }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes, Object.assign({
+  }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes$1, Object.assign({
     story: story,
     basePath: basePath,
     pathWithIndex: pathWithIndex
@@ -3319,5 +3335,6 @@ var ViewerContainer = function ViewerContainer(_ref) {
 };
 ViewerContainer.propTypes = propTypes;
 ViewerContainer.defaultProps = defaultProps;
+var ViewerContainer$1 = ViewerContainer;
 
-export { Viewer, ViewerContainer as default };
+export { Viewer$1 as Viewer, ViewerContainer$1 as default };