@micromag/viewer 0.3.181 → 0.3.184

package/es/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import PropTypes from 'prop-types';
 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';
@@ -15,9 +15,9 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import EventEmitter from 'wolfy87-eventemitter';
-import { IconButton, ScreenPreview, SlidingButtons, CloseButton, Screen, Button, Meta, FontFaces } from '@micromag/core/components';
+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, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
+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';
@@ -214,22 +214,230 @@ function useScreenInteraction() {
   };
 }
 
-var _excluded$5 = ["className", "onClick", "theme"];
-var propTypes$k = {
+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,
+  iconClassName: PropTypes.string,
+  labelClassName: PropTypes.string,
   onClick: PropTypes.func,
-  theme: PropTypes$1.viewerTheme
+  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
+
+  })])
 };
-var defaultProps$k = {
+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,
+  iconClassName: null,
+  labelClassName: null,
   onClick: null,
-  theme: null
+  refButton: null
+};
+
+var Button = function Button(_ref) {
+  var _ref2;
+
+  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,
+      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);
+  }
+
+  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);
+};
+
+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
+};
+
+var IconButton = function IconButton(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$7);
+
+  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));
+};
+
+IconButton.propTypes = propTypes$m;
+IconButton.defaultProps = defaultProps$m;
+
+var _excluded$6 = ["className"];
+var propTypes$l = {
+  className: PropTypes.string
+};
+var defaultProps$l = {
+  className: null
+};
+
+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));
+};
+
+CloseButton.propTypes = propTypes$l;
+CloseButton.defaultProps = defaultProps$l;
+
+var _excluded$5 = ["className"];
+var propTypes$k = {
+  className: PropTypes.string
+};
+var defaultProps$k = {
+  className: null
 };
 
 var MenuButton = function MenuButton(_ref) {
   var className = _ref.className,
-      onClick = _ref.onClick,
-      theme = _ref.theme,
       props = _objectWithoutProperties(_ref, _excluded$5);
 
   var intl = useIntl();
@@ -243,39 +451,32 @@ var MenuButton = function MenuButton(_ref) {
       }]
     }),
     iconPosition: "right",
-    icon: /*#__PURE__*/React.createElement("svg", Object.assign({
+    icon: /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       width: "10",
       height: "16",
       viewBox: "0 0 10 16",
       fill: "currentColor"
-    }, theme), /*#__PURE__*/React.createElement("rect", {
+    }, /*#__PURE__*/React.createElement("rect", {
       width: "10",
       height: "16"
-    })),
-    onClick: onClick
+    }))
   }, props));
 };
 
 MenuButton.propTypes = propTypes$k;
 MenuButton.defaultProps = defaultProps$k;
 
-var _excluded$4 = ["className", "onClick", "theme"];
+var _excluded$4 = ["className"];
 var propTypes$j = {
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-  theme: PropTypes$1.viewerTheme
+  className: PropTypes.string
 };
 var defaultProps$j = {
-  className: null,
-  onClick: null,
-  theme: null
+  className: null
 };
 
 var ShareButton = function ShareButton(_ref) {
   var className = _ref.className,
-      onClick = _ref.onClick,
-      theme = _ref.theme,
       props = _objectWithoutProperties(_ref, _excluded$4);
 
   var intl = useIntl();
@@ -289,41 +490,99 @@ var ShareButton = function ShareButton(_ref) {
       }]
     }),
     iconPosition: "left",
