@micromag/viewer 0.3.179 → 0.3.183

package/es/index.js

@@ -1,9 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import { Switch, Route, MemoryRouter } from 'react-router';
-import { BrowserRouter } from 'react-router-dom';
+import { Link, BrowserRouter } from 'react-router-dom';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { usePlaybackContext, useViewerWebView, useViewerInteraction, VisitorProvider, ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, UserInteractionProvider, PlaybackProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
 import fieldsManager from '@micromag/fields/manager';
@@ -12,28 +12,20 @@ import { ScreensProvider } from '@micromag/screens';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { useDrag, useGesture } from '@use-gesture/react';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
-import { FormattedMessage, useIntl } from 'react-intl';
 import EventEmitter from 'wolfy87-eventemitter';
-import { Button, Close, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
-import { useDocumentEvent, useDimensionObserver, useTrackEvent, useMediaProgress, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
-import { getStyleFromColor, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
-import { useSpring, config } from '@react-spring/core';
-import { animated } from '@react-spring/web';
-import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
+import { Label, ScreenPreview, Screen, Button as Button$1, Meta, FontFaces } from '@micromag/core/components';
+import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
+import { getStyleFromColor, easings, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
+import { useIntl, FormattedMessage } from 'react-intl';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import ShareOptions from '@micromag/element-share-options';
-import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
-import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
+import { useSpring } from '@react-spring/core';
+import { animated } from '@react-spring/web';
 import Scroll from '@micromag/element-scroll';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
-import { faPause } from '@fortawesome/free-solid-svg-icons/faPause';
-import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
-import { faVolumeUp } from '@fortawesome/free-solid-svg-icons/faVolumeUp';
+import ShareOptions from '@micromag/element-share-options';
+import { useGesture } from '@use-gesture/react';
 import WebView from '@micromag/element-webview';
 
 var routes = PropTypes.shape({
@@ -197,7 +189,7 @@ function useScreenInteraction() {
     var relativeX = x - left;
     var direction = relativeX < width * (1 - nextScreenWidthPercent) ? 'previous' : 'next';
     var lastIndex = screensCount - 1;
-    var nextIndex = index;
+    var nextIndex = index; // @todo investigate what clickOnSiblings is doing
 
     if (direction === 'previous' && !clickOnSiblings) {
       nextIndex = Math.max(0, screenIndex - 1);
@@ -213,7 +205,7 @@ function useScreenInteraction() {
         end: index === nextIndex && nextIndex === lastIndex
       });
     }
-  }, [screens, screenIndex, screenIndex, screensInteractionEnabled, currentScreenInteractionEnabled, nextScreenWidthPercent, disableCurrentScreenNavigation, clickOnSiblings, onInteract, onNavigate]);
+  }, [screens, screenIndex, screensInteractionEnabled, currentScreenInteractionEnabled, nextScreenWidthPercent, disableCurrentScreenNavigation, clickOnSiblings, onInteract, onNavigate]);
   return {
     interact: interact,
     currentScreenInteractionEnabled: currentScreenInteractionEnabled,
@@ -222,171 +214,393 @@ function useScreenInteraction() {
   };
 }
 
-var styles$c = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
-
-var propTypes$h = {
-  url: PropTypes.string,
-  title: PropTypes.string,
-  opened: PropTypes.bool,
+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 _excluded$8 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var propTypes$n = {
+  type: PropTypes.string,
+  theme: PropTypes$1.buttonTheme,
+  size: PropTypes$1.buttonSize,
+  href: PropTypes.string,
+  external: PropTypes.bool,
+  direct: PropTypes.bool,
+  target: PropTypes.string,
+  label: PropTypes$1.label,
+  children: PropTypes$1.label,
+  focusable: PropTypes.bool,
+  active: PropTypes.bool,
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  disableOnLoading: PropTypes.bool,
+  withoutTheme: PropTypes.bool,
+  asLink: PropTypes.bool,
   className: PropTypes.string,
-  onShare: PropTypes.func,
-  onCancel: PropTypes.func
+  iconClassName: PropTypes.string,
+  labelClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
+
+  })])
 };
-var defaultProps$h = {
-  url: null,
-  title: null,
-  opened: false,
+var defaultProps$n = {
+  type: 'button',
+  theme: null,
+  size: null,
+  href: null,
+  external: false,
+  direct: false,
+  target: '_blank',
+  label: null,
+  children: null,
+  focusable: true,
+  active: false,
+  icon: null,
+  iconPosition: 'inline',
+  disabled: false,
+  loading: false,
+  disableOnLoading: true,
+  withoutTheme: false,
+  asLink: false,
   className: null,
-  onShare: null,
-  onCancel: null
+  iconClassName: null,
+  labelClassName: null,
+  onClick: null,
+  refButton: null
 };
 
-var ShareModal = function ShareModal(_ref) {
-  var _ref3;
+var Button = function Button(_ref) {
+  var _ref2;
 
-  var url = _ref.url,
-      title = _ref.title,
-      opened = _ref.opened,
+  var type = _ref.type,
+      theme = _ref.theme;
+      _ref.size;
+      var href = _ref.href,
+      external = _ref.external,
+      direct = _ref.direct,
+      target = _ref.target,
+      label = _ref.label,
+      children = _ref.children,
+      focusable = _ref.focusable;
+      _ref.active;
+      var icon = _ref.icon,
+      iconPosition = _ref.iconPosition,
+      disabled = _ref.disabled,
+      loading = _ref.loading,
+      disableOnLoading = _ref.disableOnLoading;
+      _ref.withoutTheme;
+      var asLink = _ref.asLink,
+      onClick = _ref.onClick,
       className = _ref.className,
-      onShare = _ref.onShare,
-      onCancel = _ref.onCancel;
-  var modalRef = useRef();
-  var onDocumentClick = useCallback(function (e) {
-    var _ref2 = e || {},
-        target = _ref2.target;
+      iconClassName = _ref.iconClassName,
+      labelClassName = _ref.labelClassName,
+      refButton = _ref.refButton,
+      props = _objectWithoutProperties(_ref, _excluded$8);
+
+  var finalLabel = label || children;
+  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
+  var hasChildren = label !== null && children !== null;
+  var hasIcon = icon !== null;
+  var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
+  var hasIconColumns = hasIcon && !hasInlineIcon;
+  var buttonClassNames = classNames([styles$g.container, styles$g["icon-".concat(iconPosition)], (_ref2 = {}, _defineProperty(_ref2, styles$g.withIcon, hasIcon), _defineProperty(_ref2, styles$g.withIconColumns, hasIconColumns), _defineProperty(_ref2, styles$g.withText, text !== null), _defineProperty(_ref2, styles$g.isLink, href !== null), _defineProperty(_ref2, styles$g.asLink, asLink), _defineProperty(_ref2, styles$g.isDisabled, disabled), _defineProperty(_ref2, styles$g.isLoading, loading), _defineProperty(_ref2, className, className !== null), _ref2)]);
+
+  var _ref3 = theme || {},
+      _ref3$colors = _ref3.colors,
+      colors = _ref3$colors === void 0 ? null : _ref3$colors;
+
+  var _ref4 = colors || {},
+      _ref4$primary = _ref4.primary,
+      brandPrimaryColor = _ref4$primary === void 0 ? 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", {
+    className: classNames([styles$g.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+  }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, iconPosition === 'left' ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.icon, styles$g.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+  }, icon) : null, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.center, styles$g.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text), iconPosition === 'right' ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$g.icon, styles$g.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+  }, icon) : null, hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
+
+  if (href !== null) {
+    var linkClassNames = classNames([buttonClassNames, _defineProperty({
+      disabled: disabled
+    }, styles$g.linkDisabled, disabled)]);
+    return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
+      href: disabled ? null : href,
+      className: linkClassNames,
+      style: buttonStyles,
+      onClick: onClick,
+      target: external ? target : null,
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
+    }), content) : /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
+      to: href,
+      className: linkClassNames,
+      style: buttonStyles,
+      onClick: onClick,
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
+    }), content);
+  }
 
-    if (!modalRef.current || modalRef.current.contains(target)) {
-      return;
-    }
+  return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
+    type: type,
+    className: buttonClassNames,
+    style: buttonStyles,
+    onClick: onClick,
+    disabled: disabled || disableOnLoading && loading,
+    ref: refButton,
+    tabIndex: focusable ? '0' : '-1'
+  }), content);
+};
 
-    onCancel();
-  }, [opened, onCancel]);
-  useDocumentEvent('click', onDocumentClick, opened);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$c.opened, opened), _ref3)]),
-    "aria-hidden": opened ? null : '-1'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.modal,
-    ref: modalRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.header
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$c.heading
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "oL4ueH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Share"
-    }]
-  })), /*#__PURE__*/React.createElement(Button, {
-    className: styles$c.close,
-    onClick: onCancel,
-    focusable: opened
-  }, /*#__PURE__*/React.createElement(Close, {
-    className: styles$c.closeIcon,
-    border: "none"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$c.content
-  }, /*#__PURE__*/React.createElement(ShareOptions, {
-    className: styles$c.shareOptions,
-    title: title,
-    url: url,
-    focusable: opened,
-    onShare: onShare,
-    onClose: onCancel
-  }))));
+Button.propTypes = propTypes$n;
+Button.defaultProps = defaultProps$n;
+
+var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","icon":"micromag-viewer-buttons-icon-button-icon","label":"micromag-viewer-buttons-icon-button-label"};
+
+var _excluded$7 = ["className"];
+var propTypes$m = {
+  className: PropTypes.string
+};
+var defaultProps$m = {
+  className: null
 };
 
-ShareModal.propTypes = propTypes$h;
-ShareModal.defaultProps = defaultProps$h;
+var IconButton = function IconButton(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
-var styles$b = {"container":"micromag-viewer-partials-share-button-container"};
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
+    labelClassName: styles$f.label,
+    iconClassName: styles$f.icon
+  }, props));
+};
 
-var propTypes$g = {
-  title: PropTypes.string,
-  url: PropTypes.string,
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  onShare: PropTypes.func,
-  children: PropTypes.node,
-  focusable: PropTypes.bool
+IconButton.propTypes = propTypes$m;
+IconButton.defaultProps = defaultProps$m;
+
+var _excluded$6 = ["className"];
+var propTypes$l = {
+  className: PropTypes.string
 };
-var defaultProps$g = {
-  title: null,
-  url: null,
-  className: null,
-  buttonClassName: null,
-  onShare: null,
-  children: null,
-  focusable: false
+var defaultProps$l = {
+  className: null
 };
 
-var ShareButton = function ShareButton(_ref) {
-  var title = _ref.title,
-      url = _ref.url,
-      className = _ref.className,
-      buttonClassName = _ref.buttonClassName,
-      onShare = _ref.onShare,
-      children = _ref.children,
-      focusable = _ref.focusable;
+var CloseButton = function CloseButton(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
   var intl = useIntl();
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
+    label: intl.formatMessage({
+      id: "dj/p/q",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Close"
+      }]
+    }),
+    icon: /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("polygon", {
+      points: "9.95 4.11 8.89 3.05 5 6.94 1.11 3.05 0.05 4.11 3.94 8 0.05 11.89 1.11 12.95 5 9.06 8.89 12.95 9.95 11.89 6.06 8 9.95 4.11"
+    }))
+  }, props));
+};
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      storyShareModalOpened = _useState2[0],
-      setStoryShareModalOpened = _useState2[1];
+CloseButton.propTypes = propTypes$l;
+CloseButton.defaultProps = defaultProps$l;
 
-  var onShareIconClick = useCallback(function () {
-    setStoryShareModalOpened(function (opened) {
-      return !opened;
-    });
-  }, [setStoryShareModalOpened, storyShareModalOpened]);
-  var onStoryShared = useCallback(function (type) {
-    setStoryShareModalOpened(false);
+var _excluded$5 = ["className"];
+var propTypes$k = {
+  className: PropTypes.string
+};
+var defaultProps$k = {
+  className: null
+};
 
-    if (onShare !== null) {
-      onShare(type);
-    }
-  }, [setStoryShareModalOpened, onShare]);
-  var onStoryShareCanceled = useCallback(function () {
-    setStoryShareModalOpened(false);
-  }, [setStoryShareModalOpened]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
-    onClick: onShareIconClick,
-    title: intl.formatMessage({
-      id: "7tw6U2",
+var MenuButton = function MenuButton(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$5);
+
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
+    label: intl.formatMessage({
+      id: "F/gl4b",
       defaultMessage: [{
         "type": 0,
-        "value": "Share"
+        "value": "Menu"
       }]
     }),
-    "aria-label": intl.formatMessage({
+    iconPosition: "right",
+    icon: /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("rect", {
+      width: "10",
+      height: "16"
+    }))
+  }, props));
+};
+
+MenuButton.propTypes = propTypes$k;
+MenuButton.defaultProps = defaultProps$k;
+
+var _excluded$4 = ["className"];
+var propTypes$j = {
+  className: PropTypes.string
+};
+var defaultProps$j = {
+  className: null
+};
+
+var ShareButton = function ShareButton(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$4);
+
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
+    label: intl.formatMessage({
       id: "7tw6U2",
       defaultMessage: [{
         "type": 0,
         "value": "Share"
       }]
     }),
