@micromag/viewer 0.3.607 → 0.3.609

package/es/index.js

@@ -37,7 +37,7 @@ function useKeyboardShortcuts() {
   var shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === undefined ? false : _ref$disabled;
   useEffect(function () {
     var onKey = function onKey(e) {
       if (['input', 'textarea'].reduce(function (foundMatch, match) {
@@ -67,14 +67,14 @@ function checkClickable(el) {
   var parentDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var _ref = options || {},
     _ref$maxParentDistanc = _ref.maxParentDistance,
-    maxParentDistance = _ref$maxParentDistanc === void 0 ? 5 : _ref$maxParentDistanc,
+    maxParentDistance = _ref$maxParentDistanc === undefined ? 5 : _ref$maxParentDistanc,
     _ref$tags = _ref.tags,
-    tags = _ref$tags === void 0 ? ['BUTTON', 'A', 'INPUT', 'TEXTAREA'] : _ref$tags;
+    tags = _ref$tags === undefined ? ['BUTTON', 'A', 'INPUT', 'TEXTAREA'] : _ref$tags;
   var _ref2 = el || {},
     _ref2$tagName = _ref2.tagName,
-    tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
+    tagName = _ref2$tagName === undefined ? null : _ref2$tagName,
     _ref2$parentNode = _ref2.parentNode,
-    parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode;
+    parentNode = _ref2$parentNode === undefined ? null : _ref2$parentNode;
     _ref2.dataset;
   if (tagName === 'BODY') {
     return false;
@@ -106,15 +106,15 @@ function useScreenInteraction() {
     screenIndex = _ref.screenIndex,
     screenWidth = _ref.screenWidth,
     _ref$disableCurrentSc = _ref.disableCurrentScreenNavigation,
-    disableCurrentScreenNavigation = _ref$disableCurrentSc === void 0 ? false : _ref$disableCurrentSc,
+    disableCurrentScreenNavigation = _ref$disableCurrentSc === undefined ? false : _ref$disableCurrentSc,
     _ref$clickOnSiblings = _ref.clickOnSiblings,
-    clickOnSiblings = _ref$clickOnSiblings === void 0 ? false : _ref$clickOnSiblings,
+    clickOnSiblings = _ref$clickOnSiblings === undefined ? false : _ref$clickOnSiblings,
     _ref$nextScreenWidthP = _ref.nextScreenWidthPercent,
-    nextScreenWidthPercent = _ref$nextScreenWidthP === void 0 ? 0.5 : _ref$nextScreenWidthP,
+    nextScreenWidthPercent = _ref$nextScreenWidthP === undefined ? 0.5 : _ref$nextScreenWidthP,
     _ref$onInteract = _ref.onInteract,
-    onInteract = _ref$onInteract === void 0 ? null : _ref$onInteract,
+    onInteract = _ref$onInteract === undefined ? null : _ref$onInteract,
     _ref$onNavigate = _ref.onNavigate,
-    onNavigate = _ref$onNavigate === void 0 ? null : _ref$onNavigate;
+    onNavigate = _ref$onNavigate === undefined ? null : _ref$onNavigate;
   var _useState = useState(screens.reduce(function (map, _ref2) {
       var id = _ref2.id;
       return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, true));
@@ -124,12 +124,12 @@ function useScreenInteraction() {
     setScreensInteractionEnabled = _useState2[1];
   var _ref3 = screens[screenIndex] || {},
     _ref3$id = _ref3.id,
-    screenId = _ref3$id === void 0 ? screenIndex : _ref3$id;
+    screenId = _ref3$id === undefined ? screenIndex : _ref3$id;
   var _screensInteractionEn = screensInteractionEnabled[screenId],
-    currentScreenInteractionEnabled = _screensInteractionEn === void 0 ? true : _screensInteractionEn;
+    currentScreenInteractionEnabled = _screensInteractionEn === undefined ? true : _screensInteractionEn;
   var updateInteraction = useCallback(function (newValue) {
     var _screensInteractionEn2 = screensInteractionEnabled[screenId],
-      currentValue = _screensInteractionEn2 === void 0 ? true : _screensInteractionEn2;
+      currentValue = _screensInteractionEn2 === undefined ? true : _screensInteractionEn2;
     if (currentValue !== newValue) {
       setScreensInteractionEnabled(screens.reduce(function (map, _ref4) {
         var id = _ref4.id;
@@ -200,14 +200,14 @@ function checkDraggable(el) {
   var parentDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var _ref = options || {},
     _ref$maxParentDistanc = _ref.maxParentDistance,
-    maxParentDistance = _ref$maxParentDistanc === void 0 ? 5 : _ref$maxParentDistanc;
+    maxParentDistance = _ref$maxParentDistanc === undefined ? 5 : _ref$maxParentDistanc;
   var _ref2 = el || {},
     _ref2$tagName = _ref2.tagName,
-    tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
+    tagName = _ref2$tagName === undefined ? null : _ref2$tagName,
     _ref2$parentNode = _ref2.parentNode,
-    parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode,
+    parentNode = _ref2$parentNode === undefined ? null : _ref2$parentNode,
     _ref2$dataset = _ref2.dataset,
-    dataset = _ref2$dataset === void 0 ? {} : _ref2$dataset;
+    dataset = _ref2$dataset === undefined ? {} : _ref2$dataset;
   if (tagName === 'BODY') {
     return false;
   }
@@ -312,10 +312,10 @@ var Button = function Button(_ref) {
   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;
+    colors = _ref3$colors === undefined ? null : _ref3$colors;
   var _ref4 = colors || {},
     _ref4$primary = _ref4.primary,
-    brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
+    brandPrimaryColor = _ref4$primary === undefined ? null : _ref4$primary;
   var primaryColor = getStyleFromColor(brandPrimaryColor, 'color');
   var buttonStyles = _objectSpread({}, primaryColor);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -608,10 +608,10 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     children = _ref.children;
   var _ref2 = viewerTheme || {},
     _ref2$background = _ref2.background,
-    background = _ref2$background === void 0 ? null : _ref2$background;
+    background = _ref2$background === undefined ? null : _ref2$background;
   var _ref3 = background || {},
     _ref3$color = _ref3.color,
-    brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
+    brandBackgroundColor = _ref3$color === undefined ? null : _ref3$color;
   var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$e.container, _defineProperty({}, className, className !== null)]),
@@ -680,9 +680,9 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     className = _ref.className;
   var _ref2 = colors || {},
     _ref2$primary = _ref2.primary,
-    primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
+    primary = _ref2$primary === undefined ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
     _ref2$secondary = _ref2.secondary,
-    secondary = _ref2$secondary === void 0 ? 'rgba(255, 255, 255, 0.25)' : _ref2$secondary;
+    secondary = _ref2$secondary === undefined ? 'rgba(255, 255, 255, 0.25)' : _ref2$secondary;
   var _useSpring = useSpring(function () {
       return {
         scaleX: 0,
@@ -782,11 +782,11 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$5);
   var _ref2 = colors || {},
     _ref2$primary = _ref2.primary,
-    primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
+    primary = _ref2$primary === undefined ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
   var intl = useIntl();
   var currentIndex = items.findIndex(function (_ref3) {
     var _ref3$current = _ref3.current,
-      current = _ref3$current === void 0 ? false : _ref3$current;
+      current = _ref3$current === undefined ? false : _ref3$current;
     return current;
   });
   var _ref4 = props || {},
@@ -821,11 +821,11 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }, items.map(function (item, index) {
     var _ref6 = item || {},
       _ref6$current = _ref6.current,
-      current = _ref6$current === void 0 ? false : _ref6$current,
+      current = _ref6$current === undefined ? false : _ref6$current,
       _ref6$count = _ref6.count,
-      count = _ref6$count === void 0 ? 1 : _ref6$count,
+      count = _ref6$count === undefined ? 1 : _ref6$count,
       _ref6$subIndex = _ref6.subIndex,
-      subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
+      subIndex = _ref6$subIndex === undefined ? 0 : _ref6$subIndex;
     return /*#__PURE__*/React.createElement(ViewerMenuDot, {
       key: "item-".concat(index + 1),
       current: current,
@@ -927,10 +927,10 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
   var intl = useIntl();
   var _ref2 = item || {},
     _ref2$current = _ref2.current,
-    current = _ref2$current === void 0 ? false : _ref2$current,
+    current = _ref2$current === undefined ? false : _ref2$current,
     screen = _ref2.screen,
     _ref2$count = _ref2.count,
-    count = _ref2$count === void 0 ? 1 : _ref2$count;
+    count = _ref2$count === undefined ? 1 : _ref2$count;
   var _ref3 = screenSize || {},
     screenWidth = _ref3.width,
     screenHeight = _ref3.height;
@@ -940,7 +940,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     }),
     refVisible = _useIsVisible.ref,
     _useIsVisible$visible = _useIsVisible.visible,
-    visible = _useIsVisible$visible === void 0 ? false : _useIsVisible$visible;
+    visible = _useIsVisible$visible === undefined ? false : _useIsVisible$visible;
   var screenAriaLabel = "".concat(intl.formatMessage({
     id: "LkVfwW",
     defaultMessage: [{
@@ -1059,28 +1059,28 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var _useDimensionObserver = useDimensionObserver(),
     containerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.width,
-    contentWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    contentWidth = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2;
   var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // @note cool, should be in recipes
 
   // @todo reimplement the brand logo
   // const { background = null, logo: brandLogo = null } = viewerTheme || {};
   var _ref2 = viewerTheme || {},
     _ref2$background = _ref2.background,
-    background = _ref2$background === void 0 ? null : _ref2$background,
+    background = _ref2$background === undefined ? null : _ref2$background,
     _ref2$textStyles = _ref2.textStyles,
-    textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles;
+    textStyles = _ref2$textStyles === undefined ? null : _ref2$textStyles;
   var _ref3 = background || {},
     _ref3$image = _ref3.image,
-    image = _ref3$image === void 0 ? null : _ref3$image;
+    image = _ref3$image === undefined ? null : _ref3$image;
   var _ref4 = image || {},
     _ref4$url = _ref4.url,
-    brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
+    brandImageUrl = _ref4$url === undefined ? null : _ref4$url;
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null;
   var _ref5 = textStyles || {},
     _ref5$title = _ref5.title,
-    titleStyles = _ref5$title === void 0 ? null : _ref5$title;
+    titleStyles = _ref5$title === undefined ? null : _ref5$title;
   // eslint-disable-next-line no-unused-vars
   var _ref6 = titleStyles || {};
     _ref6.textAlign;
@@ -1247,32 +1247,32 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
   // Viewer theme
   var _ref2 = viewerTheme || {},
     _ref2$background = _ref2.background,
-    background = _ref2$background === void 0 ? null : _ref2$background;
+    background = _ref2$background === undefined ? null : _ref2$background;
   var _ref3 = background || {},
     _ref3$image = _ref3.image,
-    image = _ref3$image === void 0 ? null : _ref3$image;
+    image = _ref3$image === undefined ? null : _ref3$image;
   var _ref4 = image || {},
     _ref4$url = _ref4.url,
-    brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
+    brandImageUrl = _ref4$url === undefined ? null : _ref4$url;
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null;
   var coverScreen = useMemo(function () {
     var _ref5 = items[0] || {},
       _ref5$screen = _ref5.screen,
-      screen = _ref5$screen === void 0 ? null : _ref5$screen;
+      screen = _ref5$screen === undefined ? null : _ref5$screen;
     return screen;
   }, [items]);
   var currentScreen = useMemo(function () {
     var found = items.find(function (item) {
       var _ref6 = item || {},
         _ref6$current = _ref6.current,
-        current = _ref6$current === void 0 ? false : _ref6$current;
+        current = _ref6$current === undefined ? false : _ref6$current;
       return current;
     });
     var _ref7 = found || {},
       _ref7$screen = _ref7.screen,
-      screen = _ref7$screen === void 0 ? null : _ref7$screen;
+      screen = _ref7$screen === undefined ? null : _ref7$screen;
     return screen;
   }, [items, currentScreenIndex, focusable]);
   var _useState = useState(false),
@@ -1422,23 +1422,23 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onClickCloseViewer = _ref.onClickCloseViewer,
     refDots = _ref.refDots;
   var _story$components = story.components,
-    screens = _story$components === void 0 ? [] : _story$components,
+    screens = _story$components === undefined ? [] : _story$components,
     _story$title = story.title,
-    title = _story$title === void 0 ? null : _story$title,
+    title = _story$title === undefined ? null : _story$title,
     _story$metadata = story.metadata,
-    metadata = _story$metadata === void 0 ? null : _story$metadata;
+    metadata = _story$metadata === undefined ? null : _story$metadata;
   var _ref2 = metadata || {},
     _ref2$description = _ref2.description,
-    description = _ref2$description === void 0 ? null : _ref2$description;
+    description = _ref2$description === undefined ? null : _ref2$description;
   var currentScreen = screens !== null ? screens[currentScreenIndex] || null : null;
   var _ref3 = currentScreen || {},
     _ref3$id = _ref3.id,
-    screenId = _ref3$id === void 0 ? null : _ref3$id,
+    screenId = _ref3$id === undefined ? null : _ref3$id,
     _ref3$type = _ref3.type,
-    screenType = _ref3$type === void 0 ? null : _ref3$type;
+    screenType = _ref3$type === undefined ? null : _ref3$type;
   var _ref4 = viewerTheme || {},
     _ref4$menuTheme = _ref4.menuTheme,
-    menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
+    menuTheme = _ref4$menuTheme === undefined ? null : _ref4$menuTheme;
   var _useViewerSize = useViewerSize(),
     viewerHeight = _useViewerSize.height;
   var _useState = useState(false),
@@ -1456,7 +1456,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
   var _useDimensionObserver = useDimensionObserver(),
     navContainerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
-    navContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    navContainerHeight = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2;
   var items = useMemo(function () {
     return screens.map(function (it) {
       var children = screens.filter(function (s) {
@@ -1472,13 +1472,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
         screen: it,
         screenId: it.id,
         current: screenId === it.id || currentChild !== null,
-        visible: ((it === null || it === void 0 ? void 0 : it.parentId) || null) === null,
+        visible: ((it === null || it === undefined ? undefined : it.parentId) || null) === null,
         count: children.length + 1 || 1,
         subIndex: subIndex || 0
       };
     }).filter(function (_ref5) {
       var _ref5$visible = _ref5.visible,
-        visible = _ref5$visible === void 0 ? true : _ref5$visible;
+        visible = _ref5$visible === undefined ? true : _ref5$visible;
       return visible;
     });
   }, [screens, screenId]);
@@ -2018,7 +2018,7 @@ function getFormattedTimestamp() {
   var _ref = parts || [],
     _ref2 = _slicedToArray(_ref, 1),
     _ref2$ = _ref2[0],
-    fullSeconds = _ref2$ === void 0 ? 0 : _ref2$;
+    fullSeconds = _ref2$ === undefined ? 0 : _ref2$;
   var finalFullSeconds = Math.round(fullSeconds);
   var seconds = finalFullSeconds % 60;
   var diff = finalFullSeconds - seconds;
@@ -2106,9 +2106,9 @@ var SeekBar = function SeekBar(_ref3) {
     }
     var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
       _currentTarget$getBou2 = _currentTarget$getBou.width,
-      elWidth = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
+      elWidth = _currentTarget$getBou2 === undefined ? 0 : _currentTarget$getBou2,
       _currentTarget$getBou3 = _currentTarget$getBou.x,
-      xGap = _currentTarget$getBou3 === void 0 ? null : _currentTarget$getBou3;
+      xGap = _currentTarget$getBou3 === undefined ? null : _currentTarget$getBou3;
     var newProgress = null;
     if (tap) {
       newProgress = Math.max(0, Math.min(1, (xOffset - xGap) / elWidth));
@@ -2252,13 +2252,13 @@ function PlaybackControls(_ref) {
   var intl = useIntl();
   var _usePlaybackContext = usePlaybackContext(),
     _usePlaybackContext$m = _usePlaybackContext.media,
-    mediaElement = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m,
+    mediaElement = _usePlaybackContext$m === undefined ? null : _usePlaybackContext$m,
     _usePlaybackContext$h = _usePlaybackContext.hasAudio,
-    hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
+    hasAudio = _usePlaybackContext$h === undefined ? null : _usePlaybackContext$h,
     _usePlaybackContext$p = _usePlaybackContext.playing,
-    wantedPlaying = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
+    wantedPlaying = _usePlaybackContext$p === undefined ? false : _usePlaybackContext$p,
     _usePlaybackContext$m2 = _usePlaybackContext.muted,
-    wantedMuted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
+    wantedMuted = _usePlaybackContext$m2 === undefined ? true : _usePlaybackContext$m2,
     setPlaying = _usePlaybackContext.setPlaying,
     setMuted = _usePlaybackContext.setMuted,
     controls = _usePlaybackContext.controls,
@@ -2490,7 +2490,7 @@ function WebViewContainer(_ref) {
     _useViewerWebView.open;
     _useViewerWebView.update;
     var _useViewerWebView$url = _useViewerWebView.url,
-    url = _useViewerWebView$url === void 0 ? null : _useViewerWebView$url,
+    url = _useViewerWebView$url === undefined ? null : _useViewerWebView$url,
     webViewProps = _objectWithoutProperties(_useViewerWebView, _excluded$2);
   var _useViewerInteraction = useViewerInteraction(),
     disableInteraction = _useViewerInteraction.disableInteraction,
@@ -2740,13 +2740,13 @@ var Viewer = function Viewer(_ref) {
     disabled: storyIsParsed
   }) || {};
   var _parsedStory$componen = parsedStory.components,
-    screens = _parsedStory$componen === void 0 ? [] : _parsedStory$componen,
+    screens = _parsedStory$componen === undefined ? [] : _parsedStory$componen,
     _parsedStory$title = parsedStory.title,
-    title = _parsedStory$title === void 0 ? null : _parsedStory$title,
+    title = _parsedStory$title === undefined ? null : _parsedStory$title,
     _parsedStory$metadata = parsedStory.metadata,
-    metadata = _parsedStory$metadata === void 0 ? null : _parsedStory$metadata,
+    metadata = _parsedStory$metadata === undefined ? null : _parsedStory$metadata,
     _parsedStory$fonts = parsedStory.fonts,
-    fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts;
+    fonts = _parsedStory$fonts === undefined ? null : _parsedStory$fonts;
   var screensCount = screens.length;
   var eventsManager = useMemo(function () {
     return new EventEmitter();
@@ -2763,9 +2763,9 @@ var Viewer = function Viewer(_ref) {
     screenMetadata = _ref3.metadata;
   var _ref4 = screenMetadata || {},
     _ref4$title = _ref4.title,
-    screenTitle = _ref4$title === void 0 ? null : _ref4$title,
+    screenTitle = _ref4$title === undefined ? null : _ref4$title,
     _ref4$description = _ref4.description,
-    screenDescription = _ref4$description === void 0 ? null : _ref4$description;
+    screenDescription = _ref4$description === undefined ? null : _ref4$description;
   var finalTitle = screenTitle !== null ? screenTitle : title;
   var finalMetadata = useMemo(function () {
     return screenDescription !== null ? _objectSpread(_objectSpread({}, metadata), {}, {
@@ -2788,16 +2788,16 @@ var Viewer = function Viewer(_ref) {
     colors = _ref5.colors;
   var _ref6 = colors || {},
     _ref6$primary = _ref6.primary,
-    primaryColor = _ref6$primary === void 0 ? null : _ref6$primary,
+    primaryColor = _ref6$primary === undefined ? null : _ref6$primary,
     _ref6$focus = _ref6.focus,
-    focusColor = _ref6$focus === void 0 ? null : _ref6$focus;
+    focusColor = _ref6$focus === undefined ? null : _ref6$focus;
   var finalFocusColor = getColorAsString(focusColor || primaryColor);
   var _ref7 = textStyles || {},
     _ref7$title = _ref7.title,
-    themeTextStyle = _ref7$title === void 0 ? null : _ref7$title;
+    themeTextStyle = _ref7$title === undefined ? null : _ref7$title;
   var _ref8 = themeTextStyle || {},
     _ref8$fontFamily = _ref8.fontFamily,
-    themeFont = _ref8$fontFamily === void 0 ? null : _ref8$fontFamily;
+    themeFont = _ref8$fontFamily === undefined ? null : _ref8$fontFamily;
 
   // Fonts
   var finalFonts = useMemo(function () {
@@ -2817,15 +2817,15 @@ var Viewer = function Viewer(_ref) {
     playing = _usePlaybackContext.playing;
     _usePlaybackContext.setControls;
     var _usePlaybackContext$c = _usePlaybackContext.controls,
-    playbackControls = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
+    playbackControls = _usePlaybackContext$c === undefined ? false : _usePlaybackContext$c,
     _usePlaybackContext$c2 = _usePlaybackContext.controlsVisible,
-    playbackcontrolsVisible = _usePlaybackContext$c2 === void 0 ? false : _usePlaybackContext$c2,
+    playbackcontrolsVisible = _usePlaybackContext$c2 === undefined ? false : _usePlaybackContext$c2,
     _usePlaybackContext$m = _usePlaybackContext.media,
-    playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m;
+    playbackMedia = _usePlaybackContext$m === undefined ? null : _usePlaybackContext$m;
   var _useDimensionObserver = useDimensionObserver(),
     playbackControlsContainerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
-    playbackControlsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    playbackControlsContainerHeight = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2;
   var trackScreenView = useTrackScreenView();
   var _useScreenSizeFromEle = useScreenSizeFromElement(_objectSpread({
       width: width,
@@ -2839,13 +2839,13 @@ var Viewer = function Viewer(_ref) {
     screenScale = _useScreenSizeFromEle.scale;
   var _ref9 = screenSize || {},
     _ref9$width = _ref9.width,
-    screenWidth = _ref9$width === void 0 ? null : _ref9$width,
+    screenWidth = _ref9$width === undefined ? null : _ref9$width,
     _ref9$height = _ref9.height,
-    screenHeight = _ref9$height === void 0 ? null : _ref9$height,
+    screenHeight = _ref9$height === undefined ? null : _ref9$height,
     _ref9$landscape = _ref9.landscape,
-    landscape = _ref9$landscape === void 0 ? false : _ref9$landscape,
+    landscape = _ref9$landscape === undefined ? false : _ref9$landscape,
     _ref9$menuOverScreen = _ref9.menuOverScreen,
-    menuOverScreen = _ref9$menuOverScreen === void 0 ? false : _ref9$menuOverScreen;
+    menuOverScreen = _ref9$menuOverScreen === undefined ? false : _ref9$menuOverScreen;
   var screenContainerWidth = screenScale !== null ? screenWidth * screenScale : screenWidth;
   var screenContainerHeight = screenScale !== null ? screenHeight * screenScale : screenHeight;
   var hasSize = screenWidth > 0 && screenHeight > 0;
@@ -3088,7 +3088,7 @@ var Viewer = function Viewer(_ref) {
   var _useDimensionObserver3 = useDimensionObserver(),
     menuDotsContainerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
-    menuDotsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
+    menuDotsContainerHeight = _useDimensionObserver4 === undefined ? 0 : _useDimensionObserver4;
   var onClickScreen = useCallback(function (_ref14) {
     var itemScreenId = _ref14.screenId;
     onInteractionPrivate();
@@ -3163,24 +3163,24 @@ var Viewer = function Viewer(_ref) {
     setShareIncentiveVisible = _useState10[1];
   var _ref16 = currentScreen || {},
     _ref16$header = _ref16.header,
-    header = _ref16$header === void 0 ? null : _ref16$header;
+    header = _ref16$header === undefined ? null : _ref16$header;
   var _ref17 = header || {},
     _ref17$shareIncentive = _ref17.shareIncentive,
-    shareIncentive = _ref17$shareIncentive === void 0 ? null : _ref17$shareIncentive;
+    shareIncentive = _ref17$shareIncentive === undefined ? null : _ref17$shareIncentive;
   var _ref18 = shareIncentive || {},
     _ref18$active = _ref18.active,
-    hasShareIncentive = _ref18$active === void 0 ? false : _ref18$active,
+    hasShareIncentive = _ref18$active === undefined ? false : _ref18$active,
     _ref18$label = _ref18.label,
-    shareIncentiveLabel = _ref18$label === void 0 ? null : _ref18$label;
+    shareIncentiveLabel = _ref18$label === undefined ? null : _ref18$label;
   var _ref19 = currentShareIncentive || {},
     _ref19$label = _ref19.label,
-    currentShareIncentiveLabel = _ref19$label === void 0 ? null : _ref19$label;
+    currentShareIncentiveLabel = _ref19$label === undefined ? null : _ref19$label;
   var _ref20 = shareIncentiveLabel || {},
     _ref20$body = _ref20.body,
-    incentiveLabel = _ref20$body === void 0 ? null : _ref20$body;
+    incentiveLabel = _ref20$body === undefined ? null : _ref20$body;
   var _ref21 = currentShareIncentiveLabel || {},
     _ref21$body = _ref21.body,
-    currentIncentiveLabel = _ref21$body === void 0 ? null : _ref21$body;
+    currentIncentiveLabel = _ref21$body === undefined ? null : _ref21$body;
   useEffect(function () {
     setShareIncentiveVisible(true);
     if (hasShareIncentive && shareIncentiveLabel !== currentShareIncentiveLabel) {
@@ -3219,11 +3219,13 @@ var Viewer = function Viewer(_ref) {
     bottomHeight = playbackControlsContainerHeight / screenScale;
   }
   var NavigationHint = withNavigationHint === 'hand' ? HandTap : ArrowHint;
-  console.log({
-    screenIndex: screenIndex,
-    transitionDirection: transitionDirection,
-    transitioned: transitioned
-  });
+
+  // console.log({
+  //     screenIndex,
+  //     transitionDirection,
+  //     transitioned,
+  // });
+
   return /*#__PURE__*/React.createElement(StoryProvider, {
     story: parsedStory
   }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
@@ -3453,7 +3455,7 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     navigate = _useLocation2[1];
   var _ref2 = story || {},
     _ref2$components = _ref2.components,
-    screens = _ref2$components === void 0 ? [] : _ref2$components;
+    screens = _ref2$components === undefined ? [] : _ref2$components;
   var finalOnScreenChange = useCallback(function (it) {
     var screenIndex = screens.findIndex(function (screen) {
       var screenId = screen.id;
@@ -3470,7 +3472,7 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     path: routes.screen
   }, function (_ref3) {
     var _ref3$screen = _ref3.screen,
-      screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
+      screenParam = _ref3$screen === undefined ? 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, {
@@ -3554,13 +3556,13 @@ var ViewerContainer = function ViewerContainer(_ref) {
       return null;
     }
     var _story$id = story.id,
-      id = _story$id === void 0 ? null : _story$id,
+      id = _story$id === undefined ? null : _story$id,
       _story$slug = story.slug,
-      slug = _story$slug === void 0 ? null : _story$slug,
+      slug = _story$slug === undefined ? null : _story$slug,
       _story$title = story.title,
-      title = _story$title === void 0 ? null : _story$title,
+      title = _story$title === undefined ? null : _story$title,
       _story$components = story.components,
-      components = _story$components === void 0 ? [] : _story$components;
+      components = _story$components === undefined ? [] : _story$components;
     return _objectSpread({
       storyId: id,
       storySlug: slug,
@@ -3572,7 +3574,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
     metadata = _ref2.metadata;
   var _ref3 = metadata || {},
     _ref3$language = _ref3.language,
-    finalLocale = _ref3$language === void 0 ? locale : _ref3$language;
+    finalLocale = _ref3$language === undefined ? locale : _ref3$language;
   var content = /*#__PURE__*/React.createElement(IntlProvider, {
     locale: finalLocale,
     locales: locales,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.607",
+    "version": "0.3.609",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,15 +63,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@folklore/routes": "^0.2.27",
-        "@micromag/core": "^0.3.607",
-        "@micromag/element-badge": "^0.3.607",
-        "@micromag/element-scroll": "^0.3.607",
-        "@micromag/element-share-options": "^0.3.607",
-        "@micromag/element-webview": "^0.3.607",
-        "@micromag/elements": "^0.3.607",
-        "@micromag/intl": "^0.3.607",
-        "@micromag/screens": "^0.3.607",
+        "@folklore/routes": "^0.2.32",
+        "@micromag/core": "^0.3.608",
+        "@micromag/element-badge": "^0.3.608",
+        "@micromag/element-scroll": "^0.3.608",
+        "@micromag/element-share-options": "^0.3.608",
+        "@micromag/element-webview": "^0.3.608",
+        "@micromag/elements": "^0.3.608",
+        "@micromag/intl": "^0.3.608",
+        "@micromag/screens": "^0.3.608",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -91,5 +91,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "635ee4c6bf057273a9c90bde7c80134ad92ebb9c"
+    "gitHead": "7e6a7a5e2201fc2e1888200dd21b7bfa493c14c4"
 }