-    icon: /*#__PURE__*/React.createElement("svg", Object.assign({
+    icon: /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       width: "10",
       height: "16",
       viewBox: "0 0 10 16",
       fill: "currentColor"
-    }, theme), /*#__PURE__*/React.createElement("polygon", {
+    }, /*#__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"
-    })),
-    onClick: onClick
+    }))
   }, props));
 };
 
 ShareButton.propTypes = propTypes$j;
 ShareButton.defaultProps = defaultProps$j;
 
-var styles$d = {"container":"micromag-viewer-menus-menu-container-container","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","inner":"micromag-viewer-menus-menu-container-inner"};
+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,
+  theme: PropTypes$1.viewerTheme,
   children: PropTypes.node
 };
-var defaultProps$i = {
+var defaultProps$h = {
   className: null,
   transitionProgress: 0,
+  theme: null,
   children: null
 };
 
 var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
   var className = _ref.className,
       transitionProgress = _ref.transitionProgress,
+      viewerTheme = _ref.theme,
       children = _ref.children;
+
+  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;
+
+  var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
     style: {
@@ -334,19 +593,28 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     style: {
       height: "".concat(transitionProgress * 100, "%"),
       pointerEvents: transitionProgress < 0.25 ? 'none' : 'auto',
-      zIndex: Math.round(2 - transitionProgress)
+      zIndex: Math.round(1 + transitionProgress)
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.inner
-  }, children)));
+    className: styles$d.inner,
+    style: _objectSpread(_objectSpread({}, backgroundColorStyle), {}, {
+      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)
+    }
+  }));
 };
 
-ViewerMenuContainer.propTypes = propTypes$i;
-ViewerMenuContainer.defaultProps = defaultProps$i;
+ViewerMenuContainer.propTypes = propTypes$h;
+ViewerMenuContainer.defaultProps = defaultProps$h;
 
-var styles$c = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","dot":"micromag-viewer-menus-menu-dot-dot","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","outlineBounce":"micromag-viewer-menus-menu-dot-outlineBounce"};
+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$h = {
+var propTypes$g = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -359,7 +627,7 @@ var propTypes$h = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$h = {
+var defaultProps$g = {
   current: false,
   active: false,
   colors: null,
@@ -431,13 +699,13 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
   }))));
 };
 
-ViewerMenuDot.propTypes = propTypes$h;
-ViewerMenuDot.defaultProps = defaultProps$h;
+ViewerMenuDot.propTypes = propTypes$g;
+ViewerMenuDot.defaultProps = defaultProps$g;
 
 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 _excluded$3 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "withItemClick", "withoutScreensMenu", "onClose", "className"];
-var propTypes$g = {
+var propTypes$f = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   items: PropTypes$1.menuItems,
   onClickDot: PropTypes.func,
@@ -452,7 +720,7 @@ var propTypes$g = {
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$g = {
+var defaultProps$f = {
   direction: 'horizontal',
   items: [],
   onClickDot: null,
@@ -574,23 +842,20 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$g;
-ViewerMenuDots.defaultProps = defaultProps$g;
+ViewerMenuDots.propTypes = propTypes$f;
+ViewerMenuDots.defaultProps = defaultProps$f;
 
-var propTypes$f = {
+var propTypes$e = {
   className: PropTypes.string
 };
-var defaultProps$f = {
+var defaultProps$e = {
   className: null
 };
 
 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"
-    ,
+    xmlns: "http://www.w3.org/2000/svg",
     width: "11.5",
     height: "17.5",
     viewBox: "0 0 11.5 17.5",
@@ -603,12 +868,12 @@ var StackIcon = function StackIcon(_ref) {
   }));
 };
 
-StackIcon.propTypes = propTypes$f;
-StackIcon.defaultProps = defaultProps$f;
+StackIcon.propTypes = propTypes$e;
+StackIcon.defaultProps = defaultProps$e;
 
 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$e = {
+var propTypes$d = {
   className: PropTypes.string,
   item: PropTypes$1.menuItem,
   index: PropTypes.number,
@@ -616,7 +881,7 @@ var propTypes$e = {
   screenSize: PropTypes$1.screenSize,
   focusable: PropTypes.bool
 };
-var defaultProps$e = {
+var defaultProps$d = {
   className: null,
   item: PropTypes$1.menuItem,
   index: 0,
@@ -696,12 +961,12 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
   }) : null));
 };
 
-ViewerMenuScreen.propTypes = propTypes$e;
-ViewerMenuScreen.defaultProps = defaultProps$e;
+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"};
+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$d = {
+var propTypes$c = {
   viewerTheme: PropTypes$1.viewerTheme,
   screenSize: PropTypes$1.screenSize,
   menuWidth: PropTypes.number,
@@ -709,13 +974,14 @@ var propTypes$d = {
   focusable: PropTypes.bool,
   onClickScreen: PropTypes.func,
   maxThumbsWidth: PropTypes.number,
-  // shouldLoad: PropTypes.bool, // @todo still needed? to re-implement?
+  // @todo to reimplement:
+  // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
   // fullscreenActive: PropTypes.bool,
   // fullscreenEnabled: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$d = {
+var defaultProps$c = {
   viewerTheme: null,
   screenSize: null,
   menuWidth: null,
@@ -745,55 +1011,34 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       _useDimensionObserver2 = _useDimensionObserver.width,
       contentWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
 
-  var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // Viewer theme
-  // @todo room for improvement here probably
-  // @todo also re-implement!!
+  var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // @note cool, should be in recipes
 
   var _ref2 = viewerTheme || {},
-      _ref2$colors = _ref2.colors,
-      colors = _ref2$colors === void 0 ? null : _ref2$colors,
       _ref2$background = _ref2.background,
       background = _ref2$background === void 0 ? null : _ref2$background;
       _ref2.logo;
 
-  var _ref3 = colors || {};
-      _ref3.primary;
-      _ref3.secondary;
-
-  var _ref4 = background || {},
-      _ref4$color = _ref4.color,
-      brandBackgroundColor = _ref4$color === void 0 ? null : _ref4$color,
-      _ref4$image = _ref4.image,
-      image = _ref4$image === void 0 ? null : _ref4$image;
-
-  var _ref5 = image || {},
-      _ref5$url = _ref5.url,
-      brandImageUrl = _ref5$url === void 0 ? null : _ref5$url; // const borderPrimaryColorStyle = getStyleFromColor(brandPrimaryColor, 'borderColor');
-  // const colorSecondaryColorStyle = getStyleFromColor(brandSecondaryColor, 'color');
+  var _ref3 = background || {},
+      _ref3$image = _ref3.image,
+      image = _ref3$image === void 0 ? null : _ref3$image;
 
-
-  var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor'); // const { url: brandLogoUrl = null } = brandLogo || {};
+  var _ref4 = image || {},
+      _ref4$url = _ref4.url,
+      brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
 
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
-  } : null; // @todo could probably use some work to avoid the visual jump from 3 screens to all of them
-
-  var finalItems = useMemo(function () {
-    return !focusable ? items.map(function (s, i) {
-      return i > 3 ? {
-        screenId: s.screenId
-      } : s;
-    }) : items;
-  }, [items, focusable]); // @todo bookmarks
-  // const bookmarks = finalItems.reduce((acc, it) => {
-  //     const { screen = null } = it || {};
-  //     const { bookmark = null } = screen || {};
-  //     return bookmark !== null ? [...acc, bookmark] : acc; // merge with array or return original array
-  // }, []);
+  } : 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],
+  // );
 
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
-    style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
+    style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
@@ -806,9 +1051,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.nav
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles$9.items
-  }, finalItems.map(function (item, index) {
-    var _ref7 = item || {},
-        screenId = _ref7.screenId;
+  }, 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, "%")
@@ -817,30 +1064,43 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       key: "item-".concat(screenId),
       className: styles$9.item,
       style: itemStyles
-    }, item === null ? 'loading' : /*#__PURE__*/React.createElement(ViewerMenuScreen, {
-      className: styles$9.screenPreview,
+    }, /*#__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: {
+        animationDelay: "".concat(index * -50, "ms")
+      }
+    }, /*#__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$d;
-ViewerMenuPreview.defaultProps = defaultProps$d;
+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$c = {
+var propTypes$b = {
   screen: PropTypes$1.item,
   title: PropTypes.string,
   url: PropTypes.string,
   description: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$c = {
+var defaultProps$b = {
   screen: null,
   title: null,
   url: null,
@@ -872,12 +1132,12 @@ var MicromagPreview = function MicromagPreview(_ref) {
   }, url) : null, /*#__PURE__*/React.createElement("p", null, description)));
 };
 