-    focusable: focusable
-  }, children), /*#__PURE__*/React.createElement(ShareModal, {
-    className: styles$b.shareModal,
-    opened: storyShareModalOpened,
-    title: title,
-    url: url,
-    onShare: onStoryShared,
-    onCancel: onStoryShareCanceled
+    iconPosition: "left",
+    icon: /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("polygon", {
+      points: "8.5 14.5 1.5 14.5 1.5 8 0 8 0 16 10 16 10 8 8.5 8 8.5 14.5"
+    }), /*#__PURE__*/React.createElement("polygon", {
+      points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 11.26 5.75 11.26 5.75 2.87 8.56 5.68 9.62 4.62"
+    }))
+  }, props));
+};
+
+ShareButton.propTypes = propTypes$j;
+ShareButton.defaultProps = defaultProps$j;
+
+var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
+
+var propTypes$i = {
+  className: PropTypes.string,
+  toggled: PropTypes.number,
+  button: PropTypes.node,
+  toggledButton: PropTypes.node,
+  toggledButtonClassName: PropTypes.string
+};
+var defaultProps$i = {
+  className: null,
+  toggled: 0,
+  button: null,
+  toggledButton: null,
+  toggledButtonClassName: null
+};
+
+var ToggleButton = function ToggleButton(_ref) {
+  var className = _ref.className,
+      toggled = _ref.toggled,
+      button = _ref.button,
+      toggledButton = _ref.toggledButton,
+      toggledButtonClassName = _ref.toggledButtonClassName;
+  if (button === null) return false;
+
+  var getToggleButtonStyles = function getToggleButtonStyles(t) {
+    return {
+      transform: "translateY(".concat(t * -100, "%)")
+    };
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$e.normal,
+    style: getToggleButtonStyles(toggled)
+  }, button), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$e.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
+    style: getToggleButtonStyles(toggled - 1)
+  }, toggledButton));
+};
+
+ToggleButton.propTypes = propTypes$i;
+ToggleButton.defaultProps = defaultProps$i;
+
+var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","container":"micromag-viewer-menus-menu-container-container","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","inner":"micromag-viewer-menus-menu-container-inner"};
+
+var propTypes$h = {
+  className: PropTypes.string,
+  transitionProgress: PropTypes.number,
+  children: PropTypes.node
+};
+var defaultProps$h = {
+  className: null,
+  transitionProgress: 0,
+  children: null
+};
+
+var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
+  var className = _ref.className,
+      transitionProgress = _ref.transitionProgress,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
+    style: {
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$d.heightContainer,
+    style: {
+      height: "".concat(transitionProgress * 100, "%"),
+      pointerEvents: transitionProgress < 0.25 ? 'none' : 'auto',
+      zIndex: Math.round(1 + transitionProgress)
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$d.inner,
+    style: {
+      paddingTop: "".concat(3 * transitionProgress, "rem"),
+      paddingBottom: "".concat(0.5 * transitionProgress, "rem")
+    }
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    className: styles$d.backdrop,
+    style: {
+      opacity: easings.easeOutQuint(transitionProgress)
+    }
   }));
 };
 
-ShareButton.propTypes = propTypes$g;
-ShareButton.defaultProps = defaultProps$g;
+ViewerMenuContainer.propTypes = propTypes$h;
+ViewerMenuContainer.defaultProps = defaultProps$h;
 
-var styles$a = {"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$c = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","outlineBounce":"micromag-viewer-menus-menu-dot-outlineBounce"};
 
-var propTypes$f = {
+var propTypes$g = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -399,7 +613,7 @@ var propTypes$f = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$f = {
+var defaultProps$g = {
   current: false,
   active: false,
   colors: null,
@@ -421,130 +635,67 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
       vertical = _ref.vertical,
       onClick = _ref.onClick,
       className = _ref.className;
-  var currentTime = 0;
-  var duration = 1;
-  var playing = true;
 
   var _ref2 = colors || {},
       _ref2$primary = _ref2.primary,
       primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
       _ref2$secondary = _ref2.secondary,
-      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary; // TODO: if approved animate progress
-
+      secondary = _ref2$secondary === void 0 ? 'rgba(255, 255, 255, 0.25)' : _ref2$secondary;
 
   var _useSpring = useSpring(function () {
     return {
-      x: 0,
+      scaleX: 0,
       config: {
-        duration: 0
+        tension: 200,
+        friction: 30
       }
     };
   }),
-      _useSpring2 = _slicedToArray(_useSpring, 2);
-      _useSpring2[0];
-      var setSpringProps = _useSpring2[1];
+      _useSpring2 = _slicedToArray(_useSpring, 2),
+      dotSpringStyles = _useSpring2[0],
+      setDotSpringProps = _useSpring2[1];
 
   useEffect(function () {
-
-    var progress = currentTime / duration;
-    setSpringProps.start({
-      reset: true,
-      immediate: !playing,
-      from: {
-        x: progress
-      },
-      to: {
-        x: 1 
-      },
-      config: {
-        duration: (duration - currentTime) * 1000
-      }
-    });
-  }, [playing, duration, currentTime, setSpringProps]);
-  var inner = current && count > 1 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$a.dots
-  }, _toConsumableArray(Array(count).keys()).map(function (i) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: classNames([styles$a.dot, styles$a.subDot]),
-      style: {
-        width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
-        backgroundColor: active && i <= subIndex ? primary : secondary
-      }
+    var activeRatio = active ? 1 : 0;
+    var ratio = count > 1 && current ? (subIndex + 1) / count : activeRatio;
+    var scaleX = ratio;
+    setDotSpringProps.start({
+      scaleX: scaleX,
+      immediate: !current
     });
-  })) : /*#__PURE__*/React.createElement("span", {
-    className: styles$a.dot,
-    style: {
-      backgroundColor: active ? primary : secondary
-    }
-  });
+  }, [active, current, subIndex, count, setDotSpringProps]);
   return /*#__PURE__*/React.createElement("li", {
-    className: classNames([styles$a.container, (_ref3 = {}, _defineProperty(_ref3, styles$a.active, current), _defineProperty(_ref3, styles$a.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    className: classNames([styles$c.container, (_ref3 = {}, _defineProperty(_ref3, styles$c.active, current), _defineProperty(_ref3, styles$c.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$a.button,
+    className: styles$c.button,
     onClick: onClick,
     tabIndex: "-1"
-  }, inner));
-};
-
-ViewerMenuDot.propTypes = propTypes$f;
-ViewerMenuDot.defaultProps = defaultProps$f;
-
-var styles$9 = {};
-
-var propTypes$e = {
-  size: PropTypes.number,
-  spacing: PropTypes.number,
-  color: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$e = {
-  size: 100,
-  spacing: 8,
-  color: 'white',
-  className: null
-};
-
-var MenuIcon = function MenuIcon(_ref) {
-  var size = _ref.size,
-      spacing = _ref.spacing,
-      color = _ref.color,
-      className = _ref.className;
-  var squareSize = (size - 2 * spacing) / 3;
-  return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 ".concat(size, " ").concat(size),
-    "aria-hidden": "true"
-  }, _toConsumableArray(new Array(9)).map(function (square, squareI) {
-    var x = squareI % 3 * (squareSize + spacing);
-    var y = Math.floor(squareI / 3) * (squareSize + spacing);
-    return /*#__PURE__*/React.createElement("rect", {
-      key: "square-".concat(squareI),
-      fill: color,
-      x: x,
-      y: y,
-      width: squareSize,
-      height: squareSize
-    });
-  }));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$c.dot,
+    style: {
+      backgroundColor: secondary
+    }
+  }, /*#__PURE__*/React.createElement(animated.div, {
+    className: styles$c.progress,
+    style: _objectSpread(_objectSpread({}, dotSpringStyles), {}, {
+      backgroundColor: primary
+    })
+  }))));
 };
 
-MenuIcon.propTypes = propTypes$e;
-MenuIcon.defaultProps = defaultProps$e;
+ViewerMenuDot.propTypes = propTypes$g;
+ViewerMenuDot.defaultProps = defaultProps$g;
 
-var styles$8 = {"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$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
-var propTypes$d = {
+var _excluded$3 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "withItemClick", "withoutScreensMenu", "onClose", "className"];
+var propTypes$f = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
-  withShadow: PropTypes.bool,
-  title: PropTypes.string,
   items: PropTypes$1.menuItems,
-  shareUrl: PropTypes.string,
-  onShare: PropTypes.func,
-  onClickItem: PropTypes.func,
-  onClickMenu: PropTypes.func,
+  onClickDot: PropTypes.func,
+  onClickScreensMenu: PropTypes.func,
   colors: PropTypes.shape({
     primary: PropTypes.string,
     secondary: PropTypes.string
@@ -552,46 +703,36 @@ var propTypes$d = {
   closeable: PropTypes.bool,
   withItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
-  withoutShareMenu: PropTypes.bool,
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$d = {
+var defaultProps$f = {
   direction: 'horizontal',
-  withShadow: false,
-  title: null,
   items: [],
-  shareUrl: null,
-  onShare: null,
-  onClickItem: null,
-  onClickMenu: null,
+  onClickDot: null,
+  onClickScreensMenu: null,
   colors: null,
   closeable: false,
   withItemClick: false,
   withoutScreensMenu: false,
-  withoutShareMenu: false,
   onClose: null,
   className: null
 };
 
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref4;
+  var _ref5;
 
   var direction = _ref.direction,
-      withShadow = _ref.withShadow,
-      title = _ref.title,
       items = _ref.items,
-      shareUrl = _ref.shareUrl,
-      onShare = _ref.onShare,
-      onClickItem = _ref.onClickItem,
-      onClickMenu = _ref.onClickMenu,
+      onClickDot = _ref.onClickDot,
+      onClickScreensMenu = _ref.onClickScreensMenu,
       colors = _ref.colors,
       closeable = _ref.closeable,
       withItemClick = _ref.withItemClick,
       withoutScreensMenu = _ref.withoutScreensMenu,
-      withoutShareMenu = _ref.withoutShareMenu,
       onClose = _ref.onClose,
-      className = _ref.className;
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$3);
 
   var _ref2 = colors || {},
       _ref2$primary = _ref2.primary,
@@ -603,8 +744,12 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         current = _ref3$current === void 0 ? false : _ref3$current;
     return current;
   });
+
+  var _ref4 = props || {},
+      style = _ref4.style;
+
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$8.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$8.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$8.withShadow, withShadow), _ref4)]),
+    className: classNames([styles$b.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles$b.vertical, direction === 'vertical'), _ref5)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -626,17 +771,18 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     }, {
       current: currentIndex + 1,
       total: items.length
-    })
+    }),
+    style: style
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$8.items
+    className: styles$b.items
   }, items.map(function (item, index) {
-    var _ref5 = item || {},
-        _ref5$current = _ref5.current,
-        current = _ref5$current === void 0 ? false : _ref5$current,
-        _ref5$count = _ref5.count,
-        count = _ref5$count === void 0 ? 1 : _ref5$count,
-        _ref5$subIndex = _ref5.subIndex,
-        subIndex = _ref5$subIndex === void 0 ? 0 : _ref5$subIndex;
+    var _ref6 = item || {},
+        _ref6$current = _ref6.current,
+        current = _ref6$current === void 0 ? false : _ref6$current,
+        _ref6$count = _ref6.count,
+        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, {
       key: "item-".concat(index + 1),
@@ -646,56 +792,22 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       count: count,
       subIndex: subIndex,
       onClick: function onClick() {
-        if ((withItemClick || withoutScreensMenu) && onClickItem !== null) {
-          onClickItem(item);
-        } else if (!withItemClick && onClickMenu !== null) {
-          onClickMenu();
+        if ((withItemClick || withoutScreensMenu) && onClickDot !== null) {
+          onClickDot(item);
+        } else if (!withItemClick && onClickScreensMenu !== null) {
+          onClickScreensMenu();
         }
       },
       vertical: direction === 'vertical'
     });
-  }), !withoutShareMenu ? /*#__PURE__*/React.createElement("li", {
-    className: styles$8.menu
-  }, /*#__PURE__*/React.createElement(ShareButton, {
-    className: styles$8.shareButton,
-    buttonClassName: styles$8.menuButton,
-    onShare: onShare,
-    url: shareUrl,
-    title: title
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$8.icon,
-    icon: faShare
-  }))) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
-    className: styles$8.menu
-  }, /*#__PURE__*/React.createElement(MenuIcon, {
-    className: styles$8.menuIcon,
-    color: primary
-  }), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    title: intl.formatMessage({
-      id: "F/gl4b",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Menu"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      id: "F/gl4b",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Menu"
-      }]
-    }),
-    className: styles$8.menuButton,
-    onClick: onClickMenu
-  })) : null, closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$8.closeButton,
+  }), closeable ? /*#__PURE__*/React.createElement("li", {
+    className: styles$b.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$8.closeButton,
+    className: styles$b.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -716,13 +828,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$d;
-ViewerMenuDots.defaultProps = defaultProps$d;
+ViewerMenuDots.propTypes = propTypes$f;
+ViewerMenuDots.defaultProps = defaultProps$f;
 
-var propTypes$c = {
+var propTypes$e = {
   className: PropTypes.string
 };
-var defaultProps$c = {
+var defaultProps$e = {
   className: null
 };
 
@@ -730,50 +842,143 @@ var StackIcon = function StackIcon(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "32",
-    height: "32",
-    viewBox: "0 0 32 32",
+    width: "11.5",
+    height: "17.5",
+    viewBox: "0 0 11.5 17.5",
     className: classNames([_defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M22.33.15H5A2.9,2.9,0,0,0,2.12,3V23.25H5V3H22.33Zm4.33,5.78H10.78A2.9,2.9,0,0,0,7.89,8.81V29a2.9,2.9,0,0,0,2.89,2.89H26.66A2.89,2.89,0,0,0,29.55,29V8.81A2.88,2.88,0,0,0,26.66,5.93Zm0,23.09Z"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "10",
+    height: "16"
+  }), /*#__PURE__*/React.createElement("polygon", {
+    points: "10.5 1.5 10.5 16.5 1.5 16.5 1.5 17.5 11.5 17.5 11.5 1.5 10.5 1.5"
   }));
 };
 
-StackIcon.propTypes = propTypes$c;
-StackIcon.defaultProps = defaultProps$c;
+StackIcon.propTypes = propTypes$e;
+StackIcon.defaultProps = defaultProps$e;
 
-var styles$7 = {"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","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","pulse":"micromag-viewer-menus-menu-screen-pulse","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon"};
 
-var propTypes$b = {
-  viewerTheme: PropTypes$1.viewerTheme,
+var propTypes$d = {
+  className: PropTypes.string,
+  item: PropTypes$1.menuItem,
+  index: PropTypes.number,
+  onClick: PropTypes.func,
   screenSize: PropTypes$1.screenSize,
-  menuWidth: PropTypes.number,
-  title: PropTypes.string,
-  items: PropTypes$1.menuItems,
-  focusable: PropTypes.bool,
-  shouldLoad: PropTypes.bool,
-  onClickItem: PropTypes.func,
-  onClose: PropTypes.func,
+  focusable: PropTypes.bool
+};
+var defaultProps$d = {
+  className: null,
+  item: PropTypes$1.menuItem,
+  index: 0,
+  onClick: null,
+  screenSize: null,
+  focusable: true
+};
+
+var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
+  var _ref4;
+
+  var className = _ref.className,
+      item = _ref.item,
+      index = _ref.index,
+      _onClick = _ref.onClick,
+      screenSize = _ref.screenSize,
+      focusable = _ref.focusable;
+  var intl = useIntl();
+
+  var _ref2 = item || {},
+      _ref2$current = _ref2.current,
+      current = _ref2$current === void 0 ? false : _ref2$current,
+      screen = _ref2.screen,
+      _ref2$count = _ref2.count,
+      count = _ref2$count === void 0 ? 1 : _ref2$count;
+
+  var _ref3 = screenSize || {},
+      screenWidth = _ref3.width,
+      screenHeight = _ref3.height;
+
+  var screenAriaLabel = "".concat(intl.formatMessage({
+    id: "LkVfwW",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Screen "
+    }, {
+      "type": 1,
+      "value": "index"
+    }]
+  }, {
+    index: index + 1
+  })).concat(current ? " ".concat(intl.formatMessage({
+    id: "vmrJ8U",
+    defaultMessage: [{
+      "type": 0,
+      "value": "(current screen)"
+    }]
+  })) : '');
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$a.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$a.isCurrent, current), _ref4)])
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles$a.button,
+    onClick: function onClick() {
+      if (_onClick !== null) {
+        _onClick(item);
+      }
+    },
+    "aria-label": screenAriaLabel,
+    tabIndex: focusable ? '0' : '-1'
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$a.inner
+  }, count > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: styles$a.subScreenBadge
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$a.subScreenCount
+  }, count), /*#__PURE__*/React.createElement(StackIcon, {
+    className: styles$a.subScreenIcon
+  })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
+    className: styles$a.screen,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight,
+    screen: screen,
+    focusable: focusable,
+    active: focusable,
+    withSize: true
+  }) : null));
+};
+
+ViewerMenuScreen.propTypes = propTypes$d;
+ViewerMenuScreen.defaultProps = defaultProps$d;
+
+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","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","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","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
+
+var propTypes$c = {
+  viewerTheme: PropTypes$1.viewerTheme,
+  screenSize: PropTypes$1.screenSize,
+  menuWidth: PropTypes.number,
+  items: PropTypes$1.menuItems,
+  focusable: PropTypes.bool,
+  onClickScreen: PropTypes.func,
   maxThumbsWidth: PropTypes.number,
-  toggleFullscreen: PropTypes.func,
-  fullscreenActive: PropTypes.bool,
-  fullscreenEnabled: PropTypes.bool,
+  // @todo to reimplement:
+  // shouldLoad: PropTypes.bool,
+  // toggleFullscreen: PropTypes.func,
+  // fullscreenActive: PropTypes.bool,
+  // fullscreenEnabled: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$b = {
+var defaultProps$c = {
   viewerTheme: null,
   screenSize: null,
   menuWidth: null,
-  title: null,
   items: [],
   focusable: true,
-  shouldLoad: true,
-  onClickItem: null,
-  onClose: null,
+  // shouldLoad: true,
+  onClickScreen: null,
   maxThumbsWidth: 140,
-  toggleFullscreen: null,
-  fullscreenActive: false,
-  fullscreenEnabled: false,
+  // toggleFullscreen: null,
+  // fullscreenActive: false,
+  // fullscreenEnabled: false,
   className: null
 };
 
@@ -781,259 +986,298 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var viewerTheme = _ref.viewerTheme,
       screenSize = _ref.screenSize,
       menuWidth = _ref.menuWidth,
-      title = _ref.title,
       items = _ref.items,
       focusable = _ref.focusable,
-      onClickItem = _ref.onClickItem,
-      onClose = _ref.onClose,
+      onClickScreen = _ref.onClickScreen,
       maxThumbsWidth = _ref.maxThumbsWidth,
-      toggleFullscreen = _ref.toggleFullscreen,
-      fullscreenActive = _ref.fullscreenActive,
-      fullscreenEnabled = _ref.fullscreenEnabled,
       className = _ref.className;
-  var intl = useIntl();
-
-  var _ref2 = screenSize || {},
-      screenWidth = _ref2.width,
-      screenHeight = _ref2.height;
 
   var _useDimensionObserver = useDimensionObserver(),
-      firstScreenContainerRef = _useDimensionObserver.ref,
+      containerRef = _useDimensionObserver.ref,
       _useDimensionObserver2 = _useDimensionObserver.width,
-      thumbWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+      contentWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
 
-  var _useDimensionObserver3 = useDimensionObserver(),
-      containerRef = _useDimensionObserver3.ref,
-      _useDimensionObserver4 = _useDimensionObserver3.width,
-      contentWidth = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
+  var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // @note cool, should be in recipes
 
-  var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // Viewer theme
+  var _ref2 = viewerTheme || {},
+      _ref2$background = _ref2.background,
+      background = _ref2$background === void 0 ? null : _ref2$background;
+      _ref2.logo;
 
-  var _ref3 = viewerTheme || {},
-      _ref3$colors = _ref3.colors,
-      colors = _ref3$colors === void 0 ? null : _ref3$colors,
-      _ref3$background = _ref3.background,
-      background = _ref3$background === void 0 ? null : _ref3$background,
-      _ref3$textStyles = _ref3.textStyles,
-      textStyles = _ref3$textStyles === void 0 ? null : _ref3$textStyles,
-      _ref3$logo = _ref3.logo,
-      brandLogo = _ref3$logo === void 0 ? null : _ref3$logo;
-
-  var _ref4 = textStyles || {},
-      _ref4$title = _ref4.title,
-      brandTextStyle = _ref4$title === void 0 ? null : _ref4$title;
-
-  var _ref5 = colors || {},
-      _ref5$primary = _ref5.primary,
-      brandPrimaryColor = _ref5$primary === void 0 ? null : _ref5$primary,
-      _ref5$secondary = _ref5.secondary,
-      brandSecondaryColor = _ref5$secondary === void 0 ? null : _ref5$secondary;
-
-  var _ref6 = background || {},
-      _ref6$color = _ref6.color,
-      brandBackgroundColor = _ref6$color === void 0 ? null : _ref6$color,
-      _ref6$image = _ref6.image,
-      image = _ref6$image === void 0 ? null : _ref6$image;
-
-  var _ref7 = image || {},
-      _ref7$url = _ref7.url,
-      brandImageUrl = _ref7$url === void 0 ? null : _ref7$url;
-
-  var borderPrimaryColorStyle = getStyleFromColor(brandPrimaryColor, 'borderColor');
-  var colorSecondaryColorStyle = getStyleFromColor(brandSecondaryColor, 'color');
-  var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
+  var _ref3 = background || {},
+      _ref3$color = _ref3.color,
+      brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color,
+      _ref3$image = _ref3.image,
+      image = _ref3$image === void 0 ? null : _ref3$image;
 
-  var _ref8 = brandLogo || {},
-      _ref8$url = _ref8.url,
-      brandLogoUrl = _ref8$url === void 0 ? null : _ref8$url;
+  var _ref4 = image || {},
+      _ref4$url = _ref4.url,
+      brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
 
+  var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
-  } : null;
-  var titleStyle = brandTextStyle !== null ? getStyleFromText(brandTextStyle) : null;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      scrolledBottom = _useState2[0],
-      setScrolledBottom = _useState2[1];
+  } : null; // @todo reimplement the brand logo
+  // const { url: brandLogoUrl = null } = brandLogo || {};
+  // @todo optimize all of this the proper way
+  // const finalItems = useMemo(
+  //     () => (!focusable ? items.map((s, i) => (i > 6 ? { screenId: s.screenId } : s)) : items),
+  //     [items, focusable],
+  // );
 
