@micromag/core 0.3.307 → 0.3.318

package/es/contexts.js

@@ -26,10 +26,10 @@ var FORMS_NAMESPACE = 'forms';
 var SCREENS_NAMESPACE = 'screens';
 var ELEMENTS_NAMESPACE = 'elements';
 var ComponentsContext = /*#__PURE__*/React.createContext(null);
+
 /**
  * Hooks
  */
-
 var useComponentsManager = function useComponentsManager() {
   var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var manager = useContext(ComponentsContext);
@@ -52,14 +52,13 @@ var useComponent = function useComponent(name) {
     if (!isString(name)) {
       return name || defaultComponent;
     }
-
     return manager.getComponent(name) || defaultComponent;
   }, [manager, name, defaultComponent]);
 };
+
 /**
  * Fields hooks
  */
-
 var useFieldsComponentsManager = function useFieldsComponentsManager() {
   return useComponentsManager(FIELDS_NAMESPACE);
 };
@@ -71,10 +70,10 @@ var useFieldComponent = function useFieldComponent(name) {
   var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return useComponent(name, defaultComponent, FIELDS_NAMESPACE);
 };
+
 /**
  * Screens hooks
  */
-
 var useScreensComponentsManager = function useScreensComponentsManager() {
   return useComponentsManager(SCREENS_NAMESPACE);
 };
@@ -86,10 +85,10 @@ var useScreenComponent = function useScreenComponent(name) {
   var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return useComponent(name, defaultComponent, SCREENS_NAMESPACE);
 };
+
 /**
  * Forms hooks
  */
-
 var useFormsComponentsManager = function useFormsComponentsManager() {
   return useComponentsManager(FORMS_NAMESPACE);
 };
@@ -101,10 +100,10 @@ var useFormComponent = function useFormComponent(name) {
   var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return useComponent(name, defaultComponent, FORMS_NAMESPACE);
 };
+
 /**
  * Modals hooks
  */
-
 var useModalsComponentsManager = function useModalsComponentsManager() {
   return useComponentsManager(MODALS_NAMESPACE);
 };
@@ -116,10 +115,10 @@ var useModalComponent = function useModalComponent(name) {
   var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return useComponent(name, defaultComponent, MODALS_NAMESPACE);
 };
+
 /**
  * Elements hooks
  */
-
 var useElementsComponentsManager = function useElementsComponentsManager() {
   return useComponentsManager(ELEMENTS_NAMESPACE);
 };
@@ -131,10 +130,10 @@ var useElementComponent = function useElementComponent(name) {
   var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return useComponent(name, defaultComponent, ELEMENTS_NAMESPACE);
 };
+
 /**
  * Provider
  */