-MicromagPreview.propTypes = propTypes$c;
-MicromagPreview.defaultProps = defaultProps$c;
+MicromagPreview.propTypes = propTypes$b;
+MicromagPreview.defaultProps = defaultProps$b;
 
-var styles$7 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","screenButton":"micromag-viewer-menus-menu-share-screenButton","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","optionButton":"micromag-viewer-menus-menu-share-optionButton","content":"micromag-viewer-menus-menu-share-content"};
+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$b = {
+var propTypes$a = {
   viewerTheme: PropTypes$1.viewerTheme,
   menuWidth: PropTypes.number,
   title: PropTypes.string,
@@ -890,7 +1150,7 @@ var propTypes$b = {
   onShare: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$b = {
+var defaultProps$a = {
   viewerTheme: null,
   menuWidth: null,
   title: null,
@@ -916,56 +1176,40 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
       className = _ref.className;
 
   // Viewer theme
-  // @todo room for improvement here probably
   var _ref2 = viewerTheme || {},
-      _ref2$colors = _ref2.colors,
-      colors = _ref2$colors === void 0 ? null : _ref2$colors,
       _ref2$background = _ref2.background,
       background = _ref2$background === void 0 ? null : _ref2$background;
-      _ref2.logo;
- // @todo could get from theme provider? need to re-implement
-
-
-  var _ref3 = colors || {};
-      _ref3.primary;
-      _ref3.secondary;
-
-  var _ref4 = background || {},
-      _ref4$color = _ref4.color,
-      brandBackgroundColor = _ref4$color === void 0 ? null : _ref4$color,
-      _ref4$image = _ref4.image,
-      image = _ref4$image === void 0 ? null : _ref4$image;
-
-  var _ref5 = image || {},
-      _ref5$url = _ref5.url,
-      brandImageUrl = _ref5$url === void 0 ? null : _ref5$url; // const borderPrimaryColorStyle = getStyleFromColor(brandPrimaryColor, 'borderColor');
-  // const colorSecondaryColorStyle = getStyleFromColor(brandSecondaryColor, 'color');
 
+  var _ref3 = background || {},
+      _ref3$image = _ref3.image,
+      image = _ref3$image === void 0 ? null : _ref3$image;
 
-  var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor'); // const { url: brandLogoUrl = null } = brandLogo || {};
+  var _ref4 = image || {},
+      _ref4$url = _ref4.url,
+      brandImageUrl = _ref4$url === void 0 ? null : _ref4$url;
 
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null;
   var coverScreen = useMemo(function () {
-    var _ref6 = items[0] || {},
-        _ref6$screen = _ref6.screen,
-        screen = _ref6$screen === void 0 ? null : _ref6$screen;
+    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 _ref7 = item || {},
-          _ref7$current = _ref7.current,
-          current = _ref7$current === void 0 ? false : _ref7$current;
+      var _ref6 = item || {},
+          _ref6$current = _ref6.current,
+          current = _ref6$current === void 0 ? false : _ref6$current;
 
       return current;
     });
 
-    var _ref8 = found || {},
-        _ref8$screen = _ref8.screen,
-        screen = _ref8$screen === void 0 ? null : _ref8$screen;
+    var _ref7 = found || {},
+        _ref7$screen = _ref7.screen,
+        screen = _ref7$screen === void 0 ? null : _ref7$screen;
 
     return screen;
   }, [items, currentScreenIndex, focusable]);
@@ -991,7 +1235,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
   }, [shareCurrentScreen, currentScreenIndex, setFinalShareUrl]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
-    style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
+    style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
@@ -1029,16 +1273,17 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     url: finalShareUrl,
     focusable: focusable,
     onShare: onShare,
+    theme: viewerTheme,
     shareCurrentScreen: shareCurrentScreen
   }))));
 };
 