-  var dragBind = useDrag(function (_ref9) {
-    var _ref9$direction = _slicedToArray(_ref9.direction, 2),
-        dy = _ref9$direction[1],
-        last = _ref9.last,
-        tap = _ref9.tap;
-
-    if (!tap && last && scrolledBottom && dy < 0 && onClose !== null) {
-      onClose();
-    }
-  }, {
-    filterTaps: true,
-    eventOptions: {
-      capture: true
-    }
-  });
-  var onScrolledBottom = useCallback(function () {
-    setScrolledBottom(true);
-  }, [setScrolledBottom]);
-  var onScrolledNotBottom = useCallback(function () {
-    setScrolledBottom(false);
-  }, [setScrolledBottom]);
-  var finalItems = useMemo(function () {
-    return !focusable ? items.slice(0, 3) : items;
-  }, [items, focusable]);
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.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$7.header
-  }, brandLogoUrl !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$7.organisation,
-    style: {
-      backgroundImage: "url(".concat(brandLogoUrl, ")")
-    }
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.title,
-    style: titleStyle
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: styles$7.buttons,
-    style: colorSecondaryColorStyle
-  }, fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
-    className: styles$7.button,
-    onClick: toggleFullscreen,
-    title: intl.formatMessage({
-      id: "AuxqcG",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Fullscreen"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      id: "AuxqcG",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Fullscreen"
-      }]
-    }),
-    focusable: focusable
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$7.icon,
-    icon: fullscreenActive ? faCompress : faExpand
-  })) : null, /*#__PURE__*/React.createElement(Button, {
-    className: styles$7.button,
-    onClick: onClose,
-    title: intl.formatMessage({
-      id: "dj/p/q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      id: "dj/p/q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    focusable: focusable
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$7.icon,
-    icon: faTimes
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: styles$7.content,
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.content,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$7.scroll,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom
+    className: styles$9.scroll
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$7.nav
+    className: styles$9.nav
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$7.items
-  }, finalItems.map(function (item, index) {
-    var screenId = item.screenId,
-        _item$current = item.current,
-        current = _item$current === void 0 ? false : _item$current,
-        screen = item.screen,
-        _item$count = item.count,
-        count = _item$count === void 0 ? 1 : _item$count;
-    var screenAriaLabel = "".concat(intl.formatMessage({
-      id: "LkVfwW",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Screen "
-      }, {
-        "type": 1,
-        "value": "index"
-      }]
-    }, {
-      index: index + 1
-    })).concat(current ? " ".concat(intl.formatMessage({
-      id: "vmrJ8U",
-      defaultMessage: [{
-        "type": 0,
-        "value": "(current screen)"
-      }]
-    })) : '');
+    className: styles$9.items
+  }, items.map(function (item, index) {
+    var _ref6 = item || {},
+        screenId = _ref6.screenId,
+        _ref6$screen = _ref6.screen,
+        screen = _ref6$screen === void 0 ? null : _ref6$screen;
+
+    var itemStyles = {
+      width: "".concat(100 / thumbsPerLine, "%")
+    };
     return /*#__PURE__*/React.createElement("li", {
-      className: classNames([styles$7.item, _defineProperty({}, styles$7.active, current)]),
       key: "item-".concat(screenId),
+      className: styles$9.item,
+      style: itemStyles
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$9.screen
+    }, screen === null ? /*#__PURE__*/React.createElement("svg", {
+      className: styles$9.loading,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
       style: {
-        width: "".concat(100 / thumbsPerLine, "%")
+        animationDelay: "".concat(index * -50, "ms")
       }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$7.itemContent
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$7.screenContainer,
-      ref: index === 0 ? firstScreenContainerRef : null
-    }, count > 1 ? /*#__PURE__*/React.createElement("div", {
-      className: styles$7.subScreenBadge
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles$7.subScreenCount
-    }, count), /*#__PURE__*/React.createElement(StackIcon, {
-      className: styles$7.subScreenIcon
-    })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
-      screenWidth: screenWidth,
-      screenHeight: screenHeight,
-      width: thumbWidth,
-      screen: screen,
-      focusable: focusable,
-      active: focusable,
-      withSize: true
-    }) : null, current ? /*#__PURE__*/React.createElement("div", {
-      className: styles$7.activeScreenBorder,
-      style: borderPrimaryColorStyle
-    }) : null)), /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: styles$7.screenButton,
-      onClick: function onClick() {
-        if (onClickItem !== null) {
-          onClickItem(item);
-        }
-      },
-      "aria-label": screenAriaLabel,
-      onKeyUp: function onKeyUp(e) {
-        if (e.key === 'Enter' && onClickItem !== null) {
-          onClickItem(item);
-        }
-      },
-      tabIndex: focusable ? '0' : '-1'
-    }));
+    }, /*#__PURE__*/React.createElement("rect", {
+      width: "10",
+      height: "16"
+    })) : /*#__PURE__*/React.createElement(ViewerMenuScreen, {
+      item: item,
+      index: index,
+      screenSize: screenSize,
+      onClick: onClickScreen,
+      focusable: focusable
+    })));
   }))))));
 };
 
-ViewerMenuPreview.propTypes = propTypes$b;
-ViewerMenuPreview.defaultProps = defaultProps$b;
+ViewerMenuPreview.propTypes = propTypes$c;
+ViewerMenuPreview.defaultProps = defaultProps$c;
+
+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 propTypes$b = {
+  screen: PropTypes$1.item,
+  title: PropTypes.string,
+  url: PropTypes.string,
+  description: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$b = {
+  screen: null,
+  title: null,
+  url: null,
+  description: null,
+  className: null
+};
+
+var MicromagPreview = function MicromagPreview(_ref) {
+  var screen = _ref.screen,
+      title = _ref.title,
+      url = _ref.url,
+      description = _ref.description,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$8.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$8.cover
+  }, /*#__PURE__*/React.createElement(ScreenPreview, {
+    screen: screen,
+    width: 100,
+    height: 150,
+    withSize: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$8.info
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles$8.title
+  }, title), url ? /*#__PURE__*/React.createElement("div", {
+    className: styles$8.url
+  }, url) : null, /*#__PURE__*/React.createElement("p", null, description)));
+};
+
+MicromagPreview.propTypes = propTypes$b;
+MicromagPreview.defaultProps = defaultProps$b;
 
