@micromag/viewer 0.3.541 → 0.3.547

package/lib/index.js

@@ -1,4125 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
-var PropTypes = require('prop-types');
-var jsxRuntime = require('react/jsx-runtime');
-var pathToRegexp = require('path-to-regexp');
-var mitt = require('mitt');
-var _createForOfIteratorHelper = require('@babel/runtime/helpers/createForOfIteratorHelper');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _toArray = require('@babel/runtime/helpers/toArray');
-var regexparam = require('regexparam');
-var index_js = require('use-sync-external-store/shim/index.js');
-var core = require('@micromag/core');
-var contexts = require('@micromag/core/contexts');
-var intl = require('@micromag/intl');
-var screens = require('@micromag/screens');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var web = require('@react-spring/web');
-var classNames = require('classnames');
-var reactHelmet = require('react-helmet');
-var reactIntl = require('react-intl');
-var EventEmitter = require('wolfy87-eventemitter');
-var components = require('@micromag/core/components');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var all = require('@micromag/elements/all');
-var FocusLock = require('react-focus-lock');
-var core$1 = require('@react-spring/core');
-var Scroll = require('@micromag/element-scroll');
-var ShareOptions = require('@micromag/element-share-options');
-var react = require('@use-gesture/react');
-var WebView = require('@micromag/element-webview');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-var useEffect = React__namespace.useEffect,
-  useLayoutEffect = React__namespace.useLayoutEffect,
-  useRef = React__namespace.useRef;
-
-// React.useInsertionEffect is not available in React <18
-// This hack fixes a transpilation issue on some apps
-var useBuiltinInsertionEffect = React__namespace['useInsertion' + 'Effect'];
-
-// Copied from:
-// https://github.com/facebook/react/blob/main/packages/shared/ExecutionEnvironment.js
-var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-
-// Copied from:
-// https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.ts
-// "React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser."
-var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
-
-// useInsertionEffect is already a noop on the server.
-// See: https://github.com/facebook/react/blob/main/packages/react-server/src/ReactFizzHooks.js
-var useInsertionEffect = useBuiltinInsertionEffect || useIsomorphicLayoutEffect;
-
-// Userland polyfill while we wait for the forthcoming
-// https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
-// Note: "A high-fidelity polyfill for useEvent is not possible because
-// there is no lifecycle or Hook in React that we can use to switch
-// .current at the right timing."
-// So we will have to make do with this "close enough" approach for now.
-var useEvent = function useEvent(fn) {
-  var ref = useRef([fn, function () {
-    return ref[0].apply(ref, arguments);
-  }]).current;
-  // Per Dan Abramov: useInsertionEffect executes marginally closer to the
-  // correct timing for ref synchronization than useLayoutEffect on React 18.
-  // See: https://github.com/facebook/react/pull/25881#issuecomment-1356244360
-  useInsertionEffect(function () {
-    ref[0] = fn;
-  });
-  return ref[1];
-};
-
-/**
- * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
- */
-var eventPopstate = "popstate";
-var eventPushState = "pushState";
-var eventReplaceState = "replaceState";
-var eventHashchange = "hashchange";
-var events = [eventPopstate, eventPushState, eventReplaceState, eventHashchange];
-var subscribeToLocationUpdates = function subscribeToLocationUpdates(callback) {
-  for (var _i = 0, _events = events; _i < _events.length; _i++) {
-    var event = _events[_i];
-    addEventListener(event, callback);
-  }
-  return function () {
-    for (var _i2 = 0, _events2 = events; _i2 < _events2.length; _i2++) {
-      var _event = _events2[_i2];
-      removeEventListener(_event, callback);
-    }
-  };
-};
-var useLocationProperty = function useLocationProperty(fn, ssrFn) {
-  return index_js.useSyncExternalStore(subscribeToLocationUpdates, fn, ssrFn);
-};
-var currentSearch = function currentSearch() {
-  return location.search;
-};
-var useSearch = function useSearch() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$ssrSearch = _ref.ssrSearch,
-    ssrSearch = _ref$ssrSearch === void 0 ? "" : _ref$ssrSearch;
-  return useLocationProperty(currentSearch, function () {
-    return ssrSearch;
-  });
-};
-var currentPathname = function currentPathname() {
-  return location.pathname;
-};
-var usePathname = function usePathname() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    ssrPath = _ref2.ssrPath;
-  return useLocationProperty(currentPathname, ssrPath ? function () {
-    return ssrPath;
-  } : currentPathname);
-};
-var navigate = function navigate(to) {
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref3$replace = _ref3.replace,
-    replace = _ref3$replace === void 0 ? false : _ref3$replace,
-    _ref3$state = _ref3.state,
-    state = _ref3$state === void 0 ? null : _ref3$state;
-  return history[replace ? eventReplaceState : eventPushState](state, "", to);
-};
-
-// the 2nd argument of the `useBrowserLocation` return value is a function
-// that allows to perform a navigation.
-var useBrowserLocation = function useBrowserLocation() {
-  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return [usePathname(opts), navigate];
-};
-var patchKey = Symbol["for"]("wouter_v3");
-
-// While History API does have `popstate` event, the only
-// proper way to listen to changes via `push/replaceState`
-// is to monkey-patch these methods.
-//
-// See https://stackoverflow.com/a/4585031
-if (typeof history !== "undefined" && typeof window[patchKey] === "undefined") {
-  var _loop = function _loop() {
-    var type = _arr[_i3];
-    var original = history[type];
-    // TODO: we should be using unstable_batchedUpdates to avoid multiple re-renders,
-    // however that will require an additional peer dependency on react-dom.
-    // See: https://github.com/reactwg/react-18/discussions/86#discussioncomment-1567149
-    history[type] = function () {
-      var result = original.apply(this, arguments);
-      var event = new Event(type);
-      event.arguments = arguments;
-      dispatchEvent(event);
-      return result;
-    };
-  };
-  for (var _i3 = 0, _arr = [eventPushState, eventReplaceState]; _i3 < _arr.length; _i3++) {
-    _loop();
-  }
-
-  // patch history object only once
-  // See: https://github.com/molefrog/wouter/issues/167
-  Object.defineProperty(window, patchKey, {
-    value: true
-  });
-}
-
-var _excluded$b = ["children"],
-  _excluded2 = ["path", "nest", "match"],
-  _excluded3 = ["to", "href", "onClick", "asChild", "children", "className", "replace", "state"];
-
-/*
- * Transforms `path` into its relative `base` version
- * If base isn't part of the path provided returns absolute path e.g. `~/app`
- */
-var relativePath = function relativePath() {
-  var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var path = arguments.length > 1 ? arguments[1] : undefined;
-  return !path.toLowerCase().indexOf(base.toLowerCase()) ? path.slice(base.length) || "/" : "~" + path;
-};
-var absolutePath = function absolutePath(to) {
-  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  return to[0] === "~" ? to.slice(1) : base + to;
-};
-
-/*
- * decodes escape sequences such as %20
- */
-var unescape = function unescape(str) {
-  try {
-    return decodeURI(str);
-  } catch (_e) {
-    // fail-safe mode: if string can't be decoded do nothing
-    return str;
-  }
-};
-
-/*
- * Router and router context. Router is a lightweight object that represents the current
- * routing options: how location is managed, base path etc.
- *
- * There is a default router present for most of the use cases, however it can be overridden
- * via the <Router /> component.
- */
-
-var defaultRouter = {
-  hook: useBrowserLocation,
-  searchHook: useSearch,
-  parser: regexparam.parse,
-  base: "",
-  // this option is used to override the current location during SSR
-  ssrPath: undefined,
-  ssrSearch: undefined,
-  // customizes how `href` props are transformed for <Link />
-  hrefs: function hrefs(x) {
-    return x;
-  }
-};
-var RouterCtx = React.createContext(defaultRouter);
-
-// gets the closest parent router from the context
-var useRouter = function useRouter() {
-  return React.useContext(RouterCtx);
-};
-
-/**
- * Parameters context. Used by `useParams()` to get the
- * matched params from the innermost `Route` component.
- */
-
-var ParamsCtx = React.createContext({});
-
-/*
- * Part 1, Hooks API: useRoute and useLocation
- */
-
-// Internal version of useLocation to avoid redundant useRouter calls
-
-var useLocationFromRouter = function useLocationFromRouter(router) {
-  var _router$hook = router.hook(router),
-    _router$hook2 = _slicedToArray(_router$hook, 2),
-    location = _router$hook2[0],
-    navigate = _router$hook2[1];
-
-  // the function reference should stay the same between re-renders, so that
-  // it can be passed down as an element prop without any performance concerns.
-  // (This is achieved via `useEvent`.)
-  return [unescape(relativePath(router.base, location)), useEvent(function (to, navOpts) {
-    return navigate(absolutePath(to, router.base), navOpts);
-  })];
-};
-var useLocation = function useLocation() {
-  return useLocationFromRouter(useRouter());
-};
-var matchRoute = function matchRoute(parser, route, path, loose) {
-  // when parser is in "loose" mode, `$base` is equal to the
-  // first part of the route that matches the pattern
-  // (e.g. for pattern `/a/:b` and path `/a/1/2/3` the `$base` is `a/1`)
-  // we use this for route nesting
-  var _parser = parser(route || "*", loose),
-    pattern = _parser.pattern,
-    keys = _parser.keys;
-  var _ref = pattern.exec(path) || [],
-    _ref2 = _toArray(_ref),
-    $base = _ref2[0],
-    matches = _ref2.slice(1);
-  return $base !== undefined ? [true,
-  // an object with parameters matched, e.g. { foo: "bar" } for "/:foo"
-  // we "zip" two arrays here to construct the object
-  // ["foo"], ["bar"] → { foo: "bar" }
-  Object.fromEntries(keys.map(function (key, i) {
-    return [key, matches[i]];
-  }))].concat(_toConsumableArray(loose ? [$base] : [])) : [false, null];
-};
-
-/*
- * Part 2, Low Carb Router API: Router, Route, Link, Switch
- */
-
-var Router = function Router(_ref3) {
-  var _props$ssrPath$split, _props$ssrPath, _props$hrefs, _props$hook;
-  var children = _ref3.children,
-    props = _objectWithoutProperties(_ref3, _excluded$b);
-  // the router we will inherit from - it is the closest router in the tree,
-  // unless the custom `hook` is provided (in that case it's the default one)
-  var parent_ = useRouter();
-  var parent = props.hook ? defaultRouter : parent_;
-
-  // holds to the context value: the router object
-  var value = parent;
-
-  // when `ssrPath` contains a `?` character, we can extract the search from it
-  var _ref4 = (_props$ssrPath$split = (_props$ssrPath = props.ssrPath) === null || _props$ssrPath === void 0 ? void 0 : _props$ssrPath.split("?")) !== null && _props$ssrPath$split !== void 0 ? _props$ssrPath$split : [],
-    _ref5 = _slicedToArray(_ref4, 2),
-    path = _ref5[0],
-    search = _ref5[1];
-  if (search) props.ssrSearch = search, props.ssrPath = path;
-
-  // hooks can define their own `href` formatter (e.g. for hash location)
-  props.hrefs = (_props$hrefs = props.hrefs) !== null && _props$hrefs !== void 0 ? _props$hrefs : (_props$hook = props.hook) === null || _props$hook === void 0 ? void 0 : _props$hook.hrefs;
-
-  // what is happening below: to avoid unnecessary rerenders in child components,
-  // we ensure that the router object reference is stable, unless there are any
-  // changes that require reload (e.g. `base` prop changes -> all components that
-  // get the router from the context should rerender, even if the component is memoized).
-  // the expected behaviour is:
-  //
-  //   1) when the resulted router is no different from the parent, use parent
-  //   2) if the custom `hook` prop is provided, we always inherit from the
-  //      default router instead. this resets all previously overridden options.
-  //   3) when the router is customized here, it should stay stable between renders
-  var ref = React.useRef({}),
-    prev = ref.current,
-    next = prev;
-  for (var k in parent) {
-    var option = k === "base" ? /* base is special case, it is appended to the parent's base */
-    parent[k] + (props[k] || "") : props[k] || parent[k];
-    if (prev === next && option !== next[k]) {
-      ref.current = next = _objectSpread({}, next);
-    }
-    next[k] = option;
-
-    // the new router is no different from the parent, use parent
-    if (option !== parent[k]) value = next;
-  }
-  return React.createElement(RouterCtx.Provider, {
-    value: value,
-    children: children
-  });
-};
-var h_route = function h_route(_ref6, params) {
-  var children = _ref6.children,
-    component = _ref6.component;
-  // React-Router style `component` prop
-  if (component) return React.createElement(component, {
-    params: params
-  });
-
-  // support render prop or plain children
-  return typeof children === "function" ? children(params) : children;
-};
-var Route = function Route(_ref7) {
-  var path = _ref7.path,
-    nest = _ref7.nest,
-    match = _ref7.match,
-    renderProps = _objectWithoutProperties(_ref7, _excluded2);
-  var router = useRouter();
-  var _useLocationFromRoute = useLocationFromRouter(router),
-    _useLocationFromRoute2 = _slicedToArray(_useLocationFromRoute, 1),
-    location = _useLocationFromRoute2[0];
-  var _ref8 = // `match` is a special prop to give up control to the parent,
-    // it is used by the `Switch` to avoid double matching
-    match !== null && match !== void 0 ? match : matchRoute(router.parser, path, location, nest),
-    _ref9 = _slicedToArray(_ref8, 3),
-    matches = _ref9[0],
-    params = _ref9[1],
-    base = _ref9[2];
-  if (!matches) return null;
-  var children = base ? React.createElement(Router, {
-    base: base
-  }, h_route(renderProps, params)) : h_route(renderProps, params);
-  return React.createElement(ParamsCtx.Provider, {
-    value: params,
-    children: children
-  });
-};
-var Link = React.forwardRef(function (props, ref) {
-  var router = useRouter();
-  var _useLocationFromRoute3 = useLocationFromRouter(router),
-    _useLocationFromRoute4 = _slicedToArray(_useLocationFromRoute3, 2),
-    path = _useLocationFromRoute4[0],
-    navigate = _useLocationFromRoute4[1];
-  var to = props.to,
-    _props$href = props.href,
-    _href = _props$href === void 0 ? to : _props$href,
-    _onClick = props.onClick,
-    asChild = props.asChild,
-    children = props.children,
-    cls = props.className;
-    props.replace;
-    props.state;
-    var restProps = _objectWithoutProperties(props, _excluded3);
-  var onClick = useEvent(function (event) {
-    // ignores the navigation when clicked using right mouse button or
-    // by holding a special modifier key: ctrl, command, win, alt, shift
-    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0) return;
-    _onClick === null || _onClick === void 0 || _onClick(event);
-    if (!event.defaultPrevented) {
-      event.preventDefault();
-      navigate(_href, props);
-    }
-  });
-
-  // handle nested routers and absolute paths
-  var href = router.hrefs(_href[0] === "~" ? _href.slice(1) : router.base + _href, router // pass router as a second argument for convinience
-  );
-  return asChild && React.isValidElement(children) ? React.cloneElement(children, {
-    onClick: onClick,
-    href: href
-  }) : React.createElement("a", _objectSpread(_objectSpread({}, restProps), {}, {
-    onClick: onClick,
-    href: href,
-    // `className` can be a function to apply the class if this link is active
-    className: cls !== null && cls !== void 0 && cls.call ? cls(path === href) : cls,
-    children: children,
-    ref: ref
-  }));
-});
-var flattenChildren = function flattenChildren(children) {
-  return Array.isArray(children) ? children.flatMap(function (c) {
-    return flattenChildren(c && c.type === React.Fragment ? c.props.children : c);
-  }) : [children];
-};
-var Switch = function Switch(_ref10) {
-  var children = _ref10.children,
-    location = _ref10.location;
-  var router = useRouter();
-  var _useLocationFromRoute5 = useLocationFromRouter(router),
-    _useLocationFromRoute6 = _slicedToArray(_useLocationFromRoute5, 1),
-    originalLocation = _useLocationFromRoute6[0];
-  var _iterator = _createForOfIteratorHelper(flattenChildren(children)),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var element = _step.value;
-      var match = 0;
-      if (React.isValidElement(element) &&
-      // we don't require an element to be of type Route,
-      // but we do require it to contain a truthy `path` prop.
-      // this allows to use different components that wrap Route
-      // inside of a switch, for example <AnimatedRoute />.
-      (match = matchRoute(router.parser, element.props.path, location || originalLocation, element.props.nest))[0]) return React.cloneElement(element, {
-        match: match
-      });
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return null;
-};
-
-/* eslint-disable react/jsx-props-no-spreading */
-var RoutesContext = /*#__PURE__*/React.createContext(null);
-var useRoutesContext = function useRoutesContext() {
-  return React.useContext(RoutesContext);
-};
-var propTypes$o = {
-  children: PropTypes.node.isRequired,
-  routes: PropTypes.objectOf(PropTypes.string).isRequired,
-  basePath: PropTypes.string
-};
-var defaultProps$o = {
-  basePath: null
-};
-function RoutesProvider(_ref) {
-  var routes = _ref.routes,
-    basePath = _ref.basePath,
-    children = _ref.children;
-  var value = React.useMemo(function () {
-    return {
-      routes: routes,
-      basePath: basePath
-    };
-  }, [routes, basePath]);
-  return /*#__PURE__*/jsxRuntime.jsx(RoutesContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-RoutesProvider.propTypes = propTypes$o;
-RoutesProvider.defaultProps = defaultProps$o;
-var compilers = {};
-function generatePath(fullPath, data) {
-  var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var fullUrlMatches = fullPath.match(/^(https?:\/\/)/);
-  if (typeof compilers[fullPath] === 'undefined') {
-    compilers[fullPath] = pathToRegexp.compile(fullPath.replace(/^(https?:\/\/)/, ''), opts);
-  }
-  var compiler = compilers[fullPath];
-  return fullUrlMatches !== null ? "".concat(fullUrlMatches[1]).concat(compiler(data)) : compiler(data);
-}
-var useUrlGeneratorPathToRepexp = function useUrlGeneratorPathToRepexp() {
-  var _ref2 = useRoutesContext() || {},
-    _ref2$routes = _ref2.routes,
-    routes = _ref2$routes === void 0 ? null : _ref2$routes,
-    _ref2$basePath = _ref2.basePath,
-    basePath = _ref2$basePath === void 0 ? null : _ref2$basePath;
-  var urlGenerator = React.useCallback(function (key, data, opts) {
-    var path = routes !== null ? routes[key] || null : null;
-    if (path === null) {
-      return null;
-    }
-    var url = generatePath(path, data, opts);
-    return basePath !== null ? "".concat(basePath.replace(/\/$/, ''), "/").concat(url.replace(/^\//, '')) : url;
-  }, [routes, basePath]);
-  return urlGenerator;
-};
-var useUrlGeneratorPathToRegexp = useUrlGeneratorPathToRepexp;
-var useRoutes = function useRoutes() {
-  var _useRoutesContext = useRoutesContext(),
-    routes = _useRoutesContext.routes;
-  return routes;
-};
-var useRoutes$1 = useRoutes;
-function parseLocation(location) {
-  var search = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var hash = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var _split = (location || '').split('?', 2),
-    _split2 = _slicedToArray(_split, 2),
-    pathname = _split2[0],
-    _split2$ = _split2[1],
-    searchFromPath = _split2$ === void 0 ? null : _split2$;
-  var _split3 = (searchFromPath || '').split('#', 2),
-    _split4 = _slicedToArray(_split3, 2),
-    searchWithoutHash = _split4[0],
-    _split4$ = _split4[1],
-    hashFromPath = _split4$ === void 0 ? null : _split4$;
-  return {
-    pathname: pathname !== '' ? pathname : '/',
-    search: search || searchWithoutHash || null,
-    hash: hash || hashFromPath || null
-  };
-}
-function useMemoryRouter() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref3$path = _ref3.path,
-    path = _ref3$path === void 0 ? '/' : _ref3$path,
-    _ref3$static = _ref3["static"],
-    staticLocation = _ref3$static === void 0 ? false : _ref3$static;
-    _ref3.record;
-  var currentPath = parseLocation(path);
-  var emitter = mitt();
-  var navigateImplementation = function navigateImplementation(newPath) {
-    var newParsedPath = parseLocation(newPath);
-    currentPath = newParsedPath;
-    emitter.emit('navigate', path);
-  };
-  var navigate = !staticLocation ? navigateImplementation : function () {
-    return null;
-  };
-  var subscribe = function subscribe(cb) {
-    emitter.on('navigate', cb);
-    return function () {
-      return emitter.off('navigate', cb);
-    };
-  };
-  function reset() {
-    navigateImplementation(path);
-  }
-  var locationHook = function locationHook() {
-    return [React.useSyncExternalStore(subscribe, function () {
-      return currentPath.pathname;
-    }), navigate];
-  };
-  var searchHook = function searchHook() {
-    return React.useSyncExternalStore(subscribe, function () {
-      return currentPath.search || '';
-    });
-  };
-  return {
-    hook: locationHook,
-    searchHook: searchHook,
-    reset: reset,
-    navigate: navigate
-  };
-}
-
-// eslint-disable-next-line import/prefer-default-export
-var routes = PropTypes.shape({
-  home: PropTypes.string.isRequired,
-  screen: PropTypes.string.isRequired
-});
-
-function useKeyboardShortcuts() {
-  var shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  React.useEffect(function () {
-    var onKey = function onKey(e) {
-      if (['input', 'textarea'].reduce(function (foundMatch, match) {
-        return foundMatch || e.target.matches(match);
-      }, false)) {
-        return;
-      }
-      var key = e.key;
-      var lowercaseKey = key.toLowerCase();
-      if (typeof shortcuts[lowercaseKey] !== 'undefined') {
-        shortcuts[lowercaseKey]();
-      }
-    };
-    if (!disabled) {
-      window.addEventListener('keydown', onKey);
-    }
-    return function () {
-      if (!disabled) {
-        window.removeEventListener('keydown', onKey);
-      }
-    };
-  }, [disabled, shortcuts]);
-}
-
-function checkClickable(el) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var parentDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var _ref = options || {},
-    _ref$maxParentDistanc = _ref.maxParentDistance,
-    maxParentDistance = _ref$maxParentDistanc === void 0 ? 5 : _ref$maxParentDistanc,
-    _ref$tags = _ref.tags,
-    tags = _ref$tags === void 0 ? ['BUTTON', 'A', 'INPUT', 'TEXTAREA'] : _ref$tags;
-  var _ref2 = el || {},
-    _ref2$tagName = _ref2.tagName,
-    tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
-    _ref2$parentNode = _ref2.parentNode,
-    parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode;
-    _ref2.dataset;
-  if (tagName === 'BODY') {
-    return false;
-  }
-
-  // Check if video is suspended
-  // if (
-  //     tagName === 'VIDEO' &&
-  //     typeof dataset.isSuspended !== 'undefined' &&
-  //     (dataset.isSuspended === 'true' || dataset.isSuspended === true)
-  // ) {
-  //     return true;
-  // }
-
-  if (tags.map(function (it) {
-    return it.toLowerCase();
-  }).indexOf(tagName.toLowerCase()) !== -1) {
-    return true;
-  }
-  if (parentDistance < maxParentDistance) {
-    return checkClickable(parentNode, options, parentDistance + 1);
-  }
-  return false;
-}
-
-function useScreenInteraction() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    screens = _ref.screens,
-    screenIndex = _ref.screenIndex,
-    screenWidth = _ref.screenWidth,
-    _ref$disableCurrentSc = _ref.disableCurrentScreenNavigation,
-    disableCurrentScreenNavigation = _ref$disableCurrentSc === void 0 ? false : _ref$disableCurrentSc,
-    _ref$clickOnSiblings = _ref.clickOnSiblings,
-    clickOnSiblings = _ref$clickOnSiblings === void 0 ? false : _ref$clickOnSiblings,
-    _ref$nextScreenWidthP = _ref.nextScreenWidthPercent,
-    nextScreenWidthPercent = _ref$nextScreenWidthP === void 0 ? 0.5 : _ref$nextScreenWidthP,
-    _ref$onInteract = _ref.onInteract,
-    onInteract = _ref$onInteract === void 0 ? null : _ref$onInteract,
-    _ref$onNavigate = _ref.onNavigate,
-    onNavigate = _ref$onNavigate === void 0 ? null : _ref$onNavigate;
-  var _useState = React.useState(screens.reduce(function (map, _ref2) {
-      var id = _ref2.id;
-      return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, true));
-    }, {})),
-    _useState2 = _slicedToArray(_useState, 2),
-    screensInteractionEnabled = _useState2[0],
-    setScreensInteractionEnabled = _useState2[1];
-  var _ref3 = screens[screenIndex] || {},
-    _ref3$id = _ref3.id,
-    screenId = _ref3$id === void 0 ? screenIndex : _ref3$id;
-  var _screensInteractionEn = screensInteractionEnabled[screenId],
-    currentScreenInteractionEnabled = _screensInteractionEn === void 0 ? true : _screensInteractionEn;
-  var updateInteraction = React.useCallback(function (newValue) {
-    var _screensInteractionEn2 = screensInteractionEnabled[screenId],
-      currentValue = _screensInteractionEn2 === void 0 ? true : _screensInteractionEn2;
-    if (currentValue !== newValue) {
-      setScreensInteractionEnabled(screens.reduce(function (map, _ref4) {
-        var id = _ref4.id;
-        return screenId === id ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, newValue)) : _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, typeof screensInteractionEnabled[id] === 'undefined' || screensInteractionEnabled[id] === true));
-      }, {}));
-    }
-  }, [screens, screenId, screensInteractionEnabled, setScreensInteractionEnabled]);
-  var enableInteraction = React.useCallback(function () {
-    return updateInteraction(true);
-  }, [updateInteraction]);
-  var disableInteraction = React.useCallback(function () {
-    return updateInteraction(false);
-  }, [updateInteraction]);
-  var interact = React.useCallback(function (_ref5) {
-    var event = _ref5.event,
-      target = _ref5.target,
-      currentTarget = _ref5.currentTarget,
-      x = _ref5.x,
-      y = _ref5.y,
-      index = _ref5.index;
-    if (onInteract !== null) {
-      onInteract({
-        event: event,
-        target: target,
-        currentTarget: currentTarget,
-        index: index,
-        x: x,
-        y: y
-      });
-    }
-    var screensCount = screens.length;
-    var tappedCurrent = screenIndex === index;
-    if (disableCurrentScreenNavigation && tappedCurrent || checkClickable(target) || tappedCurrent && !currentScreenInteractionEnabled) {
-      return;
-    }
-    var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
-      width = _currentTarget$getBou.width;
-    var margin = (width - screenWidth) / 2;
-    var screenPreviousZone = screenWidth * (1 - nextScreenWidthPercent);
-    var previousZone = margin + screenPreviousZone;
-    var direction = x < previousZone ? 'previous' : 'next';
-    var lastIndex = screensCount - 1;
-    var nextIndex = index;
-    if (direction === 'previous' && !clickOnSiblings) {
-      nextIndex = Math.max(0, screenIndex - 1);
-    } else if (direction === 'next' && !clickOnSiblings) {
-      nextIndex = Math.min(lastIndex, screenIndex + 1);
-    }
-    if (onNavigate !== null) {
-      onNavigate({
-        index: index,
-        newIndex: nextIndex,
-        direction: direction,
-        end: index === nextIndex && nextIndex === lastIndex
-      });
-    }
-  }, [screens, screenIndex, screensInteractionEnabled, currentScreenInteractionEnabled, nextScreenWidthPercent, disableCurrentScreenNavigation, clickOnSiblings, onInteract, onNavigate]);
-  return {
-    interact: interact,
-    currentScreenInteractionEnabled: currentScreenInteractionEnabled,
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  };
-}
-
-function checkDraggable(el) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var parentDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var _ref = options || {},
-    _ref$maxParentDistanc = _ref.maxParentDistance,
-    maxParentDistance = _ref$maxParentDistanc === void 0 ? 5 : _ref$maxParentDistanc;
-  var _ref2 = el || {},
-    _ref2$tagName = _ref2.tagName,
-    tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
-    _ref2$parentNode = _ref2.parentNode,
-    parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode,
-    _ref2$dataset = _ref2.dataset,
-    dataset = _ref2$dataset === void 0 ? {} : _ref2$dataset;
-  if (tagName === 'BODY') {
-    return false;
-  }
-  if (typeof dataset.draggable !== 'undefined') {
-    return true;
-  }
-  if (parentDistance < maxParentDistance) {
-    return checkDraggable(parentNode, options, parentDistance + 1);
-  }
-  return false;
-}
-
-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$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "ariaLabel", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$n = {
-  type: PropTypes.string,
-  theme: core.PropTypes.buttonTheme,
-  size: core.PropTypes.buttonSize,
-  href: PropTypes.string,
-  external: PropTypes.bool,
-  direct: PropTypes.bool,
-  target: PropTypes.string,
-  label: core.PropTypes.label,
-  children: core.PropTypes.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,
-  ariaLabel: PropTypes.string,
-  className: PropTypes.string,
-  iconClassName: PropTypes.string,
-  labelClassName: PropTypes.string,
-  onClick: PropTypes.func,
-  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any // eslint-disable-line
-  })])
-};
-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,
-  ariaLabel: null,
-  className: null,
-  iconClassName: null,
-  labelClassName: null,
-  onClick: null,
-  refButton: null
-};
-var Button = function Button(_ref) {
-  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,
-    ariaLabel = _ref.ariaLabel,
-    onClick = _ref.onClick,
-    className = _ref.className,
-    iconClassName = _ref.iconClassName,
-    labelClassName = _ref.labelClassName,
-    refButton = _ref.refButton,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  var finalLabel = label || children;
-  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(components.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)], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$g.withIcon, hasIcon), styles$g.withIconColumns, hasIconColumns), styles$g.withText, text !== null), styles$g.isLink, href !== null), styles$g.asLink, asLink), styles$g.isDisabled, disabled), styles$g.isLoading, loading), className, className !== null)]);
-  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 = utils.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, {
-      href: 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,
-    "aria-label": ariaLabel,
-    tabIndex: focusable ? '0' : '-1'
-  }), content);
-};
-Button.propTypes = propTypes$n;
-Button.defaultProps = defaultProps$n;
-var Button$1 = Button;
-
-var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
-
-var _excluded$9 = ["iconClassName", "className"];
-var propTypes$m = {
-  iconClassName: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$m = {
-  iconClassName: null,
-  className: null
-};
-var IconButton = function IconButton(_ref) {
-  var iconClassName = _ref.iconClassName,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
-    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
-    labelClassName: styles$f.label,
-    iconClassName: classNames([styles$f.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
-  }, props));
-};
-IconButton.propTypes = propTypes$m;
-IconButton.defaultProps = defaultProps$m;
-var IconButton$1 = IconButton;
-
-var _excluded$8 = ["single", "className"];
-var propTypes$l = {
-  single: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps$l = {
-  single: false,
-  className: null
-};
-var CloseMenuButton = function CloseMenuButton(_ref) {
-  var single = _ref.single,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$8);
-  var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
-    className: classNames([_defineProperty({}, className, className !== null)]),
-    label: intl.formatMessage({
-      id: "dIvwcD",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    icon: /*#__PURE__*/React.createElement("svg", {
-      width: "19",
-      height: "23",
-      viewBox: "0 0 19 23",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, !single ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mask", {
-      id: "path-1-inside-1_560_19911",
-      fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
-    })), /*#__PURE__*/React.createElement("path", {
-      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
-      fill: "currentColor",
-      mask: "url(#path-1-inside-1_560_19911)"
-    })) : null, /*#__PURE__*/React.createElement("rect", {
-      x: "3.5",
-      y: "0.5",
-      width: "15",
-      height: "19",
-      rx: "2.5",
-      stroke: "currentColor"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M7.35333 6.35333L14.6467 13.6467",
-      stroke: "currentColor",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M7.35333 13.6467L14.6467 6.35333",
-      stroke: "currentColor"
-    }))
-  }, props));
-};
-CloseMenuButton.propTypes = propTypes$l;
-CloseMenuButton.defaultProps = defaultProps$l;
-var CloseMenuButton$1 = CloseMenuButton;
-
-var _excluded$7 = ["className", "iconClassName"];
-var propTypes$k = {
-  className: PropTypes.string,
-  iconClassName: PropTypes.string
-};
-var defaultProps$k = {
-  className: null,
-  iconClassName: null
-};
-var MenuButton = function MenuButton(_ref) {
-  var className = _ref.className;
-    _ref.iconClassName;
-    var props = _objectWithoutProperties(_ref, _excluded$7);
-  var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
-    className: classNames([_defineProperty({}, className, className !== null)]),
-    label: intl.formatMessage({
-      id: "F/gl4b",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Menu"
-      }]
-    }),
-    iconPosition: "right",
-    icon: /*#__PURE__*/React.createElement("svg", {
-      width: "19",
-      height: "23",
-      viewBox: "0 0 19 23",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("mask", {
-      id: "path-1-inside-1_572_15622",
-      fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
-    })), /*#__PURE__*/React.createElement("path", {
-      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
-      fill: "currentColor",
-      mask: "url(#path-1-inside-1_572_15622)"
-    }), /*#__PURE__*/React.createElement("rect", {
-      x: "3.5",
-      y: "0.5",
-      width: "15",
-      height: "19",
-      rx: "2.5",
-      stroke: "currentColor"
-    }))
-  }, props));
-};
-MenuButton.propTypes = propTypes$k;
-MenuButton.defaultProps = defaultProps$k;
-var MenuButton$1 = MenuButton;
-
-var _excluded$6 = ["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$6);
-  var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
-    className: classNames([_defineProperty({}, className, className !== null)]),
-    label: intl.formatMessage({
-      id: "7tw6U2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Share"
-      }]
-    }),
-    iconPosition: "left",
-    icon: /*#__PURE__*/React.createElement("svg", {
-      width: "16",
-      height: "22",
-      viewBox: "0 0 16 22",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.55806 0.183058C7.80213 -0.0610194 8.19786 -0.0610194 8.44194 0.183058L12.4194 4.16053C12.6635 4.40461 12.6635 4.80034 12.4194 5.04442C12.1753 5.2885 11.7796 5.2885 11.5355 5.04442L8.625 2.13388V11.25H7.375V2.13388L4.46446 5.04442C4.22039 5.2885 3.82466 5.2885 3.58058 5.04442C3.3365 4.80034 3.3365 4.40461 3.58058 4.16053L7.55806 0.183058Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M16 18.25V10.25C16 8.59315 14.6569 7.25 13 7.25C14.1046 7.25 15 8.59315 15 10.25V18.25C15 19.3546 14.1046 20.25 13 20.25H3C1.89543 20.25 1 19.3546 1 18.25V10.25C1 8.59315 1.89543 7.25 3 7.25C1.34315 7.25 0 8.59315 0 10.25V18.25C0 19.9069 1.34315 21.25 3 21.25H13C14.6569 21.25 16 19.9069 16 18.25Z",
-      fill: "currentColor"
-    }))
-  }, props));
-};
-ShareButton.propTypes = propTypes$j;
-ShareButton.defaultProps = defaultProps$j;
-var ShareButton$1 = ShareButton;
-
-var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
-
-var propTypes$i = {
-  className: PropTypes.string,
-  progressSpring: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  button: PropTypes.node,
-  toggledButton: PropTypes.node,
-  toggledButtonClassName: PropTypes.string
-};
-var defaultProps$i = {
-  className: null,
-  progressSpring: null,
-  button: null,
-  toggledButton: null,
-  toggledButtonClassName: null
-};
-var ToggleButton = function ToggleButton(_ref) {
-  var className = _ref.className,
-    progressSpring = _ref.progressSpring,
-    button = _ref.button,
-    toggledButton = _ref.toggledButton,
-    toggledButtonClassName = _ref.toggledButtonClassName;
-  if (button === null) return false;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement(web.animated.div, {
-    className: styles$e.normal,
-    style: {
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat(p * -100, "%)");
-      })
-    }
-  }, button), /*#__PURE__*/React.createElement(web.animated.div, {
-    className: classNames([styles$e.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
-    style: {
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat((p - 1) * -100, "%)");
-      })
-    }
-  }, toggledButton));
-};
-ToggleButton.propTypes = propTypes$i;
-ToggleButton.defaultProps = defaultProps$i;
-var ToggleButton$1 = ToggleButton;
-
-var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
-
-var propTypes$h = {
-  className: PropTypes.string,
-  progressSpring: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  theme: core.PropTypes.viewerTheme,
-  children: PropTypes.node
-};
-var defaultProps$h = {
-  className: null,
-  progressSpring: null,
-  theme: null,
-  children: null
-};
-var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
-  var className = _ref.className,
-    progressSpring = _ref.progressSpring,
-    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;
-  var backgroundColorStyle = utils.getStyleFromColor(brandBackgroundColor, 'backgroundColor');
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
-    style: {
-      pointerEvents: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(web.animated.div, {
-    className: styles$d.heightContainer,
-    style: _objectSpread({
-      opacity: progressSpring,
-      transform: progressSpring.to(function (p) {
-        return "translateY(".concat((1 - p) * -2, "rem)");
-      }),
-      pointerEvents: progressSpring.to(function (p) {
-        return p < 0.25 ? 'none' : 'auto';
-      }),
-      zIndex: progressSpring.to(function (p) {
-        return Math.round(2 + p);
-      })
-    }, backgroundColorStyle)
-  }, children), /*#__PURE__*/React.createElement(web.animated.div, {
-    className: styles$d.backdrop,
-    style: {
-      opacity: progressSpring.to(function (p) {
-        return utils.easings.easeOutQuint(p);
-      })
-    }
-  }));
-};
-ViewerMenuContainer.propTypes = propTypes$h;
-ViewerMenuContainer.defaultProps = defaultProps$h;
-var MenuContainer = ViewerMenuContainer;
-
-var styles$c = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","outlineBounce":"micromag-viewer-menus-menu-dot-outlineBounce"};
-
-var propTypes$g = {
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  colors: PropTypes.shape({
-    primary: PropTypes.string,
-    secondary: PropTypes.string
-  }),
-  count: PropTypes.number,
-  subIndex: PropTypes.number,
-  vertical: PropTypes.bool,
-  onClick: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$g = {
-  current: false,
-  active: false,
-  colors: null,
-  count: 1,
-  subIndex: 0,
-  vertical: false,
-  onClick: null,
-  className: null
-};
-var ViewerMenuDot = function ViewerMenuDot(_ref) {
-  var current = _ref.current,
-    active = _ref.active,
-    colors = _ref.colors,
-    count = _ref.count,
-    subIndex = _ref.subIndex,
-    vertical = _ref.vertical,
-    _onClick = _ref.onClick,
-    className = _ref.className;
-  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(255, 255, 255, 0.25)' : _ref2$secondary;
-  var _useSpring = core$1.useSpring(function () {
-      return {
-        scaleX: 0,
-        config: {
-          tension: 200,
-          friction: 30
-        }
-      };
-    }),
-    _useSpring2 = _slicedToArray(_useSpring, 2),
-    dotSpringStyles = _useSpring2[0],
-    setDotSpringProps = _useSpring2[1];
-  React.useEffect(function () {
-    var activeRatio = active ? 1 : 0;
-    var ratio = count > 1 && current ? (subIndex + 1) / count : activeRatio;
-    var scaleX = ratio;
-    setDotSpringProps.start({
-      scaleX: scaleX,
-      immediate: !current
-    });
-  }, [active, current, subIndex, count, setDotSpringProps]);
-  return /*#__PURE__*/React.createElement("li", {
-    className: classNames([styles$c.container, _defineProperty(_defineProperty(_defineProperty({}, styles$c.active, current), styles$c.vertical, vertical), className, className !== null)]),
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles$c.button,
-    onClick: function onClick() {
-      var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      if (e !== null) {
-        e.stopPropagation();
-      }
-      if (_onClick !== null) {
-        _onClick();
-      }
-    },
-    tabIndex: "-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.dot,
-    style: {
-      backgroundColor: secondary
-    }
-  }, /*#__PURE__*/React.createElement(web.animated.div, {
-    className: styles$c.progress,
-    style: _objectSpread(_objectSpread({}, dotSpringStyles), {}, {
-      backgroundColor: primary
-    })
-  }))));
-};
-ViewerMenuDot.propTypes = propTypes$g;
-ViewerMenuDot.defaultProps = defaultProps$g;
-var MenuDot = ViewerMenuDot;
-
-var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
-
-var _excluded$5 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "buttons", "withItemClick", "withoutScreensMenu", "onClose", "className"];
-var propTypes$f = {
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
-  items: core.PropTypes.menuItems,
-  onClickDot: PropTypes.func,
-  onClickScreensMenu: PropTypes.func,
-  colors: PropTypes.shape({
-    primary: PropTypes.string,
-    secondary: PropTypes.string
-  }),
-  buttons: PropTypes.node,
-  closeable: PropTypes.bool,
-  withItemClick: PropTypes.bool,
-  withoutScreensMenu: PropTypes.bool,
-  onClose: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$f = {
-  direction: 'horizontal',
-  items: [],
-  onClickDot: null,
-  onClickScreensMenu: null,
-  colors: null,
-  buttons: null,
-  closeable: false,
-  withItemClick: false,
-  withoutScreensMenu: false,
-  onClose: null,
-  className: null
-};
-var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var direction = _ref.direction,
-    items = _ref.items,
-    onClickDot = _ref.onClickDot,
-    onClickScreensMenu = _ref.onClickScreensMenu,
-    colors = _ref.colors,
-    closeable = _ref.closeable,
-    buttons = _ref.buttons,
-    withItemClick = _ref.withItemClick,
-    withoutScreensMenu = _ref.withoutScreensMenu,
-    onClose = _ref.onClose,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$5);
-  var _ref2 = colors || {},
-    _ref2$primary = _ref2.primary,
-    primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
-  var intl = reactIntl.useIntl();
-  var currentIndex = items.findIndex(function (_ref3) {
-    var _ref3$current = _ref3.current,
-      current = _ref3$current === void 0 ? false : _ref3$current;
-    return current;
-  });
-  var _ref4 = props || {},
-    style = _ref4.style;
-  return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$b.container, _defineProperty(_defineProperty({}, className, className !== null), styles$b.vertical, direction === 'vertical')]),
-    "aria-label": intl.formatMessage({
-      id: "bLYuuN",
-      defaultMessage: [{
-        "type": 0,
-        "value": "You are on screen "
-      }, {
-        "type": 1,
-        "value": "current"
-      }, {
-        "type": 0,
-        "value": " of "
-      }, {
-        "type": 1,
-        "value": "total"
-      }, {
-        "type": 0,
-        "value": "."
-      }]
-    }, {
-      current: currentIndex + 1,
-      total: items.length
-    }),
-    style: style
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$b.items
-  }, items.map(function (item, index) {
-    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(MenuDot, {
-      key: "item-".concat(index + 1),
-      current: current,
-      active: index <= currentIndex,
-      colors: colors,
-      count: count,
-      subIndex: subIndex,
-      onClick: function onClick() {
-        if ((withItemClick || withoutScreensMenu) && onClickDot !== null) {
-          onClickDot(item);
-        } else if (!withItemClick && onClickScreensMenu !== null) {
-          onClickScreensMenu();
-        }
-      },
-      vertical: direction === 'vertical'
-    });
-  }), closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$b.closeButton,
-    style: {
-      color: primary
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles$b.closeButton,
-    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"
-      }]
-    })
-  }, /*#__PURE__*/React.createElement(components.CloseIcon, null))) : null, buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$b.buttons
-  }, buttons) : null));
-};
-ViewerMenuDots.propTypes = propTypes$f;
-ViewerMenuDots.defaultProps = defaultProps$f;
-var MenuDots = ViewerMenuDots;
-
-var propTypes$e = {
-  className: PropTypes.string
-};
-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: "11.5px",
-    height: "17.5px",
-    viewBox: "0 0 11.5 17.5",
-    className: classNames([_defineProperty({}, className, className !== null)])
-  }, /*#__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$e;
-StackIcon.defaultProps = defaultProps$e;
-var StackIcon$1 = StackIcon;
-
-var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","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","screen":"micromag-viewer-menus-menu-screen-screen","pulse":"micromag-viewer-menus-menu-screen-pulse"};
-
-var propTypes$d = {
-  className: PropTypes.string,
-  item: core.PropTypes.menuItem,
-  index: PropTypes.number,
-  onClick: PropTypes.func,
-  screenSize: core.PropTypes.screenSize,
-  focusable: PropTypes.bool
-};
-var defaultProps$d = {
-  className: null,
-  item: core.PropTypes.menuItem,
-  index: 0,
-  onClick: null,
-  screenSize: null,
-  focusable: true
-};
-var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
-  var className = _ref.className,
-    item = _ref.item,
-    index = _ref.index,
-    _onClick = _ref.onClick,
-    screenSize = _ref.screenSize,
-    focusable = _ref.focusable;
-  var intl = reactIntl.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, _defineProperty(_defineProperty({}, className, className !== null), styles$a.isCurrent, current)]),
-    style: {
-      paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles$a.button,
-    onClick: function onClick() {
-      var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      if (e !== null) {
-        e.stopPropagation();
-      }
-      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$1, {
-    className: styles$a.subScreenIcon
-  })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(components.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 MenuScreen = ViewerMenuScreen;
-
-var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","badge":"micromag-viewer-menus-menu-preview-badge","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
-
-var _excluded$4 = ["textAlign"];
-var propTypes$c = {
-  viewerTheme: core.PropTypes.viewerTheme,
-  header: PropTypes.node,
-  footer: PropTypes.node,
-  screenSize: core.PropTypes.screenSize,
-  title: PropTypes.string,
-  menuWidth: PropTypes.number,
-  items: core.PropTypes.menuItems,
-  focusable: PropTypes.bool,
-  onClickScreen: PropTypes.func,
-  maxThumbsWidth: PropTypes.number,
-  paddingTop: PropTypes.number,
-  scrollDisabled: PropTypes.bool,
-  // @todo to reimplement:
-  // shouldLoad: PropTypes.bool,
-  // toggleFullscreen: PropTypes.func,
-  // fullscreenActive: PropTypes.bool,
-  // fullscreenEnabled: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps$c = {
-  viewerTheme: null,
-  header: null,
-  footer: null,
-  screenSize: null,
-  title: null,
-  menuWidth: null,
-  items: [],
-  focusable: true,
-  // shouldLoad: true,
-  onClickScreen: null,
-  maxThumbsWidth: 140,
-  paddingTop: null,
-  scrollDisabled: false,
-  // toggleFullscreen: null,
-  // fullscreenActive: false,
-  // fullscreenEnabled: false,
-  className: null
-};
-var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
-  var viewerTheme = _ref.viewerTheme,
-    header = _ref.header,
-    footer = _ref.footer,
-    screenSize = _ref.screenSize,
-    title = _ref.title,
-    menuWidth = _ref.menuWidth,
-    items = _ref.items,
-    focusable = _ref.focusable,
-    onClickScreen = _ref.onClickScreen,
-    maxThumbsWidth = _ref.maxThumbsWidth,
-    paddingTop = _ref.paddingTop,
-    scrollDisabled = _ref.scrollDisabled,
-    className = _ref.className;
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    containerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.width,
-    contentWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // @note cool, should be in recipes
-
-  // @todo reimplement the brand logo
-  // const { background = null, logo: brandLogo = null } = viewerTheme || {};
-  var _ref2 = viewerTheme || {},
-    _ref2$background = _ref2.background,
-    background = _ref2$background === void 0 ? null : _ref2$background,
-    _ref2$textStyles = _ref2.textStyles,
-    textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles;
-  var _ref3 = background || {},
-    _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 brandImageStyle = brandImageUrl !== null ? {
-    backgroundImage: "url(".concat(brandImageUrl, ")")
-  } : null;
-  var _ref5 = textStyles || {},
-    _ref5$title = _ref5.title,
-    titleStyles = _ref5$title === void 0 ? null : _ref5$title;
-  // eslint-disable-next-line no-unused-vars
-  var _ref6 = titleStyles || {};
-    _ref6.textAlign;
-    var otherTitleStyles = _objectWithoutProperties(_ref6, _excluded$4);
-  var finalTitleStyles = titleStyles !== null ? utils.getStyleFromText(otherTitleStyles) : null;
-  // const { url: brandLogoUrl = null } = brandLogo || {};
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    screensMounted = _useState2[0],
-    setScreensMounted = _useState2[1];
-  var hasTitle = title !== null;
-
-  // @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],
-  // );
-
-  React.useEffect(function () {
-    if (items.length === screensMounted.length) {
-      return function () {};
-    }
-    var timeout = setTimeout(function () {
-      setScreensMounted([].concat(_toConsumableArray(screensMounted), [true]));
-    }, 40);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [items, screensMounted, setScreensMounted]);
-  var menuPaddingTop = paddingTop + 10;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
-    style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
-      width: menuWidth
-    }),
-    "aria-hidden": focusable ? null : 'true'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.content,
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$9.scroll,
-    disabled: scrollDisabled
-  }, hasTitle && header === null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$9.titleContainer,
-    style: {
-      paddingTop: menuPaddingTop
-    }
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: styles$9.title,
-    style: _objectSpread({}, finalTitleStyles)
-  }, title)) : /*#__PURE__*/React.createElement("div", {
-    className: styles$9.headerContainer,
-    style: {
-      paddingTop: menuPaddingTop
-    }
-  }, header), /*#__PURE__*/React.createElement("nav", {
-    className: styles$9.nav,
-    style: !hasTitle ? {
-      paddingTop: paddingTop
-    } : null
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$9.items
-  }, items.map(function (item, index) {
-    var _ref8 = item || {},
-      screenId = _ref8.screenId;
-    var itemStyles = {
-      width: "".concat(100 / thumbsPerLine, "%")
-    };
-    var _ref9 = screenSize || {},
-      screenWidth = _ref9.width,
-      screenHeight = _ref9.height;
-    var screenMounted = screensMounted[index] || false;
-    return /*#__PURE__*/React.createElement("li", {
-      key: "item-".concat(screenId),
-      className: styles$9.item,
-      style: itemStyles
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$9.inner
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles$9.frame, _defineProperty({}, styles$9.isLoading, !screenMounted)]),
-      style: {
-        paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
-      }
-    }, screenMounted ? /*#__PURE__*/React.createElement(MenuScreen, {
-      className: styles$9.screen,
-      item: item,
-      index: index,
-      screenSize: screenSize,
-      onClick: onClickScreen,
-      focusable: focusable
-    }) : null)));
-  }))), footer)));
-};
-ViewerMenuPreview.propTypes = propTypes$c;
-ViewerMenuPreview.defaultProps = defaultProps$c;
-var MenuPreview = ViewerMenuPreview;
-
-var styles$8 = {"container":"micromag-viewer-partials-micromag-preview-container","cover":"micromag-viewer-partials-micromag-preview-cover","info":"micromag-viewer-partials-micromag-preview-info","url":"micromag-viewer-partials-micromag-preview-url","title":"micromag-viewer-partials-micromag-preview-title"};
-
-var propTypes$b = {
-  screen: core.PropTypes.screen,
-  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(components.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 MicromagPreview$1 = MicromagPreview;
-
-var styles$7 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","content":"micromag-viewer-menus-menu-share-content","inner":"micromag-viewer-menus-menu-share-inner","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options"};
-
-var propTypes$a = {
-  viewerTheme: core.PropTypes.viewerTheme,
-  menuWidth: PropTypes.number,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  items: core.PropTypes.menuItems,
-  focusable: PropTypes.bool,
-  paddingTop: PropTypes.number,
-  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,
-  paddingTop: null,
-  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,
-    paddingTop = _ref.paddingTop,
-    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$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 brandImageStyle = brandImageUrl !== null ? {
-    backgroundImage: "url(".concat(brandImageUrl, ")")
-  } : null;
-  var coverScreen = React.useMemo(function () {
-    var _ref5 = items[0] || {},
-      _ref5$screen = _ref5.screen,
-      screen = _ref5$screen === void 0 ? null : _ref5$screen;
-    return screen;
-  }, [items]);
-  var currentScreen = React.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 = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    shareCurrentScreen = _useState2[0],
-    setShareCurrentScreen = _useState2[1];
-  var onShareModeChange = React.useCallback(function () {
-    setShareCurrentScreen(function (value) {
-      return !value;
-    });
-  }, [setShareCurrentScreen]);
-  var finalShareUrl = React.useMemo(function () {
-    return shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex + 1) : shareUrl;
-  }, [shareUrl, shareCurrentScreen, currentScreenIndex]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
-    style: _objectSpread(_objectSpread({}, 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.inner,
-    style: {
-      paddingTop: paddingTop
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.header
-  }, /*#__PURE__*/React.createElement(MicromagPreview$1, {
-    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(reactIntl.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 MenuShare = ViewerMenuShare;
-
-var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","ariaAnnouncement":"micromag-viewer-ariaAnnouncement","accessibilityLinks":"micromag-viewer-accessibilityLinks","accessibilityButton":"micromag-viewer-accessibilityButton","disabled":"micromag-viewer-disabled","tooltip":"micromag-viewer-tooltip","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
-
-var propTypes$9 = {
-  story: core.PropTypes.story.isRequired,
-  currentScreenIndex: PropTypes.number,
-  toggleFullscreen: PropTypes.func,
-  fullscreenActive: PropTypes.bool,
-  fullscreenEnabled: PropTypes.bool,
-  menuDotsButtons: PropTypes.node,
-  closeable: PropTypes.bool,
-  withShadow: PropTypes.bool,
-  trackingEnabled: PropTypes.bool,
-  shareBasePath: PropTypes.string,
-  theme: core.PropTypes.viewerTheme,
-  screenSize: core.PropTypes.screenSize,
-  menuWidth: PropTypes.number,
-  previewHeader: PropTypes.node,
-  previewFooter: PropTypes.node,
-  afterShareMenuButton: PropTypes.node,
-  beforeScreensMenuButton: PropTypes.node,
-  withDotItemClick: PropTypes.bool,
-  withoutScreensMenu: PropTypes.bool,
-  withoutShareMenu: PropTypes.bool,
-  onClickScreen: PropTypes.func,
-  // onClickMenu: PropTypes.func,
-  onClickCloseViewer: PropTypes.func,
-  onChange: PropTypes.func,
-  refDots: PropTypes.shape({
-    current: PropTypes.any // eslint-disable-line
-  })
-};
-var defaultProps$9 = {
-  currentScreenIndex: 0,
-  toggleFullscreen: null,
-  fullscreenActive: false,
-  fullscreenEnabled: false,
-  menuDotsButtons: null,
-  closeable: false,
-  withShadow: false,
-  trackingEnabled: false,
-  shareBasePath: null,
-  theme: null,
-  screenSize: null,
-  menuWidth: null,
-  previewHeader: null,
-  previewFooter: null,
-  afterShareMenuButton: null,
-  beforeScreensMenuButton: null,
-  withDotItemClick: false,
-  withoutScreensMenu: false,
-  withoutShareMenu: false,
-  onClickScreen: null,
-  onChange: null,
-  // onClickMenu: null,
-  onClickCloseViewer: null,
-  refDots: null
-};
-var ViewerMenu = function ViewerMenu(_ref) {
-  var story = _ref.story,
-    currentScreenIndex = _ref.currentScreenIndex,
-    toggleFullscreen = _ref.toggleFullscreen,
-    fullscreenActive = _ref.fullscreenActive,
-    fullscreenEnabled = _ref.fullscreenEnabled,
-    menuDotsButtons = _ref.menuDotsButtons,
-    closeable = _ref.closeable,
-    withShadow = _ref.withShadow,
-    shareBasePath = _ref.shareBasePath,
-    trackingEnabled = _ref.trackingEnabled,
-    viewerTheme = _ref.theme,
-    screenSize = _ref.screenSize,
-    menuWidth = _ref.menuWidth,
-    previewHeader = _ref.previewHeader,
-    previewFooter = _ref.previewFooter,
-    afterShareMenuButton = _ref.afterShareMenuButton,
-    beforeScreensMenuButton = _ref.beforeScreensMenuButton,
-    withDotItemClick = _ref.withDotItemClick,
-    withoutScreensMenu = _ref.withoutScreensMenu,
-    withoutShareMenu = _ref.withoutShareMenu,
-    customOnClickScreen = _ref.onClickScreen,
-    onChange = _ref.onChange,
-    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,
-    _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 _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 _useViewerSize = contexts.useViewerSize(),
-    viewerHeight = _useViewerSize.height;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    menuOpened = _useState2[0],
-    setMenuOpened = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    shareOpened = _useState4[0],
-    setShareOpened = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    menuMounted = _useState6[0],
-    setMenuMounted = _useState6[1];
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    navContainerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    navContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var items = React.useMemo(function () {
-    return screens.map(function (it) {
-      var children = screens.filter(function (s) {
-        return s.parentId === it.id;
-      });
-      var currentChild = children.find(function (c) {
-        return c.id === screenId;
-      }) || null;
-      var subIndex = children.findIndex(function (c) {
-        return c.id === screenId;
-      }) + 1;
-      return {
-        screen: it,
-        screenId: it.id,
-        current: screenId === it.id || currentChild !== null,
-        visible: ((it === null || it === void 0 ? void 0 : it.parentId) || null) === null,
-        count: children.length + 1 || 1,
-        subIndex: subIndex || 0
-      };
-    }).filter(function (_ref5) {
-      var _ref5$visible = _ref5.visible,
-        visible = _ref5$visible === void 0 ? true : _ref5$visible;
-      return visible;
-    });
-  }, [screens, screenId]);
-  var trackEvent = hooks.useTrackEvent();
-  var trackScreenEvent = React.useCallback(function (cat, action, label) {
-    if (trackingEnabled) {
-      trackEvent(cat, action, label, {
-        screenId: screenId,
-        screenIndex: currentScreenIndex,
-        screenType: screenType
-      });
-    }
-  }, [trackEvent, screenId, currentScreenIndex, screenType]);
-  var shareUrl = React.useMemo(function () {
-    var base = typeof window !== 'undefined' ? "".concat(window.location.protocol, "//").concat(window.location.host) : '';
-    var isFull = shareBasePath !== null && shareBasePath.indexOf('http') !== -1;
-    var partialPath = shareBasePath !== null ? "".concat(base).concat(shareBasePath) : base;
-    return shareBasePath !== null && isFull ? shareBasePath.replace(/\/$/, '') : partialPath;
-  }, [shareBasePath]);
-  var onOpenMenu = React.useCallback(function () {
-    setMenuOpened(true);
-    setShareOpened(false);
-    trackScreenEvent('viewer_menu', 'open_screens_menu');
-  }, [setMenuOpened, setShareOpened, trackScreenEvent]);
-  var onCloseMenu = React.useCallback(function () {
-    setMenuOpened(false);
-    setShareOpened(false);
-    trackScreenEvent('viewer_menu', 'close_screens_menu');
-  }, [setMenuOpened, setShareOpened, trackScreenEvent]);
-  var onOpenShare = React.useCallback(function () {
-    setShareOpened(true);
-    setMenuOpened(false);
-    trackScreenEvent('viewer_menu', 'open_share_menu');
-  }, [setShareOpened, setMenuOpened, trackScreenEvent]);
-  var onCloseShare = React.useCallback(function () {
-    setShareOpened(false);
-    setMenuOpened(false);
-    trackScreenEvent('viewer_menu', 'close_share_menu');
-  }, [setShareOpened, setMenuOpened, trackScreenEvent]);
-  var onClickScreen = React.useCallback(function (screen) {
-    setMenuOpened(false);
-    if (customOnClickScreen !== null) {
-      customOnClickScreen(screen);
-    }
-    var index = items.findIndex(function (_ref6) {
-      var id = _ref6.id;
-      return id === screenId;
-    });
-    trackScreenEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1));
-  }, [customOnClickScreen, setMenuOpened, items, screenId, trackScreenEvent]);
-  React.useEffect(function () {
-    if (onChange !== null) {
-      onChange({
-        menuOpen: menuOpened,
-        shareOpen: shareOpened
-      });
-    }
-  }, [onChange, menuOpened, shareOpened]);
-  var onShare = React.useCallback(function (type) {
-    // @todo display something to say thanks for sharing?
-    trackScreenEvent('viewer_menu', 'shared_story', type);
-  }, [trackScreenEvent]);
-  var computeShareProgress = React.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) / (viewerHeight * 0.8);
-    var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
-    if (!active) {
-      if (reachedThreshold) onOpenShare();
-      return reachedThreshold ? 1 : 0;
-    }
-    return progress;
-  }, [onOpenShare, viewerHeight]);
-  var computeShareProgressClose = React.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) / (viewerHeight * 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, viewerHeight]);
-  var springParams = React.useMemo(function () {
-    return {
-      config: {
-        tension: 300,
-        friction: 30
-      }
-    };
-  }, []);
-  var _useDragProgress = hooks.useDragProgress({
-      progress: shareOpened ? 1 : 0,
-      computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
-      springParams: springParams,
-      dragOptions: {
-        axis: 'y',
-        pointer: {
-          keys: false
-        }
-      }
-    }),
-    bindShareDrag = _useDragProgress.bind,
-    draggingShare = _useDragProgress.dragging,
-    shareOpenedProgress = _useDragProgress.progress;
-  var computeMenuProgress = React.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;
-    if (!active) {
-      if (reachedThreshold) onOpenMenu();
-      return reachedThreshold ? 1 : 0;
-    }
-    return progress;
-  }, [onOpenMenu]);
-  var computeMenuProgressClose = React.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 = hooks.useDragProgress({
-      progress: menuOpened ? 1 : 0,
-      computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
-      springParams: springParams,
-      drapOptions: {
-        axis: 'y',
-        pointer: {
-          keys: false
-        }
-      }
-    }),
-    bindMenuDrag = _useDragProgress2.bind,
-    draggingMenu = _useDragProgress2.dragging,
-    menuOpenedProgress = _useDragProgress2.progress;
-  var keyboardShortcuts = React.useMemo(function () {
-    return {
-      m: function m() {
-        return !menuOpened ? onOpenMenu() : onCloseMenu();
-      },
-      escape: function escape() {
-        return onCloseMenu();
-      }
-    };
-  }, [menuOpened, onOpenMenu, onCloseMenu]);
-  useKeyboardShortcuts(keyboardShortcuts);
-
-  // @TODO: Fix if needed
-  // const menuOpenedProgressValue = menuOpenedProgress ? menuOpenedProgress.value || 0 : 0;
-  // const shareOpenedProgressValue = shareOpenedProgress ? shareOpenedProgress.value || 0 : 0;
-  // should be zero if either screens menu or share menu is opened
-  // const dotsOpacity = useEffect(() => {
-  //     Math.min(1, Math.max(0, 1 - (menuOpenedProgressValue + shareOpenedProgressValue)));
-  // }, [menuOpenedProgressValue, shareOpenedProgressValue]);
-
-  React.useEffect(function () {
-    if ((menuOpened || draggingMenu) && !menuMounted) {
-      setMenuMounted(true);
-    } else if (!menuOpened && !draggingMenu && menuMounted) {
-      setMenuMounted(false);
-    }
-  }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.menuNavContainer, _defineProperty(_defineProperty({}, styles$6.withShadow, withShadow), styles$6.isOpened, menuOpened || shareOpened)]),
-    ref: refDots,
-    style: {
-      width: menuWidth
-    }
-  }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$6.menuTopContainer,
-    ref: navContainerRef
-  }, !withoutShareMenu || afterShareMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.menuItem
-  }, bindShareDrag()), !withoutShareMenu ? /*#__PURE__*/React.createElement(ToggleButton$1, {
-    className: styles$6.slidingButton,
-    button: /*#__PURE__*/React.createElement(ShareButton$1, {
-      className: styles$6.menuButton,
-      onClick: onOpenShare,
-      theme: menuTheme,
-      iconPosition: "left",
-      focusable: !shareOpened
-    }),
-    toggledButton: /*#__PURE__*/React.createElement(FocusLock, {
-      group: "share",
-      disabled: !shareOpened,
-      returnFocus: true
-    }, /*#__PURE__*/React.createElement(CloseMenuButton$1, {
-      className: styles$6.menuButton,
-      onClick: onCloseShare,
-      theme: menuTheme,
-      iconPosition: "left",
-      focusable: shareOpened,
-      single: true
-    })),
-    progressSpring: shareOpenedProgress
-  }) : null, afterShareMenuButton) : null, !withoutScreensMenu || beforeScreensMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.menuItem
-  }, bindMenuDrag()), beforeScreensMenuButton, !withoutScreensMenu ? /*#__PURE__*/React.createElement(ToggleButton$1, {
-    className: styles$6.slidingButton,
-    button: /*#__PURE__*/React.createElement(MenuButton$1, {
-      className: styles$6.menuButton,
-      iconClassName: styles$6.menuButtonIcon,
-      onClick: onOpenMenu,
-      theme: menuTheme,
-      focusable: !menuOpened
-    }),
-    toggledButton: /*#__PURE__*/React.createElement(FocusLock, {
-      group: "screens",
-      disabled: !menuOpened,
-      returnFocus: true
-    }, /*#__PURE__*/React.createElement(CloseMenuButton$1, {
-      className: styles$6.menuButton,
-      onClick: onCloseMenu,
-      theme: menuTheme,
-      iconPosition: "right",
-      focusable: menuOpened
-    })),
-    progressSpring: menuOpenedProgress,
-    toggledButtonClassName: styles$6.screensMenuButtonToggled
-  }) : null) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
-    direction: "horizontal",
-    items: items,
-    onClickDot: onClickScreen,
-    onClickScreensMenu: onOpenMenu,
-    buttons: menuDotsButtons,
-    closeable: closeable,
-    withItemClick: withDotItemClick,
-    withoutScreensMenu: withoutScreensMenu,
-    withoutShareMenu: withoutShareMenu,
-    onClose: onClickCloseViewer,
-    className: styles$6.dots
-  }))), /*#__PURE__*/React.createElement(MenuContainer, {
-    className: styles$6.menuContainer,
-    progressSpring: shareOpenedProgress,
-    theme: viewerTheme
-  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(FocusLock, {
-    group: "share",
-    disabled: !shareOpened,
-    returnFocus: true
-  }, /*#__PURE__*/React.createElement(MenuShare, {
-    viewerTheme: viewerTheme,
-    className: styles$6.menuShare,
-    title: title,
-    description: description,
-    menuWidth: menuWidth,
-    paddingTop: navContainerHeight,
-    focusable: shareOpened,
-    items: items,
-    currentScreenIndex: currentScreenIndex,
-    shareUrl: shareUrl,
-    onShare: onShare,
-    onClose: onCloseShare
-  })) : null), /*#__PURE__*/React.createElement(MenuContainer, {
-    className: styles$6.menuContainer,
-    progressSpring: menuOpenedProgress,
-    theme: viewerTheme
-  }, menuMounted ? /*#__PURE__*/React.createElement(FocusLock, {
-    group: "screens",
-    disabled: !menuOpened,
-    returnFocus: true
-  }, /*#__PURE__*/React.createElement(MenuPreview, {
-    viewerTheme: viewerTheme,
-    header: previewHeader,
-    footer: previewFooter,
-    title: title,
-    className: styles$6.menuPreview,
-    screenSize: screenSize,
-    menuWidth: menuWidth,
-    paddingTop: navContainerHeight,
-    items: items,
-    currentScreenIndex: currentScreenIndex,
-    shareUrl: shareUrl,
-    onShare: onShare,
-    onClickScreen: onClickScreen,
-    onClose: onCloseMenu,
-    scrollDisabled: draggingMenu,
-    toggleFullscreen: toggleFullscreen,
-    fullscreenActive: fullscreenActive,
-    fullscreenEnabled: fullscreenEnabled
-  })) : null));
-};
-ViewerMenu.propTypes = propTypes$9;
-ViewerMenu.defaultProps = defaultProps$9;
-var ViewerMenu$1 = /*#__PURE__*/React.memo(ViewerMenu);
-
-var styles$5 = {"container":"micromag-viewer-screen-container","inner":"micromag-viewer-screen-inner","navigationHint":"micromag-viewer-screen-navigationHint"};
-
-var propTypes$8 = {
-  screen: core.PropTypes.screenComponent,
-  renderContext: core.PropTypes.renderContext,
-  screenState: PropTypes.string,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  mediaRef: PropTypes.func,
-  width: PropTypes.number,
-  index: PropTypes.number,
-  height: PropTypes.number,
-  scale: PropTypes.number,
-  // withNavigationHint: PropTypes.bool,  // @todo
-  className: PropTypes.string
-};
-var defaultProps$8 = {
-  screen: null,
-  renderContext: null,
-  screenState: null,
-  current: false,
-  active: true,
-  index: null,
-  mediaRef: null,
-  width: null,
-  height: null,
-  scale: null,
-  // withNavigationHint: false,
-  className: null
-};
-function ViewerScreen(_ref) {
-  var screen = _ref.screen,
-    renderContext = _ref.renderContext,
-    index = _ref.index,
-    screenState = _ref.screenState,
-    active = _ref.active,
-    current = _ref.current,
-    mediaRef = _ref.mediaRef,
-    width = _ref.width,
-    height = _ref.height,
-    scale = _ref.scale,
-    className = _ref.className;
-  var _useState = React.useState(active || current),
-    _useState2 = _slicedToArray(_useState, 2),
-    mounted = _useState2[0],
-    setMounted = _useState2[1];
-  React.useEffect(function () {
-    var timeout = null;
-    if (active !== mounted) {
-      timeout = setTimeout(function () {
-        setMounted(active);
-      }, 200);
-    }
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [active, mounted, setMounted, index]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.inner,
-    style: {
-      width: width,
-      height: height,
-      transform: scale !== null ? "scale(".concat(scale, ")") : null,
-      transformOrigin: scale !== null ? '0 0' : null,
-      opacity: mounted ? 1 : null
-    }
-  }, mounted || current ? /*#__PURE__*/React.createElement(components.Screen, {
-    screen: screen,
-    renderContext: renderContext,
-    screenState: screenState,
-    index: index,
-    active: active,
-    current: current,
-    mediaRef: mediaRef
-  }) : null));
-}
-ViewerScreen.propTypes = propTypes$8;
-ViewerScreen.defaultProps = defaultProps$8;
-
-var styles$4 = {"container":"micromag-viewer-buttons-navigation-button-container","arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
-
-var _excluded$3 = ["direction", "onClick", "className"];
-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,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
-    className: classNames([styles$4.container, styles$4[direction], _defineProperty({}, className, className !== null)]),
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      _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"
-    }))
-  }, props));
-};
-NavigationButton.propTypes = propTypes$7;
-NavigationButton.defaultProps = defaultProps$7;
-var NavigationButton$1 = NavigationButton;
-
-var styles$3 = {"container":"micromag-viewer-partials-arrow-hint-container","inner":"micromag-viewer-partials-arrow-hint-inner","shadowFade":"micromag-viewer-partials-arrow-hint-shadowFade","arrow":"micromag-viewer-partials-arrow-hint-arrow","panX":"micromag-viewer-partials-arrow-hint-panX"};
-
-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(components.ArrowIcon, {
-    className: styles$3.arrow
-  })));
-};
-ArrowHint.propTypes = propTypes$6;
-ArrowHint.defaultProps = defaultProps$6;
-var ArrowHint$1 = ArrowHint;
-
-var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
-
-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() {
-  var secondsWithMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  if (secondsWithMs === null || secondsWithMs <= 0) {
-    return '00:00';
-  }
-  var parts = "".concat(secondsWithMs).split('.');
-  var _ref = parts || [],
-    _ref2 = _slicedToArray(_ref, 1),
-    _ref2$ = _ref2[0],
-    fullSeconds = _ref2$ === void 0 ? 0 : _ref2$;
-  var finalFullSeconds = Math.round(fullSeconds);
-  var seconds = finalFullSeconds % 60;
-  var diff = finalFullSeconds - seconds;
-  var minutes = diff > 0 ? diff / 60 : 0;
-  return "".concat(String(Math.round(minutes)).padStart(2, '0'), ":").concat(String(Math.round(seconds)).padStart(2, '0'));
-}
-var SHOW_MILLISECONDS_THRESHOLD = 5; // show milliseconds when scrubbing if length of video is shorter than 5 seconds
-
-var propTypes$5 = {
-  media: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  }) // eslint-disable-line
-  ]),
-  playing: PropTypes.bool,
-  backgroundColor: PropTypes.string,
-  progressColor: PropTypes.string,
-  onClick: PropTypes.func,
-  onSeek: PropTypes.func,
-  onSeekStart: PropTypes.func,
-  onSeekEnd: PropTypes.func,
-  collapsed: PropTypes.bool,
-  focusable: PropTypes.bool,
-  className: PropTypes.string,
-  withSeekHead: PropTypes.bool
-};
-var defaultProps$5 = {
-  media: null,
-  playing: false,
-  backgroundColor: null,
-  progressColor: null,
-  onClick: null,
-  onSeek: null,
-  onSeekStart: null,
-  onSeekEnd: null,
-  collapsed: false,
-  focusable: true,
-  className: null,
-  withSeekHead: true
-};
-var SeekBar = function SeekBar(_ref3) {
-  var media = _ref3.media,
-    playing = _ref3.playing,
-    backgroundColor = _ref3.backgroundColor,
-    progressColor = _ref3.progressColor,
-    onClick = _ref3.onClick,
-    onSeek = _ref3.onSeek,
-    onSeekStart = _ref3.onSeekStart,
-    onSeekEnd = _ref3.onSeekEnd,
-    collapsed = _ref3.collapsed,
-    focusable = _ref3.focusable,
-    className = _ref3.className,
-    withSeekHead = _ref3.withSeekHead;
-  var intl = reactIntl.useIntl();
-  var progress = hooks.useMediaProgress(media, {
-    disabled: !playing
-  });
-  var _ref4 = media || {},
-    _ref4$currentTime = _ref4.currentTime,
-    currentTime = _ref4$currentTime === void 0 ? null : _ref4$currentTime,
-    _ref4$duration = _ref4.duration,
-    duration = _ref4$duration === void 0 ? null : _ref4$duration;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showTimestamp = _useState2[0],
-    setShowTimestamp = _useState2[1];
-  var startProgressRef = React.useRef(progress);
-  var onDrag = React.useCallback(
-  // eslint-disable-next-line no-unused-vars
-  function (_ref5) {
-    var _ref5$xy = _slicedToArray(_ref5.xy, 1),
-      xOffset = _ref5$xy[0],
-      _ref5$movement = _slicedToArray(_ref5.movement, 1);
-      _ref5$movement[0];
-      var elapsedTime = _ref5.elapsedTime,
-      active = _ref5.active,
-      tap = _ref5.tap,
-      currentTarget = _ref5.currentTarget;
-    if (!active && elapsedTime > 300) {
-      return;
-    }
-    if (collapsed) {
-      onClick();
-      return;
-    }
-    var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
-      _currentTarget$getBou2 = _currentTarget$getBou.width,
-      elWidth = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
-      _currentTarget$getBou3 = _currentTarget$getBou.x,
-      xGap = _currentTarget$getBou3 === void 0 ? null : _currentTarget$getBou3;
-    var newProgress = null;
-    if (tap) {
-      newProgress = Math.max(0, Math.min(1, (xOffset - xGap) / elWidth));
-    } else {
-      // startProgressRef.current + xMovement
-      newProgress = Math.max(0, Math.min(1, (xOffset - xGap) / elWidth));
-    }
-    if (onSeek !== null) {
-      onSeek(newProgress, tap);
-    }
-  }, [onSeek, onClick, collapsed]);
-  var onDragStart = React.useCallback(function () {
-    startProgressRef.current = progress;
-    setShowTimestamp(true);
-    if (onSeekStart !== null) {
-      onSeekStart();
-    }
-  }, [progress, onSeekStart, setShowTimestamp]);
-  var onDragEnd = React.useCallback(function () {
-    if (onSeekEnd !== null) {
-      setShowTimestamp(false);
-      onSeekEnd();
-    }
-  }, [onSeekEnd, setShowTimestamp]);
-  var bind = react.useGesture({
-    onDrag: onDrag,
-    onDragStart: onDragStart,
-    onDragEnd: onDragEnd
-  }, {
-    drag: {
-      axis: 'x',
-      filterTaps: true
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$2.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$2.withSeekHead, withSeekHead), styles$2.showTimestamp, showTimestamp)])
-  }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progressBarContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progressBar,
-    style: {
-      backgroundColor: backgroundColor
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.playHead,
-    style: {
-      left: "".concat(progress * 100, "%"),
-      backgroundColor: progressColor
-    }
-  }, /*#__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, ")"),
-      backgroundColor: progressColor
-    }
-  })), /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
-    type: "button",
-    role: "slider",
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-valuenow": progress,
-    "aria-valuetext": intl.formatMessage({
-      id: "C1VUEY",
-      defaultMessage: [{
-        "type": 1,
-        "value": "current"
-      }, {
-        "type": 0,
-        "value": " of "
-      }, {
-        "type": 1,
-        "value": "duration"
-      }]
-    }, {
-      current: getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD),
-      duration: getFormattedTimestamp(duration, duration < SHOW_MILLISECONDS_THRESHOLD)
-    }),
-    "data-draggable": true,
-    className: styles$2.track,
-    title: intl.formatMessage({
-      id: "G1Gyjn",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Seek"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      id: "2prwZ7",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Progress slider"
-      }]
-    }),
-    tabIndex: focusable ? '0' : '-1'
-  }))));
-};
-SeekBar.propTypes = propTypes$5;
-SeekBar.defaultProps = defaultProps$5;
-var SeekBar$1 = SeekBar;
-
-var styles$1 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
-
-var propTypes$4 = {
-  defaultColor: PropTypes.shape({
-    color: PropTypes.string,
-    alpha: PropTypes.number
-  }),
-  defaultProgressColor: PropTypes.shape({
-    color: PropTypes.string,
-    alpha: PropTypes.number
-  }),
-  withLoading: PropTypes.bool,
-  className: PropTypes.string,
-  collapsedClassName: PropTypes.string
-};
-var defaultProps$4 = {
-  defaultColor: {
-    color: '#FFFFFF',
-    alpha: 1
-  },
-  defaultProgressColor: {
-    color: '#666',
-    alpha: 1
-  },
-  withLoading: true,
-  className: null,
-  collapsedClassName: null
-};
-function PlaybackControls(_ref) {
-  var defaultColor = _ref.defaultColor,
-    defaultProgressColor = _ref.defaultProgressColor,
-    withLoading = _ref.withLoading,
-    className = _ref.className,
-    collapsedClassName = _ref.collapsedClassName;
-  var intl = reactIntl.useIntl();
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    _usePlaybackContext$m = _usePlaybackContext.media,
-    mediaElement = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m,
-    _usePlaybackContext$h = _usePlaybackContext.hasAudio,
-    hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
-    _usePlaybackContext$p = _usePlaybackContext.playing,
-    wantedPlaying = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
-    _usePlaybackContext$m2 = _usePlaybackContext.muted,
-    wantedMuted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
-    setPlaying = _usePlaybackContext.setPlaying,
-    setMuted = _usePlaybackContext.setMuted,
-    controls = _usePlaybackContext.controls,
-    controlsSuggestPlay = _usePlaybackContext.controlsSuggestPlay,
-    controlsVisible = _usePlaybackContext.controlsVisible,
-    controlsTheme = _usePlaybackContext.controlsTheme,
-    showControls = _usePlaybackContext.showControls;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showLoading = _useState2[0],
-    setShowLoading = _useState2[1];
-  var mediaUrl = mediaElement !== null ? mediaElement.src : null;
-  var mediaReady = hooks.useMediaReady(mediaElement, {
-    id: mediaUrl
-  });
-  var ready = mediaElement === null || mediaReady;
-  var finalShowLoading = showLoading && !ready;
-  var _useMediaState = hooks.useMediaState(mediaElement, {
-      playing: wantedPlaying,
-      muted: wantedMuted
-    }),
-    buffering = _useMediaState.buffering,
-    playing = _useMediaState.playing,
-    muted = _useMediaState.muted;
-
-  // console.log(controlsVisible);
-
-  React.useEffect(function () {
-    var id = null;
-    setShowLoading(false);
-    if ((!ready || buffering) && withLoading) {
-      id = setTimeout(function () {
-        setShowLoading(true);
-      }, 1000);
-    }
-    return function () {
-      setShowLoading(false);
-      clearTimeout(id);
-    };
-  }, [ready, buffering, withLoading, setShowLoading]);
-  var _useState3 = React.useState({
-      color: utils.getColorAsString(defaultColor),
-      progressColor: utils.getColorAsString(defaultColor),
-      seekBarOnly: false
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    customControlsTheme = _useState4[0],
-    setCustomControlsTheme = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    wasPlaying = _useState6[0],
-    setWasPlaying = _useState6[1];
-  React.useEffect(function () {
-    var _ref2 = controlsTheme || {},
-      color = _ref2.color,
-      progressColor = _ref2.progressColor,
-      seekBarOnly = _ref2.seekBarOnly;
-    setCustomControlsTheme({
-      color: utils.getColorAsString(color || defaultColor),
-      progressColor: utils.getColorAsString(progressColor || defaultProgressColor),
-      seekBarOnly: seekBarOnly
-    });
-  }, [controlsTheme, setCustomControlsTheme, defaultColor, defaultProgressColor]);
-  var onPlay = React.useCallback(function () {
-    setPlaying(true);
-    if (!controlsVisible && controls) {
-      showControls();
-    }
-  }, [setPlaying, controlsVisible, showControls]);
-  var onPause = React.useCallback(function () {
-    setPlaying(false);
-    if (!controlsVisible && controls) {
-      showControls();
-    }
-  }, [setPlaying, controlsVisible, controls, showControls]);
-  var onMute = React.useCallback(function () {
-    setMuted(true);
-    if (!controlsVisible && controls) {
-      showControls();
-    }
-  }, [setMuted, controlsVisible, showControls]);
-  var onUnmute = React.useCallback(function () {
-    setMuted(false);
-    if (!controlsVisible && controls) {
-      showControls();
-    }
-  }, [setMuted, controlsVisible, showControls]);
-  var onSeekStart = React.useCallback(function () {
-    setWasPlaying(playing);
-    if (playing) {
-      setPlaying(false);
-    }
-  }, [playing, setWasPlaying, setPlaying]);
-  var onSeek = React.useCallback(
-  // eslint-disable-next-line no-unused-vars
-  function (progress) {
-    if (mediaElement !== null) {
-      mediaElement.currentTime = progress * mediaElement.duration;
-    }
-    if (!controlsVisible && controls) {
-      showControls();
-    }
-  }, [mediaElement, controlsVisible, controls, showControls]);
-  var onSeekEnd = React.useCallback(function () {
-    if (wasPlaying) {
-      setPlaying(true);
-    }
-  }, [setPlaying, wasPlaying]);
-  var onSeekClick = React.useCallback(function () {
-    if (!controlsVisible && controls) {
-      showControls();
-    }
-  }, [controlsVisible, controls, showControls]);
-  var hasMedia = mediaElement !== null;
-  var mediaHasAudio = hasMedia && (hasAudio === null || hasAudio === true);
-  var _ref3 = customControlsTheme || {},
-    color = _ref3.color,
-    progressColor = _ref3.progressColor,
-    seekBarOnly = _ref3.seekBarOnly;
-  var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
-  var playIcon = playing ? /*#__PURE__*/React.createElement(components.PauseIcon, {
-    className: styles$1.icon
-  }) : /*#__PURE__*/React.createElement(components.PlayIcon, {
-    className: styles$1.icon
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$1.withPlayPause, controlsVisible && controls && (!seekBarOnly || !playing)), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
-  }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(components.Button, {
-    className: classNames([styles$1.suggest]),
-    style: {
-      color: color
-    },
-    onClick: playing ? onPause : onPlay,
-    focusable: controlsVisible,
-    icon: /*#__PURE__*/React.createElement(components.PlayIcon, {
-      className: classNames([styles$1.icon, styles$1.offset])
-    }),
-    "aria-pressed": !playing,
-    "aria-label": intl.formatMessage({
-      id: "mTqcmA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Pause"
-      }]
-    }),
-    withoutBootstrapStyles: true
-  }) : null, /*#__PURE__*/React.createElement(components.Button, {
-    className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, !controlsVisible || controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
-    style: {
-      color: color
-    },
-    onClick: playing ? onPause : onPlay,
-    focusable: controls && controlsVisible && (!seekBarOnly || !playing),
-    disabled: finalShowLoading,
-    icon: finalShowLoading ? /*#__PURE__*/React.createElement(components.Spinner, {
-      className: classNames([styles$1.spinner, styles$1.offset])
-    }) : playIcon,
-    "aria-pressed": !playing,
-    "aria-label": finalShowLoading ? intl.formatMessage({
-      id: "YyYrXp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Loading"
-      }]
-    }) : intl.formatMessage({
-      id: "mTqcmA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Pause"
-      }]
-    }),
-    withoutBootstrapStyles: true
-  }), /*#__PURE__*/React.createElement(SeekBar$1, {
-    className: styles$1.seekBar,
-    media: mediaElement,
-    playing: playing,
-    onClick: onSeekClick,
-    onSeek: onSeek,
-    onSeekStart: onSeekStart,
-    onSeekEnd: onSeekEnd,
-    focusable: controls && controlsVisible && !seekBarOnly,
-    collapsed: isCollapsed,
-    withSeekHead: !isCollapsed && !seekBarOnly,
-    backgroundColor: color,
-    progressColor: progressColor
-  }), /*#__PURE__*/React.createElement(components.Button, {
-    className: styles$1.muteButton,
-    style: {
-      color: color
-    },
-    onClick: muted ? onUnmute : onMute,
-    focusable: controlsVisible || mediaHasAudio,
-    icon: muted ? /*#__PURE__*/React.createElement(components.UnmuteIcon, {
-      className: styles$1.icon
-    }) : /*#__PURE__*/React.createElement(components.MuteIcon, {
-      className: styles$1.icon
-    }),
-    "aria-pressed": !muted,
-    "aria-label": intl.formatMessage({
-      id: "RK/QEY",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Unmute"
-      }]
-    }),
-    withoutBootstrapStyles: true
-  }));
-}
-PlaybackControls.propTypes = propTypes$4;
-PlaybackControls.defaultProps = defaultProps$4;
-
-var styles = {"container":"micromag-viewer-partials-web-view-container","focusLock":"micromag-viewer-partials-web-view-focusLock","opened":"micromag-viewer-partials-web-view-opened"};
-
-var _excluded$2 = ["opened", "close", "open", "update", "url"];
-var propTypes$3 = {
-  onChange: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object
-};
-var defaultProps$3 = {
-  onChange: null,
-  className: null,
-  style: null
-};
-function WebViewContainer(_ref) {
-  var onChange = _ref.onChange,
-    className = _ref.className,
-    style = _ref.style;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    opened = _useViewerWebView.opened,
-    close = _useViewerWebView.close;
-    _useViewerWebView.open;
-    _useViewerWebView.update;
-    var _useViewerWebView$url = _useViewerWebView.url,
-    url = _useViewerWebView$url === void 0 ? null : _useViewerWebView$url,
-    webViewProps = _objectWithoutProperties(_useViewerWebView, _excluded$2);
-  var _useViewerInteraction = contexts.useViewerInteraction(),
-    disableInteraction = _useViewerInteraction.disableInteraction,
-    enableInteraction = _useViewerInteraction.enableInteraction;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    setPlaying = _usePlaybackContext.setPlaying,
-    hideControls = _usePlaybackContext.hideControls,
-    showControls = _usePlaybackContext.showControls;
-  var wasPlayingRef = React.useRef(playing);
-  var _useState = React.useState(url),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentUrl = _useState2[0],
-    setCurrentUrl = _useState2[1];
-  var ref = React.useRef(null);
-
-  // Handle current webview url
-  React.useEffect(function () {
-    if (url !== null) {
-      setCurrentUrl(url);
-    }
-  }, [url, setCurrentUrl]);
-  var onTransitionEnd = React.useCallback(function () {
-    if (url === null) {
-      setCurrentUrl(null);
-    }
-    if (onChange !== null) {
-      onChange(opened);
-    }
-  }, [url, setCurrentUrl, onChange]);
-
-  // Disable interaction and pause playback
-  React.useEffect(function () {
-    if (opened) {
-      disableInteraction();
-      hideControls();
-      wasPlayingRef.current = playing;
-      if (playing) {
-        setPlaying(false);
-      }
-    } else {
-      enableInteraction();
-      showControls();
-      if (wasPlayingRef.current && !playing) {
-        wasPlayingRef.current = false;
-        setPlaying(true);
-      }
-    }
-  }, [opened]);
-  var keyboardShortcuts = React.useMemo(function () {
-    return {
-      escape: function escape() {
-        close();
-      }
-    };
-  }, [close]);
-  useKeyboardShortcuts(keyboardShortcuts);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, styles.opened, opened), className, className !== null)]),
-    style: style,
-    onTransitionEnd: onTransitionEnd,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(WebView, Object.assign({
-    url: url || currentUrl
-  }, webViewProps, {
-    closeable: opened,
-    focusable: opened,
-    className: styles.webView,
-    onClose: close
-  })));
-}
-WebViewContainer.propTypes = propTypes$3;
-WebViewContainer.defaultProps = defaultProps$3;
-
-// @todo export from somewhere else; or use as props in possible component for screen transitions
-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 SHARE_INCENTIVE_TIMEOUT = 6000;
-var propTypes$2 = {
-  story: core.PropTypes.story,
-  // .isRequired,
-  basePath: PropTypes.string,
-  theme: core.PropTypes.viewerTheme,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  screen: PropTypes.string,
-  screenState: PropTypes.string,
-  deviceScreens: core.PropTypes.deviceScreens,
-  renderContext: core.PropTypes.renderContext,
-  onScreenChange: PropTypes.func,
-  tapNextScreenWidthPercent: PropTypes.number,
-  storyIsParsed: PropTypes.bool,
-  neighborScreensActive: PropTypes.number,
-  neighborScreenOffset: PropTypes.number,
-  neighborScreenScale: PropTypes.number,
-  topSafezoneHeight: PropTypes.number,
-  bottomSafezoneHeight: PropTypes.number,
-  menuDotsButtons: PropTypes.node,
-  menuIsScreenWidth: PropTypes.bool,
-  menuHeader: PropTypes.node,
-  menuFooter: PropTypes.node,
-  shareBasePath: PropTypes.string,
-  afterShareMenuButton: PropTypes.node,
-  beforeScreensMenuButton: PropTypes.node,
-  closeable: PropTypes.bool,
-  withMetadata: PropTypes.bool,
-  withoutGestures: PropTypes.bool,
-  withoutMenu: PropTypes.bool,
-  withoutScreensMenu: PropTypes.bool,
-  withoutShareMenu: PropTypes.bool,
-  withoutMenuShadow: PropTypes.bool,
-  withoutFullscreen: PropTypes.bool,
-  withoutNavigationArrow: PropTypes.bool,
-  withoutTransitions: PropTypes.bool,
-  withNeighborScreens: PropTypes.bool,
-  withNavigationHint: PropTypes.bool,
-  withoutPlaybackControls: PropTypes.bool,
-  onClose: PropTypes.func,
-  onInteraction: PropTypes.func,
-  onEnd: PropTypes.func,
-  onViewModeChange: PropTypes.func,
-  onMenuChange: PropTypes.func,
-  currentScreenMedia: core.PropTypes.ref,
-  screensMedias: core.PropTypes.ref,
-  screenSizeOptions: PropTypes.shape({
-    withoutMaxSize: PropTypes.bool,
-    desktopHeightRatio: PropTypes.number,
-    screenRatio: PropTypes.number
-  }),
-  className: PropTypes.string
-};
-var defaultProps$2 = {
-  story: null,
-  theme: null,
-  basePath: null,
-  width: null,
-  height: null,
-  screen: null,
-  screenState: null,
-  deviceScreens: utils.getDeviceScreens(),
-  renderContext: 'view',
-  onScreenChange: null,
-  tapNextScreenWidthPercent: 0.8,
-  storyIsParsed: false,
-  neighborScreensActive: 1,
-  neighborScreenOffset: 105,
-  neighborScreenScale: 0.8,
-  topSafezoneHeight: null,
-  bottomSafezoneHeight: null,
-  menuIsScreenWidth: false,
-  menuHeader: null,
-  menuFooter: null,
-  shareBasePath: null,
-  afterShareMenuButton: null,
-  beforeScreensMenuButton: null,
-  menuDotsButtons: null,
-  closeable: false,
-  withMetadata: false,
-  withNeighborScreens: false,
-  withNavigationHint: false,
-  withoutGestures: false,
-  withoutMenu: false,
-  withoutScreensMenu: false,
-  withoutShareMenu: false,
-  withoutMenuShadow: false,
-  withoutFullscreen: false,
-  withoutTransitions: false,
-  withoutNavigationArrow: false,
-  withoutPlaybackControls: false,
-  onClose: null,
-  onInteraction: null,
-  onEnd: null,
-  onViewModeChange: null,
-  onMenuChange: null,
-  currentScreenMedia: null,
-  screensMedias: null,
-  screenSizeOptions: null,
-  className: null
-};
-var Viewer = function Viewer(_ref) {
-  var story = _ref.story,
-    basePath = _ref.basePath,
-    viewerTheme = _ref.theme,
-    width = _ref.width,
-    height = _ref.height,
-    screenId = _ref.screen,
-    screenState = _ref.screenState,
-    deviceScreens = _ref.deviceScreens,
-    renderContext = _ref.renderContext,
-    tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
-    storyIsParsed = _ref.storyIsParsed,
-    neighborScreensActive = _ref.neighborScreensActive,
-    neighborScreenOffset = _ref.neighborScreenOffset,
-    neighborScreenScale = _ref.neighborScreenScale,
-    topSafezoneHeight = _ref.topSafezoneHeight,
-    bottomSafezoneHeight = _ref.bottomSafezoneHeight,
-    menuIsScreenWidth = _ref.menuIsScreenWidth,
-    menuHeader = _ref.menuHeader,
-    menuDotsButtons = _ref.menuDotsButtons,
-    menuFooter = _ref.menuFooter,
-    shareBasePath = _ref.shareBasePath,
-    afterShareMenuButton = _ref.afterShareMenuButton,
-    beforeScreensMenuButton = _ref.beforeScreensMenuButton,
-    closeable = _ref.closeable,
-    withMetadata = _ref.withMetadata,
-    withoutGestures = _ref.withoutGestures,
-    withoutMenu = _ref.withoutMenu,
-    withoutScreensMenu = _ref.withoutScreensMenu,
-    withoutShareMenu = _ref.withoutShareMenu,
-    withoutMenuShadow = _ref.withoutMenuShadow;
-    _ref.withoutFullscreen;
-    var withoutNavigationArrow = _ref.withoutNavigationArrow,
-    withoutTransitions = _ref.withoutTransitions,
-    withNeighborScreens = _ref.withNeighborScreens,
-    withNavigationHint = _ref.withNavigationHint,
-    withoutPlaybackControls = _ref.withoutPlaybackControls,
-    onCloseViewer = _ref.onClose,
-    onInteraction = _ref.onInteraction,
-    onEnd = _ref.onEnd,
-    onScreenChange = _ref.onScreenChange,
-    onViewModeChange = _ref.onViewModeChange,
-    onMenuChange = _ref.onMenuChange,
-    currentScreenMedia = _ref.currentScreenMedia,
-    screensMedias = _ref.screensMedias,
-    screenSizeOptions = _ref.screenSizeOptions,
-    className = _ref.className;
-  var intl = reactIntl.useIntl();
-  /**
-   * Screen Data + Processing
-   */
-  var parsedStory = hooks.useParsedStory(story, {
-    disabled: storyIsParsed
-  }) || {};
-  var _parsedStory$componen = parsedStory.components,
-    screens = _parsedStory$componen === void 0 ? [] : _parsedStory$componen,
-    _parsedStory$title = parsedStory.title,
-    title = _parsedStory$title === void 0 ? null : _parsedStory$title,
-    _parsedStory$metadata = parsedStory.metadata,
-    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 = React.useMemo(function () {
-    return new EventEmitter();
-  }, [parsedStory]);
-  var screenIndex = React.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 = React.useMemo(function () {
-    return screenDescription !== null ? _objectSpread(_objectSpread({}, metadata), {}, {
-      description: screenDescription
-    }) : metadata;
-  }, [metadata, screenDescription]);
-  var screensMediasRef = React.useRef([]);
-  if (currentScreenMedia !== null) {
-    currentScreenMedia.current = screensMediasRef.current[screenIndex] || null;
-  }
-  if (screensMedias !== null) {
-    screensMedias.current = screensMediasRef.current;
-  }
-
-  /**
-   * Screen Layout
-   */
-  var _ref5 = viewerTheme || {},
-    textStyles = _ref5.textStyles,
-    colors = _ref5.colors;
-  var _ref6 = colors || {},
-    _ref6$primary = _ref6.primary,
-    primaryColor = _ref6$primary === void 0 ? null : _ref6$primary,
-    _ref6$focus = _ref6.focus,
-    focusColor = _ref6$focus === void 0 ? null : _ref6$focus;
-  var finalFocusColor = utils.getColorAsString(focusColor || primaryColor);
-  var _ref7 = textStyles || {},
-    _ref7$title = _ref7.title,
-    themeTextStyle = _ref7$title === void 0 ? null : _ref7$title;
-  var _ref8 = themeTextStyle || {},
-    _ref8$fontFamily = _ref8.fontFamily,
-    themeFont = _ref8$fontFamily === void 0 ? null : _ref8$fontFamily;
-
-  // Fonts
-  var finalFonts = React.useMemo(function () {
-    return [].concat(_toConsumableArray(fonts || []), [themeFont]).filter(function (font) {
-      return font !== null;
-    });
-  }, [fonts]);
-  var _useLoadedFonts = hooks.useLoadedFonts(finalFonts);
-    _useLoadedFonts.loaded; // eslint-disable-line
-
-  var isView = renderContext === 'view';
-  var isStatic = renderContext === 'static';
-  var isCapture = renderContext === 'capture';
-  var isEditor = renderContext === 'edit';
-  var withoutScreensTransforms = isStatic || isCapture;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    playing = _usePlaybackContext.playing;
-    _usePlaybackContext.setControls;
-    var _usePlaybackContext$c = _usePlaybackContext.controls,
-    playbackControls = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
-    _usePlaybackContext$c2 = _usePlaybackContext.controlsVisible,
-    playbackcontrolsVisible = _usePlaybackContext$c2 === void 0 ? false : _usePlaybackContext$c2,
-    _usePlaybackContext$m = _usePlaybackContext.media,
-    playbackMedia = _usePlaybackContext$m === void 0 ? null : _usePlaybackContext$m;
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    playbackControlsContainerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    playbackControlsContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var trackScreenView = hooks.useTrackScreenView();
-  var _useScreenSizeFromEle = hooks.useScreenSizeFromElement(_objectSpread({
-      width: width,
-      height: height,
-      screens: deviceScreens
-    }, screenSizeOptions)),
-    containerRef = _useScreenSizeFromEle.ref,
-    viewerWidth = _useScreenSizeFromEle.fullWidth,
-    viewerHeight = _useScreenSizeFromEle.fullHeight,
-    screenSize = _useScreenSizeFromEle.screenSize,
-    screenScale = _useScreenSizeFromEle.scale;
-  var _ref9 = screenSize || {},
-    _ref9$width = _ref9.width,
-    screenWidth = _ref9$width === void 0 ? null : _ref9$width,
-    _ref9$height = _ref9.height,
-    screenHeight = _ref9$height === void 0 ? null : _ref9$height,
-    _ref9$landscape = _ref9.landscape,
-    landscape = _ref9$landscape === void 0 ? false : _ref9$landscape,
-    _ref9$menuOverScreen = _ref9.menuOverScreen,
-    menuOverScreen = _ref9$menuOverScreen === void 0 ? false : _ref9$menuOverScreen;
-  var screenContainerWidth = screenScale !== null ? screenWidth * screenScale : screenWidth;
-  var screenContainerHeight = screenScale !== null ? screenHeight * screenScale : screenHeight;
-  var hasSize = screenWidth > 0 && screenHeight > 0;
-  var ready = hasSize;
-  var trackingEnabled = isView;
-  React.useEffect(function () {
-    if (trackingEnabled && currentScreen !== null) {
-      trackScreenView(currentScreen, screenIndex);
-    }
-  }, [currentScreen, trackScreenView, trackingEnabled]);
-  React.useEffect(function () {
-    if (ready && onViewModeChange !== null) {
-      onViewModeChange({
-        landscape: landscape,
-        menuOverScreen: menuOverScreen
-      });
-    }
-  }, [ready, landscape, menuOverScreen, onViewModeChange]);
-
-  // CSS variable
-  React.useEffect(function () {
-    if (containerRef.current === null) {
-      return;
-    }
-    if (finalFocusColor !== null) {
-      containerRef.current.style.setProperty('--micromag-focus-color', finalFocusColor);
-    }
-  }, [finalFocusColor]);
-
-  /**
-   * Screen Transitions
-   */
-  var transitionType = landscape && withNeighborScreens ? DEFAULT_TRANSITION_TYPE_LANDSCAPE : DEFAULT_TRANSITION_TYPE_PORTRAIT;
-
-  /**
-   * Screen Navigation
-   */
-  var changeIndex = React.useCallback(function (index) {
-    if (index === screenIndex) {
-      return;
-    }
-    if (currentScreenMedia !== null) {
-      currentScreenMedia.current = screensMediasRef.current[index] || null;
-    }
-    if (onScreenChange !== null) {
-      onScreenChange(screens[index], index);
-    }
-  }, [screenIndex, screens, onScreenChange]);
-  var onScreenNavigate = React.useCallback(function (_ref10) {
-    var index = _ref10.index,
-      newIndex = _ref10.newIndex,
-      end = _ref10.end,
-      direction = _ref10.direction;
-    if (end && onEnd !== null) {
-      onEnd();
-    }
-    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 = React.useCallback(function () {
-    changeIndex(Math.max(0, screenIndex - 1));
-  }, [changeIndex, screenIndex]);
-  var gotoNextScreen = React.useCallback(function () {
-    changeIndex(Math.min(screens.length - 1, screenIndex + 1));
-  }, [changeIndex, screenIndex]);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasInteracted = _useState2[0],
-    setHasInteracted = _useState2[1];
-  var onInteractionPrivate = React.useCallback(function () {
-    if (onInteraction !== null) {
-      onInteraction();
-    }
-    if (!hasInteracted) {
-      setHasInteracted(true);
-    }
-  }, [onInteraction, hasInteracted, setHasInteracted]);
-  var _useScreenInteraction = useScreenInteraction({
-      screens: screens,
-      screenIndex: screenIndex,
-      screenWidth: screenContainerWidth,
-      disableCurrentScreenNavigation: !isView,
-      nextScreenWidthPercent: tapNextScreenWidthPercent,
-      onInteract: onInteractionPrivate,
-      onNavigate: onScreenNavigate
-    }),
-    interactWithScreen = _useScreenInteraction.interact,
-    currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
-    enableInteraction = _useScreenInteraction.enableInteraction,
-    disableInteraction = _useScreenInteraction.disableInteraction;
-  var onTap = React.useCallback(function (_ref11) {
-    var currentTarget = _ref11.currentTarget,
-      event = _ref11.event,
-      target = _ref11.target,
-      _ref11$xy = _slicedToArray(_ref11.xy, 2),
-      x = _ref11$xy[0],
-      y = _ref11$xy[1];
-    if (event) {
-      event.stopPropagation();
-    }
-    interactWithScreen({
-      event: event,
-      target: target,
-      currentTarget: currentTarget,
-      index: screenIndex,
-      x: x,
-      y: y
-    });
-  }, [interactWithScreen, screenIndex]);
-  var computeScreenProgress = React.useCallback(function (_ref12) {
-    var active = _ref12.active,
-      _ref12$movement = _slicedToArray(_ref12.movement, 1),
-      mx = _ref12$movement[0],
-      _ref12$velocity = _slicedToArray(_ref12.velocity, 1),
-      vx = _ref12$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;
-    }
-    return screenIndex - progress;
-  }, [screenContainerWidth, screenIndex]);
-  var onScreenProgress = React.useCallback(function (progress, _ref13) {
-    var active = _ref13.active;
-    var delta = Math.abs(progress - screenIndex);
-    var reachedBounds = progress < 0 || progress >= screensCount; // have we reached the end of the stack?
-    if (!active && delta === 1 && !reachedBounds) {
-      onScreenNavigate({
-        index: screenIndex,
-        newIndex: progress
-      });
-    }
-  }, [onScreenNavigate, screenIndex]);
-  var _useState3 = React.useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    transitioned = _useState4[0],
-    setTransitioned = _useState4[1];
-  var onTransitionStart = React.useCallback(function () {
-    setTransitioned(false);
-  }, [setTransitioned]);
-  var onTransitionComplete = React.useCallback(function () {
-    setTransitioned(true);
-  }, [setTransitioned]);
-  var springParams = React.useMemo(function () {
-    return {
-      config: SPRING_CONFIG_TIGHT,
-      onStart: onTransitionStart,
-      onRest: onTransitionComplete
-    };
-  }, [onTransitionStart, onTransitionComplete]);
-  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
-  var navigationDisabled = currentScreenInteractionEnabled === false;
-  var _useDragProgress = hooks.useDragProgress({
-      progress: screenIndex,
-      disabled: !isView || withoutTransitions,
-      dragDisabled: withoutGestures || !currentScreenInteractionEnabled,
-      computeProgress: computeScreenProgress,
-      onProgress: onScreenProgress,
-      onTap: onTap,
-      springParams: springParams,
-      dragOptions: {
-        filterTaps: true,
-        axis: 'x',
-        pointer: {
-          keys: false
-        }
-      }
-    }),
-    isDragging = _useDragProgress.dragging,
-    progressSpring = _useDragProgress.progress,
-    dragContentBind = _useDragProgress.bind;
-  var getScreenStylesByIndex = function getScreenStylesByIndex(index, spring) {
-    if (transitionType === 'stack') {
-      return {
-        zIndex: index,
-        opacity: spring.to(function (progress) {
-          var t = index - progress;
-          var invert = Math.min(1, Math.max(0, -t));
-          if (Math.abs(t) > neighborScreensActive) return 0;
-          return Math.max(0, 1 - 0.75 * invert + (t + 1));
-        }),
-        transform: spring.to(function (progress) {
-          var t = index - progress;
-          var clamped = Math.min(1, Math.max(0, t));
-          var invert = Math.min(1, Math.max(0, -t));
-          if (Math.abs(t) > neighborScreensActive) return 'translateX(100%)';
-          return "translateX(".concat(clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")");
-        }),
-        boxShadow: spring.to(function (progress) {
-          var t = index - progress;
-          if (Math.abs(t) > neighborScreensActive) return null;
-          var clamped = Math.min(1, Math.max(0, t));
-          return "0 0 ".concat(4 * (1 - clamped), "rem ").concat(-0.5 * (1 - clamped), "rem black");
-        })
-      };
-    }
-    return {
-      opacity: spring.to(function (progress) {
-        var t = index - progress;
-        if (Math.abs(t) > neighborScreensActive) return 0;
-        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
-        return 1 - 0.75 * clamped;
-      }),
-      transform: spring.to(function (progress) {
-        var t = index - progress;
-        if (Math.abs(t) > neighborScreensActive) return "translate(100%)";
-        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
-        return "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")");
-      }),
-      zIndex: screensCount - index
-    };
-  };
-  var _useFullscreen = hooks.useFullscreen(containerRef.current || null),
-    toggleFullscreen = _useFullscreen.toggle,
-    fullscreenActive = _useFullscreen.active,
-    fullscreenEnabled = _useFullscreen.enabled;
-
-  // Get element height
-  var _useDimensionObserver3 = hooks.useDimensionObserver(),
-    menuDotsContainerRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.height,
-    menuDotsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var onClickScreen = React.useCallback(function (_ref14) {
-    var itemScreenId = _ref14.screenId;
-    onInteractionPrivate();
-    var index = screens.findIndex(function (_ref15) {
-      var id = _ref15.id;
-      return id === itemScreenId;
-    });
-    changeIndex(index);
-  }, [onInteractionPrivate, changeIndex]);
-  var onContextMenu = React.useCallback(function (e) {
-    if (!landscape) {
-      e.preventDefault();
-      return false;
-    }
-    return true;
-  }, [landscape]);
-
-  // hmm?
-  var overscrollStyle = /*#__PURE__*/React.createElement("style", {
-    type: "text/css"
-  }, "body { overscroll-behavior: contain; }");
-  var keyboardShortcuts = React.useMemo(function () {
-    return {
-      f: function f() {
-        return toggleFullscreen();
-      },
-      arrowleft: function arrowleft() {
-        if (!checkDraggable(document.activeElement)) {
-          gotoPreviousScreen();
-        }
-      },
-      arrowright: function arrowright() {
-        if (!checkDraggable(document.activeElement)) {
-          gotoNextScreen();
-        }
-      }
-      // ' ': () => gotoNextScreen(),
-    };
-  }, [gotoPreviousScreen, gotoNextScreen]);
-  useKeyboardShortcuts(keyboardShortcuts, {
-    disabled: renderContext !== 'view'
-  });
-
-  // const onClickSkipToContent = useCallback(() => {
-  //     const contentElement = document.getElementById('content') || null;
-  //     if (contentElement !== null) {
-  //         contentElement.focus();
-  //     }
-  // }, []);
-
-  var onClickSkipToPlaybackControls = React.useCallback(function () {
-    var controlsElement = document.getElementById('controls');
-    if (controlsElement) {
-      var buttons = controlsElement.querySelectorAll('button[tabindex]');
-      var firstFocusableButton = Array.from(buttons).find(function (button) {
-        return button.tabIndex >= 0;
-      });
-      if (firstFocusableButton) {
-        firstFocusableButton.focus({
-          preventScroll: true
-        });
-      }
-    }
-  }, []);
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    currentShareIncentive = _useState6[0],
-    setCurrentShareIncentive = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    shareIncentiveVisible = _useState8[0],
-    setShareIncentiveVisible = _useState8[1];
-  var _ref16 = currentScreen || {},
-    _ref16$header = _ref16.header,
-    header = _ref16$header === void 0 ? null : _ref16$header;
-  var _ref17 = header || {},
-    _ref17$shareIncentive = _ref17.shareIncentive,
-    shareIncentive = _ref17$shareIncentive === void 0 ? null : _ref17$shareIncentive;
-  var _ref18 = shareIncentive || {},
-    _ref18$active = _ref18.active,
-    hasShareIncentive = _ref18$active === void 0 ? false : _ref18$active,
-    _ref18$label = _ref18.label,
-    shareIncentiveLabel = _ref18$label === void 0 ? null : _ref18$label;
-  var _ref19 = currentShareIncentive || {},
-    _ref19$label = _ref19.label,
-    currentShareIncentiveLabel = _ref19$label === void 0 ? null : _ref19$label;
-  var _ref20 = shareIncentiveLabel || {},
-    _ref20$body = _ref20.body,
-    incentiveLabel = _ref20$body === void 0 ? null : _ref20$body;
-  var _ref21 = currentShareIncentiveLabel || {},
-    _ref21$body = _ref21.body,
-    currentIncentiveLabel = _ref21$body === void 0 ? null : _ref21$body;
-  React.useEffect(function () {
-    setShareIncentiveVisible(true);
-    if (hasShareIncentive && shareIncentiveLabel !== currentShareIncentiveLabel) {
-      setCurrentShareIncentive(shareIncentive);
-    }
-    var timeout = setTimeout(function () {
-      if (isView) {
-        setShareIncentiveVisible(false);
-      }
-    }, SHARE_INCENTIVE_TIMEOUT);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [shareIncentiveLabel, setShareIncentiveVisible, hasShareIncentive, incentiveLabel, currentIncentiveLabel, setCurrentShareIncentive, isView]);
-  var _useState9 = React.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    preloadNeighbors = _useState10[0],
-    setPreloadNeighbors = _useState10[1];
-  React.useEffect(function () {
-    setPreloadNeighbors(false);
-    var timeout = setTimeout(function () {
-      setPreloadNeighbors(true);
-    }, 1000);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [screenIndex]);
-  var topHeight = 0;
-  if (topSafezoneHeight !== null) {
-    topHeight = topSafezoneHeight / screenScale;
-  } else if (menuOverScreen && currentScreenInteractionEnabled) {
-    topHeight = menuDotsContainerHeight / screenScale;
-  }
-  var bottomHeight = 0;
-  if (bottomSafezoneHeight !== null) {
-    bottomHeight = bottomSafezoneHeight / screenScale;
-  } else if (playbackControls && (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled) {
-    bottomHeight = playbackControlsContainerHeight / screenScale;
-  }
-  return /*#__PURE__*/React.createElement(contexts.StoryProvider, {
-    story: parsedStory
-  }, /*#__PURE__*/React.createElement(contexts.ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React.createElement(contexts.ViewerProvider, {
-    containerRef: containerRef,
-    events: eventsManager,
-    menuVisible: menuVisible,
-    menuOverScreen: menuOverScreen,
-    width: viewerWidth,
-    height: viewerHeight,
-    topHeight: topHeight,
-    bottomHeight: bottomHeight,
-    bottomSidesWidth: (playbackcontrolsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,
-    gotoPreviousScreen: gotoPreviousScreen,
-    gotoNextScreen: gotoNextScreen,
-    disableInteraction: disableInteraction,
-    enableInteraction: enableInteraction
-  }, withMetadata ? /*#__PURE__*/React.createElement(components.Meta, {
-    title: finalTitle,
-    metadata: finalMetadata
-  }, overscrollStyle) : /*#__PURE__*/React.createElement(reactHelmet.Helmet, null, overscrollStyle), /*#__PURE__*/React.createElement(components.FontFaces, {
-    fonts: finalFonts
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
-      return "story-screen-".concat(screenName);
-    }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$6.landscape, landscape), styles$6.withoutGestures, withoutGestures), styles$6.hideMenu, !menuVisible), styles$6.disableMenu, navigationDisabled), styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), styles$6.ready, ready || withoutScreensTransforms), styles$6.hasInteracted, hasInteracted), styles$6.isDragging, isDragging), className, className)]),
-    ref: containerRef,
-    onContextMenu: onContextMenu
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.ariaAnnouncement,
-    id: "announce",
-    "aria-live": "polite"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "AIr8rM",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Screen "
-    }, {
-      "type": 1,
-      "value": "current"
-    }, {
-      "type": 0,
-      "value": " of "
-    }, {
-      "type": 1,
-      "value": "length"
-    }],
-    values: {
-      current: screenIndex + 1,
-      length: screens.length
-    }
-  })), /*#__PURE__*/React.createElement("nav", {
-    "aria-label": intl.formatMessage({
-      id: "gfZs4J",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Skip Links"
-      }]
-    }),
-    className: styles$6.accessibilityLinks
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    onClick: onClickSkipToPlaybackControls,
-    "aria-disabled": withoutPlaybackControls || !playbackcontrolsVisible,
-    "aria-describedby": "disabledReason",
-    className: classNames([styles$6.accessibilityButton, _defineProperty({}, styles$6.disabled, withoutPlaybackControls || !playbackcontrolsVisible)])
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "CnVj9r",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Skip to controls"
-    }]
-  })), withoutPlaybackControls || !playbackcontrolsVisible ? /*#__PURE__*/React.createElement("div", {
-    role: "tooltip",
-    className: styles$6.tooltipBox,
-    id: "disabledReason"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$6.tooltip
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "YXhRxW",
-    defaultMessage: [{
-      "type": 0,
-      "value": "No controls available"
-    }]
-  }))) : null), !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu$1, {
-    story: parsedStory,
-    currentScreenIndex: screenIndex,
-    withShadow: menuOverScreen && !withoutMenuShadow,
-    toggleFullscreen: toggleFullscreen,
-    fullscreenActive: fullscreenActive,
-    fullscreenEnabled: fullscreenEnabled,
-    menuDotsButtons: menuDotsButtons,
-    closeable: closeable,
-    shareBasePath: shareBasePath || basePath,
-    screenSize: screenSize,
-    menuWidth: menuIsScreenWidth ? screenContainerWidth : null,
-    theme: viewerTheme,
-    previewHeader: menuHeader,
-    previewFooter: menuFooter,
-    trackingEnabled: trackingEnabled,
-    onClickScreen: onClickScreen,
-    onClickCloseViewer: onCloseViewer,
-    onChange: onMenuChange,
-    withDotItemClick: screenContainerWidth > 400,
-    withoutScreensMenu: withoutScreensMenu,
-    withoutShareMenu: withoutShareMenu,
-    afterShareMenuButton: afterShareMenuButton,
-    beforeScreensMenuButton: beforeScreensMenuButton,
-    refDots: menuDotsContainerRef
-  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles$6.content
-  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
-    direction: "previous",
-    className: classNames([styles$6.navButton, styles$6.previous]),
-    onClick: gotoPreviousScreen,
-    ariaLabel: intl.formatMessage({
-      id: "zYH/31",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to previous screen"
-      }]
-    })
-  }) : 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 = screenIndex === i;
-    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive && preloadNeighbors;
-    var screenStyles = getScreenStylesByIndex(i, progressSpring);
-    return /*#__PURE__*/React.createElement(web.animated.div, {
-      key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
-      id: current ? 'content' : null,
-      "aria-hidden": !current,
-      style: screenStyles,
-      tabIndex: current ? 0 : -1,
-      className: classNames([styles$6.screenContainer, _defineProperty({}, styles$6.current, current)])
-    }, screen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
-      className: styles$6.screen,
-      screen: screen,
-      screenState: current ? screenState : null,
-      index: i,
-      current: current,
-      active: active || current,
-      ready: current && transitioned,
-      mediaRef: function mediaRef(ref) {
-        screensMediasRef.current[i] = ref;
-      },
-      renderContext: renderContext,
-      width: screenWidth,
-      height: screenHeight,
-      scale: screenScale
-    }) : null);
-  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
-    direction: "next",
-    className: classNames([styles$6.navButton, styles$6.next]),
-    onClick: gotoNextScreen,
-    ariaLabel: intl.formatMessage({
-      id: "v9bqYj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen"
-      }]
-    })
-  }) : null, !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
-    className: styles$6.playbackControls,
-    id: "controls",
-    ref: playbackControlsContainerRef
-  }, /*#__PURE__*/React.createElement(PlaybackControls, {
-    className: styles$6.controls
-  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint$1, {
-    className: styles$6.arrowHint
-  }) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.shareIncentiveContainer, _defineProperty({}, styles$6.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
-    style: {
-      top: isEditor ? 10 : menuDotsContainerHeight - 10
-    }
-  }, /*#__PURE__*/React.createElement(all.ShareIncentive, Object.assign({
-    className: styles$6.shareIncentive
-  }, currentShareIncentive))), /*#__PURE__*/React.createElement(WebViewContainer, {
-    className: styles$6.webView,
-    style: {
-      maxWidth: Math.max(screenContainerWidth, 600)
-    }
-  })))));
-};
-Viewer.propTypes = propTypes$2;
-Viewer.defaultProps = defaultProps$2;
-var Viewer$1 = Viewer;
-
-var _excluded$1 = ["story", "pathWithIndex", "children", "onScreenChange"];
-var propTypes$1 = {
-  story: core.PropTypes.story,
-  // .isRequired,
-  pathWithIndex: PropTypes.bool,
-  children: PropTypes.func,
-  onScreenChange: PropTypes.func
-};
-var defaultProps$1 = {
-  story: null,
-  pathWithIndex: false,
-  children: null,
-  onScreenChange: null
-};
-var ViewerRoutes = function ViewerRoutes(_ref) {
-  var story = _ref.story,
-    pathWithIndex = _ref.pathWithIndex;
-    _ref.children;
-    var onScreenChange = _ref.onScreenChange,
-    otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var routes = useRoutes$1();
-  var url = useUrlGeneratorPathToRegexp();
-  var _useLocation = useLocation(),
-    _useLocation2 = _slicedToArray(_useLocation, 2),
-    navigate = _useLocation2[1];
-  var _ref2 = story || {},
-    _ref2$components = _ref2.components,
-    screens = _ref2$components === void 0 ? [] : _ref2$components;
-  var finalOnScreenChange = React.useCallback(function (it) {
-    var screenIndex = screens.findIndex(function (screen) {
-      var screenId = screen.id;
-      return screenId === it.id || screen === it;
-    });
-    navigate(url('screen', {
-      screen: pathWithIndex ? screenIndex + 1 : it.id
-    }));
-    if (onScreenChange !== null) {
-      onScreenChange(it);
-    }
-  }, [navigate, url, pathWithIndex, screens, onScreenChange]);
-  return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
-    path: routes.screen
-  }, function (_ref3) {
-    var _ref3$screen = _ref3.screen,
-      screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
-    var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
-    var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
-    return /*#__PURE__*/React.createElement(Viewer$1, Object.assign({}, otherProps, {
-      story: story,
-      screen: screenId,
-      onScreenChange: finalOnScreenChange
-    }));
-  }), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Viewer$1, Object.assign({}, otherProps, {
-    story: story,
-    onScreenChange: finalOnScreenChange
-  }))));
-};
-ViewerRoutes.propTypes = propTypes$1;
-ViewerRoutes.defaultProps = defaultProps$1;
-var ViewerRoutes$1 = ViewerRoutes;
-
-var home = "/";
-var screen = "/:screen";
-var defaultRoutes = {
-  home: home,
-  screen: screen
-};
-
-var _excluded = ["story", "paused", "screenComponents", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "visitor", "trackingVariables", "locale", "locales", "translations", "pathWithIndex"];
-var propTypes = {
-  story: core.PropTypes.story,
-  paused: PropTypes.bool,
-  screen: PropTypes.string,
-  screenComponents: PropTypes.objectOf(PropTypes.elementType),
-  memoryRouter: PropTypes.bool,
-  basePath: PropTypes.string,
-  routes: routes,
-  withoutRouter: PropTypes.bool,
-  googleApiKey: PropTypes.string,
-  visitor: core.PropTypes.visitor,
-  trackingVariables: core.PropTypes.trackingVariables,
-  locale: PropTypes.string,
-  locales: PropTypes.arrayOf(PropTypes.string),
-  translations: PropTypes.objectOf(PropTypes.string),
-  pathWithIndex: PropTypes.bool,
-  children: PropTypes.func
-};
-var defaultProps = {
-  story: null,
-  paused: false,
-  screen: null,
-  screenComponents: null,
-  memoryRouter: false,
-  basePath: null,
-  routes: defaultRoutes,
-  withoutRouter: false,
-  googleApiKey: null,
-  visitor: null,
-  trackingVariables: null,
-  locale: 'en',
-  locales: ['fr', 'en'],
-  translations: null,
-  pathWithIndex: false,
-  children: null
-};
-var ViewerContainer = function ViewerContainer(_ref) {
-  var story = _ref.story,
-    paused = _ref.paused,
-    screenComponents = _ref.screenComponents,
-    memoryRouter = _ref.memoryRouter,
-    basePath = _ref.basePath,
-    routes = _ref.routes,
-    withoutRouter = _ref.withoutRouter,
-    googleApiKey = _ref.googleApiKey,
-    visitor = _ref.visitor,
-    trackingVariables = _ref.trackingVariables,
-    locale = _ref.locale,
-    locales = _ref.locales,
-    translations = _ref.translations,
-    pathWithIndex = _ref.pathWithIndex,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  var finalTrackingVariables = React.useMemo(function () {
-    if (story === null && trackingVariables === null) {
-      return null;
-    }
-    var _story$id = story.id,
-      id = _story$id === void 0 ? null : _story$id,
-      _story$slug = story.slug,
-      slug = _story$slug === void 0 ? null : _story$slug,
-      _story$title = story.title,
-      title = _story$title === void 0 ? null : _story$title,
-      _story$components = story.components,
-      components = _story$components === void 0 ? [] : _story$components;
-    return _objectSpread({
-      storyId: id,
-      storySlug: slug,
-      storyTitle: title,
-      screensCount: (components || []).length
-    }, trackingVariables);
-  }, [story, trackingVariables]);
-  var _ref2 = story || {},
-    metadata = _ref2.metadata;
-  var _ref3 = metadata || {},
-    _ref3$language = _ref3.language,
-    finalLocale = _ref3$language === void 0 ? locale : _ref3$language;
-  var content = /*#__PURE__*/React.createElement(intl.IntlProvider, {
-    locale: finalLocale,
-    locales: locales,
-    extraMessages: translations
-  }, /*#__PURE__*/React.createElement(contexts.GoogleKeysProvider, {
-    apiKey: googleApiKey
-  }, /*#__PURE__*/React.createElement(contexts.GoogleMapsClientProvider, {
-    locale: finalLocale
-  }, /*#__PURE__*/React.createElement(screens.ScreensProvider, null, /*#__PURE__*/React.createElement(contexts.ComponentsProvider, {
-    namespace: contexts.SCREENS_NAMESPACE,
-    components: screenComponents || {}
-  }, /*#__PURE__*/React.createElement(contexts.VisitorProvider, {
-    visitor: visitor
-  }, /*#__PURE__*/React.createElement(contexts.PlaybackProvider, {
-    paused: paused
-  }, /*#__PURE__*/React.createElement(contexts.TrackingProvider, {
-    variables: finalTrackingVariables
-  }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer$1, Object.assign({
-    story: story,
-    basePath: basePath
-  }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes$1, Object.assign({
-    story: story,
-    basePath: basePath,
-    pathWithIndex: pathWithIndex
-  }, otherProps))))))))));
-  var _useMemoryRouter = useMemoryRouter(),
-    memoryRouterHook = _useMemoryRouter.hook,
-    memoryRouterSearchHook = _useMemoryRouter.searchHook;
-  var routerProps = React.useMemo(function () {
-    return {
-      hook: memoryRouter ? memoryRouterHook : null,
-      searchHook: memoryRouter ? memoryRouterSearchHook : null,
-      base: !memoryRouter ? basePath : null
-    };
-  }, [basePath, memoryRouter]);
-  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, routerProps, /*#__PURE__*/React.createElement(RoutesProvider, {
-    routes: routes
-  }, content));
-};
-ViewerContainer.propTypes = propTypes;
-ViewerContainer.defaultProps = defaultProps;
-var ViewerContainer$1 = ViewerContainer;
-
-exports.Viewer = Viewer$1;
-exports.default = ViewerContainer$1;