-ViewerMenuShare.propTypes = propTypes$b;
-ViewerMenuShare.defaultProps = defaultProps$b;
+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","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuScreens":"micromag-viewer-menuScreens","slidingButton":"micromag-viewer-slidingButton","menuButton":"micromag-viewer-menuButton","isHidden":"micromag-viewer-isHidden","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","isDragging":"micromag-viewer-isDragging","withoutGestures":"micromag-viewer-withoutGestures","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","webView":"micromag-viewer-webView"};
+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$a = {
+var propTypes$9 = {
   story: PropTypes$1.story.isRequired,
   currentScreenIndex: PropTypes.number,
   toggleFullscreen: PropTypes.func,
@@ -1062,7 +1307,7 @@ var propTypes$a = {
 
   })
 };
-var defaultProps$a = {
+var defaultProps$9 = {
   currentScreenIndex: 0,
   toggleFullscreen: null,
   fullscreenActive: false,
@@ -1084,7 +1329,7 @@ var defaultProps$a = {
 };
 
 var ViewerMenu = function ViewerMenu(_ref) {
-  var _ref9;
+  var _ref11;
 
   var story = _ref.story,
       currentScreenIndex = _ref.currentScreenIndex,
@@ -1181,7 +1426,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     var base = typeof window !== 'undefined' ? window.location.host : '';
     var path = shareBasePath !== null ? "".concat(base).concat(shareBasePath) : base;
     return path;
-  }, [shareBasePath]); // @todo sorta not super good here
+  }, [shareBasePath]); // @note possible to extract some of that logic
 
   var onOpenMenu = useCallback(function () {
     setMenuOpened(true);
@@ -1238,11 +1483,30 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return progress;
-  }, [menuOpened, onOpenShare]);
+  }, [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;
+    }
+
+    return 1 - progress;
+  }, [onCloseShare]);
 
   var _useDragProgress = useDragProgress({
     progress: shareOpened ? 1 : 0,
-    computeProgress: computeShareProgress,
+    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
     springParams: {
       config: {
         tension: 300,
@@ -1251,17 +1515,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
   }),
       bindShareDrag = _useDragProgress.bind,
-      isDraggingShare = _useDragProgress.dragging,
       shareOpenedProgress = _useDragProgress.progress;
 
-  var computeMenuProgress = 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 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];
 
     var progress = Math.max(0, my) / (window.innerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
@@ -1272,11 +1535,30 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return progress;
-  }, [menuOpened, onOpenMenu]);
+  }, [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;
+    }
+
+    return 1 - progress;
+  }, [onCloseMenu]);
 
   var _useDragProgress2 = useDragProgress({
     progress: menuOpened ? 1 : 0,
-    computeProgress: computeMenuProgress,
+    computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
     springParams: {
       config: {
         tension: 300,
@@ -1285,7 +1567,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
   }),
       bindMenuDrag = _useDragProgress2.bind,
-      isDraggingMenu = _useDragProgress2.dragging,
       menuOpenedProgress = _useDragProgress2.progress;
 
   var keyboardShortcuts = useMemo(function () {
@@ -1302,7 +1583,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
 
   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, (_ref9 = {}, _defineProperty(_ref9, styles$6.withShadow, withShadow), _defineProperty(_ref9, styles$6.isOpened, menuOpened || shareOpened), _ref9)]),
+    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
@@ -1311,47 +1592,43 @@ var ViewerMenu = function ViewerMenu(_ref) {
     className: styles$6.menuTopContainer
   }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: classNames([styles$6.menuItem, styles$6.menuShare])
-  }, bindShareDrag()), /*#__PURE__*/React.createElement(SlidingButtons, {
+  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
     className: styles$6.slidingButton,
-    current: shareOpenedProgress,
-    immediate: isDraggingShare,
-    buttons: [ShareButton, CloseButton],
-    buttonsProps: [{
-      key: 'share',
+    button: /*#__PURE__*/React.createElement(ShareButton, {
       className: styles$6.menuButton,
       onClick: onOpenShare,
-      theme: menuTheme
-    }, {
-      key: 'close-share',
+      theme: menuTheme,
+      iconPosition: "left"
+    }),
+    toggledButton: /*#__PURE__*/React.createElement(CloseButton, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
-      iconPosition: 'left'
-    }]
+      iconPosition: "left"
+    }),
+    toggled: shareOpenedProgress
   })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$6.menuItem, styles$6.menuScreens])