-var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screenContainer":"micromag-viewer-screenContainer","screen":"micromag-viewer-screen","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSiblings":"micromag-viewer-withSiblings","playbackControlsContainer":"micromag-viewer-playbackControlsContainer","playbackControls":"micromag-viewer-playbackControls","webView":"micromag-viewer-webView","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+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","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","content":"micromag-viewer-menus-menu-share-content"};
 
 var propTypes$a = {
+  viewerTheme: PropTypes$1.viewerTheme,
+  menuWidth: PropTypes.number,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  items: PropTypes$1.menuItems,
+  focusable: PropTypes.bool,
+  // shouldLoad: PropTypes.bool, // @todo still needed? to re-implement?
+  currentScreenIndex: PropTypes.number,
+  shareUrl: PropTypes.string,
+  onShare: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$a = {
+  viewerTheme: null,
+  menuWidth: null,
+  title: null,
+  description: null,
+  items: [],
+  focusable: true,
+  currentScreenIndex: 0,
+  shareUrl: null,
+  onShare: null,
+  className: null
+};
+
+var ViewerMenuShare = function ViewerMenuShare(_ref) {
+  var viewerTheme = _ref.viewerTheme,
+      menuWidth = _ref.menuWidth,
+      title = _ref.title,
+      description = _ref.description,
+      items = _ref.items,
+      focusable = _ref.focusable,
+      currentScreenIndex = _ref.currentScreenIndex,
+      shareUrl = _ref.shareUrl,
+      onShare = _ref.onShare,
+      className = _ref.className;
+
+  // Viewer theme
+  var _ref2 = viewerTheme || {},
+      _ref2$background = _ref2.background,
+      background = _ref2$background === void 0 ? null : _ref2$background;
+
+  var _ref3 = background || {},
+      _ref3$color = _ref3.color,
+      brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color,
+      _ref3$image = _ref3.image,
+      image = _ref3$image === void 0 ? null : _ref3$image;
+
+  var _ref4 = image || {},
+      _ref4$url = _ref4.url,
+      brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
+
+  var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
+  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;
+
+    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;
+
+      return current;
+    });
+
+    var _ref7 = found || {},
+        _ref7$screen = _ref7.screen,
+        screen = _ref7$screen === void 0 ? null : _ref7$screen;
+
+    return screen;
+  }, [items, currentScreenIndex, focusable]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      shareCurrentScreen = _useState2[0],
+      setShareCurrentScreen = _useState2[1];
+
+  var onShareModeChange = useCallback(function () {
+    setShareCurrentScreen(function (value) {
+      return !value;
+    });
+  }, [setShareCurrentScreen]);
+
+  var _useState3 = useState(shareUrl),
+      _useState4 = _slicedToArray(_useState3, 2),
+      finalShareUrl = _useState4[0],
+      setFinalShareUrl = _useState4[1];
+
+  useEffect(function () {
+    setFinalShareUrl(shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex) : shareUrl);
+  }, [shareCurrentScreen, currentScreenIndex, setFinalShareUrl]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
+    style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
+      width: menuWidth
+    }),
+    "aria-hidden": focusable ? null : 'true'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$7.content
+  }, /*#__PURE__*/React.createElement(Scroll, {
+    className: styles$7.scroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$7.header
+  }, /*#__PURE__*/React.createElement(MicromagPreview, {
+    className: styles$7.preview,
+    screen: shareCurrentScreen ? currentScreen : coverScreen,
+    title: title,
+    url: finalShareUrl,
+    description: description
+  }), currentScreenIndex !== 0 ? /*#__PURE__*/React.createElement("div", {
+    className: styles$7.mode
+  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    name: "currentScreen",
+    value: "currentScreen",
+    onChange: onShareModeChange,
+    checked: shareCurrentScreen
+  }), /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "xuPbeq",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Start from the current screen"
+    }]
+  }))) : null), /*#__PURE__*/React.createElement(ShareOptions, {
+    className: styles$7.options,
+    itemClassName: styles$7.optionItem,
+    buttonClassName: styles$7.optionButton,
+    title: title,
+    url: finalShareUrl,
+    focusable: focusable,
+    onShare: onShare,
+    theme: viewerTheme,
+    shareCurrentScreen: shareCurrentScreen
+  }))));
+};
+
+ViewerMenuShare.propTypes = propTypes$a;
+ViewerMenuShare.defaultProps = defaultProps$a;
+
+var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","dots":"micromag-viewer-dots","menuTopContainer":"micromag-viewer-menuTopContainer","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuItemScreens":"micromag-viewer-menuItemScreens","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","isHidden":"micromag-viewer-isHidden","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"};
+
+var propTypes$9 = {
   story: PropTypes$1.story.isRequired,
   currentScreenIndex: PropTypes.number,
-  opened: PropTypes.bool,
   toggleFullscreen: PropTypes.func,
   fullscreenActive: PropTypes.bool,
   fullscreenEnabled: PropTypes.bool,
@@ -1047,9 +1291,7 @@ var propTypes$a = {
   withDotItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
   withoutShareMenu: PropTypes.bool,
-  onRequestOpen: PropTypes.func,
-  onRequestClose: PropTypes.func,
-  onClickItem: PropTypes.func,
+  onClickScreen: PropTypes.func,
   onClickMenu: PropTypes.func,
   onClickCloseViewer: PropTypes.func,
   refDots: PropTypes.shape({
@@ -1057,9 +1299,8 @@ var propTypes$a = {
 
   })
 };
-var defaultProps$a = {
+var defaultProps$9 = {
   currentScreenIndex: 0,
-  opened: false,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
@@ -1073,18 +1314,17 @@ var defaultProps$a = {
   withDotItemClick: false,
   withoutScreensMenu: false,
   withoutShareMenu: false,
-  onRequestOpen: null,
-  onRequestClose: null,
-  onClickItem: null,
+  onClickScreen: null,
   onClickMenu: null,
   onClickCloseViewer: null,
   refDots: null
 };
 
 var ViewerMenu = function ViewerMenu(_ref) {
+  var _ref11;
+
   var story = _ref.story,
       currentScreenIndex = _ref.currentScreenIndex,
-      opened = _ref.opened,
       toggleFullscreen = _ref.toggleFullscreen,
       fullscreenActive = _ref.fullscreenActive,
       fullscreenEnabled = _ref.fullscreenEnabled,
@@ -1098,23 +1338,42 @@ var ViewerMenu = function ViewerMenu(_ref) {
       withDotItemClick = _ref.withDotItemClick,
       withoutScreensMenu = _ref.withoutScreensMenu,
       withoutShareMenu = _ref.withoutShareMenu,
-      onRequestOpen = _ref.onRequestOpen,
-      onRequestClose = _ref.onRequestClose,
-      customOnClickItem = _ref.onClickItem,
-      customOnClickMenu = _ref.onClickMenu,
-      onClickCloseViewer = _ref.onClickCloseViewer,
+      customOnClickScreen = _ref.onClickScreen;
+      _ref.onClickMenu;
+      var onClickCloseViewer = _ref.onClickCloseViewer,
       refDots = _ref.refDots;
   var _story$components = story.components,
       screens = _story$components === void 0 ? [] : _story$components,
       _story$title = story.title,
-      title = _story$title === void 0 ? null : _story$title;
+      title = _story$title === void 0 ? null : _story$title,
+      _story$metadata = story.metadata,
+      metadata = _story$metadata === void 0 ? null : _story$metadata;
+
+  var _ref2 = metadata || {},
+      _ref2$description = _ref2.description,
+      description = _ref2$description === void 0 ? null : _ref2$description;
+
   var currentScreen = screens !== null ? screens[currentScreenIndex] || null : null;
 
-  var _ref2 = currentScreen || {},
-      _ref2$id = _ref2.id,
-      screenId = _ref2$id === void 0 ? null : _ref2$id,
-      _ref2$type = _ref2.type,
-      screenType = _ref2$type === void 0 ? null : _ref2$type;
+  var _ref3 = currentScreen || {},
+      _ref3$id = _ref3.id,
+      screenId = _ref3$id === void 0 ? null : _ref3$id,
+      _ref3$type = _ref3.type,
+      screenType = _ref3$type === void 0 ? null : _ref3$type;
+
+  var _ref4 = viewerTheme || {},
+      _ref4$menuTheme = _ref4.menuTheme,
+      menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      menuOpened = _useState2[0],
+      setMenuOpened = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      shareOpened = _useState4[0],
+      setShareOpened = _useState4[1];
 
   var items = useMemo(function () {
     return screens.map(function (it) {
@@ -1135,9 +1394,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
         count: children.length + 1 || 1,
         subIndex: subIndex || 0
       };
-    }).filter(function (_ref3) {
-      var _ref3$visible = _ref3.visible,
-          visible = _ref3$visible === void 0 ? true : _ref3$visible;
+    }).filter(function (_ref5) {
+      var _ref5$visible = _ref5.visible,
+          visible = _ref5$visible === void 0 ? true : _ref5$visible;
       return visible;
     });
   }, [screens, screenId]);
@@ -1152,225 +1411,268 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
   }, [trackEvent, screenId, currentScreenIndex, screenType]);
   var shareUrl = useMemo(function () {
-    var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
-    var path = shareBasePath !== null ? "".concat(origin).concat(shareBasePath) : origin;
+    // @todo validate this
+    // const base =
+    //     typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
+    // const path = shareBasePath !== null ? `${base}${shareBasePath}` : base;
+    var base = typeof window !== 'undefined' ? window.location.host : '';
+    var path = shareBasePath !== null ? "".concat(base).concat(shareBasePath) : base;
     return path;
-  }, [shareBasePath]);
-
-  var _useSpring = useSpring(function () {
-    return {
-      y: 0,
-      config: _objectSpread(_objectSpread({}, config.stiff), {}, {
-        clamp: true
-      })
-    };
-  }),
-      _useSpring2 = _slicedToArray(_useSpring, 2),
-      menuY = _useSpring2[0].y,
-      setMenuSpring = _useSpring2[1];
-
-  var refOpened = useRef(opened);
+  }, [shareBasePath]); // @note possible to extract some of that logic
 
-  if (refOpened.current !== opened) {
-    refOpened.current = opened;
-  }
+  var onOpenMenu = useCallback(function () {
+    setMenuOpened(true);
+    setShareOpened(false);
+    trackScreenEvent('viewer_menu', 'open_screens_menu');
+  }, [setMenuOpened, setShareOpened, trackScreenEvent]);
+  var onCloseMenu = useCallback(function () {
+    setMenuOpened(false);
+    setShareOpened(false);
+    trackScreenEvent('viewer_menu', 'close_screens_menu');
+  }, [setMenuOpened, setShareOpened, trackScreenEvent]);
+  var onOpenShare = useCallback(function () {
+    setShareOpened(true);
+    setMenuOpened(false);
+    trackScreenEvent('viewer_menu', 'open_share_menu');
+  }, [setShareOpened, setMenuOpened, trackScreenEvent]);
+  var onCloseShare = useCallback(function () {
+    setShareOpened(false);
+    setMenuOpened(false);
+    trackScreenEvent('viewer_menu', 'close_share_menu');
+  }, [setShareOpened, setMenuOpened, trackScreenEvent]);
+  var onClickScreen = useCallback(function (screen) {
+    setMenuOpened(false);
+
+    if (customOnClickScreen !== null) {
+      customOnClickScreen(screen);
+    }
 
-  useEffect(function () {
-    setMenuSpring.start({
-      y: opened ? 1 : 0
+    var index = items.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === screenId;
     });
-  }, [opened]);
-
-  var _useDimensionObserver = useDimensionObserver(),
-      menuPreviewContainerRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.height,
-      menuPreviewContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    trackScreenEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1));
+  }, [customOnClickScreen, setMenuOpened, items, screenId, trackScreenEvent]);
+  var onShare = useCallback(function (type) {
+    // @todo display something to say thanks for sharing?
+    trackScreenEvent('viewer_menu', 'shared_story', type);
+  }, [trackScreenEvent]);
+  var computeShareProgress = useCallback(function (_ref7) {
+    var active = _ref7.active,
+        _ref7$direction = _slicedToArray(_ref7.direction, 2),
+        dy = _ref7$direction[1],
+        _ref7$movement = _slicedToArray(_ref7.movement, 2),
+        my = _ref7$movement[1],
+        _ref7$velocity = _slicedToArray(_ref7.velocity, 2),
+        vy = _ref7$velocity[1];
+
+    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
+
+    if (!active) {
+      if (reachedThreshold) onOpenShare();
+      return reachedThreshold ? 1 : 0;
+    }
 
-  var menuPreviewStyle = {
-    transform: menuY.to(function (y) {
-      return "translateY(".concat(y * menuPreviewContainerHeight, "px)");
-    })
-  };
-  var menuDragBind = useDrag(function (_ref4) {
-    var _ref4$movement = _slicedToArray(_ref4.movement, 2),
-        my = _ref4$movement[1],
-        first = _ref4.first,
-        last = _ref4.last,
-        _ref4$direction = _slicedToArray(_ref4.direction, 2),
-        dy = _ref4$direction[1],
-        cancel = _ref4.cancel,
-        canceled = _ref4.canceled,
-        tap = _ref4.tap;
-
-    if (canceled || tap) {
-      return;
+    return progress;
+  }, [onOpenShare]);
+  var computeShareProgressClose = useCallback(function (_ref8) {
+    var active = _ref8.active,
+        _ref8$direction = _slicedToArray(_ref8.direction, 2),
+        dy = _ref8$direction[1],
+        _ref8$movement = _slicedToArray(_ref8.movement, 2),
+        my = _ref8$movement[1],
+        _ref8$velocity = _slicedToArray(_ref8.velocity, 2),
+        vy = _ref8$velocity[1];
+
+    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
+
+    if (!active) {
+      if (reachedThreshold) onCloseShare();
+      return reachedThreshold ? 0 : 1;
     }
 
-    var isMenuOpened = refOpened.current;
+    return 1 - progress;
+  }, [onCloseShare]);
 
-    if (first) {
-      if (isMenuOpened) {
-        cancel();
-        return;
+  var _useDragProgress = useDragProgress({
+    progress: shareOpened ? 1 : 0,
+    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
+    springParams: {
+      config: {
+        tension: 300,
+        friction: 30
       }
     }
+  }),
+      bindShareDrag = _useDragProgress.bind,
+      shareOpenedProgress = _useDragProgress.progress;
 
-    var yProgress = Math.max(0, Math.min(1, my / menuPreviewContainerHeight + (isMenuOpened ? 1 : 0)));
+  var computeMenuProgress = useCallback(function (_ref9) {
+    var active = _ref9.active,
+        _ref9$direction = _slicedToArray(_ref9.direction, 2),
+        dy = _ref9$direction[1],
+        _ref9$movement = _slicedToArray(_ref9.movement, 2),
+        my = _ref9$movement[1],
+        _ref9$velocity = _slicedToArray(_ref9.velocity, 2),
+        vy = _ref9$velocity[1];
 
-    if (last) {
-      var menuNowOpened = dy > 0 && yProgress > 0.1;
-      refOpened.current = menuNowOpened;
-      setMenuSpring.start({
-        y: menuNowOpened ? 1 : 0
-      });
+    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
-      if (menuNowOpened && onRequestOpen !== null) {
-        onRequestOpen();
-      } else if (!menuNowOpened && onRequestClose !== null) {
-        onRequestClose();
-      }
-    } else {
-      setMenuSpring.start({
-        y: yProgress
-      });
+    if (!active) {
+      if (reachedThreshold) onOpenMenu();
+      return reachedThreshold ? 1 : 0;
     }
-  }, {
-    axis: 'y',
-    filterTaps: true
-  }); // handle preview menu item click
 
-  var onClickMenu = useCallback(function (index) {
-    if (customOnClickMenu !== null) {
-      customOnClickMenu(index);
+    return progress;
+  }, [onOpenMenu]);
+  var computeMenuProgressClose = useCallback(function (_ref10) {
+    var active = _ref10.active,
+        _ref10$direction = _slicedToArray(_ref10.direction, 2),
+        dy = _ref10$direction[1],
+        _ref10$movement = _slicedToArray(_ref10.movement, 2),
+        my = _ref10$movement[1],
+        _ref10$velocity = _slicedToArray(_ref10.velocity, 2),
+        vy = _ref10$velocity[1];
+
+    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
+
+    if (!active) {
+      if (reachedThreshold) onCloseMenu();
+      return reachedThreshold ? 0 : 1;
     }
 
-    trackScreenEvent('viewer_menu', 'click_open', 'Menu icon');
-  }, [customOnClickMenu, trackScreenEvent]);
-  var onClickItem = useCallback(function (item) {
-    if (customOnClickItem !== null) {
-      customOnClickItem(item);
-    }
+    return 1 - progress;
+  }, [onCloseMenu]);
 
-    var index = items.findIndex(function (_ref5) {
-      var id = _ref5.id;
-      return id === screenId;
-    });
-    trackScreenEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1));
-  }, [customOnClickItem, items, screenId, trackScreenEvent]);
-  var onClickClose = useCallback(function () {
-    if (onRequestClose !== null) {
-      onRequestClose();
+  var _useDragProgress2 = useDragProgress({
+    progress: menuOpened ? 1 : 0,
+    computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
+    springParams: {
+      config: {
+        tension: 300,
+        friction: 30
+      }
     }
+  }),
+      bindMenuDrag = _useDragProgress2.bind,
+      menuOpenedProgress = _useDragProgress2.progress;
 
-    trackScreenEvent('viewer_menu', 'click_close', 'Close icon');
-  }, [onRequestClose, trackScreenEvent]); // Handle preview menu share click
-
-  var onClickShare = useCallback(function (type) {
-    return trackScreenEvent('viewer_menu', 'click_share', type);
-  }, [trackScreenEvent]);
-
-  var _ref6 = viewerTheme || {},
-      _ref6$menuTheme = _ref6.menuTheme,
-      menuTheme = _ref6$menuTheme === void 0 ? null : _ref6$menuTheme;
+  var keyboardShortcuts = useMemo(function () {
+    return {
+      m: function m() {
+        return !menuOpened ? onOpenMenu() : onCloseMenu();
+      },
+      escape: function escape() {
+        return onCloseMenu();
+      }
+    };
+  }, [menuOpened, onOpenMenu, onCloseMenu]);
+  useKeyboardShortcuts(keyboardShortcuts); // should be zero if either screens menu or share menu is opened
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.menuDotsContainer,
+  var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgress + shareOpenedProgress)));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$6.menuNavContainer, (_ref11 = {}, _defineProperty(_ref11, styles$6.withShadow, withShadow), _defineProperty(_ref11, styles$6.isOpened, menuOpened || shareOpened), _ref11)]),
     ref: refDots,
     style: {
       width: menuWidth
     }