-
 var propTypes$k = {
   children: PropTypes.node.isRequired,
   namespace: PropTypes.string,
@@ -148,9 +147,9 @@ var defaultProps$k = {
 };
 var ComponentsProvider = function ComponentsProvider(_ref) {
   var components = _ref.components,
-      manager = _ref.manager,
-      namespace = _ref.namespace,
-      children = _ref.children;
+    manager = _ref.manager,
+    namespace = _ref.namespace,
+    children = _ref.children;
   var previousManager = useComponentsManager() || null;
   var finalManager = useMemo(function () {
     return new ComponentsManager(_objectSpread(_objectSpread(_objectSpread({}, previousManager !== null ? previousManager.getComponents() : null), manager !== null ? manager.getComponents() : null), new ComponentsManager(components).addNamespace(namespace).getComponents()));
@@ -181,8 +180,8 @@ var defaultProps$j = {
 };
 var FieldsProvider = function FieldsProvider(_ref) {
   var fields = _ref.fields,
-      manager = _ref.manager,
-      children = _ref.children;
+    manager = _ref.manager,
+    children = _ref.children;
   var previousManager = useFieldsManager() || null;
   var finalManager = useMemo(function () {
     var newFields = uniqBy([].concat(_toConsumableArray(fields || []), _toConsumableArray(manager !== null ? manager.getDefinitions() : []), _toConsumableArray(previousManager !== null ? previousManager.getDefinitions() : [])), function (_ref2) {
@@ -227,44 +226,38 @@ var defaultProps$i = {
 };
 var ScreensProvider = function ScreensProvider(_ref) {
   var screens = _ref.screens,
-      namespaces = _ref.namespaces,
-      filterNamespaces = _ref.filterNamespaces,
-      manager = _ref.manager,
-      children = _ref.children;
+    namespaces = _ref.namespaces,
+    filterNamespaces = _ref.filterNamespaces,
+    manager = _ref.manager,
+    children = _ref.children;
   var previousManager = useScreensManager();
   var finalManager = useMemo(function () {
     var newManager = manager !== null ? manager : new ScreensManager(screens);
-
     if ((previousManager || null) !== null) {
       newManager = previousManager.merge(newManager);
     }
-
     if (filterNamespaces) {
       newManager = previousManager.filter(function (_ref2) {
         var _ref2$namespaces = _ref2.namespaces,
-            screenGroups = _ref2$namespaces === void 0 ? null : _ref2$namespaces;
+          screenGroups = _ref2$namespaces === void 0 ? null : _ref2$namespaces;
         return screenGroups === null || namespaces !== null && screenGroups.reduce(function (acc, id) {
           return acc || namespaces.indexOf(id) !== -1;
         }, false);
       });
     }
-
     return newManager;
   }, [manager, screens, namespaces, filterNamespaces, previousManager]);
   var initialComponents = useMemo(function () {
     return finalManager.getComponents();
   }, [finalManager]);
-
   var _useState = useState(initialComponents),
-      _useState2 = _slicedToArray(_useState, 2),
-      components = _useState2[0],
-      setComponents = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    components = _useState2[0],
+    setComponents = _useState2[1];
   useEffect(function () {
     var onChange = function onChange() {
       return setComponents(finalManager.getComponents());
     };
-
     finalManager.on('change', onChange);
     return function () {
       finalManager.off('change', onChange);
@@ -297,7 +290,7 @@ var defaultProps$h = {
 };
 var StoryProvider = function StoryProvider(_ref) {
   var story = _ref.story,
-      children = _ref.children;
+    children = _ref.children;
   return /*#__PURE__*/React.createElement(StoryContext.Provider, {
     value: story
   }, children);
@@ -311,11 +304,10 @@ var useEditor = function useEditor() {
 };
 var useGetColors = function useGetColors() {
   var _ref = useEditor() || {},
-      _ref$getColors = _ref.getColors,
-      getColors = _ref$getColors === void 0 ? function () {
-    return [];
-  } : _ref$getColors;
-
+    _ref$getColors = _ref.getColors,
+    getColors = _ref$getColors === void 0 ? function () {
+      return [];
+    } : _ref$getColors;
   return getColors;
 };
 var propTypes$g = {
@@ -338,8 +330,9 @@ var EditorProvider = function EditorProvider(_ref2) {
   }, [parser]);
   var getColors = useCallback(function () {
     return parse(story);
-  }, [parse, story]); // eslint-disable-next-line react/jsx-no-constructed-context-values
+  }, [parse, story]);
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       getColors: getColors
@@ -364,7 +357,7 @@ var defaultProps$f = {
 };
 var FieldsValueContextProvider = function FieldsValueContextProvider(_ref) {
   var value = _ref.value,
-      children = _ref.children;
+    children = _ref.children;
   return /*#__PURE__*/React.createElement(FieldsValueContext.Provider, {
     value: value
   }, children);
@@ -387,7 +380,7 @@ var defaultProps$e = {
 };
 var FieldContextProvider = function FieldContextProvider(_ref) {
   var context = _ref.context,
-      children = _ref.children;
+    children = _ref.children;
   return /*#__PURE__*/React.createElement(FieldContext.Provider, {
     value: context
   }, children);
@@ -405,18 +398,16 @@ var useGoogleKeys = function useGoogleKeys() {
 var propTypes$d = {
   children: PropTypes.node.isRequired,
   apiKey: PropTypes.string // .isRequired,
-
 };
+
 var defaultProps$d = {
   apiKey: null
 };
 var GoogleKeysProvider = function GoogleKeysProvider(_ref) {
   var children = _ref.children,
-      apiKey = _ref.apiKey;
-
+    apiKey = _ref.apiKey;
   var _useGoogleKeys = useGoogleKeys(),
-      previousApiKey = _useGoogleKeys.apiKey;
-
+    previousApiKey = _useGoogleKeys.apiKey;
   var value = useMemo(function () {
     return {
       apiKey: apiKey || previousApiKey
@@ -436,27 +427,22 @@ var FontsContext = /*#__PURE__*/React.createContext({
 });
 var useGoogleFonts = function useGoogleFonts() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$setFonts = _ref.setFonts,
-      setFonts = _ref$setFonts === void 0 ? null : _ref$setFonts;
-
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$setFonts = _ref.setFonts,
+    setFonts = _ref$setFonts === void 0 ? null : _ref$setFonts;
   var _useGoogleKeys = useGoogleKeys(),
-      apiKey = _useGoogleKeys.apiKey;
-
+    apiKey = _useGoogleKeys.apiKey;
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      googleFonts = _useState2[0],
-      setGoogleFonts = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    googleFonts = _useState2[0],
+    setGoogleFonts = _useState2[1];
   useEffect(function () {
     var canceled = false;
-
     if (apiKey !== null && !disabled) {
       getJSON("https://www.googleapis.com/webfonts/v1/webfonts?key=".concat(apiKey, "&sort=popularity")).then(function (_ref2) {
         var _ref2$items = _ref2.items,
-            items = _ref2$items === void 0 ? [] : _ref2$items;
-
+          items = _ref2$items === void 0 ? [] : _ref2$items;
         if (!canceled) {
           var newFonts = items.map(function (it) {
             return {
@@ -465,7 +451,6 @@ var useGoogleFonts = function useGoogleFonts() {
               variants: it.variants
             };
           });
-
           if (setFonts !== null) {
             setFonts(newFonts);
           } else {
@@ -474,7 +459,6 @@ var useGoogleFonts = function useGoogleFonts() {
         }
       });
     }
-
     return function () {
       canceled = true;
     };
@@ -483,19 +467,17 @@ var useGoogleFonts = function useGoogleFonts() {
 };
 var useFonts = function useFonts() {
   var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref3$withoutGoogleFo = _ref3.withoutGoogleFonts,
-      withoutGoogleFonts = _ref3$withoutGoogleFo === void 0 ? false : _ref3$withoutGoogleFo;
-
+    _ref3$withoutGoogleFo = _ref3.withoutGoogleFonts,
+    withoutGoogleFonts = _ref3$withoutGoogleFo === void 0 ? false : _ref3$withoutGoogleFo;
   var _useContext = useContext(FontsContext),
-      _useContext$setGoogle = _useContext.setGoogleFonts,
-      setGoogleFonts = _useContext$setGoogle === void 0 ? null : _useContext$setGoogle,
-      _useContext$systemFon = _useContext.systemFonts,
-      systemFonts = _useContext$systemFon === void 0 ? null : _useContext$systemFon,
-      _useContext$googleFon = _useContext.googleFonts,
-      googleFonts = _useContext$googleFon === void 0 ? null : _useContext$googleFon,
-      _useContext$customFon = _useContext.customFonts,
-      customFonts = _useContext$customFon === void 0 ? null : _useContext$customFon;
-
+    _useContext$setGoogle = _useContext.setGoogleFonts,
+    setGoogleFonts = _useContext$setGoogle === void 0 ? null : _useContext$setGoogle,
+    _useContext$systemFon = _useContext.systemFonts,
+    systemFonts = _useContext$systemFon === void 0 ? null : _useContext$systemFon,
+    _useContext$googleFon = _useContext.googleFonts,
+    googleFonts = _useContext$googleFon === void 0 ? null : _useContext$googleFon,
+    _useContext$customFon = _useContext.customFonts,
+    customFonts = _useContext$customFon === void 0 ? null : _useContext$customFon;
   useGoogleFonts({
     disabled: withoutGoogleFonts || googleFonts !== null && googleFonts.length > 0,
     setFonts: setGoogleFonts
@@ -520,21 +502,18 @@ var defaultProps$c = {
 };
 var FontsProvider = function FontsProvider(_ref4) {
   var systemFonts = _ref4.systemFonts,
-      customFonts = _ref4.customFonts,
-      children = _ref4.children;
-
+    customFonts = _ref4.customFonts,
+    children = _ref4.children;
   var _useFonts = useFonts(),
-      _useFonts$systemFonts = _useFonts.systemFonts,
-      previousSystemFonts = _useFonts$systemFonts === void 0 ? null : _useFonts$systemFonts,
-      _useFonts$googleFonts = _useFonts.googleFonts,
-      previousGoogleFonts = _useFonts$googleFonts === void 0 ? null : _useFonts$googleFonts,
-      previousCustomFonts = _useFonts.customFonts;
-
+    _useFonts$systemFonts = _useFonts.systemFonts,
+    previousSystemFonts = _useFonts$systemFonts === void 0 ? null : _useFonts$systemFonts,
+    _useFonts$googleFonts = _useFonts.googleFonts,
+    previousGoogleFonts = _useFonts$googleFonts === void 0 ? null : _useFonts$googleFonts,
+    previousCustomFonts = _useFonts.customFonts;
   var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      googleFonts = _useState4[0],
-      setGoogleFonts = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    googleFonts = _useState4[0],
+    setGoogleFonts = _useState4[1];
   var fonts = useMemo(function () {
     return {
       systemFonts: uniqBy([].concat(_toConsumableArray(previousSystemFonts || []), _toConsumableArray(systemFonts || [])), function (font) {
@@ -563,12 +542,11 @@ var useGoogleApiClient = function useGoogleApiClient() {
 var withGoogleApiClient = function withGoogleApiClient(WrappedComponent) {
   var getDisplayName = function getDisplayName(_ref) {
     var _ref$displayName = _ref.displayName,
-        displayName = _ref$displayName === void 0 ? null : _ref$displayName,
-        _ref$name = _ref.name,
-        name = _ref$name === void 0 ? null : _ref$name;
+      displayName = _ref$displayName === void 0 ? null : _ref$displayName,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? null : _ref$name;
     return displayName || name || 'Component';
   };
-
   var WithGoogleApiClientComponent = function WithGoogleApiClientComponent(props) {
     return /*#__PURE__*/React.createElement(GoogleApiClientContext.Consumer, null, function (client) {
       return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
@@ -576,7 +554,6 @@ var withGoogleApiClient = function withGoogleApiClient(WrappedComponent) {
       }, props));
     });
   };
-
   WithGoogleApiClientComponent.displayName = "WithGoogleApiClient(".concat(getDisplayName(WrappedComponent), ")");
   return WithGoogleApiClientComponent;
 };
@@ -586,15 +563,12 @@ var propTypes$b = {
 var defaultProps$b = {};
 var GoogleApiClientProvider = function GoogleApiClientProvider(_ref2) {
   var children = _ref2.children;
-
   var _useGoogleKeys = useGoogleKeys(),
-      apiKey = _useGoogleKeys.apiKey;
-
+    apiKey = _useGoogleKeys.apiKey;
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      client = _useState2[0],
-      setClient = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    client = _useState2[0],
+    setClient = _useState2[1];
   useEffect(function () {
     loadGoogleApi().then(function (gapi) {
       return gapi.client.init({
@@ -620,12 +594,11 @@ var useGoogleMapsClient = function useGoogleMapsClient() {
 var withGoogleMapsClient = function withGoogleMapsClient(WrappedComponent) {
   var getDisplayName = function getDisplayName(_ref) {
     var _ref$displayName = _ref.displayName,
-        displayName = _ref$displayName === void 0 ? null : _ref$displayName,
-        _ref$name = _ref.name,
-        name = _ref$name === void 0 ? null : _ref$name;
+      displayName = _ref$displayName === void 0 ? null : _ref$displayName,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? null : _ref$name;
     return displayName || name || 'Component';
   };
-
   var WithGoogleMapsClientComponent = function WithGoogleMapsClientComponent(props) {
     return /*#__PURE__*/React.createElement(GoogleMapsClientContext.Consumer, null, function (client) {
       return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
@@ -633,7 +606,6 @@ var withGoogleMapsClient = function withGoogleMapsClient(WrappedComponent) {
       }, props));
     });
   };
-
   WithGoogleMapsClientComponent.displayName = "WithGoogleMapsClient(".concat(getDisplayName(WrappedComponent), ")");
   return WithGoogleMapsClientComponent;
 };
@@ -648,19 +620,15 @@ var defaultProps$a = {
 };
 var GoogleMapsClientProvider = function GoogleMapsClientProvider(_ref2) {
   var children = _ref2.children,
-      locale = _ref2.locale,
-      libraries = _ref2.libraries;
-
+    locale = _ref2.locale,
+    libraries = _ref2.libraries;
   var _useGoogleKeys = useGoogleKeys(),
-      apiKey = _useGoogleKeys.apiKey;
-
+    apiKey = _useGoogleKeys.apiKey;
   var exisitingClient = useGoogleMapsClient();
-
   var _useState = useState(exisitingClient),
-      _useState2 = _slicedToArray(_useState, 2),
-      client = _useState2[0],
-      setClient = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    client = _useState2[0],
+    setClient = _useState2[1];
   useEffect(function () {
     if (exisitingClient === null) {
       loadGoogleMaps({
@@ -689,10 +657,10 @@ var withModals = function withModals(WrappedComponent) {
   var WithModalsComponent = function WithModalsComponent(props) {
     return /*#__PURE__*/React.createElement(ModalsContext.Consumer, null, function (_ref) {
       var modals = _ref.modals,
-          container = _ref.container,
-          setContainer = _ref.setContainer,
-          register = _ref.register,
-          unregister = _ref.unregister;
+        container = _ref.container,
+        setContainer = _ref.setContainer,
+        register = _ref.register,
+        unregister = _ref.unregister;
       return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
         modalsContainer: container,
         setModalsContainer: setContainer,
@@ -702,32 +670,28 @@ var withModals = function withModals(WrappedComponent) {
       }, props));
     });
   };
-
   WithModalsComponent.displayName = "WithModals(".concat(getDisplayName(WrappedComponent), ")");
   return WithModalsComponent;
 };
 var propTypes$9 = {
   children: PropTypes.node.isRequired,
   container: PropTypes.object // eslint-disable-line
-
 };
+
 var defaultProps$9 = {
   container: null
 };
 var ModalsProvider = function ModalsProvider(_ref2) {
   var children = _ref2.children,
-      initialContainer = _ref2.container;
-
+    initialContainer = _ref2.container;
   var _useState = useState(initialContainer),
-      _useState2 = _slicedToArray(_useState, 2),
-      container = _useState2[0],
-      setContainer = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      modals = _useState4[0],
-      setModals = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    modals = _useState4[0],
+    setModals = _useState4[1];
   var modalsRef = useRef(modals);
   var register = useCallback(function (id) {
     var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -744,7 +708,6 @@ var ModalsProvider = function ModalsProvider(_ref2) {
       var modalId = _ref3.id;
       return modalId === id;
     });
-
     if (foundIndex !== -1) {
       var newModals = currentModals.filter(function (_ref4) {
         var modalId = _ref4.id;
@@ -780,10 +743,10 @@ var withPanels = function withPanels(WrappedComponent) {
   var WithPanelsComponent = function WithPanelsComponent(props) {
     return /*#__PURE__*/React.createElement(PanelsContext.Consumer, null, function (_ref) {
       var panels = _ref.panels,
-          setContainer = _ref.setContainer,
-          container = _ref.container,
-          register = _ref.register,
-          unregister = _ref.unregister;
+        setContainer = _ref.setContainer,
+        container = _ref.container,
+        register = _ref.register,
+        unregister = _ref.unregister;
       return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
         panelsContainer: container,
         setPanelsContainer: setContainer,
@@ -793,32 +756,28 @@ var withPanels = function withPanels(WrappedComponent) {
       }, props));
     });
   };
-
   WithPanelsComponent.displayName = "WithPanels(".concat(getDisplayName(WrappedComponent), ")");
   return WithPanelsComponent;
 };
 var propTypes$8 = {
   children: PropTypes.node.isRequired,
   container: PropTypes.object // eslint-disable-line
-
 };
+
 var defaultProps$8 = {
   container: null
 };
 var PanelsProvider = function PanelsProvider(_ref2) {
   var children = _ref2.children,
-      initialContainer = _ref2.container;
-
+    initialContainer = _ref2.container;
   var _useState = useState(initialContainer),
-      _useState2 = _slicedToArray(_useState, 2),
-      container = _useState2[0],
-      setContainer = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      panels = _useState4[0],
-      setPanels = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    panels = _useState4[0],
+    setPanels = _useState4[1];
   var panelsRef = useRef(panels);
   var register = useCallback(function (id) {
     var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -835,7 +794,6 @@ var PanelsProvider = function PanelsProvider(_ref2) {
       var modalId = _ref3.id;
       return modalId === id;
     });
-
     if (foundIndex !== -1) {
       var newPanels = currentPanels.filter(function (_ref4) {
         var modalId = _ref4.id;
@@ -868,6 +826,7 @@ var defaultControlsThemeValue = {
 };
 var defaultValue$1 = {
   playing: false,
+  paused: false,
   muted: true,
   controls: false,
   controlsVisible: false,
@@ -889,18 +848,15 @@ var usePlaybackContext = function usePlaybackContext() {
 };
 var usePlaybackMediaRef = function usePlaybackMediaRef(active) {
   var _usePlaybackContext = usePlaybackContext(),
-      setMedia = _usePlaybackContext.setMedia;
-
+    setMedia = _usePlaybackContext.setMedia;
   var mediaRef = useRef(null);
   useEffect(function () {
     if (!active) {
       return function () {};
     }
-
     if (mediaRef.current !== null) {
       setMedia(mediaRef.current);
     }
-
     return function () {
       setMedia(null);
     };
@@ -917,49 +873,42 @@ var propTypes$7 = {
     progressColor: PropTypes.any
   }),
   muted: PropTypes.bool,
-  playing: PropTypes.bool
+  playing: PropTypes.bool,
+  paused: PropTypes.bool
 };
-
 var defaultProps$7 = _objectSpread({}, defaultValue$1);
-
 var PlaybackProvider = function PlaybackProvider(_ref) {
   var initialMuted = _ref.muted,
-      initialPlaying = _ref.playing,
-      initialControls = _ref.controls,
-      initialControlsVisible = _ref.controlsVisible,
-      initialControlsTheme = _ref.controlsTheme,
-      children = _ref.children;
-
+    initialPlaying = _ref.playing,
+    paused = _ref.paused,
+    initialControls = _ref.controls,
+    initialControlsVisible = _ref.controlsVisible,
+    initialControlsTheme = _ref.controlsTheme,
+    children = _ref.children;
   var _useState = useState(initialMuted),
-      _useState2 = _slicedToArray(_useState, 2),
-      muted = _useState2[0],
-      setMuted = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    muted = _useState2[0],
+    setMuted = _useState2[1];
   var _useState3 = useState(initialPlaying),
-      _useState4 = _slicedToArray(_useState3, 2),
-      playing = _useState4[0],
-      setPlaying = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    playing = _useState4[0],
+    setPlaying = _useState4[1];
   var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      media = _useState6[0],
-      setMedia = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    media = _useState6[0],
+    setMedia = _useState6[1];
   var _useState7 = useState(initialControls),
-      _useState8 = _slicedToArray(_useState7, 2),
-      controls = _useState8[0],
-      setControls = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    controls = _useState8[0],
+    setControls = _useState8[1];
   var _useState9 = useState(initialControlsVisible),
-      _useState10 = _slicedToArray(_useState9, 2),
-      controlsVisible = _useState10[0],
-      setControlsVisible = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    controlsVisible = _useState10[0],
+    setControlsVisible = _useState10[1];
   var _useState11 = useState(initialControlsTheme),
-      _useState12 = _slicedToArray(_useState11, 2),
-      controlsTheme = _useState12[0],
-      setControlsTheme = _useState12[1];
-
+    _useState12 = _slicedToArray(_useState11, 2),
+    controlsTheme = _useState12[0],
+    setControlsTheme = _useState12[1];
   var finalSetControls = useCallback(function (newControls) {
     if (newControls) {
       setControls(true);
@@ -982,21 +931,18 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     if (media === null || media.tagName.toLowerCase() !== 'video') {
       return false;
     }
-
     if (media.tagName.toLowerCase() === 'audio') {
       return true;
     }
-
     if (typeof media.dataset.hasAudio === 'undefined') {
       return null;
     }
-
     return media.dataset.hasAudio === 'true' || media.dataset.hasAudio === true;
   }, [media]);
   var value = useMemo(function () {
     return {
       muted: muted,
-      playing: playing,
+      playing: playing && !paused,
       controls: controls,
       controlsVisible: controlsVisible,
       media: media,
@@ -1011,7 +957,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       hideControls: hideControls,
       setMedia: setMedia
     };
-  }, [muted, playing, controls, controlsVisible, controlsTheme, media, hasAudio, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
+  }, [muted, playing, paused, controls, controlsVisible, controlsTheme, media, hasAudio, setMuted, setPlaying, finalSetControls, finalSetControlsTheme, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);
@@ -1023,15 +969,13 @@ PlaybackProvider.defaultProps = defaultProps$7;
 var RoutesContext = /*#__PURE__*/React.createContext(null);
 var useRoutes = function useRoutes() {
   var _useContext = useContext(RoutesContext),
-      routes = _useContext.routes;
-
+    routes = _useContext.routes;
   return routes;
 };
 var useUrlGenerator = function useUrlGenerator() {
   var _useContext2 = useContext(RoutesContext),
-      routes = _useContext2.routes,
-      basePath = _useContext2.basePath;
-
+    routes = _useContext2.routes,
+    basePath = _useContext2.basePath;
   var urlGenerator = useCallback(function (key, data) {
     var url = generatePath(routes[key], data);
     return basePath !== null ? "".concat(basePath.replace(/\/$/, ''), "/").concat(url.replace(/^\//, '')) : url;
@@ -1045,16 +989,14 @@ var useRoutePush = function useRoutePush() {
     for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
       args[_key - 2] = arguments[_key];
     }
-
     if (isString(route)) {
       history.push.apply(history, [url(route, data)].concat(args));
     } else {
       var _ref = route || {},
-          _ref$pathname = _ref.pathname,
-          pathname = _ref$pathname === void 0 ? null : _ref$pathname,
-          _ref$search = _ref.search,
-          search = _ref$search === void 0 ? null : _ref$search;
-
+        _ref$pathname = _ref.pathname,
+        pathname = _ref$pathname === void 0 ? null : _ref$pathname,
+        _ref$search = _ref.search,
+        search = _ref$search === void 0 ? null : _ref$search;
       history.push.apply(history, [{
         pathname: url(pathname, data),
         search: search
@@ -1083,8 +1025,8 @@ var defaultProps$6 = {
 };
 var RoutesProvider = function RoutesProvider(_ref2) {
   var routes = _ref2.routes,
-      basePath = _ref2.basePath,
-      children = _ref2.children;
+    basePath = _ref2.basePath,
+    children = _ref2.children;
   var value = useMemo(function () {
     return {
       routes: routes,
@@ -1108,15 +1050,12 @@ var useScreen = function useScreen() {
 };
 var useScreenDefinition = function useScreenDefinition() {
   var intl = useIntl();
-
   var _ref = useScreen() || {},
-      _ref$definition = _ref.definition,
-      definition = _ref$definition === void 0 ? null : _ref$definition;
-
+    _ref$definition = _ref.definition,
+    definition = _ref$definition === void 0 ? null : _ref$definition;
   var _ref2 = definition || {},
-      _ref2$fields = _ref2.fields,
-      fields = _ref2$fields === void 0 ? null : _ref2$fields;
-
+    _ref2$fields = _ref2.fields,
+    fields = _ref2$fields === void 0 ? null : _ref2$fields;
   var finalFields = useMemo(function () {
     return fields !== null ? [].concat(_toConsumableArray(fields), [getScreenExtraField(intl)]) : null;
   }, [fields]);
@@ -1126,15 +1065,13 @@ var useScreenDefinition = function useScreenDefinition() {
 };
 var useScreenData = function useScreenData() {
   var _ref3 = useScreen() || {},
-      data = _ref3.data;
-
+    data = _ref3.data;
   return data;
 };
 var useScreenRenderContext = function useScreenRenderContext() {
   var _ref4 = useScreen() || {},
-      _ref4$renderContext = _ref4.renderContext,
-      renderContext = _ref4$renderContext === void 0 ? 'view' : _ref4$renderContext;
-
+    _ref4$renderContext = _ref4.renderContext,
+    renderContext = _ref4$renderContext === void 0 ? 'view' : _ref4$renderContext;
   var isPlaceholder = renderContext === 'placeholder';
   var isPreview = renderContext === 'preview';
   var isEdit = renderContext === 'edit';
@@ -1153,8 +1090,7 @@ var useScreenRenderContext = function useScreenRenderContext() {
 };
 var useScreenState = function useScreenState() {
   var _ref5 = useScreen() || {},
-      screenState = _ref5.screenState;
-
+    screenState = _ref5.screenState;
   return screenState;
 };
 var propTypes$5 = {
@@ -1172,27 +1108,23 @@ var defaultProps$5 = {
 };
 var ScreenProvider = function ScreenProvider(_ref6) {
   var data = _ref6.data,
-      definition = _ref6.definition,
-      renderContext = _ref6.renderContext,
-      screenState = _ref6.screenState,
-      children = _ref6.children;
-
+    definition = _ref6.definition,
+    renderContext = _ref6.renderContext,
+    screenState = _ref6.screenState,
+    children = _ref6.children;
   var _ref7 = useScreen() || {},
-      _ref7$data = _ref7.data,
-      previousData = _ref7$data === void 0 ? null : _ref7$data,
-      _ref7$definition = _ref7.definition,
-      previousDefinition = _ref7$definition === void 0 ? null : _ref7$definition,
-      _ref7$renderContext = _ref7.renderContext,
-      previousContext = _ref7$renderContext === void 0 ? null : _ref7$renderContext,
-      _ref7$screenState = _ref7.screenState,
-      previousScreenState = _ref7$screenState === void 0 ? null : _ref7$screenState;
-
+    _ref7$data = _ref7.data,
+    previousData = _ref7$data === void 0 ? null : _ref7$data,
+    _ref7$definition = _ref7.definition,
+    previousDefinition = _ref7$definition === void 0 ? null : _ref7$definition,
+    _ref7$renderContext = _ref7.renderContext,
+    previousContext = _ref7$renderContext === void 0 ? null : _ref7$renderContext,
+    _ref7$screenState = _ref7.screenState,
+    previousScreenState = _ref7$screenState === void 0 ? null : _ref7$screenState;
   var finalData = data || previousData || null;
-
   var _ref8 = finalData || {},
-      _ref8$type = _ref8.type,
-      type = _ref8$type === void 0 ? null : _ref8$type;
-
+    _ref8$type = _ref8.type,
+    type = _ref8$type === void 0 ? null : _ref8$type;
   var screensManager = useScreensManager();
   var contextDefinition = screensManager !== null ? screensManager.getDefinition(type) : null;
   var finalDefinition = definition || contextDefinition || previousDefinition;
@@ -1231,15 +1163,17 @@ var propTypes$4 = {
 };
 var defaultProps$4 = {
   size: {}
-}; // Note: this is done to avoid excessive renders on the screens that use the context
+};
+
+// Note: this is done to avoid excessive renders on the screens that use the context
 
 var ScreenSizeProvider = function ScreenSizeProvider(_ref) {
   var size = _ref.size,
-      children = _ref.children;
+    children = _ref.children;
   var nextScreen = size.screen,
-      nextWidth = size.width,
-      nextHeight = size.height,
-      nextResolution = size.resolution;
+    nextWidth = size.width,
+    nextHeight = size.height,
+    nextResolution = size.resolution;
   var currentSize = useMemo(function () {
     return size;
   }, [nextScreen, nextWidth, nextHeight, nextResolution]);
@@ -1262,7 +1196,7 @@ var defaultProps$3 = {
 };
 var TrackingProvider = function TrackingProvider(_ref) {
   var variables = _ref.variables,
-      children = _ref.children;
+    children = _ref.children;
   var contextTracking = useTracking() || null;
   var tracking = useMemo(function () {
     return new Tracking({
@@ -1277,40 +1211,33 @@ TrackingProvider.propTypes = propTypes$3;
 TrackingProvider.defaultProps = defaultProps$3;
 
 var _excluded$3 = ["Uppy"];
+
 /**
  * Locale loader
  */
-
 var packageCache = null;
-
 var useUppyCore = function useUppyCore() {
   // transport
   var _useState = useState({
-    "package": packageCache
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      _useState2$0$package = _useState2[0]["package"],
-      loadedPackage = _useState2$0$package === void 0 ? null : _useState2$0$package,
-      setLoadedPackage = _useState2[1];
-
+      "package": packageCache
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$0$package = _useState2[0]["package"],
+    loadedPackage = _useState2$0$package === void 0 ? null : _useState2$0$package,
+    setLoadedPackage = _useState2[1];
   useEffect(function () {
     var canceled = false;
-
     if (loadedPackage !== null) {
       return function () {
         canceled = true;
       };
     }
-
     import('@uppy/core').then(function (_ref) {
       var Uppy = _ref.Uppy,
-          other = _objectWithoutProperties(_ref, _excluded$3);
-
+        other = _objectWithoutProperties(_ref, _excluded$3);
       var _ref2 = other || {},
-          defaultPackage = _ref2["default"];
-
+        defaultPackage = _ref2["default"];
       packageCache = Uppy || defaultPackage;
-
       if (!canceled) {
         setLoadedPackage({
           "package": Uppy || defaultPackage
@@ -1327,7 +1254,6 @@ var useUppyCore = function useUppyCore() {
 /**
  * Locale loader
  */
-
 var packagesCache$2 = {};
 var defaultPackagesMap$2 = {
   fr: function fr() {
@@ -1337,33 +1263,27 @@ var defaultPackagesMap$2 = {
     return import('@uppy/locales/lib/en_US');
   }
 };
-
 var useUppyLocale = function useUppyLocale(locale) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$packagesMap = _ref.packagesMap,
-      packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap$2 : _ref$packagesMap;
-
+    _ref$packagesMap = _ref.packagesMap,
+    packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap$2 : _ref$packagesMap;
   var _useState = useState({
-    "package": packagesCache$2[locale] || null
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      _useState2$0$package = _useState2[0]["package"],
-      loadedPackage = _useState2$0$package === void 0 ? null : _useState2$0$package,
-      setLoadedPackage = _useState2[1];
-
+      "package": packagesCache$2[locale] || null
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$0$package = _useState2[0]["package"],
+    loadedPackage = _useState2$0$package === void 0 ? null : _useState2$0$package,
+    setLoadedPackage = _useState2[1];
   var packageLoader = packagesMap[locale] || null;
   useEffect(function () {
     var canceled = false;
-
     if (loadedPackage !== null || packageLoader === null) {
       return function () {
         canceled = true;
       };
     }
-
     packageLoader().then(function (_ref2) {
       var dep = _ref2["default"];
-
       // packagesCache[locale] = dep;
       if (!canceled) {
         setLoadedPackage({
@@ -1379,10 +1299,10 @@ var useUppyLocale = function useUppyLocale(locale) {
 };
 
 var _excluded$2 = ["default"];
+
 /**
  * Locale loader
  */
-
 var packagesCache$1 = {};
 var defaultPackagesMap$1 = {
   webcam: function webcam() {
@@ -1401,34 +1321,28 @@ var defaultPackagesMap$1 = {
     return import('@uppy/google-drive');
   }
 };
-
 var useUppySources = function useUppySources(sources) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$packagesMap = _ref.packagesMap,
-      packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap$1 : _ref$packagesMap;
-
+    _ref$packagesMap = _ref.packagesMap,
+    packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap$1 : _ref$packagesMap;
   // transport
   var _useState = useState({
-    packages: sources.reduce(function (map, source) {
-      var sourcePackage = packagesCache$1[source] || null;
-
-      if (sourcePackage === null) {
-        return map;
-      }
-
-      return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, source, sourcePackage));
-    }, null)
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      _useState2$0$packages = _useState2[0].packages,
-      loadedPackages = _useState2$0$packages === void 0 ? [] : _useState2$0$packages,
-      setLoadedPackages = _useState2[1];
-
+      packages: sources.reduce(function (map, source) {
+        var sourcePackage = packagesCache$1[source] || null;
+        if (sourcePackage === null) {
+          return map;
+        }
+        return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, source, sourcePackage));
+      }, null)
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$0$packages = _useState2[0].packages,
+    loadedPackages = _useState2$0$packages === void 0 ? [] : _useState2$0$packages,
+    setLoadedPackages = _useState2[1];
   var sourcesToLoad = useMemo(function () {
     if (loadedPackages === null) {
       return sources;
     }
-
     var sourcesLoaded = Object.keys(loadedPackages);
     return sources.filter(function (source) {
       return sourcesLoaded.indexOf(source) === -1;
@@ -1436,13 +1350,11 @@ var useUppySources = function useUppySources(sources) {
   }, [sources, loadedPackages]);
   useEffect(function () {
     var canceled = false;
-
     if (sourcesToLoad.length === 0) {
       return function () {
         canceled = true;
       };
     }
-
     Promise.all(sourcesToLoad.map(function (source) {
       return packagesMap[source] || null;
     }).filter(function (it) {
@@ -1452,17 +1364,14 @@ var useUppySources = function useUppySources(sources) {
     })).then(function (packagesLoaded) {
       var newLoadedPackages = sourcesToLoad.reduce(function (map, source, index) {
         var _packagesLoaded$index = packagesLoaded[index],
-            pack = _packagesLoaded$index["default"],
-            others = _objectWithoutProperties(_packagesLoaded$index, _excluded$2);
-
+          pack = _packagesLoaded$index["default"],
+          others = _objectWithoutProperties(_packagesLoaded$index, _excluded$2);
         return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, source, Object.keys(others).reduce(function (otherMap, key) {
           otherMap[key] = others[key]; // eslint-disable-line no-param-reassign
-
           return otherMap;
         }, pack)));
       }, {});
       packagesCache$1 = _objectSpread(_objectSpread({}, packagesCache$1), newLoadedPackages);
-
       if (!canceled) {
         setLoadedPackages({
           packages: newLoadedPackages
@@ -1477,10 +1386,10 @@ var useUppySources = function useUppySources(sources) {
 };
 
 var _excluded$1 = ["default"];
+
 /**
  * Locale loader
  */
-
 var packagesCache = {};
 var defaultPackagesMap = {
   transloadit: null,
@@ -1492,42 +1401,34 @@ var defaultPackagesMap = {
     return import('@uppy/xhr-upload');
   }
 };
-
 var useUppyTransport = function useUppyTransport(transport) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$packagesMap = _ref.packagesMap,
-      packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap : _ref$packagesMap;
-
+    _ref$packagesMap = _ref.packagesMap,
+    packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap : _ref$packagesMap;
   // transport
   var _useState = useState({
-    "package": packagesCache[transport] || null
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      _useState2$0$package = _useState2[0]["package"],
-      loadedPackage = _useState2$0$package === void 0 ? null : _useState2$0$package,
-      setLoadedPackage = _useState2[1];
-
+      "package": packagesCache[transport] || null
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$0$package = _useState2[0]["package"],
+    loadedPackage = _useState2$0$package === void 0 ? null : _useState2$0$package,
+    setLoadedPackage = _useState2[1];
   var packageLoader = packagesMap[transport] || null;
   useEffect(function () {
     var canceled = false;
-
     if (loadedPackage !== null || packageLoader === null) {
       return function () {
         canceled = true;
       };
     }
-
     packageLoader().then(function (_ref2) {
       var pack = _ref2["default"],
-          others = _objectWithoutProperties(_ref2, _excluded$1);
-
+        others = _objectWithoutProperties(_ref2, _excluded$1);
       var dep = Object.keys(others).reduce(function (map, key) {
         map[key] = others[key]; // eslint-disable-line no-param-reassign
-
         return map;
       }, pack);
       packagesCache[transport] = dep;
-
       if (!canceled) {
         setLoadedPackage({
           "package": dep
@@ -1562,7 +1463,6 @@ var convertToMedia = function convertToMedia(it) {
     })
   };
 };
-
 var getTransloaditMediasFromResponse = function getTransloaditMediasFromResponse(response) {
   return response.successful.map(function (it) {
     var transloadit = response.transloadit.find(function (subIt) {
@@ -1585,33 +1485,31 @@ var getTransloaditMediasFromResponse = function getTransloaditMediasFromResponse
 };
 
 var _excluded = ["sources"],
-    _excluded2 = ["key", "templateId", "waitForEncoding"];
+  _excluded2 = ["key", "templateId", "waitForEncoding"];
 var UppyContext = /*#__PURE__*/React.createContext(null);
 var useUppy = function useUppy() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$onComplete = _ref.onComplete,
-      onComplete = _ref$onComplete === void 0 ? null : _ref$onComplete,
-      _ref$onFail = _ref.onFail,
-      onFail = _ref$onFail === void 0 ? null : _ref$onFail,
-      _ref$getFileName = _ref.getFileName,
-      getFileName = _ref$getFileName === void 0 ? function (_ref2) {
-    var _ref2$extension = _ref2.extension,
+    _ref$onComplete = _ref.onComplete,
+    onComplete = _ref$onComplete === void 0 ? null : _ref$onComplete,
+    _ref$onFail = _ref.onFail,
+    onFail = _ref$onFail === void 0 ? null : _ref$onFail,
+    _ref$getFileName = _ref.getFileName,
+    getFileName = _ref$getFileName === void 0 ? function (_ref2) {
+      var _ref2$extension = _ref2.extension,
         extension = _ref2$extension === void 0 ? null : _ref2$extension;
-    return "".concat(v1()).concat(extension !== null ? ".".concat(extension) : '');
-  } : _ref$getFileName,
-      _ref$meta = _ref.meta,
-      meta = _ref$meta === void 0 ? null : _ref$meta,
-      _ref$maxNumberOfFiles = _ref.maxNumberOfFiles,
-      maxNumberOfFiles = _ref$maxNumberOfFiles === void 0 ? 30 : _ref$maxNumberOfFiles,
-      _ref$allowedFileTypes = _ref.allowedFileTypes,
-      allowedFileTypes = _ref$allowedFileTypes === void 0 ? null : _ref$allowedFileTypes,
-      _ref$autoProceed = _ref.autoProceed,
-      autoProceed = _ref$autoProceed === void 0 ? false : _ref$autoProceed;
-
+      return "".concat(v1()).concat(extension !== null ? ".".concat(extension) : '');
+    } : _ref$getFileName,
+    _ref$meta = _ref.meta,
+    meta = _ref$meta === void 0 ? null : _ref$meta,
+    _ref$maxNumberOfFiles = _ref.maxNumberOfFiles,
+    maxNumberOfFiles = _ref$maxNumberOfFiles === void 0 ? 30 : _ref$maxNumberOfFiles,
+    _ref$allowedFileTypes = _ref.allowedFileTypes,
+    allowedFileTypes = _ref$allowedFileTypes === void 0 ? null : _ref$allowedFileTypes,
+    _ref$autoProceed = _ref.autoProceed,
+    autoProceed = _ref$autoProceed === void 0 ? false : _ref$autoProceed;
   var _ref3 = useContext(UppyContext) || null,
-      buildUppy = _ref3.buildUppy,
-      transport = _ref3.transport;
-
+    buildUppy = _ref3.buildUppy,
+    transport = _ref3.transport;
   var uppy = useMemo(function () {
     return buildUppy !== null ? buildUppy({
       meta: meta,
@@ -1626,23 +1524,19 @@ var useUppy = function useUppy() {
     if (uppy === null) {
       return function () {};
     }
-
     var onUppyComplete = function onUppyComplete(response) {
       var _response$successful = response.successful,
-          successful = _response$successful === void 0 ? [] : _response$successful,
-          _response$failed = response.failed,
-          failed = _response$failed === void 0 ? null : _response$failed;
+        successful = _response$successful === void 0 ? [] : _response$successful,
+        _response$failed = response.failed,
+        failed = _response$failed === void 0 ? null : _response$failed;
       var finalSuccessful = transport === 'transloadit' ? getTransloaditMediasFromResponse(response) : successful;
-
       if (onComplete !== null) {
         onComplete(finalSuccessful);
       }
-
       if (onFail !== null) {
         onFail(failed);
       }
     };
-
     uppy.on('complete', onUppyComplete);
     return function () {
       uppy.off('complete', onUppyComplete);
@@ -1652,14 +1546,12 @@ var useUppy = function useUppy() {
     if (uppy === null) {
       return function () {};
     }
-
     var onUpload = function onUpload(_ref4) {
       var _ref4$fileIDs = _ref4.fileIDs,
-          ids = _ref4$fileIDs === void 0 ? [] : _ref4$fileIDs;
+        ids = _ref4$fileIDs === void 0 ? [] : _ref4$fileIDs;
       ids.forEach(function (id) {
         var file = uppy.getFile(id);
         var newName = getFileName(file);
-
         if (newName !== null) {
           uppy.setFileMeta(id, {
             name: newName
@@ -1667,7 +1559,6 @@ var useUppy = function useUppy() {
         }
       });
     };
-
     uppy.on('upload', onUpload);
     return function () {
       uppy.off('upload', onUpload);
@@ -1714,33 +1605,30 @@ var defaultProps$2 = {
 };
 var UppyProvider = function UppyProvider(_ref5) {
   var children = _ref5.children,
-      providedTransport = _ref5.transport,
-      providedLocale = _ref5.locale,
-      providedSources = _ref5.sources,
-      providedTransloadit = _ref5.transloadit,
-      providedCompanion = _ref5.companion,
-      providedTus = _ref5.tus,
-      providedXhr = _ref5.xhr;
-
+    providedTransport = _ref5.transport,
+    providedLocale = _ref5.locale,
+    providedSources = _ref5.sources,
+    providedTransloadit = _ref5.transloadit,
+    providedCompanion = _ref5.companion,
+    providedTus = _ref5.tus,
+    providedXhr = _ref5.xhr;
   var _useIntl = useIntl(),
-      intlLocale = _useIntl.locale;
-
+    intlLocale = _useIntl.locale;
   var _ref6 = useContext(UppyContext) || {},
-      _ref6$transport = _ref6.transport,
-      contextTransport = _ref6$transport === void 0 ? null : _ref6$transport,
-      _ref6$locale = _ref6.locale,
-      contextLocale = _ref6$locale === void 0 ? null : _ref6$locale,
-      _ref6$sources = _ref6.sources,
-      contextSources = _ref6$sources === void 0 ? null : _ref6$sources,
-      _ref6$transloadit = _ref6.transloadit,
-      contextTransloadit = _ref6$transloadit === void 0 ? null : _ref6$transloadit,
-      _ref6$companion = _ref6.companion,
-      contextCompanion = _ref6$companion === void 0 ? null : _ref6$companion,
-      _ref6$tus = _ref6.tus,
-      contextTus = _ref6$tus === void 0 ? null : _ref6$tus,
-      _ref6$xhr = _ref6.xhr,
-      contextXhr = _ref6$xhr === void 0 ? null : _ref6$xhr;
-
+    _ref6$transport = _ref6.transport,
+    contextTransport = _ref6$transport === void 0 ? null : _ref6$transport,
+    _ref6$locale = _ref6.locale,
+    contextLocale = _ref6$locale === void 0 ? null : _ref6$locale,
+    _ref6$sources = _ref6.sources,
+    contextSources = _ref6$sources === void 0 ? null : _ref6$sources,
+    _ref6$transloadit = _ref6.transloadit,
+    contextTransloadit = _ref6$transloadit === void 0 ? null : _ref6$transloadit,
+    _ref6$companion = _ref6.companion,
+    contextCompanion = _ref6$companion === void 0 ? null : _ref6$companion,
+    _ref6$tus = _ref6.tus,
+    contextTus = _ref6$tus === void 0 ? null : _ref6$tus,
+    _ref6$xhr = _ref6.xhr,
+    contextXhr = _ref6$xhr === void 0 ? null : _ref6$xhr;
   var transport = providedTransport || contextTransport || 'xhr';
   var locale = providedLocale || contextLocale || intlLocale;
   var sources = providedSources || contextSources || ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'];
@@ -1756,26 +1644,21 @@ var UppyProvider = function UppyProvider(_ref5) {
     if (Uppy === null || uppyLocale === null || uppyTransport === null || uppySources === null) {
       return null;
     }
-
     return function () {
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
       var _ref7 = opts || {},
-          _ref7$sources = _ref7.sources,
-          customSources = _ref7$sources === void 0 ? sources : _ref7$sources,
-          uppyOpts = _objectWithoutProperties(_ref7, _excluded);
-
+        _ref7$sources = _ref7.sources,
+        customSources = _ref7$sources === void 0 ? sources : _ref7$sources,
+        uppyOpts = _objectWithoutProperties(_ref7, _excluded);
       var newUppy = new Uppy(_objectSpread({
         locale: uppyLocale
       }, uppyOpts));
-
       if (transport === 'transloadit') {
         var key = transloadit.key,
-            templateId = transloadit.templateId,
-            _transloadit$waitForE = transloadit.waitForEncoding,
-            waitForEncoding = _transloadit$waitForE === void 0 ? true : _transloadit$waitForE,
-            transloaditOpts = _objectWithoutProperties(transloadit, _excluded2);
-
+          templateId = transloadit.templateId,
+          _transloadit$waitForE = transloadit.waitForEncoding,
+          waitForEncoding = _transloadit$waitForE === void 0 ? true : _transloadit$waitForE,
+          transloaditOpts = _objectWithoutProperties(transloadit, _excluded2);
         newUppy.use(uppyTransport, {
           params: _objectSpread({
             auth: {
@@ -1796,22 +1679,18 @@ var UppyProvider = function UppyProvider(_ref5) {
           endpoint: isString(xhr) ? xhr : '/upload'
         }, isObject(xhr) ? xhr : null));
       }
-
       if (transport === 'transloadit' || companion !== null) {
         return customSources.reduce(function (currentUppy, sourceId) {
           var source = uppySources[sourceId] || null;
-
           if (source === null) {
             return currentUppy;
           }
-
           var _ref8 = companion || {
-            url: uppyTransport.COMPANION || null,
-            allowedHosts: uppyTransport.COMPANION_PATTERN || null
-          },
-              companionUrl = _ref8.url,
-              companionAllowedHosts = _ref8.allowedHosts;
-
+              url: uppyTransport.COMPANION || null,
+              allowedHosts: uppyTransport.COMPANION_PATTERN || null
+            },
+            companionUrl = _ref8.url,
+            companionAllowedHosts = _ref8.allowedHosts;
           return newUppy.use(source, {
             id: sourceId,
             companionUrl: companionUrl,
@@ -1819,7 +1698,6 @@ var UppyProvider = function UppyProvider(_ref5) {
           });
         }, newUppy);
       }
-
       return newUppy;
     };
   }, [Uppy, uppyLocale, uppyTransport, uppySources, transport, sources, transloadit, companion, tus, xhr]);
@@ -1867,9 +1745,8 @@ var useViewerContext = function useViewerContext() {
 };
 var useViewerSize = function useViewerSize() {
   var _useViewerContext = useViewerContext(),
-      width = _useViewerContext.width,
-      height = _useViewerContext.height;
-
+    width = _useViewerContext.width,
+    height = _useViewerContext.height;
   return {
     width: width,
     height: height
@@ -1877,9 +1754,8 @@ var useViewerSize = function useViewerSize() {
 };
 var useViewerNavigation = function useViewerNavigation() {
   var _useViewerContext2 = useViewerContext(),
-      gotoNextScreen = _useViewerContext2.gotoNextScreen,
-      gotoPreviousScreen = _useViewerContext2.gotoPreviousScreen;
-
+    gotoNextScreen = _useViewerContext2.gotoNextScreen,
+    gotoPreviousScreen = _useViewerContext2.gotoPreviousScreen;
   return {
     gotoNextScreen: gotoNextScreen,
     gotoPreviousScreen: gotoPreviousScreen
@@ -1887,22 +1763,19 @@ var useViewerNavigation = function useViewerNavigation() {
 };
 var useViewerEvents = function useViewerEvents() {
   var _useViewerContext3 = useViewerContext(),
-      events = _useViewerContext3.events;
-
+    events = _useViewerContext3.events;
   return events;
 };
 var useViewerContainer = function useViewerContainer() {
   var _useViewerContext4 = useViewerContext(),
-      _useViewerContext4$co = _useViewerContext4.containerRef,
-      containerRef = _useViewerContext4$co === void 0 ? null : _useViewerContext4$co;
-
+    _useViewerContext4$co = _useViewerContext4.containerRef,
+    containerRef = _useViewerContext4$co === void 0 ? null : _useViewerContext4$co;
   return containerRef !== null ? containerRef.current : null;
 };
 var useViewerInteraction = function useViewerInteraction() {
   var _useViewerContext5 = useViewerContext(),
-      disableInteraction = _useViewerContext5.disableInteraction,
-      enableInteraction = _useViewerContext5.enableInteraction;
-
+    disableInteraction = _useViewerContext5.disableInteraction,
+    enableInteraction = _useViewerContext5.enableInteraction;
   return {
     disableInteraction: disableInteraction,
     enableInteraction: enableInteraction
@@ -1910,9 +1783,8 @@ var useViewerInteraction = function useViewerInteraction() {
 };
 var useViewerWebView = function useViewerWebView() {
   var _useViewerContext6 = useViewerContext(),
-      webView = _useViewerContext6.webView,
-      setWebView = _useViewerContext6.setWebView;
-
+    webView = _useViewerContext6.webView,
+    setWebView = _useViewerContext6.setWebView;
   var value = useMemo(function () {
     return _objectSpread(_objectSpread({}, webView), {}, {
       opened: webView !== null,
@@ -1940,6 +1812,8 @@ var propTypes$1 = {
   })]),
   menuVisible: PropTypes.bool,
   menuOverScreen: PropTypes.bool,
+  width: PropTypes.number,
+  height: PropTypes.number,
   topHeight: PropTypes.number,
   bottomHeight: PropTypes.number,
   bottomSidesWidth: PropTypes.number,
@@ -1948,30 +1822,26 @@ var propTypes$1 = {
   disableInteraction: PropTypes.func,
   enableInteraction: PropTypes.func
 };
-
 var defaultProps$1 = _objectSpread({}, defaultValue);
-
 var ViewerProvider = function ViewerProvider(_ref) {
   var children = _ref.children,
-      containerRef = _ref.containerRef,
-      events = _ref.events,
-      menuVisible = _ref.menuVisible,
-      menuOverScreen = _ref.menuOverScreen,
-      width = _ref.width,
-      height = _ref.height,
-      topHeight = _ref.topHeight,
-      bottomHeight = _ref.bottomHeight,
-      bottomSidesWidth = _ref.bottomSidesWidth,
-      gotoNextScreen = _ref.gotoNextScreen,
-      gotoPreviousScreen = _ref.gotoPreviousScreen,
-      disableInteraction = _ref.disableInteraction,
-      enableInteraction = _ref.enableInteraction;
-
+    containerRef = _ref.containerRef,
+    events = _ref.events,
+    menuVisible = _ref.menuVisible,
+    menuOverScreen = _ref.menuOverScreen,
+    width = _ref.width,
+    height = _ref.height,
+    topHeight = _ref.topHeight,
+    bottomHeight = _ref.bottomHeight,
+    bottomSidesWidth = _ref.bottomSidesWidth,
+    gotoNextScreen = _ref.gotoNextScreen,
+    gotoPreviousScreen = _ref.gotoPreviousScreen,
+    disableInteraction = _ref.disableInteraction,
+    enableInteraction = _ref.enableInteraction;
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      webView = _useState2[0],
-      setWebView = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    webView = _useState2[0],
+    setWebView = _useState2[1];
   var value = useMemo(function () {
     return {
       containerRef: containerRef,
@@ -2004,9 +1874,8 @@ var VisitorContext = /*#__PURE__*/React.createContext({
 });
 var useVisitorContext = function useVisitorContext() {
   var _useContext = useContext(VisitorContext),
-      visitor = _useContext.visitor,
-      setVisitor = _useContext.setVisitor;
-
+    visitor = _useContext.visitor,
+    setVisitor = _useContext.setVisitor;
   return {
     visitor: visitor,
     setVisitor: setVisitor
@@ -2014,14 +1883,12 @@ var useVisitorContext = function useVisitorContext() {
 };
 var useVisitor = function useVisitor() {
   var _useContext2 = useContext(VisitorContext),
-      visitor = _useContext2.visitor;
-
+    visitor = _useContext2.visitor;
   return visitor;
 };
 var useSetVisitor = function useSetVisitor() {
   var _useContext3 = useContext(VisitorContext),
-      setVisitor = _useContext3.setVisitor;
-
+    setVisitor = _useContext3.setVisitor;
   return setVisitor;
 };
 var propTypes = {
@@ -2033,13 +1900,11 @@ var defaultProps = {
 };
 var VisitorProvider = function VisitorProvider(_ref) {
   var providedVisitor = _ref.visitor,
-      children = _ref.children;
-
+    children = _ref.children;
   var _useState = useState(providedVisitor),
-      _useState2 = _slicedToArray(_useState, 2),
-      visitor = _useState2[0],
-      setVisitor = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visitor = _useState2[0],
+    setVisitor = _useState2[1];
   useEffect(function () {
     if (providedVisitor !== visitor) {
       setVisitor(providedVisitor);