-  }, bindMenuDrag()), /*#__PURE__*/React.createElement(SlidingButtons, {
+    className: classNames([styles$6.menuItem, styles$6.menuItemScreens])
+  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
     className: styles$6.slidingButton,
-    current: menuOpenedProgress,
-    immediate: isDraggingMenu,
-    buttons: [MenuButton, CloseButton],
-    buttonsProps: [{
-      key: 'menu',
+    button: /*#__PURE__*/React.createElement(MenuButton, {
       className: styles$6.menuButton,
       onClick: onOpenMenu,
       theme: menuTheme
-    }, {
-      key: 'close-menu',
+    }),
+    toggledButton: /*#__PURE__*/React.createElement(CloseButton, {
       className: styles$6.menuButton,
       onClick: onCloseMenu,
       theme: menuTheme,
-      iconPosition: 'right'
-    }]
+      iconPosition: "right"
+    }),
+    toggled: menuOpenedProgress,
+    toggledButtonClassName: styles$6.screensMenuButtonToggled
   })) : null), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     items: items,
     onClickDot: onClickScreen,
-    onClickMenu: onOpenMenu,
+    onClickScreensMenu: onOpenMenu,
     closeable: closeable,
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
@@ -1359,12 +1636,15 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onClose: onClickCloseViewer,
     className: styles$6.dots,
     style: {
-      opacity: dotsOpacity
+      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
-  }, /*#__PURE__*/React.createElement(ViewerMenuShare, {
+    transitionProgress: shareOpenedProgress,
+    theme: viewerTheme
+  }, shareOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -1376,15 +1656,15 @@ var ViewerMenu = function ViewerMenu(_ref) {
     shareUrl: shareUrl,
     onShare: onShare,
     onClose: onCloseShare
-  })), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
+  }) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainerScreens,
-    transitionProgress: menuOpenedProgress
-  }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
+    transitionProgress: menuOpenedProgress,
+    theme: viewerTheme
+  }, menuOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     className: styles$6.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
-    focusable: menuOpened,
     items: items,
     currentScreenIndex: currentScreenIndex,
     shareUrl: shareUrl,