-  }, menuDragBind()), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
+  }, /*#__PURE__*/React.createElement("nav", {
+    className: styles$6.menuTopContainer
+  }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles$6.menuItem, styles$6.menuShare])
+  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
+    className: styles$6.slidingButton,
+    button: /*#__PURE__*/React.createElement(ShareButton, {
+      className: styles$6.menuButton,
+      onClick: onOpenShare,
+      theme: menuTheme,
+      iconPosition: "left"
+    }),
+    toggledButton: /*#__PURE__*/React.createElement(CloseButton, {
+      className: styles$6.menuButton,
+      onClick: onCloseShare,
+      theme: menuTheme,
+      iconPosition: "left"
+    }),
+    toggled: shareOpenedProgress
+  })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles$6.menuItem, styles$6.menuItemScreens])
+  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
+    className: styles$6.slidingButton,
+    button: /*#__PURE__*/React.createElement(MenuButton, {
+      className: styles$6.menuButton,
+      onClick: onOpenMenu,
+      theme: menuTheme
+    }),
+    toggledButton: /*#__PURE__*/React.createElement(CloseButton, {
+      className: styles$6.menuButton,
+      onClick: onCloseMenu,
+      theme: menuTheme,
+      iconPosition: "right"
+    }),
+    toggled: menuOpenedProgress,
+    toggledButtonClassName: styles$6.screensMenuButtonToggled
+  })) : null), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
-    withShadow: withShadow,
     items: items,
-    title: title,
-    shareUrl: shareUrl,
-    onShare: onClickShare,
-    onClickItem: onClickItem,
-    onClickMenu: onClickMenu,
+    onClickDot: onClickScreen,
+    onClickScreensMenu: onOpenMenu,
     closeable: closeable,
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
-    className: styles$6.menuDots
-  }))), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$6.menuPreviewContainer,
-    style: menuPreviewStyle,
-    ref: menuPreviewContainerRef
-  }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
+    className: styles$6.dots,
+    style: {
+      opacity: Math.pow(dotsOpacity, 5),
+      // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
+      pointerEvents: dotsOpacity < 1 ? 'none' : 'auto'
+    }
+  }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
+    className: styles$6.menuContainerShare,
+    transitionProgress: shareOpenedProgress
+  }, shareOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
+    viewerTheme: viewerTheme,
+    className: styles$6.menuShare,
+    title: title,
+    description: description,
+    menuWidth: menuWidth,
+    focusable: shareOpened,
+    items: items,
+    currentScreenIndex: currentScreenIndex,
+    shareUrl: shareUrl,
+    onShare: onShare,
+    onClose: onCloseShare
+  }) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
+    className: styles$6.menuContainerScreens,
+    transitionProgress: menuOpenedProgress
+  }, menuOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     className: styles$6.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
-    focusable: opened,
     items: items,
-    onClickItem: onClickItem,
-    onClose: onClickClose,
+    currentScreenIndex: currentScreenIndex,
+    shareUrl: shareUrl,
+    onShare: onShare,
+    onClickScreen: onClickScreen,
+    onClose: onCloseMenu,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
-  })));
+  }) : null));
 };
 
-ViewerMenu.propTypes = propTypes$a;
-ViewerMenu.defaultProps = defaultProps$a;
+ViewerMenu.propTypes = propTypes$9;
+ViewerMenu.defaultProps = defaultProps$9;
 
-var styles$5 = {"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$9 = {
-  color: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$9 = {
-  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$9;
-HandIcon.defaultProps = defaultProps$9;
+var styles$5 = {"container":"micromag-viewer-screen-container","navigationHint":"micromag-viewer-screen-navigationHint"};
 
 var propTypes$8 = {
-  className: PropTypes.string
-};
-var defaultProps$8 = {
-  className: null
-};
-
-var HandTap = function HandTap(_ref) {
-  var className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.circle
-  }), /*#__PURE__*/React.createElement(HandIcon, {
-    className: styles$5.hand
-  })));
-};
-
-HandTap.propTypes = propTypes$8;
-HandTap.defaultProps = defaultProps$8;
-
-var styles$4 = {"container":"micromag-viewer-screen-container","handTap":"micromag-viewer-screen-handTap"};
-
-var propTypes$7 = {
   screen: PropTypes$1.screenComponent,
   renderContext: PropTypes$1.renderContext,
   screenState: PropTypes.string,
@@ -1380,10 +1682,10 @@ var propTypes$7 = {
   width: PropTypes.number,
   height: PropTypes.number,
   scale: PropTypes.number,
-  withNavigationHint: PropTypes.func,
+  // withNavigationHint: PropTypes.bool,  // @todo
   className: PropTypes.string
 };
-var defaultProps$7 = {
+var defaultProps$8 = {
   screen: null,
   renderContext: null,
   screenState: null,
@@ -1393,7 +1695,7 @@ var defaultProps$7 = {
   width: null,
   height: null,
   scale: null,
-  withNavigationHint: false,
+  // withNavigationHint: false,
   className: null
 };
 
@@ -1407,10 +1709,9 @@ function ViewerScreen(_ref) {
       width = _ref.width,
       height = _ref.height,
       scale = _ref.scale,
-      withNavigationHint = _ref.withNavigationHint,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: width,
@@ -1425,62 +1726,131 @@ function ViewerScreen(_ref) {
     active: active,
     current: current,
     mediaRef: mediaRef
-  })), withNavigationHint ? /*#__PURE__*/React.createElement(HandTap, {
-    className: styles$4.handTap
-  }) : null);
+  })));
 }
 
-ViewerScreen.propTypes = propTypes$7;
-ViewerScreen.defaultProps = defaultProps$7;
+ViewerScreen.propTypes = propTypes$8;
+ViewerScreen.defaultProps = defaultProps$8;
+
+var styles$4 = {"arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
+
+var propTypes$7 = {
+  direction: PropTypes.oneOf(['previous', 'next']),
+  onClick: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$7 = {
+  direction: 'next',
+  onClick: null,
+  className: null
+};
+
+var NavigationButton = function NavigationButton(_ref) {
+  var direction = _ref.direction,
+      onClick = _ref.onClick,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    className: classNames([styles$4.container, styles$4[direction], _defineProperty({}, className, className !== null)]),
+    onClick: onClick,
+    iconPosition: direction === 'next' ? 'right' : 'left',
+    icon: /*#__PURE__*/React.createElement("svg", {
+      className: styles$4.arrow,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("polygon", {
+      points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
+    })),
+    label: /*#__PURE__*/React.createElement("span", {
+      className: "sr-only"
+    }, direction === 'previous' ? /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "zYH/31",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Go to previous screen"
+      }]
+    }) : /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "v9bqYj",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Go to next screen"
+      }]
+    }))
+  });
+};
+
+NavigationButton.propTypes = propTypes$7;
+NavigationButton.defaultProps = defaultProps$7;
 
-var styles$3 = {"container":"micromag-viewer-partials-navigation-button-container"};
+var styles$3 = {"container":"micromag-viewer-partials-arrow-hint-container","inner":"micromag-viewer-partials-arrow-hint-inner","shadowFade":"micromag-viewer-partials-arrow-hint-shadowFade","arrow":"micromag-viewer-partials-arrow-hint-arrow","panX":"micromag-viewer-partials-arrow-hint-panX"};
 
 var propTypes$6 = {
-  direction: PropTypes.oneOf(['previous', 'next']),
-  onClick: null,
   className: PropTypes.string
 };
 var defaultProps$6 = {
-  direction: 'next',
-  onClick: null,
   className: null
 };
 
-var NavigationButton = function NavigationButton(_ref) {
-  var direction = _ref.direction,
-      onClick = _ref.onClick,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+var ArrowHint = function ArrowHint(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.inner
+  }, /*#__PURE__*/React.createElement("svg", {
     className: styles$3.arrow,
-    icon: direction === 'previous' ? faArrowLeft : faArrowRight
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "sr-only"
-  }, direction === 'previous' ? /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "zYH/31",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Go to previous screen"
-    }]
-  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "v9bqYj",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Go to next screen"
-    }]
-  })));
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "10",
+    height: "16",
+    viewBox: "0 0 10 16",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("polygon", {
+    points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
+  }))));
+};
+
+ArrowHint.propTypes = propTypes$6;
+ArrowHint.defaultProps = defaultProps$6;
+
+var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","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) {
+    return e.stopPropagation();
+  },
+  onTouchStart: function onTouchStart(e) {
+    return e.stopPropagation();
+  },
+  onTouchEnd: function onTouchEnd(e) {
+    return e.stopPropagation();
+  },
+  onPointerMove: function onPointerMove(e) {
+    return e.stopPropagation();
+  },
+  onPointerUp: function onPointerUp(e) {
+    return e.stopPropagation();
+  },
+  onPointerDown: function onPointerDown(e) {
+    return e.stopPropagation();
+  }
 };
 
-NavigationButton.propTypes = propTypes$6;
-NavigationButton.defaultProps = defaultProps$6;
+function getFormattedTimestamp(s) {
+  var withMilliseconds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var sparts = withMilliseconds ? "".concat(s).split('.') : [];
+  var ms = sparts.length > 1 ? ":".concat(sparts[1].substring(0, 3)) : '';
+  return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + ~~s + ms; // eslint-disable-line
+}
 
-var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","time":"micromag-viewer-partials-seek-bar-time"};
+var SHOW_MILLISECONDS_THRESHOLD = 5; // show milliseconds when scrubbing if length of video is shorter than 5 seconds
 
 var propTypes$5 = {
-  media: PropTypes.node,
+  media: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  }) // eslint-disable-line
+  ]),
   playing: PropTypes.bool,
   backgroundColor: PropTypes.string,
   progressColor: PropTypes.string,
@@ -1505,7 +1875,7 @@ var defaultProps$5 = {
 };
 
 var SeekBar = function SeekBar(_ref) {
-  var _ref3;
+  var _ref4;
 
   var media = _ref.media,
       playing = _ref.playing,
@@ -1521,13 +1891,26 @@ var SeekBar = function SeekBar(_ref) {
   var progress = useMediaProgress(media, {
     disabled: !playing
   });
-  var onDrag = useCallback(function (_ref2) {
-    var _ref2$xy = _slicedToArray(_ref2.xy, 1),
-        x = _ref2$xy[0],
-        elapsedTime = _ref2.elapsedTime,
-        active = _ref2.active,
-        tap = _ref2.tap,
-        currentTarget = _ref2.currentTarget;
+
+  var _ref2 = media || {},
+      _ref2$currentTime = _ref2.currentTime,
+      currentTime = _ref2$currentTime === void 0 ? null : _ref2$currentTime,
+      _ref2$duration = _ref2.duration,
+      duration = _ref2$duration === void 0 ? null : _ref2$duration;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showTimestamp = _useState2[0],
+      setShowTimestamp = _useState2[1];
+
+  var onDrag = useCallback(function (_ref3) {
+    _ref3.event;
+        var _ref3$xy = _slicedToArray(_ref3.xy, 1),
+        x = _ref3$xy[0],
+        elapsedTime = _ref3.elapsedTime,
+        active = _ref3.active,
+        tap = _ref3.tap,
+        currentTarget = _ref3.currentTarget;
 
     if (!active && elapsedTime > 300) {
       return;
@@ -1544,15 +1927,18 @@ var SeekBar = function SeekBar(_ref) {
     }
   }, [onSeek]);
   var onDragStart = useCallback(function () {
+    setShowTimestamp(true);
+
     if (onSeekStart !== null) {
       onSeekStart();
     }
-  }, [onSeekStart]);
+  }, [onSeekStart, setShowTimestamp]);
   var onDragEnd = useCallback(function () {
     if (onSeekEnd !== null) {
+      setShowTimestamp(false);
       onSeekEnd();
     }
-  }, [onSeekEnd]);
+  }, [onSeekEnd, setShowTimestamp]);
   var bind = useGesture({
     onDrag: onDrag,
     onDragStart: onDragStart,
@@ -1563,9 +1949,9 @@ var SeekBar = function SeekBar(_ref) {
       filterTaps: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles$2.withSeekHead, withSeekHead), _ref3)])
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles$2.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$2.withSeekHead, withSeekHead), _defineProperty(_ref4, styles$2.showTimestamp, showTimestamp), _ref4)])
+  }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
     className: styles$2.inner
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.progressBar,
@@ -1578,7 +1964,12 @@ var SeekBar = function SeekBar(_ref) {
       left: "".concat(progress * 100, "%"),
       backgroundColor: progressColor
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.scrubbedTime,
+    style: {
+      borderColor: progressColor
+    }
+  }, getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD))), /*#__PURE__*/React.createElement("div", {
     className: styles$2.progress,
     style: {
       transform: "scaleX(".concat(progress, ")"),
@@ -1608,7 +1999,7 @@ var SeekBar = function SeekBar(_ref) {
 SeekBar.propTypes = propTypes$5;
 SeekBar.defaultProps = defaultProps$5;
 
-var styles$1 = {"muteButton":"micromag-viewer-partials-playback-controls-muteButton","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar"};
+var styles$1 = {"muteButton":"micromag-viewer-partials-playback-controls-muteButton","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","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 = {
   className: PropTypes.string,
@@ -1713,7 +2104,8 @@ function PlaybackControls(_ref) {
       setPlaying(true);
     }
   }, [setPlaying, wasPlaying]);
-  var mediaHasAudio = mediaElement !== null && (hasAudio === null || hasAudio === true);
+  var hasMedia = mediaElement !== null;
+  var mediaHasAudio = hasMedia && (hasAudio === null || hasAudio === true);
 
   var _ref3 = customControlsTheme || {},
       color = _ref3.color,
@@ -1722,33 +2114,55 @@ function PlaybackControls(_ref) {
 
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$1.withPlayPause, controls && !seekBarOnly), _defineProperty(_ref4, styles$1.withMute, mediaHasAudio || controls), _defineProperty(_ref4, styles$1.withSeekBar, controls), _defineProperty(_ref4, styles$1.withSeekBarOnly, seekBarOnly), _defineProperty(_ref4, styles$1.isCollapsed, isCollapsed), _defineProperty(_ref4, collapsedClassName, collapsedClassName !== null && isCollapsed), _ref4)])
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
+    className: classNames([styles$1.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$1.withPlayPause, controls && !seekBarOnly), _defineProperty(_ref4, styles$1.withMute, hasMedia || controls), _defineProperty(_ref4, styles$1.withSeekBar, controls), _defineProperty(_ref4, styles$1.withSeekBarOnly, seekBarOnly), _defineProperty(_ref4, styles$1.isCollapsed, isCollapsed), _defineProperty(_ref4, styles$1.isMuted, muted), _defineProperty(_ref4, collapsedClassName, collapsedClassName !== null && isCollapsed), _ref4)])
+  }, /*#__PURE__*/React.createElement(Button$1, {
     className: styles$1.playPauseButton,
     style: {
       color: color
     },
     onClick: playing ? onPause : onPlay,
-    title: intl.formatMessage({
-      id: "ahSpiH",
+    focusable: controlsVisible,
+    icon: playing ? /*#__PURE__*/React.createElement("svg", {
+      className: styles$1.icon,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: "1",
+      y: "3.27",
+      width: "3",
+      height: "9.69"
+    }), /*#__PURE__*/React.createElement("rect", {
+      x: "6",
+      y: "3.27",
+      width: "3",
+      height: "9.69"
+    })) : /*#__PURE__*/React.createElement("svg", {
+      className: styles$1.icon,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M1,3.16V12.84l8-4.84L1,3.16"
+    })),
+    "aria-label": playing ? intl.formatMessage({
+      id: "mTqcmA",
       defaultMessage: [{
         "type": 0,
-        "value": "Play"
+        "value": "Pause"
       }]
-    }),
-    "aria-label": intl.formatMessage({
+    }) : intl.formatMessage({
       id: "ahSpiH",
       defaultMessage: [{
         "type": 0,
         "value": "Play"
       }]
-    }),
-    tabIndex: controlsVisible ? '0' : '-1'
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$1.icon,
-    icon: playing ? faPause : faPlay
-  })), /*#__PURE__*/React.createElement(SeekBar, {
+    })
+  }), /*#__PURE__*/React.createElement(SeekBar, {
     className: styles$1.seekBar,
     media: mediaElement,
     playing: playing,
@@ -1759,32 +2173,54 @@ function PlaybackControls(_ref) {
     withSeekHead: !isCollapsed && !seekBarOnly,
     backgroundColor: color,
     progressColor: progressColor
-  }), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames([styles$1.muteButton, _defineProperty({}, styles$1.isMuted, muted)]),
+  }), /*#__PURE__*/React.createElement(Button$1, {
+    className: styles$1.muteButton,
     style: {
       color: color
     },
     onClick: muted ? onUnmute : onMute,
-    title: intl.formatMessage({
-      id: "vzg8Es",
+    focusable: controlsVisible || mediaHasAudio,
+    icon: muted ? /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      className: styles$1.icon,
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("polygon", {
+      points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
+    }), /*#__PURE__*/React.createElement("polygon", {
+      points: "10 6.63 8.94 5.57 7.58 6.93 6.21 5.57 5.15 6.63 6.52 7.99 5.15 9.35 6.21 10.43 7.58 9.06 8.94 10.43 10 9.35 8.64 7.99 10 6.63"
+    })) : /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      className: styles$1.icon,
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("polygon", {
+      points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "6.14",
+      cy: "8",
+      r: ".99"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M6.14,11.88v-1.5c1.31,0,2.38-1.07,2.38-2.38s-1.07-2.38-2.38-2.38v-1.5c2.14,0,3.88,1.74,3.88,3.88s-1.74,3.88-3.88,3.88Z"
+    })),
+    "aria-label": muted ? intl.formatMessage({
+      id: "RK/QEY",
       defaultMessage: [{
         "type": 0,
-        "value": "Mute"
+        "value": "Unmute"
       }]
-    }),
-    "aria-label": intl.formatMessage({
+    }) : intl.formatMessage({
       id: "vzg8Es",
       defaultMessage: [{
         "type": 0,
         "value": "Mute"
       }]
-    }),
-    tabIndex: controlsVisible || mediaHasAudio ? '0' : '-1'
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$1.icon,
-    icon: faVolumeUp
-  })));
+    })
+  }));
 }
 
 PlaybackControls.propTypes = propTypes$4;