@@ -1394,67 +1674,15 @@ var ViewerMenu = function ViewerMenu(_ref) {
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
-  })));
-};
-
-ViewerMenu.propTypes = propTypes$a;
-ViewerMenu.defaultProps = defaultProps$a;
-
-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
+  }) : 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"
-  }));
-};
+ViewerMenu.propTypes = propTypes$9;
+ViewerMenu.defaultProps = defaultProps$9;
 
-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,
@@ -1464,10 +1692,10 @@ var propTypes$7 = {
   width: PropTypes.number,
   height: PropTypes.number,
   scale: PropTypes.number,
-  withNavigationHint: PropTypes.bool,
+  // withNavigationHint: PropTypes.bool,  // @todo
   className: PropTypes.string
 };
-var defaultProps$7 = {
+var defaultProps$8 = {
   screen: null,
   renderContext: null,
   screenState: null,
@@ -1477,7 +1705,7 @@ var defaultProps$7 = {
   width: null,
   height: null,
   scale: null,
-  withNavigationHint: false,
+  // withNavigationHint: false,
   className: null
 };
 
@@ -1491,10 +1719,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,
@@ -1509,22 +1736,20 @@ 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$3 = {"arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
+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$6 = {
+var propTypes$7 = {
   direction: PropTypes.oneOf(['previous', 'next']),
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$6 = {
+var defaultProps$7 = {
   direction: 'next',
   onClick: null,
   className: null
@@ -1534,12 +1759,12 @@ var NavigationButton = function NavigationButton(_ref) {
   var direction = _ref.direction,
       onClick = _ref.onClick,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles$3.container, styles$3[direction], _defineProperty({}, className, className !== null)]),
+  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$3.arrow,
+      className: styles$4.arrow,
       xmlns: "http://www.w3.org/2000/svg",
       width: "10",
       height: "16",
@@ -1566,11 +1791,62 @@ var NavigationButton = function NavigationButton(_ref) {
   });
 };
 
-NavigationButton.propTypes = propTypes$6;
-NavigationButton.defaultProps = defaultProps$6;
+NavigationButton.propTypes = propTypes$7;
+NavigationButton.defaultProps = defaultProps$7;
+
+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 = {
+  className: PropTypes.string
+};
+var defaultProps$6 = {
+  className: null
+};
+
+var ArrowHint = function ArrowHint(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.inner
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: styles$3.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"
+  }))));
+};
+
+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();
+  }
+};
+
 function getFormattedTimestamp(s) {
   var withMilliseconds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var sparts = withMilliseconds ? "".concat(s).split('.') : [];
@@ -1638,16 +1914,14 @@ var SeekBar = function SeekBar(_ref) {
       setShowTimestamp = _useState2[1];
 
   var onDrag = useCallback(function (_ref3) {
-    var event = _ref3.event,
-        _ref3$xy = _slicedToArray(_ref3.xy, 1),
+    _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;
 
-    event.stopPropagation();
-
     if (!active && elapsedTime > 300) {
       return;
     }
@@ -1662,14 +1936,12 @@ var SeekBar = function SeekBar(_ref) {
       onSeek(newProgress, tap);
     }
   }, [onSeek]);
-  var onDragStart = useCallback(function (event) {
+  var onDragStart = useCallback(function () {
     setShowTimestamp(true);
 
     if (onSeekStart !== null) {
       onSeekStart();
     }
-
-    event.stopPropagation();
   }, [onSeekStart, setShowTimestamp]);
   var onDragEnd = useCallback(function () {
     if (onSeekEnd !== null) {
@@ -1687,9 +1959,9 @@ var SeekBar = function SeekBar(_ref) {
       filterTaps: true
     }
   });
-  return /*#__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)])
-  }, /*#__PURE__*/React.createElement("div", {
+  }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
     className: styles$2.inner
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.progressBar,
@@ -1853,7 +2125,7 @@ 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, 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, {
+  }, /*#__PURE__*/React.createElement(Button$1, {
     className: styles$1.playPauseButton,
     style: {
       color: color
@@ -1911,7 +2183,7 @@ function PlaybackControls(_ref) {
     withSeekHead: !isCollapsed && !seekBarOnly,
     backgroundColor: color,
     progressColor: progressColor
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button$1, {
     className: styles$1.muteButton,
     style: {
       color: color
@@ -2074,10 +2346,10 @@ var propTypes$2 = {
   visitor: PropTypes$1.visitor,
   onScreenChange: PropTypes.func,
   tapNextScreenWidthPercent: PropTypes.number,
-  neighborScreensActive: 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,
@@ -2118,10 +2390,10 @@ var defaultProps$2 = {
   visitor: null,
   onScreenChange: null,
   tapNextScreenWidthPercent: 0.8,
-  neighborScreensActive: 1,
   storyIsParsed: false,
-  // landscapeScreenMargin: 20,
-  // landscapeSmallScreenScale: 0.9,
+  neighborScreensActive: 2,
+  neighborScreenOffset: 105,
+  neighborScreenScale: 0.8,
   withMetadata: false,
   withNeighborScreens: false,
   withNavigationHint: false,
@@ -2160,8 +2432,10 @@ var Viewer = function Viewer(_ref) {
       renderContext = _ref.renderContext,
       visitor = _ref.visitor,
       tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
-      neighborScreensActive = _ref.neighborScreensActive,
       storyIsParsed = _ref.storyIsParsed,
+      neighborScreensActive = _ref.neighborScreensActive,
+      neighborScreenOffset = _ref.neighborScreenOffset,
+      neighborScreenScale = _ref.neighborScreenScale,
       withMetadata = _ref.withMetadata,
       withoutGestures = _ref.withoutGestures,
       withoutMenu = _ref.withoutMenu,
@@ -2169,9 +2443,9 @@ var Viewer = function Viewer(_ref) {
       withoutShareMenu = _ref.withoutShareMenu,
       withoutMenuShadow = _ref.withoutMenuShadow;
       _ref.withoutFullscreen;
-      var withoutNavigationArrow = _ref.withoutNavigationArrow;
-      _ref.withoutTransitions;
-      var withNeighborScreens = _ref.withNeighborScreens,
+      var withoutNavigationArrow = _ref.withoutNavigationArrow,
+      withoutTransitions = _ref.withoutTransitions,
+      withNeighborScreens = _ref.withNeighborScreens,
       withNavigationHint = _ref.withNavigationHint,
       withoutPlaybackControls = _ref.withoutPlaybackControls,
       menuIsScreenWidth = _ref.menuIsScreenWidth,
@@ -2467,7 +2741,7 @@ var Viewer = function Viewer(_ref) {
 
   var _useDragProgress = useDragProgress({
     progress: screenIndex,
-    disabled: !isView,
+    disabled: !isView || withoutTransitions,
     dragDisabled: withoutGestures,
     computeProgress: computeScreenProgress,
     onProgress: onScreenProgress,
@@ -2498,7 +2772,7 @@ var Viewer = function Viewer(_ref) {
     var clamped = Math.min(1, Math.max(0, Math.abs(t)));
     return {
       opacity: 1 - 0.75 * clamped,
-      transform: "translateX(".concat(t * 105, "%) scale(").concat(1 - 0.2 * clamped, ")"),
+      transform: "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")"),
       zIndex: screensCount - index
     };
   };
@@ -2593,6 +2867,7 @@ var Viewer = function Viewer(_ref) {
     shareBasePath: basePath,
     screenSize: screenSize,
     menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
+    theme: viewerTheme,
     trackingEnabled: trackingEnabled,
     onClickScreen: onClickScreen,
     onClickCloseViewer: onCloseViewer,
@@ -2614,7 +2889,6 @@ var Viewer = function Viewer(_ref) {
       overflow: !withNeighborScreens ? 'hidden' : null
     }
   }, screens.map(function (screen, i) {
-    // const current = i === parseInt(screenIndex, 10);
     var current = i === Math.round(screenIndexProgress); // base current on transition
 
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
@@ -2639,8 +2913,7 @@ var Viewer = function Viewer(_ref) {
       renderContext: renderContext,
       width: screenWidth,
       height: screenHeight,
-      scale: screenScale,
-      withNavigationHint: withNavigationHint && !withNeighborScreens && current && screenIndex === 0 && !hasInteracted
+      scale: screenScale
     }) : null);
   })), !withoutNavigationArrow && !withNeighborScreens && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
     direction: "next",
@@ -2651,7 +2924,9 @@ var Viewer = function Viewer(_ref) {
     ref: playbackControlsContainerRef
   }, /*#__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)