@@ -1877,6 +2313,15 @@ function WebViewContainer(_ref) {
 WebViewContainer.propTypes = propTypes$3;
 WebViewContainer.defaultProps = defaultProps$3;
 
+var SPRING_CONFIG_TIGHT = {
+  tension: 300,
+  friction: 35
+}; // tight
+
+var DRAG_PROGRESS_ACTIVATION_THRESHOLD = 0.3;
+var DRAG_VELOCITY_ACTIVATION_THRESHOLD = 0.3;
+var DEFAULT_TRANSITION_TYPE_LANDSCAPE = 'carousel';
+var DEFAULT_TRANSITION_TYPE_PORTRAIT = 'stack';
 var propTypes$2 = {
   story: PropTypes$1.story,
   // .isRequired,
@@ -1891,18 +2336,20 @@ var propTypes$2 = {
   visitor: PropTypes$1.visitor,
   onScreenChange: PropTypes.func,
   tapNextScreenWidthPercent: PropTypes.number,
-  neighborScreensActive: PropTypes.number,
-  neighborScreensMounted: PropTypes.number,
   storyIsParsed: PropTypes.bool,
-  landscapeScreenMargin: PropTypes.number,
-  landscapeSmallScreenScale: PropTypes.number,
+  neighborScreensActive: PropTypes.number,
+  neighborScreenOffset: PropTypes.number,
+  neighborScreenScale: PropTypes.number,
   withMetadata: PropTypes.bool,
+  withoutGestures: PropTypes.bool,
   withoutMenu: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
   withoutShareMenu: PropTypes.bool,
   withoutMenuShadow: PropTypes.bool,
   withoutFullscreen: PropTypes.bool,
-  withLandscapeSiblingsScreens: PropTypes.bool,
+  withoutNavigationArrow: PropTypes.bool,
+  withoutTransitions: PropTypes.bool,
+  withNeighborScreens: PropTypes.bool,
   withNavigationHint: PropTypes.bool,
   withoutPlaybackControls: PropTypes.bool,
   closeable: PropTypes.bool,
@@ -1933,19 +2380,21 @@ var defaultProps$2 = {
   visitor: null,
   onScreenChange: null,
   tapNextScreenWidthPercent: 0.8,
-  neighborScreensActive: 1,
-  neighborScreensMounted: 1,
   storyIsParsed: false,
-  landscapeScreenMargin: 20,
-  landscapeSmallScreenScale: 0.9,
+  neighborScreensActive: 2,
+  neighborScreenOffset: 105,
+  neighborScreenScale: 0.8,
   withMetadata: false,
+  withNeighborScreens: false,
+  withNavigationHint: false,
+  withoutGestures: false,
   withoutMenu: false,
   withoutScreensMenu: false,
   withoutShareMenu: false,
   withoutMenuShadow: false,
   withoutFullscreen: false,
-  withLandscapeSiblingsScreens: false,
-  withNavigationHint: false,
+  withoutTransitions: false,
+  withoutNavigationArrow: false,
   withoutPlaybackControls: false,
   menuIsScreenWidth: false,
   closeable: false,
@@ -1973,18 +2422,20 @@ var Viewer = function Viewer(_ref) {
       renderContext = _ref.renderContext,
       visitor = _ref.visitor,
       tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
-      neighborScreensActive = _ref.neighborScreensActive,
-      neighborScreensMounted = _ref.neighborScreensMounted,
       storyIsParsed = _ref.storyIsParsed,
-      landscapeScreenMargin = _ref.landscapeScreenMargin,
-      landscapeSmallScreenScale = _ref.landscapeSmallScreenScale,
+      neighborScreensActive = _ref.neighborScreensActive,
+      neighborScreenOffset = _ref.neighborScreenOffset,
+      neighborScreenScale = _ref.neighborScreenScale,
       withMetadata = _ref.withMetadata,
+      withoutGestures = _ref.withoutGestures,
       withoutMenu = _ref.withoutMenu,
       withoutScreensMenu = _ref.withoutScreensMenu,
       withoutShareMenu = _ref.withoutShareMenu,
       withoutMenuShadow = _ref.withoutMenuShadow;
       _ref.withoutFullscreen;
-      var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
+      var withoutNavigationArrow = _ref.withoutNavigationArrow,
+      withoutTransitions = _ref.withoutTransitions,
+      withNeighborScreens = _ref.withNeighborScreens,
       withNavigationHint = _ref.withNavigationHint,
       withoutPlaybackControls = _ref.withoutPlaybackControls,
       menuIsScreenWidth = _ref.menuIsScreenWidth,
@@ -1998,7 +2449,10 @@ var Viewer = function Viewer(_ref) {
       screensMedias = _ref.screensMedias,
       screenSizeOptions = _ref.screenSizeOptions,
       className = _ref.className;
-  var intl = useIntl();
+
+  /**
+   * Screen Data + Processing
+   */
   var parsedStory = useParsedStory(story, {
     disabled: storyIsParsed
   }) || {};
@@ -2010,20 +2464,59 @@ var Viewer = function Viewer(_ref) {
       metadata = _parsedStory$metadata === void 0 ? null : _parsedStory$metadata,
       _parsedStory$fonts = parsedStory.fonts,
       fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts;
+  var screensCount = screens.length;
   var eventsManager = useMemo(function () {
     return new EventEmitter();
-  }, [parsedStory]); // Viewer Theme
+  }, [parsedStory]);
+  var screenIndex = useMemo(function () {
+    return Math.max(0, screens.findIndex(function (it) {
+      return "".concat(it.id) === "".concat(screenId);
+    }));
+  }, [screenId, screens]);
+  var currentScreen = screens[screenIndex] || null;
+
+  var _ref2 = currentScreen || {},
+      screenParameters = _ref2.parameters;
+
+  var _ref3 = screenParameters || {},
+      screenMetadata = _ref3.metadata;
+
+  var _ref4 = screenMetadata || {},
+      _ref4$title = _ref4.title,
+      screenTitle = _ref4$title === void 0 ? null : _ref4$title,
+      _ref4$description = _ref4.description,
+      screenDescription = _ref4$description === void 0 ? null : _ref4$description;
+
+  var finalTitle = screenTitle !== null ? screenTitle : title;
+  var finalMetadata = useMemo(function () {
+    return screenDescription !== null ? _objectSpread(_objectSpread({}, metadata), {}, {
+      description: screenDescription
+    }) : metadata;
+  }, [metadata, screenDescription]);
+  var screensMediasRef = useRef([]);
+
+  if (currentScreenMedia !== null) {
+    currentScreenMedia.current = screensMediasRef.current[screenIndex] || null;
+  }
+
+  if (screensMedias !== null) {
+    screensMedias.current = screensMediasRef.current;
+  }
+  /**
+   * Screen Layout
+   */
 
-  var _ref2 = viewerTheme || {},
-      textStyles = _ref2.textStyles;
 
-  var _ref3 = textStyles || {},
-      _ref3$title = _ref3.title,
-      themeTextStyle = _ref3$title === void 0 ? null : _ref3$title;
+  var _ref5 = viewerTheme || {},
+      textStyles = _ref5.textStyles;
 
-  var _ref4 = themeTextStyle || {},
-      _ref4$fontFamily = _ref4.fontFamily,
-      themeFont = _ref4$fontFamily === void 0 ? null : _ref4$fontFamily; // Fonts
+  var _ref6 = textStyles || {},
+      _ref6$title = _ref6.title,
+      themeTextStyle = _ref6$title === void 0 ? null : _ref6$title;
+
+  var _ref7 = themeTextStyle || {},
+      _ref7$fontFamily = _ref7.fontFamily,
+      themeFont = _ref7$fontFamily === void 0 ? null : _ref7$fontFamily; // Fonts
 
 
   var finalFonts = useMemo(function () {
@@ -2050,8 +2543,12 @@ var Viewer = function Viewer(_ref) {
       _usePlaybackContext$m = _usePlaybackContext.media,
       playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m;
 
-  var trackScreenView = useTrackScreenView();
-  var contentRef = useRef(null); // Get screen size
+  var _useDimensionObserver = useDimensionObserver(),
+      playbackControlsContainerRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.height,
+      playbackControlsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+
+  var trackScreenView = useTrackScreenView(); // Get screen size
 
   var _useScreenSizeFromEle = useScreenSizeFromElement(_objectSpread({
     width: width,
@@ -2062,21 +2559,26 @@ var Viewer = function Viewer(_ref) {
       screenSize = _useScreenSizeFromEle.screenSize,
       screenScale = _useScreenSizeFromEle.scale;
 
-  var _ref5 = screenSize || {},
-      _ref5$width = _ref5.width,
-      screenWidth = _ref5$width === void 0 ? null : _ref5$width,
-      _ref5$height = _ref5.height,
-      screenHeight = _ref5$height === void 0 ? null : _ref5$height,
-      _ref5$landscape = _ref5.landscape,
-      landscape = _ref5$landscape === void 0 ? false : _ref5$landscape,
-      _ref5$menuOverScreen = _ref5.menuOverScreen,
-      menuOverScreen = _ref5$menuOverScreen === void 0 ? false : _ref5$menuOverScreen;
+  var _ref8 = screenSize || {},
+      _ref8$width = _ref8.width,
+      screenWidth = _ref8$width === void 0 ? null : _ref8$width,
+      _ref8$height = _ref8.height,
+      screenHeight = _ref8$height === void 0 ? null : _ref8$height,
+      _ref8$landscape = _ref8.landscape,
+      landscape = _ref8$landscape === void 0 ? false : _ref8$landscape,
+      _ref8$menuOverScreen = _ref8.menuOverScreen,
+      menuOverScreen = _ref8$menuOverScreen === void 0 ? false : _ref8$menuOverScreen;
 
   var screenContainerWidth = screenScale !== null ? screenWidth * screenScale : screenWidth;
   var screenContainerHeight = screenScale !== null ? screenHeight * screenScale : screenHeight;
   var hasSize = screenWidth > 0 && screenHeight > 0;
-  var ready = hasSize; // && fontsLoaded;
-
+  var ready = hasSize;
+  var trackingEnabled = isView;
+  useEffect(function () {
+    if (trackingEnabled && currentScreen !== null) {
+      trackScreenView(currentScreen, screenIndex);
+    }
+  }, [currentScreen, trackScreenView, trackingEnabled]);
   useEffect(function () {
     if (ready && onViewModeChange !== null) {
       onViewModeChange({
@@ -2085,21 +2587,14 @@ var Viewer = function Viewer(_ref) {
       });
     }
   }, [ready, landscape, menuOverScreen, onViewModeChange]);
-  var screensMediasRef = useRef([]); // Screen index
-
-  var screenIndex = useMemo(function () {
-    return Math.max(0, screens.findIndex(function (it) {
-      return "".concat(it.id) === "".concat(screenId);
-    }));
-  }, [screenId, screens]);
-
-  if (currentScreenMedia !== null) {
-    currentScreenMedia.current = screensMediasRef.current[screenIndex] || null;
-  }
+  /**
+   * Screen Transitions
+   */
 
-  if (screensMedias !== null) {
-    screensMedias.current = screensMediasRef.current;
-  }
+  var transitionType = landscape && withNeighborScreens ? DEFAULT_TRANSITION_TYPE_LANDSCAPE : DEFAULT_TRANSITION_TYPE_PORTRAIT;
+  /**
+   * Screen Navigation
+   */
 
   var changeIndex = useCallback(function (index) {
     if (index === screenIndex) {
@@ -2113,23 +2608,37 @@ var Viewer = function Viewer(_ref) {
     if (onScreenChange !== null) {
       onScreenChange(screens[index], index);
     }
-  }, [screenIndex, screens, onScreenChange]); // Track screen view
+  }, [screenIndex, screens, onScreenChange]);
+  var onScreenNavigate = useCallback(function (_ref9) {
+    var index = _ref9.index,
+        newIndex = _ref9.newIndex,
+        end = _ref9.end,
+        direction = _ref9.direction;
 
-  var trackingEnabled = isView;
-  var currentScreen = screens[screenIndex] || null;
-  useEffect(function () {
-    if (trackingEnabled && currentScreen !== null) {
-      trackScreenView(currentScreen, screenIndex);
+    if (end && onEnd !== null) {
+      onEnd();
     }
-  }, [currentScreen, trackScreenView, trackingEnabled]); // Handle interaction enable
 
+    changeIndex(newIndex);
+    eventsManager.emit('navigate', {
+      index: index,
+      newIndex: newIndex,
+      direction: direction,
+      end: end
+    });
+
+    if (end) {
+      eventsManager.emit('navigate_end');
+    } else {
+      eventsManager.emit("navigate_".concat(direction), newIndex);
+    }
+  }, [onEnd, changeIndex]);
   var gotoPreviousScreen = useCallback(function () {
     changeIndex(Math.max(0, screenIndex - 1));
-  }, [changeIndex]);
+  }, [changeIndex, screenIndex]);
   var gotoNextScreen = useCallback(function () {
     changeIndex(Math.min(screens.length - 1, screenIndex + 1));
-  }, [changeIndex]);
-  var screensCount = screens.length;
+  }, [changeIndex, screenIndex]);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2145,37 +2654,12 @@ var Viewer = function Viewer(_ref) {
       setHasInteracted(true);
     }
   }, [onInteraction, hasInteracted, setHasInteracted]);
-  var onScreenNavigate = useCallback(function (_ref6) {
-    var index = _ref6.index,
-        newIndex = _ref6.newIndex,
-        end = _ref6.end,
-        direction = _ref6.direction;
-
-    if (end && onEnd !== null) {
-      onEnd();
-    }
-
-    changeIndex(newIndex);
-    eventsManager.emit('navigate', {
-      newIndex: newIndex,
-      index: index,
-      direction: direction,
-      end: end
-    });
-
-    if (end) {
-      eventsManager.emit('navigate_end');
-    } else {
-      eventsManager.emit("navigate_".concat(direction), newIndex);
-    }
-  }, [onEnd, changeIndex]);
 
   var _useScreenInteraction = useScreenInteraction({
     screens: screens,
     screenIndex: screenIndex,
     screenWidth: screenContainerWidth,
     disableCurrentScreenNavigation: !isView,
-    clickOnSiblings: landscape && withLandscapeSiblingsScreens,
     nextScreenWidthPercent: tapNextScreenWidthPercent,
     onInteract: onInteractionPrivate,
     onNavigate: onScreenNavigate
@@ -2183,102 +2667,127 @@ var Viewer = function Viewer(_ref) {
       interactWithScreen = _useScreenInteraction.interact,
       currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
       enableInteraction = _useScreenInteraction.enableInteraction,
-      disableInteraction = _useScreenInteraction.disableInteraction; // Handle tap on screens
-
-
-  var onDragScreen = useCallback(function (_ref7) {
-    var _ref7$args = _slicedToArray(_ref7.args, 1),
-        tapScreenIndex = _ref7$args[0],
-        event = _ref7.event,
-        target = _ref7.target,
-        currentTarget = _ref7.currentTarget,
-        tap = _ref7.tap,
-        _ref7$xy = _slicedToArray(_ref7.xy, 2),
-        x = _ref7$xy[0],
-        y = _ref7$xy[1];
-
-    if (tap) {
-      interactWithScreen({
-        event: event,
-        target: target,
-        currentTarget: currentTarget,
-        index: tapScreenIndex,
-        x: x,
-        y: y
-      });
-    }
-  }, [interactWithScreen]);
-  var dragScreenBind = useDrag(onDragScreen, {
-    filterTaps: true
-  }); // Handles tap when landscape (space around current screen)
-
-  var onDragContent = useCallback(function (_ref8) {
-    var tap = _ref8.tap,
-        target = _ref8.target,
-        currentTarget = _ref8.currentTarget,
-        _ref8$xy = _slicedToArray(_ref8.xy, 1),
-        x = _ref8$xy[0];
-
-    if (!landscape || withLandscapeSiblingsScreens || target !== contentRef.current) {
-      return;
+      disableInteraction = _useScreenInteraction.disableInteraction;
+
+  var onTap = useCallback(function (_ref10) {
+    var currentTarget = _ref10.currentTarget,
+        event = _ref10.event,
+        target = _ref10.target,
+        _ref10$xy = _slicedToArray(_ref10.xy, 2),
+        x = _ref10$xy[0],
+        y = _ref10$xy[1];
+
+    interactWithScreen({
+      event: event,
+      target: target,
+      currentTarget: currentTarget,
+      index: screenIndex,
+      x: x,
+      y: y
+    });
+  }, [interactWithScreen, screenIndex]);
+  var computeScreenProgress = useCallback(function (_ref11) {
+    var active = _ref11.active,
+        _ref11$movement = _slicedToArray(_ref11.movement, 1),
+        mx = _ref11$movement[0],
+        _ref11$velocity = _slicedToArray(_ref11.velocity, 1),
+        vx = _ref11$velocity[0];
+
+    var p = mx / screenContainerWidth; // drag "ratio": how much of the screen width has been swiped?
+
+    var forwards = mx < 0; // true if swiping to left (to navigate forwards)
+
+    var newIndex = !forwards ? screenIndex - 1 : screenIndex + 1; // which item index are we moving towards?
+
+    var reachedThreshold = vx > DRAG_VELOCITY_ACTIVATION_THRESHOLD || Math.abs(p) > DRAG_PROGRESS_ACTIVATION_THRESHOLD;
+    var reachedBounds = newIndex < 0 || newIndex >= screensCount; // have we reached the end of the stack?
+
+    var damper = reachedBounds ? 0.1 : 1;
+    var progress = Math.max(-1, Math.min(1, p * damper));
+
+    if (!active) {
+      return reachedThreshold && !reachedBounds ? newIndex : screenIndex;
     }
 
-    if (tap) {
-      var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
-          _currentTarget$getBou2 = _currentTarget$getBou.left,
-          contentX = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
-          _currentTarget$getBou3 = _currentTarget$getBou.width,
-          contentWidth = _currentTarget$getBou3 === void 0 ? 0 : _currentTarget$getBou3;
+    return screenIndex - progress;
+  }, [screenContainerWidth, screenIndex]);
+  var onScreenProgress = useCallback(function (progress, _ref12) {
+    var active = _ref12.active;
+    var delta = Math.abs(progress - screenIndex);
+    var reachedBounds = progress < 0 || progress >= screensCount; // have we reached the end of the stack?
 
-      var hasTappedLeft = x - contentX < contentWidth * 0.5;
-      var nextIndex = hasTappedLeft ? Math.max(0, screenIndex - 1) : Math.min(screensCount - 1, screenIndex + 1);
+    if (!active && delta === 1 && !reachedBounds) {
       onScreenNavigate({
         index: screenIndex,
-        newIndex: nextIndex
+        newIndex: progress
       });
     }
-  }, [screenIndex, screensCount, landscape, withLandscapeSiblingsScreens]);
-  var dragContentBind = useDrag(onDragContent, {
-    filterTaps: true
-  });
-  var onScreenKeyUp = useCallback(function (_ref9, i) {
-    var key = _ref9.key;
+  }, [onScreenNavigate, screenIndex]);
+  var springParams = useMemo(function () {
+    return {
+      config: SPRING_CONFIG_TIGHT
+    };
+  }, []);
+
+  var _useDragProgress = useDragProgress({
+    progress: screenIndex,
+    disabled: !isView || withoutTransitions,
+    dragDisabled: withoutGestures,
+    computeProgress: computeScreenProgress,
+    onProgress: onScreenProgress,
+    onTap: onTap,
+    springParams: springParams
+  }),
+      isDragging = _useDragProgress.dragging,
+      screenIndexProgress = _useDragProgress.progress,
+      dragContentBind = _useDragProgress.bind;
 
-    if (key === 'Enter' && withLandscapeSiblingsScreens && landscape && i !== screenIndex) {
-      changeIndex(i);
+  var getScreenStylesByIndex = function getScreenStylesByIndex(index, progress) {
+    if (transitionType === 'stack') {
+      var _t = index - progress;
+
+      var _clamped = Math.min(1, Math.max(0, _t));
+
+      var invert = Math.min(1, Math.max(0, -_t));
+      var opacity = Math.max(0, 1 - 0.75 * invert + (_t + 1));
+      return {
+        opacity: opacity,
+        transform: "translateX(".concat(_clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")"),
+        boxShadow: "0 0 ".concat(4 * (1 - _clamped), "rem ").concat(-0.5 * (1 - _clamped), "rem black"),
+        zIndex: index
+      };
     }
-  }, [withLandscapeSiblingsScreens, changeIndex, landscape, screenIndex]); // swipe menu open
 
-  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
+    var t = index - progress;
+    var clamped = Math.min(1, Math.max(0, Math.abs(t)));
+    return {
+      opacity: 1 - 0.75 * clamped,
+      transform: "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")"),
+      zIndex: screensCount - index
+    };
+  };
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      menuOpened = _useState4[0],
-      setMenuOpened = _useState4[1];
-
-  var onMenuRequestOpen = useCallback(function () {
-    return setMenuOpened(true);
-  }, [setMenuOpened]);
-  var onMenuRequestClose = useCallback(function () {
-    return setMenuOpened(false);
-  }, [setMenuOpened]);
-  var onClickMenu = useCallback(function () {
-    onInteractionPrivate();
-    setMenuOpened(true);
-  }, [changeIndex, onInteractionPrivate, setMenuOpened]);
-  var onClickMenuItem = useCallback(function (_ref10) {
-    var itemScreenId = _ref10.screenId;
+  var _useFullscreen = useFullscreen(containerRef.current || null),
+      toggleFullscreen = _useFullscreen.toggle,
+      fullscreenActive = _useFullscreen.active,
+      fullscreenEnabled = _useFullscreen.enabled;
+
+  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled; // Get element height
+
+  var _useDimensionObserver3 = useDimensionObserver(),
+      menuDotsContainerRef = _useDimensionObserver3.ref,
+      _useDimensionObserver4 = _useDimensionObserver3.height,
+      menuDotsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
+
+  var onClickScreen = useCallback(function (_ref13) {
+    var itemScreenId = _ref13.screenId;
     onInteractionPrivate();
-    var index = screens.findIndex(function (_ref11) {
-      var id = _ref11.id;
+    var index = screens.findIndex(function (_ref14) {
+      var id = _ref14.id;
       return id === itemScreenId;
     });
     changeIndex(index);
-
-    if (menuOpened) {
-      setMenuOpened(false);
-    }
-  }, [onInteractionPrivate, changeIndex, menuOpened, setMenuOpened]);
+  }, [onInteractionPrivate, changeIndex]);
   var onContextMenu = useCallback(function (e) {
     if (!landscape) {
       e.preventDefault();
@@ -2286,28 +2795,16 @@ var Viewer = function Viewer(_ref) {
     }
 
     return true;
-  }, [landscape]);
+  }, [landscape]); // hmm?
+
   var overscrollStyle = /*#__PURE__*/React.createElement("style", {
     type: "text/css"
-  }, "body { overscroll-behavior: contain; }"); // Fullscreen
-
-  var _useFullscreen = useFullscreen(containerRef.current || null),
-      toggleFullscreen = _useFullscreen.toggle,
-      fullscreenActive = _useFullscreen.active,
-      fullscreenEnabled = _useFullscreen.enabled; // Keyboard Events
-
-
+  }, "body { overscroll-behavior: contain; }");
   var keyboardShortcuts = useMemo(function () {
     return {
       f: function f() {
         return toggleFullscreen();
       },
-      m: function m() {
-        return setMenuOpened(!menuOpened);
-      },
-      escape: function escape() {
-        return setMenuOpened(false);
-      },
       arrowleft: function arrowleft() {
         return gotoPreviousScreen();
       },
@@ -2318,55 +2815,10 @@ var Viewer = function Viewer(_ref) {
         return gotoNextScreen();
       }
     };
-  }, [menuOpened, setMenuOpened, gotoPreviousScreen, gotoNextScreen]);
+  }, [gotoPreviousScreen, gotoNextScreen]);
   useKeyboardShortcuts(keyboardShortcuts, {
     disabled: renderContext !== 'view'
   });
-
-  var _ref12 = currentScreen || {},
-      screenParameters = _ref12.parameters;
-
-  var _ref13 = screenParameters || {},
-      screenMetadata = _ref13.metadata;
-
-  var _ref14 = screenMetadata || {},
-      _ref14$title = _ref14.title,
-      screenTitle = _ref14$title === void 0 ? null : _ref14$title,
-      _ref14$description = _ref14.description,
-      screenDescription = _ref14$description === void 0 ? null : _ref14$description;
-
-  var finalTitle = screenTitle !== null ? screenTitle : title;
-  var finalMetadata = useMemo(function () {
-    return screenDescription !== null ? _objectSpread(_objectSpread({}, metadata), {}, {
-      description: screenDescription
-    }) : metadata;
-  }, [metadata, screenDescription]); // Get element height
-
-  var _useDimensionObserver = useDimensionObserver(),
-      menuDotsContainerRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.height,
-      menuDotsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-
-  var _useDimensionObserver3 = useDimensionObserver(),
-      playbackControlsContainerRef = _useDimensionObserver3.ref,
-      _useDimensionObserver4 = _useDimensionObserver3.height,
-      playbackControlsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-
-  var _useMemo = useMemo(function () {
-    return neighborScreensMounted !== null ? {
-      startIndex: Math.max(screenIndex - (neighborScreensActive + neighborScreensMounted), 0),
-      endIndex: Math.min(screenIndex + (neighborScreensActive + neighborScreensMounted), screensCount)
-    } : {
-      startIndex: 0,
-      endIndex: screensCount - 1
-    };
-  }, [screenIndex, neighborScreensActive, neighborScreensMounted, screensCount]),
-      mountedScreenStartIndex = _useMemo.startIndex,
-      mountedScreenEndIndex = _useMemo.endIndex;
-
-  var mountedScreens = useMemo(function () {
-    return neighborScreensMounted != null ? screens.slice(mountedScreenStartIndex, mountedScreenEndIndex) : screens;
-  }, [screens, mountedScreenStartIndex, mountedScreenEndIndex, neighborScreensActive, neighborScreensMounted]);
   return /*#__PURE__*/React.createElement(VisitorProvider, {
     visitor: visitor
   }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
@@ -2391,13 +2843,12 @@ var Viewer = function Viewer(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref15 = {}, _defineProperty(_ref15, styles$6.landscape, landscape), _defineProperty(_ref15, styles$6.withSiblings, withLandscapeSiblingsScreens), _defineProperty(_ref15, styles$6.hideMenu, !menuVisible), _defineProperty(_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref15, styles$6.hasInteracted, hasInteracted), _defineProperty(_ref15, className, className), _ref15)]),
+    }), (_ref15 = {}, _defineProperty(_ref15, styles$6.landscape, landscape), _defineProperty(_ref15, styles$6.withoutGestures, withoutGestures), _defineProperty(_ref15, styles$6.hideMenu, !menuVisible), _defineProperty(_ref15, styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), _defineProperty(_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref15, styles$6.hasInteracted, hasInteracted), _defineProperty(_ref15, styles$6.isDragging, isDragging), _defineProperty(_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu, {
     story: parsedStory,
     currentScreenIndex: screenIndex,
-    opened: menuOpened,
     withShadow: menuOverScreen && !withoutMenuShadow,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
@@ -2406,109 +2857,66 @@ var Viewer = function Viewer(_ref) {
     shareBasePath: basePath,
     screenSize: screenSize,
     menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
+    theme: viewerTheme,
     trackingEnabled: trackingEnabled,
-    onClickItem: onClickMenuItem,
-    onClickMenu: onClickMenu,
+    onClickScreen: onClickScreen,
     onClickCloseViewer: onCloseViewer,
-    onRequestOpen: onMenuRequestOpen,
-    onRequestClose: onMenuRequestClose,
     withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: contentRef,
     className: styles$6.content
-  }, dragContentBind()), mountedScreens.map(function (mountedScreen, mountedIndex) {
-    var _ref16;
-
-    var i = mountedScreenStartIndex + mountedIndex;
-    var current = i === parseInt(screenIndex, 10);
-    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
-    var screenTransform = null;
-
-    if (landscape) {
-      var max = i - screenIndex;
-      var distance = (screenContainerWidth + landscapeScreenMargin) * max; // Compensates for scaling
-
-      if (max !== 0) {
-        var halfMargin = screenContainerWidth * (1 - landscapeSmallScreenScale) / 2;
-        distance -= halfMargin * max;
-
-        if (max < -1) {
-          distance -= halfMargin * (max + 1);
-        } else if (max > 1) {
-          distance -= halfMargin * (max - 1);
-        }
-      }
-
-      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat(distance, "px - 50%)) scale(").concat(current ? 1 : landscapeSmallScreenScale, ")") : null;
-    } else {
-      screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
+  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+    direction: "previous",
+    className: classNames([styles$6.navButton, styles$6.previous]),
+    onClick: gotoPreviousScreen
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: styles$6.screensFrame,
+    style: {
+      width: screenContainerWidth,
+      height: screenContainerHeight,
+      overflow: !withNeighborScreens ? 'hidden' : null
     }
+  }, screens.map(function (screen, i) {
+    var current = i === Math.round(screenIndexProgress); // base current on transition
 
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: "screen-viewer-".concat(mountedScreen.id || '', "-").concat(i + 1)
-    }, /*#__PURE__*/React.createElement("div", Object.assign({
-      style: {
-        width: screenContainerWidth,
-        height: screenContainerHeight,
-        transform: !withoutScreensTransforms ? screenTransform : null
-      },
-      className: classNames([styles$6.screenContainer, (_ref16 = {}, _defineProperty(_ref16, styles$6.current, current), _defineProperty(_ref16, styles$6.visible, current || withLandscapeSiblingsScreens), _ref16)]) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      tabIndex: !active ? -1 : null,
-      "aria-hidden": !current,
-      "aria-label": intl.formatMessage({
-        id: "LkVfwW",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Screen "
-        }, {
-          "type": 1,
-          "value": "index"
-        }]
-      }, {
-        index: i + 1
-      }),
-      onKeyUp: function onKeyUp(e) {
-        return onScreenKeyUp(e, i);
-      }
-    }, dragScreenBind(i)), current && screenIndex > 0 ? /*#__PURE__*/React.createElement(NavigationButton, {
-      direction: "previous",
-      className: classNames([styles$6.navButton, styles$6.previous]),
-      onClick: gotoPreviousScreen
-    }) : null, mountedScreen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
+    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
+    var defaultStyles = {
+      opacity: current ? 1 : 0
+    };
+    var screenStyles = active ? getScreenStylesByIndex(i, screenIndexProgress) : defaultStyles;
+    return /*#__PURE__*/React.createElement("div", {
+      key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
+      style: screenStyles,
+      className: classNames([styles$6.screenContainer, _defineProperty({}, styles$6.current, current)])
+    }, screen !== null && active ? /*#__PURE__*/React.createElement(ViewerScreen, {
       className: styles$6.screen,
-      screen: mountedScreen,
+      screen: screen,
       screenState: current ? screenState : null,
-      renderContext: renderContext,
       index: i,
       current: current,
       active: active,
       mediaRef: function mediaRef(ref) {
         screensMediasRef.current[i] = ref;
       },
+      renderContext: renderContext,
       width: screenWidth,
       height: screenHeight,
-      scale: screenScale,
-      withNavigationHint: withNavigationHint && !withLandscapeSiblingsScreens && current && screenIndex === 0 && !hasInteracted
-    }) : null, current && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
-      direction: "next",
-      className: classNames([styles$6.navButton, styles$6.next]),
-      onClick: gotoNextScreen
-    }) : null));
-  }), !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
+      scale: screenScale
+    }) : null);
+  })), !withoutNavigationArrow && !withNeighborScreens && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+    direction: "next",
+    className: classNames([styles$6.navButton, styles$6.next]),
+    onClick: gotoNextScreen
+  }) : null, !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
     className: styles$6.playbackControls,
     ref: playbackControlsContainerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.playbackControlsContainer,
-    style: {
-      width: screenContainerWidth
-    }
   }, /*#__PURE__*/React.createElement(PlaybackControls, {
     className: styles$6.controls
-  }))) : null) : null, /*#__PURE__*/React.createElement(WebViewContainer, {
+  })) : null, withNavigationHint && !withNeighborScreens && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint, {
+    className: styles$6.arrowHint
+  }) : null) : null, /*#__PURE__*/React.createElement(WebViewContainer, {
     className: styles$6.webView,
     style: {
       maxWidth: Math.max(screenContainerWidth, 600)