@micromag/editor 0.3.832 → 0.4.4

package/es/index.js

@@ -2,10 +2,8 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { useMemo, useRef, useCallback, useState, forwardRef, useEffect } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
-import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
 import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useFieldsComponentsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, PlaybackProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, VisitorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
 import { useIsVisible, useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
@@ -13,7 +11,7 @@ import { getScreenFieldsWithStates, getScreenExtraField, isMessage, slug, getCom
 import { useRouteMatcher, useMemoryRouter, createPathToRegexpParser } from '@folklore/routes';
 import { useLocation, Switch, Route, Router } from 'wouter';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { easings, useTransition, animated } from '@react-spring/web';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
@@ -150,12 +148,12 @@ var createScreen = function createScreen(definition) {
   });
 };
 
-var _excluded$c = ["components"];
+var _excluded$d = ["components"];
 var deleteScreen = function deleteScreen(story, screenId) {
   var _ref = story || {},
     _ref$components = _ref.components,
     components = _ref$components === void 0 ? [] : _ref$components,
-    currentValue = _objectWithoutProperties(_ref, _excluded$c);
+    currentValue = _objectWithoutProperties(_ref, _excluded$d);
   return _objectSpread(_objectSpread({}, currentValue), {}, {
     components: components.filter(function (_ref2) {
       var id = _ref2.id;
@@ -164,13 +162,13 @@ var deleteScreen = function deleteScreen(story, screenId) {
   });
 };
 
-var _excluded$b = ["components"];
+var _excluded$c = ["components"];
 var duplicateScreen = function duplicateScreen(story, screenId) {
   var screenIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   var _ref = story || {},
     _ref$components = _ref.components,
     components = _ref$components === void 0 ? [] : _ref$components,
-    currentValue = _objectWithoutProperties(_ref, _excluded$b);
+    currentValue = _objectWithoutProperties(_ref, _excluded$c);
   var screen = components.find(function (it) {
     return it.id === screenId;
   }) || null;
@@ -183,13 +181,13 @@ var duplicateScreen = function duplicateScreen(story, screenId) {
   });
 };
 
-var _excluded$a = ["components"];
+var _excluded$b = ["components"];
 var updateScreen = function updateScreen(story, newScreenValue) {
   var newScreenId = newScreenValue.id;
   var _ref = story || {},
     _ref$components = _ref.components,
     components = _ref$components === void 0 ? [] : _ref$components,
-    currentValue = _objectWithoutProperties(_ref, _excluded$a);
+    currentValue = _objectWithoutProperties(_ref, _excluded$b);
   var index = components.findIndex(function (it) {
     return it.id === newScreenId;
   });
@@ -214,19 +212,13 @@ var _getFieldByName = function getFieldByName(fields, name) {
   }, null);
 };
 
-var _excluded$9 = ["className", "dots"];
-var propTypes$o = {
-  dots: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps$o = {
-  dots: false,
-  className: null
-};
-var SettingsButton = function SettingsButton(_ref) {
-  var className = _ref.className,
-    dots = _ref.dots,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+var _excluded$a = ["className", "dots"];
+function SettingsButton(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$dots = _ref.dots,
+    dots = _ref$dots === void 0 ? false : _ref$dots,
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
     className: className,
     theme: "secondary",
@@ -235,25 +227,15 @@ var SettingsButton = function SettingsButton(_ref) {
       icon: dots ? faEllipsisV : faCogs
     })
   }, props));
-};
-SettingsButton.propTypes = propTypes$o;
-SettingsButton.defaultProps = defaultProps$o;
-
-var _excluded$8 = ["name", "form"];
-var propTypes$n = {
-  name: PropTypes.string,
-  form: PropTypes.string,
-  children: PropTypes.node
-};
-var defaultProps$n = {
-  name: null,
-  form: null,
-  children: null
-};
-var FieldWithContexts = function FieldWithContexts(_ref) {
-  var name = _ref.name,
-    form = _ref.form,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+}
+
+var _excluded$9 = ["name", "form"];
+function FieldWithContexts(_ref) {
+  var _ref$name = _ref.name,
+    name = _ref$name === void 0 ? null : _ref$name,
+    _ref$form = _ref.form,
+    form = _ref$form === void 0 ? null : _ref$form,
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var definition = useScreenDefinition() || null;
   var _definition$states = definition.states,
     states = _definition$states === void 0 ? null : _definition$states;
@@ -295,32 +277,19 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
   }, props)) : /*#__PURE__*/React.createElement(Fields, Object.assign({
     fields: stateFields
   }, props))) : null;
-};
-FieldWithContexts.propTypes = propTypes$n;
-FieldWithContexts.defaultProps = defaultProps$n;
-
-var styles$i = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
-
-var propTypes$m = {
-  value: PropTypes$1.component,
-  className: PropTypes.string,
-  gotoFieldForm: PropTypes.func.isRequired,
-  closeFieldForm: PropTypes.func.isRequired,
-  onChange: PropTypes.func
-  // onClickDelete: PropTypes.func,
-};
-var defaultProps$m = {
-  value: null,
-  className: null,
-  onChange: null
-  // onClickDelete: null,
-};
-var ScreenForm = function ScreenForm(_ref) {
-  var value = _ref.value,
-    className = _ref.className,
+}
+
+var styles$i = {"container":"container","inner":"inner"};
+
+function ScreenForm(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
     gotoFieldForm = _ref.gotoFieldForm,
     closeFieldForm = _ref.closeFieldForm,
-    onChange = _ref.onChange;
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange;
   var _useScreenDefinition = useScreenDefinition(),
     _useScreenDefinition$ = _useScreenDefinition.fields,
     fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$;
@@ -349,34 +318,22 @@ var ScreenForm = function ScreenForm(_ref) {
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
   }) : null));
-};
-ScreenForm.propTypes = propTypes$m;
-ScreenForm.defaultProps = defaultProps$m;
-
-var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
-
-var propTypes$l = {
-  story: PropTypes$1.story,
-  screenId: PropTypes.string,
-  field: PropTypes.string,
-  form: PropTypes.string,
-  url: PropTypes.string.isRequired,
-  className: PropTypes.string
-};
-var defaultProps$l = {
-  story: null,
-  screenId: null,
-  field: null,
-  form: null,
-  className: null
-};
-var Breadcrumb = function Breadcrumb(_ref) {
-  var story = _ref.story,
-    screenId = _ref.screenId,
-    field = _ref.field,
-    form = _ref.form,
+}
+
+var styles$h = {"container":"container"};
+
+function Breadcrumb(_ref) {
+  var _ref$story = _ref.story,
+    story = _ref$story === void 0 ? null : _ref$story,
+    _ref$screenId = _ref.screenId,
+    screenId = _ref$screenId === void 0 ? null : _ref$screenId,
+    _ref$field = _ref.field,
+    field = _ref$field === void 0 ? null : _ref$field,
+    _ref$form = _ref.form,
+    form = _ref$form === void 0 ? null : _ref$form,
     url = _ref.url,
-    className = _ref.className;
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   var intl = useIntl();
   var _ref2 = story || {},
     _ref2$components = _ref2.components,
@@ -581,26 +538,17 @@ var Breadcrumb = function Breadcrumb(_ref) {
     noWrap: true,
     className: classNames([styles$h.container, 'text-truncate', _defineProperty({}, className, className !== null)])
   }));
-};
-Breadcrumb.propTypes = propTypes$l;
-Breadcrumb.defaultProps = defaultProps$l;
+}
 
-var styles$g = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
+var styles$g = {"container":"container","description":"description","actions":"actions"};
 
-var propTypes$k = {
-  className: PropTypes.string,
-  onConfirm: PropTypes.func,
-  onCancel: PropTypes.func
-};
-var defaultProps$k = {
-  className: null,
-  onConfirm: null,
-  onCancel: null
-};
-var DeleteScreenModal = function DeleteScreenModal(_ref) {
-  var className = _ref.className,
-    onConfirm = _ref.onConfirm,
-    onCancel = _ref.onCancel;
+function DeleteScreenModal(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onConfirm = _ref.onConfirm,
+    onConfirm = _ref$onConfirm === void 0 ? null : _ref$onConfirm,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? null : _ref$onCancel;
   return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "p6q/+/",
@@ -641,29 +589,19 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
       }]
     })
   }))));
-};
-DeleteScreenModal.propTypes = propTypes$k;
-DeleteScreenModal.defaultProps = defaultProps$k;
-
-var styles$f = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterRight":"micromag-editor-form-enterRight","enterLeft":"micromag-editor-form-enterLeft","enterTop":"micromag-editor-form-enterTop","enterBottom":"micromag-editor-form-enterBottom","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveTop":"micromag-editor-form-exitActiveTop","exitActiveBottom":"micromag-editor-form-exitActiveBottom"};
+}
 
-var propTypes$j = {
-  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
-  isTheme: PropTypes.bool,
-  className: PropTypes.string,
-  onChange: PropTypes.func
-};
-var defaultProps$j = {
-  value: null,
-  isTheme: false,
-  className: null,
-  onChange: null
-};
-var EditForm = function EditForm(_ref) {
-  var value = _ref.value,
-    isTheme = _ref.isTheme,
-    className = _ref.className,
-    onChange = _ref.onChange;
+var styles$f = {"content":"content","navbar":"navbar","panel":"panel"};
+
+function EditForm(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$isTheme = _ref.isTheme,
+    isTheme = _ref$isTheme === void 0 ? false : _ref$isTheme,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange;
   // Match routes
   var _useLocation = useLocation(),
     _useLocation2 = _slicedToArray(_useLocation, 2),
@@ -694,10 +632,9 @@ var EditForm = function EditForm(_ref) {
     return definition != null ? getScreenFieldsWithStates(definition) : [];
   }, [screensManager, screen]);
 
-  // Get transition value
+  // Get transition direction
   var _useFormTransition = useFormTransition(url, screenIndex, styles$f),
-    transitionClassNames = _useFormTransition.classNames,
-    transitionTimeout = _useFormTransition.timeout;
+    direction = _useFormTransition.direction;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     screenSettingsOpened = _useState2[0],
@@ -715,6 +652,73 @@ var EditForm = function EditForm(_ref) {
     fieldContext = _useState8[0],
     setFieldContext = _useState8[1];
 
+  // Compute panel transition
+  var transitionItem = useMemo(function () {
+    return screen !== null ? {
+      key: fieldParams !== null ? "field-".concat(fieldParams, "-").concat(formParams) : "screen-".concat(screen.id),
+      isField: fieldParams !== null,
+      screen: screen,
+      fieldParams: fieldParams,
+      formParams: formParams
+    } : null;
+  }, [screen, fieldParams, formParams]);
+  var fromTransform = useMemo(function () {
+    switch (direction) {
+      case 'right':
+        return 'translateX(100%)';
+      case 'left':
+        return 'translateX(-100%)';
+      case 'top':
+        return 'translateY(-100%)';
+      case 'bottom':
+        return 'translateY(100%)';
+      default:
+        return 'translateX(0%)';
+    }
+  }, [direction]);
+  var leaveTransform = useMemo(function () {
+    switch (direction) {
+      case 'right':
+        return 'translateX(-100%)';
+      case 'left':
+        return 'translateX(100%)';
+      case 'top':
+        return 'translateY(100%)';
+      case 'bottom':
+        return 'translateY(-100%)';
+      default:
+        return 'translateX(0%)';
+    }
+  }, [direction]);
+  var isHorizontal = direction === 'left' || direction === 'right';
+  var springConfig = useMemo(function () {
+    return direction !== null ? {
+      duration: isHorizontal ? 200 : 500,
+      easing: easings.easeOutSine
+    } : {
+      duration: 0
+    };
+  }, [direction, isHorizontal]);
+  var panelTransitions = useTransition(transitionItem, {
+    keys: function keys(item) {
+      var _item$key;
+      return (_item$key = item === null || item === void 0 ? void 0 : item.key) !== null && _item$key !== void 0 ? _item$key : 'none';
+    },
+    from: {
+      transform: fromTransform,
+      opacity: direction !== null ? 0.5 : 1
+    },
+    enter: {
+      transform: 'translateX(0%)',
+      opacity: 1
+    },
+    leave: {
+      transform: leaveTransform,
+      opacity: direction !== null ? 0.5 : 0
+    },
+    config: springConfig
+  });
+
   // Callbacks
   var gotoFieldForm = useCallback(function () {
     var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -859,45 +863,43 @@ var EditForm = function EditForm(_ref) {
     onClickOutside: onDropdownClickOutside
   })) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$f.content])
-  }, screen !== null ? /*#__PURE__*/React.createElement(TransitionGroup, {
+  }, screen !== null ? /*#__PURE__*/React.createElement("div", {
     className: "w-100 flex-grow-1",
-    childFactory: function childFactory(child) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        classNames: transitionClassNames
-      });
+    style: {
+      position: 'relative'
     }
-  }, fieldParams !== null ? /*#__PURE__*/React.createElement(CSSTransition, {
-    timeout: transitionTimeout,
-    key: "field-".concat(fieldParams, "-").concat(formParams)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$f.panel])
-  }, /*#__PURE__*/React.createElement(ScreenProvider, {
-    data: screen
-  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
-    name: fieldParams.replace(/\//g, '.'),
-    value: screen,
-    form: formParams,
-    className: styles$f.form,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm,
-    fieldContext: fieldContext,
-    onChange: onScreenFormChange
-  })))) : /*#__PURE__*/React.createElement(CSSTransition, {
-    classNames: transitionClassNames,
-    timeout: transitionTimeout,
-    key: "screen-".concat(screen.id)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$f.panel]),
-    key: "screen-".concat(screen.id)
-  }, /*#__PURE__*/React.createElement(ScreenProvider, {
-    data: screen
-  }, /*#__PURE__*/React.createElement(ScreenForm, {
-    value: screen,
-    className: styles$f.form,
-    onChange: onScreenFormChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm
-  }))))) : /*#__PURE__*/React.createElement(Empty, {
+  }, panelTransitions(function (springStyle, item) {
+    return item !== null ? /*#__PURE__*/React.createElement(animated.div, {
+      className: classNames(['w-100', styles$f.panel]),
+      style: _objectSpread(_objectSpread({}, springStyle), item.key !== (transitionItem === null || transitionItem === void 0 ? void 0 : transitionItem.key) ? {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        zIndex: 0
+      } : {
+        position: 'relative',
+        zIndex: 1
+      })
+    }, /*#__PURE__*/React.createElement(ScreenProvider, {
+      data: item.screen
+    }, item.isField ? /*#__PURE__*/React.createElement(FieldWithContexts, {
+      name: item.fieldParams.replace(/\//g, '.'),
+      value: item.screen,
+      form: item.formParams,
+      className: styles$f.form,
+      gotoFieldForm: gotoFieldForm,
+      closeFieldForm: closeFieldForm,
+      fieldContext: fieldContext,
+      onChange: onScreenFormChange
+    }) : /*#__PURE__*/React.createElement(ScreenForm, {
+      value: item.screen,
+      className: styles$f.form,
+      onChange: onScreenFormChange,
+      gotoFieldForm: gotoFieldForm,
+      closeFieldForm: closeFieldForm
+    }))) : null;
+  })) : /*#__PURE__*/React.createElement(Empty, {
     className: "w-100 m-2"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "QfpTKK",
@@ -910,9 +912,7 @@ var EditForm = function EditForm(_ref) {
     onConfirm: onDeleteScreenConfirm,
     onCancel: onDeleteScreenCancel
   }) : null);
-};
-EditForm.propTypes = propTypes$j;
-EditForm.defaultProps = defaultProps$j;
+}
 
 function useScreenStates(screen) {
   var _ref = screen || {},
@@ -928,7 +928,7 @@ function useScreenStates(screen) {
   return states;
 }
 
-var _excluded$7 = ["components"];
+var _excluded$8 = ["components"];
 var useThemeValue = function useThemeValue(value) {
   var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var valueWithTheme = useMemo(function () {
@@ -937,7 +937,7 @@ var useThemeValue = function useThemeValue(value) {
     }
     var _ref = value || {};
       _ref.components;
-      var themeValue = _objectWithoutProperties(_ref, _excluded$7);
+      var themeValue = _objectWithoutProperties(_ref, _excluded$8);
     return value !== null ? _objectSpread({
       theme: themeValue
     }, value) : value;
@@ -945,20 +945,12 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$e = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
-
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$i = {
-  color: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$i = {
-  color: 'currentColor',
-  className: null
-};
-var DesktopIcon = function DesktopIcon(_ref) {
-  var color = _ref.color,
-    className = _ref.className;
+function DesktopIcon(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -974,22 +966,14 @@ var DesktopIcon = function DesktopIcon(_ref) {
     fill: color,
     d: "M84 17H16c-3.3 0-6 2.7-6 6v42c0 3.3 2.7 6 6 6h22v4.2c-.1.4-.9 1.5-1.3 2-1.1 1.4-2.2 2.8-1.4 4.4.3.7 1.1 1.4 2.7 1.4h23c1 0 3.3 0 4.1-1.8.8-1.8-.6-3.2-1.8-4.5-.4-.5-1.1-1.2-1.3-1.6V71h22c3.3 0 6-2.7 6-6V23c0-3.3-2.7-6-6-6zM40.3 79c.9-1.1 1.7-2.4 1.7-3.8V71h16v4.2c0 1.4 1 2.7 2 3.8H40.3zM86 65c0 1.1-.9 2-2 2H16c-1.1 0-2-.9-2-2v-6h72v6zm0-10H14V23c0-1.1.9-2 2-2h68c1.1 0 2 .9 2 2v32z"
   }));
-};
-DesktopIcon.propTypes = propTypes$i;
-DesktopIcon.defaultProps = defaultProps$i;
+}
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$h = {
-  color: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$h = {
-  color: 'currentColor',
-  className: null
-};
-var MobileIcon = function MobileIcon(_ref) {
-  var color = _ref.color,
-    className = _ref.className;
+function MobileIcon(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -1005,9 +989,7 @@ var MobileIcon = function MobileIcon(_ref) {
     fill: color,
     d: "M66 11H34c-3.3 0-6 2.7-6 6v66c0 3.3 2.7 6 6 6h32c3.3 0 6-2.7 6-6V17c0-3.3-2.7-6-6-6zm2 72c0 1.1-.9 2-2 2H34c-1.1 0-2-.9-2-2v-4h36v4zm0-8H32V25h36v50zm0-54H32v-4c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v4z"
   }));
-};
-MobileIcon.propTypes = propTypes$h;
-MobileIcon.defaultProps = defaultProps$h;
+}
 
 var DeviceIcons = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1015,108 +997,76 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$d = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$e = {"container":"container","icon":"icon"};
 
-var _excluded$6 = ["device", "className", "iconComponents"];
-var propTypes$g = {
-  device: PropTypes.string.isRequired,
-  iconComponents: PropTypes$1.components,
-  className: PropTypes.string
-};
-var defaultProps$g = {
-  iconComponents: DeviceIcons,
-  className: null
-};
-var DeviceButton = function DeviceButton(_ref) {
+var _excluded$7 = ["device", "className", "iconComponents"];
+function DeviceButton(_ref) {
   var device = _ref.device,
-    className = _ref.className,
-    iconComponents = _ref.iconComponents,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$iconComponents = _ref.iconComponents,
+    iconComponents = _ref$iconComponents === void 0 ? DeviceIcons : _ref$iconComponents,
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$d.icon
+    className: styles$e.icon
   }));
-};
-DeviceButton.propTypes = propTypes$g;
-DeviceButton.defaultProps = defaultProps$g;
-
-var _excluded$5 = ["id"];
-var propTypes$f = {
-  items: PropTypes$1.menuItems,
-  className: PropTypes.string,
-  onClickItem: PropTypes.func
-};
-var defaultProps$f = {
-  items: [],
-  className: null,
-  onClickItem: null
-};
-var DevicesMenu = function DevicesMenu(_ref) {
-  var items = _ref.items,
-    className = _ref.className,
-    onClickItem = _ref.onClickItem;
+}
+
+var styles$d = {"container":"container","button":"button"};
+
+var _excluded$6 = ["id"];
+function DevicesMenu(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onClickItem = _ref.onClickItem,
+    onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem;
   return /*#__PURE__*/React.createElement(Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
-        itemProps = _objectWithoutProperties(item, _excluded$5);
+        itemProps = _objectWithoutProperties(item, _excluded$6);
       return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
-        className: styles$e.button,
+        className: styles$d.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
         }
       }));
     }
   });
-};
-DevicesMenu.propTypes = propTypes$f;
-DevicesMenu.defaultProps = defaultProps$f;
-
-var styles$c = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","border":"micromag-editor-buttons-screen-border","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
-
-var propTypes$e = {
-  active: PropTypes.bool,
-  id: PropTypes.string,
-  href: PropTypes.string,
-  label: PropTypes$1.label,
-  icon: PropTypes.node,
-  title: PropTypes.string,
-  onClick: PropTypes.func,
-  children: PropTypes.node,
-  refButton: PropTypes.shape({
-    current: PropTypes.any // eslint-disable-line
-  }),
-  className: PropTypes.string
-};
-var defaultProps$e = {
-  active: false,
-  id: null,
-  href: null,
-  label: null,
-  icon: null,
-  title: null,
-  onClick: null,
-  children: null,
-  refButton: null,
-  className: null
-};
-var ScreenButton = function ScreenButton(_ref) {
-  var active = _ref.active,
-    id = _ref.id,
-    href = _ref.href,
-    className = _ref.className,
-    label = _ref.label,
-    icon = _ref.icon,
-    children = _ref.children,
-    title = _ref.title,
-    onClick = _ref.onClick,
-    refButton = _ref.refButton;
+}
+
+var styles$c = {"container":"container","button":"button","border":"border","screen":"screen","inner":"inner","icon":"icon","label":"label","active":"active"};
+
+function ScreenButton(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id,
+    _ref$href = _ref.href,
+    href = _ref$href === void 0 ? null : _ref$href,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? null : _ref$label,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+    _ref$refButton = _ref.refButton,
+    refButton = _ref$refButton === void 0 ? null : _ref$refButton;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$c.container, 'rounded', _defineProperty(_defineProperty({}, styles$c.active, active), className, className !== null)])
   }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
@@ -1138,63 +1088,43 @@ var ScreenButton = function ScreenButton(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: classNames([styles$c.border, 'rounded'])
   })));
-};
-ScreenButton.propTypes = propTypes$e;
-ScreenButton.defaultProps = defaultProps$e;
+}
 var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ScreenButton, Object.assign({}, props, {
     refButton: ref
   }));
 });
 
-var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","name":"micromag-editor-buttons-screen-with-preview-name","index":"micromag-editor-buttons-screen-with-preview-index","deleteButton":"micromag-editor-buttons-screen-with-preview-deleteButton","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
-
-var propTypes$d = {
-  screen: PropTypes$1.screenComponent,
-  screenState: PropTypes.string,
-  index: PropTypes.number.isRequired,
-  href: PropTypes.string,
-  title: PropTypes.string,
-  active: PropTypes.bool,
-  withPlaceholder: PropTypes.bool,
-  withIndexIndicator: PropTypes.bool,
-  withName: PropTypes.bool,
-  withDeleteButtonOnRepeatables: PropTypes.bool,
-  onClick: PropTypes.func,
-  onClickItem: PropTypes.func,
-  onDeleteButtonClick: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$d = {
-  screen: null,
-  screenState: null,
-  title: null,
-  href: null,
-  active: false,
-  withPlaceholder: false,
-  withIndexIndicator: false,
-  withName: false,
-  withDeleteButtonOnRepeatables: false,
-  onClick: null,
-  onClickItem: null,
-  onDeleteButtonClick: null,
-  className: null
-};
-var ScreenWithPreview = function ScreenWithPreview(_ref) {
-  var screen = _ref.screen,
-    screenState = _ref.screenState,
+var styles$b = {"button":"button","index":"index","name":"name","deleteButton":"deleteButton","withIndex":"withIndex"};
+
+function ScreenWithPreview(_ref) {
+  var _ref$screen = _ref.screen,
+    screen = _ref$screen === void 0 ? null : _ref$screen,
+    _ref$screenState = _ref.screenState,
+    screenState = _ref$screenState === void 0 ? null : _ref$screenState,
     index = _ref.index,
-    title = _ref.title,
-    href = _ref.href,
-    active = _ref.active,
-    className = _ref.className,
-    _onClick = _ref.onClick,
-    onClickItem = _ref.onClickItem,
-    withName = _ref.withName,
-    withPlaceholder = _ref.withPlaceholder,
-    withIndexIndicator = _ref.withIndexIndicator,
-    withDeleteButtonOnRepeatables = _ref.withDeleteButtonOnRepeatables,
-    onDeleteButtonClick = _ref.onDeleteButtonClick;
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$href = _ref.href,
+    href = _ref$href === void 0 ? null : _ref$href,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+    _ref$onClickItem = _ref.onClickItem,
+    onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem,
+    _ref$withName = _ref.withName,
+    withName = _ref$withName === void 0 ? false : _ref$withName,
+    _ref$withPlaceholder = _ref.withPlaceholder,
+    withPlaceholder = _ref$withPlaceholder === void 0 ? false : _ref$withPlaceholder,
+    _ref$withIndexIndicat = _ref.withIndexIndicator,
+    withIndexIndicator = _ref$withIndexIndicat === void 0 ? false : _ref$withIndexIndicat,
+    _ref$withDeleteButton = _ref.withDeleteButtonOnRepeatables,
+    withDeleteButtonOnRepeatables = _ref$withDeleteButton === void 0 ? false : _ref$withDeleteButton,
+    _ref$onDeleteButtonCl = _ref.onDeleteButtonClick,
+    onDeleteButtonClick = _ref$onDeleteButtonCl === void 0 ? null : _ref$onDeleteButtonCl;
   var intl = useIntl();
   var _useIsVisible = useIsVisible({
       threshold: 0.1
@@ -1234,29 +1164,17 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTimesCircle
   })) : null));
-};
-ScreenWithPreview.propTypes = propTypes$d;
-ScreenWithPreview.defaultProps = defaultProps$d;
+}
 
-var styles$a = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
+var styles$a = {"container":"container","button":"button","addButton":"addButton","title":"title"};
 
-var propTypes$c = {
-  screen: PropTypes$1.screen.isRequired,
-  screenState: PropTypes.string,
-  value: PropTypes$1.story.isRequired,
-  className: PropTypes.string,
-  onChange: PropTypes.func
-};
-var defaultProps$c = {
-  screenState: null,
-  className: null,
-  onChange: null
-};
 function ScreenStates(_ref) {
   var screen = _ref.screen,
     value = _ref.value,
-    className = _ref.className,
-    onChange = _ref.onChange;
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange;
   var url = useUrlGenerator();
   var push = useRoutePush();
   var _useRouteParams = useRouteParams(),
@@ -1403,51 +1321,36 @@ function ScreenStates(_ref) {
     }));
   })));
 }
-ScreenStates.propTypes = propTypes$c;
-ScreenStates.defaultProps = defaultProps$c;
-
-var styles$9 = {"container":"micromag-editor-preview-container","story":"micromag-editor-preview-story","noStory":"micromag-editor-preview-noStory","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","devices":"micromag-editor-preview-devices"};
-
-var propTypes$b = {
-  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
-  devices: PropTypes$1.devices,
-  device: PropTypes.string,
-  viewerTheme: PropTypes$1.viewerTheme,
-  isTheme: PropTypes.bool,
-  className: PropTypes.string,
-  onScreenChange: PropTypes.func,
-  onChange: PropTypes.func,
-  withoutDevicesSizes: PropTypes.bool
-};
-var defaultProps$b = {
-  value: null,
-  devices: [{
-    id: 'mobile',
-    width: 320,
-    height: 480
-  }, {
-    id: 'desktop',
-    width: 1200,
-    height: 900
-  }],
-  device: 'mobile',
-  viewerTheme: null,
-  isTheme: false,
-  className: null,
-  onScreenChange: null,
-  onChange: null,
-  withoutDevicesSizes: true
-};
-var EditorPreview = function EditorPreview(_ref) {
-  var value = _ref.value,
-    viewerTheme = _ref.viewerTheme,
-    isTheme = _ref.isTheme,
-    devices = _ref.devices,
-    initialDevice = _ref.device,
-    className = _ref.className,
-    onScreenChange = _ref.onScreenChange,
-    onChange = _ref.onChange,
-    withoutDevicesSizes = _ref.withoutDevicesSizes;
+
+var styles$9 = {"container":"container","inner":"inner","top":"top","bottom":"bottom","preview":"preview","viewerContainer":"viewerContainer","deviceMenu":"deviceMenu","devices":"devices","noStory":"noStory","story":"story"};
+
+function EditorPreview(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$viewerTheme = _ref.viewerTheme,
+    viewerTheme = _ref$viewerTheme === void 0 ? null : _ref$viewerTheme,
+    _ref$isTheme = _ref.isTheme,
+    isTheme = _ref$isTheme === void 0 ? false : _ref$isTheme,
+    _ref$devices = _ref.devices,
+    devices = _ref$devices === void 0 ? [{
+      id: 'mobile',
+      width: 320,
+      height: 480
+    }, {
+      id: 'desktop',
+      width: 1200,
+      height: 900
+    }] : _ref$devices,
+    _ref$device = _ref.device,
+    initialDevice = _ref$device === void 0 ? 'mobile' : _ref$device,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onScreenChange = _ref.onScreenChange,
+    onScreenChange = _ref$onScreenChange === void 0 ? null : _ref$onScreenChange,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
+    _ref$withoutDevicesSi = _ref.withoutDevicesSizes,
+    withoutDevicesSizes = _ref$withoutDevicesSi === void 0 ? true : _ref$withoutDevicesSi;
   var _useRouteParams = useRouteParams(),
     _useRouteParams$scree = _useRouteParams.screen,
     screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
@@ -1577,9 +1480,7 @@ var EditorPreview = function EditorPreview(_ref) {
     onClickItem: onClickDeviceItem,
     className: styles$9.devices
   })) : null));
-};
-EditorPreview.propTypes = propTypes$b;
-EditorPreview.defaultProps = defaultProps$b;
+}
 
 var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
 function getDragDepth(offset, indentationWidth) {
@@ -1929,83 +1830,48 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
   };
 };
 
-var styles$8 = {"wrapper":"micromag-editor-sortable-sortable-tree-item-actions-wrapper","inner":"micromag-editor-sortable-sortable-tree-item-actions-inner","button":"micromag-editor-sortable-sortable-tree-item-actions-button","handle":"micromag-editor-sortable-sortable-tree-item-actions-handle","icon":"micromag-editor-sortable-sortable-tree-item-actions-icon","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
-
-var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children", "containerRef"];
-var propTypes$a = {
-  childCount: PropTypes.number,
-  clone: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  depth: PropTypes.number.isRequired,
-  disableInteraction: PropTypes.bool,
-  disableSelection: PropTypes.bool,
-  ghost: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  handleProps: PropTypes.any,
-  indicator: PropTypes.bool,
-  indentationWidth: PropTypes.number.isRequired,
-  value: PropTypes.string,
-  onCollapse: PropTypes.func,
-  onRemove: PropTypes.func,
-  onClick: PropTypes.func,
-  // eslint-disable-next-line react/forbid-prop-types
-  wrapperRef: PropTypes.any,
-  style: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    transform: PropTypes.string.isRequired
-  }),
-  showId: PropTypes.bool,
-  showCount: PropTypes.bool,
-  showCollapsedCount: PropTypes.bool,
-  children: PropTypes.node,
-  // eslint-disable-next-line react/forbid-prop-types
-  containerRef: PropTypes.any
-};
-var defaultProps$a = {
-  childCount: null,
-  clone: false,
-  collapsed: false,
-  disableInteraction: false,
-  disableSelection: false,
-  ghost: false,
-  handleProps: null,
-  indicator: false,
-  value: null,
-  onCollapse: null,
-  onRemove: null,
-  onClick: null,
-  wrapperRef: null,
-  style: null,
-  showId: false,
-  showCount: false,
-  showCollapsedCount: false,
-  children: null,
-  containerRef: null
-};
+var styles$8 = {"wrapper":"wrapper","inner":"inner","button":"button","handle":"handle","icon":"icon","count":"count","collapsedCount":"collapsedCount","disableInteraction":"disableInteraction","disableSelection":"disableSelection","clone":"clone","collapse":"collapse","collapsed":"collapsed","children":"children","withChildren":"withChildren","ghost":"ghost","indicator":"indicator"};
+
+var _excluded$5 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children", "containerRef"];
 var SortableTreeItemActions = function SortableTreeItemActions(_ref) {
-  var childCount = _ref.childCount,
-    clone = _ref.clone,
+  var _ref$childCount = _ref.childCount,
+    childCount = _ref$childCount === void 0 ? null : _ref$childCount,
+    _ref$clone = _ref.clone,
+    clone = _ref$clone === void 0 ? false : _ref$clone,
     depth = _ref.depth,
-    disableSelection = _ref.disableSelection,
-    disableInteraction = _ref.disableInteraction,
-    ghost = _ref.ghost,
-    handleProps = _ref.handleProps,
+    _ref$disableSelection = _ref.disableSelection,
+    disableSelection = _ref$disableSelection === void 0 ? false : _ref$disableSelection,
+    _ref$disableInteracti = _ref.disableInteraction,
+    disableInteraction = _ref$disableInteracti === void 0 ? false : _ref$disableInteracti,
+    _ref$ghost = _ref.ghost,
+    ghost = _ref$ghost === void 0 ? false : _ref$ghost,
+    _ref$handleProps = _ref.handleProps,
+    handleProps = _ref$handleProps === void 0 ? null : _ref$handleProps,
     indentationWidth = _ref.indentationWidth,
-    indicator = _ref.indicator,
-    collapsed = _ref.collapsed,
-    onCollapse = _ref.onCollapse,
-    onRemove = _ref.onRemove;
+    _ref$indicator = _ref.indicator,
+    indicator = _ref$indicator === void 0 ? false : _ref$indicator,
+    _ref$collapsed = _ref.collapsed,
+    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+    _ref$onCollapse = _ref.onCollapse,
+    onCollapse = _ref$onCollapse === void 0 ? null : _ref$onCollapse,
+    _ref$onRemove = _ref.onRemove,
+    onRemove = _ref$onRemove === void 0 ? null : _ref$onRemove;
     _ref.onClick;
-    var style = _ref.style;
+    var _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style;
     _ref.value;
-    var wrapperRef = _ref.wrapperRef;
+    var _ref$wrapperRef = _ref.wrapperRef,
+    wrapperRef = _ref$wrapperRef === void 0 ? null : _ref$wrapperRef;
     _ref.showId;
-    var showCount = _ref.showCount,
-    showCollapsedCount = _ref.showCollapsedCount,
-    children = _ref.children,
-    containerRef = _ref.containerRef,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    var _ref$showCount = _ref.showCount,
+    showCount = _ref$showCount === void 0 ? false : _ref$showCount,
+    _ref$showCollapsedCou = _ref.showCollapsedCount,
+    showCollapsedCount = _ref$showCollapsedCou === void 0 ? false : _ref$showCollapsedCou,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$containerRef = _ref.containerRef,
+    containerRef = _ref$containerRef === void 0 ? null : _ref$containerRef,
+    props = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classNames([styles$8.wrapper, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$8.clone, clone), styles$8.ghost, ghost), styles$8.indicator, indicator), styles$8.disableSelection, disableSelection), styles$8.disableInteraction, disableInteraction), styles$8.withChildren, onCollapse !== null)]),
     ref: wrapperRef,
@@ -2042,70 +1908,40 @@ var SortableTreeItemActions = function SortableTreeItemActions(_ref) {
     className: styles$8.children
   }, children)));
 };
-SortableTreeItemActions.propTypes = propTypes$a;
-SortableTreeItemActions.defaultProps = defaultProps$a;
 var SortableTreeItemActions$1 = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({}, props, {
     containerRef: ref
   }));
 });
 
-var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
-
-var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "childValue", "isLastChild"];
-var propTypes$9 = {
-  id: PropTypes.string.isRequired,
-  index: PropTypes.number.isRequired,
-  depth: PropTypes.number.isRequired,
-  component: PropTypes.func,
-  // eslint-disable-next-line react/forbid-prop-types
-  value: PropTypes.object,
-  style: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    scaledWidth: PropTypes.number.isRequired,
-    scaledHeight: PropTypes.number.isRequired,
-    transform: PropTypes.string.isRequired,
-    scale: PropTypes.number.isRequired
-  }),
-  smallScale: PropTypes.number,
-  collapsed: PropTypes.bool,
-  onCollapse: PropTypes.func,
-  onClickItem: PropTypes.func,
-  // eslint-disable-next-line react/forbid-prop-types
-  childValue: PropTypes.object,
-  isLastChild: PropTypes.bool
-};
-var defaultProps$9 = {
-  component: null,
-  value: null,
-  style: null,
-  smallScale: 0.75,
-  collapsed: false,
-  onCollapse: null,
-  onClickItem: null,
-  childValue: null,
-  isLastChild: false
-};
+var styles$7 = {"container":"container","parent":"parent","child":"child"};
+
+var _excluded$4 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "childValue", "isLastChild"];
 var animateLayoutChanges = function animateLayoutChanges(_ref) {
   var isSorting = _ref.isSorting,
     wasDragging = _ref.wasDragging;
   return !(isSorting || wasDragging);
 };
-var SortableTreeItem = function SortableTreeItem(_ref2) {
+function SortableTreeItem(_ref2) {
   var id = _ref2.id,
     index = _ref2.index,
     depth = _ref2.depth,
-    Component = _ref2.component,
-    value = _ref2.value;
+    _ref2$component = _ref2.component,
+    Component = _ref2$component === void 0 ? null : _ref2$component,
+    _ref2$value = _ref2.value,
+    value = _ref2$value === void 0 ? null : _ref2$value;
     _ref2.style;
     _ref2.smallScale;
-    var collapsed = _ref2.collapsed,
-    onCollapse = _ref2.onCollapse,
-    onClickItem = _ref2.onClickItem,
-    childValue = _ref2.childValue;
+    var _ref2$collapsed = _ref2.collapsed,
+    collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    _ref2$onCollapse = _ref2.onCollapse,
+    onCollapse = _ref2$onCollapse === void 0 ? null : _ref2$onCollapse,
+    _ref2$onClickItem = _ref2.onClickItem,
+    onClickItem = _ref2$onClickItem === void 0 ? null : _ref2$onClickItem,
+    _ref2$childValue = _ref2.childValue,
+    childValue = _ref2$childValue === void 0 ? null : _ref2$childValue;
     _ref2.isLastChild;
-    var props = _objectWithoutProperties(_ref2, _excluded$3);
+    var props = _objectWithoutProperties(_ref2, _excluded$4);
   var _useSortable = useSortable({
       id: id,
       animateLayoutChanges: animateLayoutChanges
@@ -2171,11 +2007,9 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
   }, /*#__PURE__*/React.createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles$7.child
   }, /*#__PURE__*/React.createElement(Component, childValue)) : null));
-};
-SortableTreeItem.propTypes = propTypes$9;
-SortableTreeItem.defaultProps = defaultProps$9;
+}
 
-var styles$6 = {"item":"micromag-editor-sortable-sortable-tree-item","parent":"micromag-editor-sortable-sortable-tree-parent","group":"micromag-editor-sortable-sortable-tree-group","isLastChild":"micromag-editor-sortable-sortable-tree-isLastChild"};
+var styles$6 = {"item":"item","parent":"parent","group":"group","isLastChild":"isLastChild"};
 
 var initialItems = [{
   id: 'Home',
@@ -2210,36 +2044,23 @@ var adjustTranslate = function adjustTranslate(_ref) {
     y: transform.y - 25
   });
 };
-var propTypes$8 = {
-  collapsible: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  items: PropTypes.array,
-  indentationWidth: PropTypes.number,
-  indicator: PropTypes.bool,
-  removable: PropTypes.bool,
-  component: PropTypes.func,
-  onClickItem: PropTypes.func,
-  onChange: PropTypes.func
-};
-var defaultProps$8 = {
-  collapsible: true,
-  items: initialItems,
-  indentationWidth: 30,
-  indicator: false,
-  removable: false,
-  component: null,
-  onClickItem: null,
-  onChange: null
-};
-var SortableTree = function SortableTree(_ref2) {
-  var collapsible = _ref2.collapsible,
-    defaultItems = _ref2.items,
-    indicator = _ref2.indicator,
-    indentationWidth = _ref2.indentationWidth,
-    removable = _ref2.removable,
-    component = _ref2.component,
-    onClickItem = _ref2.onClickItem,
-    onChange = _ref2.onChange;
+function SortableTree(_ref2) {
+  var _ref2$collapsible = _ref2.collapsible,
+    collapsible = _ref2$collapsible === void 0 ? true : _ref2$collapsible,
+    _ref2$items = _ref2.items,
+    defaultItems = _ref2$items === void 0 ? initialItems : _ref2$items,
+    _ref2$indicator = _ref2.indicator,
+    indicator = _ref2$indicator === void 0 ? false : _ref2$indicator,
+    _ref2$indentationWidt = _ref2.indentationWidth,
+    indentationWidth = _ref2$indentationWidt === void 0 ? 30 : _ref2$indentationWidt,
+    _ref2$removable = _ref2.removable,
+    removable = _ref2$removable === void 0 ? false : _ref2$removable,
+    _ref2$component = _ref2.component,
+    component = _ref2$component === void 0 ? null : _ref2$component,
+    _ref2$onClickItem = _ref2.onClickItem,
+    onClickItem = _ref2$onClickItem === void 0 ? null : _ref2$onClickItem,
+    _ref2$onChange = _ref2.onChange,
+    onChange = _ref2$onChange === void 0 ? null : _ref2$onChange;
   var _useState = useState(function () {
       return buildTree(defaultItems);
     }),
@@ -2591,64 +2412,43 @@ var SortableTree = function SortableTree(_ref2) {
       return activeId === id;
     })
   })) : null), document.body)));
-};
-SortableTree.propTypes = propTypes$8;
-SortableTree.defaultProps = defaultProps$8;
+}
 
-var styles$5 = {"container":"micromag-editor-menus-screens-container","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
+var styles$5 = {"items":"items","item":"item","container":"container","settings":"settings","noWrap":"noWrap","isVertical":"isVertical","withPlaceholder":"withPlaceholder"};
 
-var _excluded$2 = ["className", "screen", "type", "title", "onClick", "active", "href"],
+var _excluded$3 = ["className", "screen", "type", "title", "onClick", "active", "href"],
   _excluded2 = ["id", "screen", "href"];
-var propTypes$7 = {
-  items: PropTypes$1.menuItems,
-  withPreview: PropTypes.bool,
-  withPlaceholder: PropTypes.bool,
-  withName: PropTypes.bool,
-  settings: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  sortable: PropTypes.bool,
-  isTree: PropTypes.bool,
-  isVertical: PropTypes.bool,
-  noWrap: PropTypes.bool,
-  className: PropTypes.string,
-  itemClassName: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  settingsClassName: PropTypes.string,
-  onClickItem: PropTypes.func,
-  onOrderChange: PropTypes.func
-};
-var defaultProps$7 = {
-  items: [],
-  withPreview: false,
-  withPlaceholder: false,
-  withName: false,
-  settings: null,
-  sortable: false,
-  isTree: false,
-  isVertical: false,
-  noWrap: false,
-  className: null,
-  itemClassName: null,
-  buttonClassName: null,
-  settingsClassName: null,
-  onClickItem: null,
-  onOrderChange: null
-};
-var ScreensMenu = function ScreensMenu(_ref) {
-  var items = _ref.items,
-    withPreview = _ref.withPreview,
-    withPlaceholder = _ref.withPlaceholder,
-    withName = _ref.withName,
-    settings = _ref.settings,
-    isVertical = _ref.isVertical,
-    noWrap = _ref.noWrap,
-    className = _ref.className,
-    itemClassName = _ref.itemClassName,
-    buttonClassName = _ref.buttonClassName,
-    settingsClassName = _ref.settingsClassName,
-    sortable = _ref.sortable,
-    isTree = _ref.isTree,
-    onClickItem = _ref.onClickItem,
-    onOrderChange = _ref.onOrderChange;
+function ScreensMenu(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$withPreview = _ref.withPreview,
+    withPreview = _ref$withPreview === void 0 ? false : _ref$withPreview,
+    _ref$withPlaceholder = _ref.withPlaceholder,
+    withPlaceholder = _ref$withPlaceholder === void 0 ? false : _ref$withPlaceholder,
+    _ref$withName = _ref.withName,
+    withName = _ref$withName === void 0 ? false : _ref$withName,
+    _ref$settings = _ref.settings,
+    settings = _ref$settings === void 0 ? null : _ref$settings,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$itemClassName = _ref.itemClassName,
+    itemClassName = _ref$itemClassName === void 0 ? null : _ref$itemClassName,
+    _ref$buttonClassName = _ref.buttonClassName,
+    buttonClassName = _ref$buttonClassName === void 0 ? null : _ref$buttonClassName,
+    _ref$settingsClassNam = _ref.settingsClassName,
+    settingsClassName = _ref$settingsClassNam === void 0 ? null : _ref$settingsClassNam,
+    _ref$sortable = _ref.sortable,
+    sortable = _ref$sortable === void 0 ? false : _ref$sortable,
+    _ref$isTree = _ref.isTree,
+    isTree = _ref$isTree === void 0 ? false : _ref$isTree,
+    _ref$onClickItem = _ref.onClickItem,
+    onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem,
+    _ref$onOrderChange = _ref.onOrderChange,
+    onOrderChange = _ref$onOrderChange === void 0 ? null : _ref$onOrderChange;
   var itemsElements = !isTree ? items.map(function (_ref2, index) {
     var _ref2$className = _ref2.className,
       itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
@@ -2659,7 +2459,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
       active = _ref2.active,
       href = _ref2.href,
-      item = _objectWithoutProperties(_ref2, _excluded$2);
+      item = _objectWithoutProperties(_ref2, _excluded$3);
     return /*#__PURE__*/React.createElement("li", {
       key: item.id,
       className: classNames([styles$5.item, _defineProperty(_defineProperty({}, itemClassName, itemClassName !== null), itemCustomClassName, itemCustomClassName !== null)]),
@@ -2731,34 +2531,31 @@ var ScreensMenu = function ScreensMenu(_ref) {
   }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
     className: styles$5.items
   }, itemsElements) : null);
-};
-ScreensMenu.propTypes = propTypes$7;
-ScreensMenu.defaultProps = defaultProps$7;
-
-var styles$4 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
+}
 
-var propTypes$6 = {
-  screens: PropTypes$1.screenDefinitions,
-  selectedTypes: PropTypes.arrayOf(PropTypes.string),
-  className: PropTypes.string,
-  onClickItem: PropTypes.func
-};
-var defaultProps$6 = {
-  screens: null,
-  selectedTypes: null,
-  className: null,
-  onClickItem: null
-};
-var ScreenTypes = function ScreenTypes(_ref) {
-  var screens = _ref.screens,
-    selectedTypes = _ref.selectedTypes,
-    className = _ref.className,
-    onClickItem = _ref.onClickItem;
+var styles$4 = {"container":"container","row":"row","screen":"screen","button":"button"};
+
+function ScreenTypes(_ref) {
+  var _ref$screens = _ref.screens,
+    screens = _ref$screens === void 0 ? null : _ref$screens,
+    _ref$selectedTypes = _ref.selectedTypes,
+    selectedTypes = _ref$selectedTypes === void 0 ? null : _ref$selectedTypes,
+    _ref$legacyTypes = _ref.legacyTypes,
+    legacyTypes = _ref$legacyTypes === void 0 ? ['video-360', 'urbania-trivia', 'urbania-article'] : _ref$legacyTypes,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onClickItem = _ref.onClickItem,
+    onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem;
   var intl = useIntl();
   var screensManager = useScreensManager();
   var screenDefinitions = screens || screensManager.getDefinitions();
   var finalDefinitions = (screenDefinitions || []).filter(function (s) {
     return s !== null;
+  }).filter(function (s) {
+    var _ref2 = s || {},
+      _ref2$id = _ref2.id,
+      id = _ref2$id === void 0 ? null : _ref2$id;
+    return legacyTypes === null || legacyTypes.indexOf(id) === -1;
   });
   var groups = useMemo(function () {
     var groupItems = finalDefinitions.reduce(function (allGroups, definition) {
@@ -2766,28 +2563,28 @@ var ScreenTypes = function ScreenTypes(_ref) {
         title = definition.title,
         _definition$group = definition.group,
         group = _definition$group === void 0 ? {} : _definition$group;
-      var _ref2 = group || {},
-        _ref2$order = _ref2.order,
-        order = _ref2$order === void 0 ? 0 : _ref2$order,
-        _ref2$label = _ref2.label,
-        label = _ref2$label === void 0 ? {} : _ref2$label,
-        _ref2$hidden = _ref2.hidden,
-        hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
-      var _ref3 = label || {},
-        _ref3$id = _ref3.id,
-        messageId = _ref3$id === void 0 ? null : _ref3$id;
+      var _ref3 = group || {},
+        _ref3$order = _ref3.order,
+        order = _ref3$order === void 0 ? 0 : _ref3$order,
+        _ref3$label = _ref3.label,
+        label = _ref3$label === void 0 ? {} : _ref3$label,
+        _ref3$hidden = _ref3.hidden,
+        hidden = _ref3$hidden === void 0 ? false : _ref3$hidden;
+      var _ref4 = label || {},
+        _ref4$id = _ref4.id,
+        messageId = _ref4$id === void 0 ? null : _ref4$id;
       if (hidden) {
         return allGroups;
       }
-      var _ref4 = isMessage(label) ? {
+      var _ref5 = isMessage(label) ? {
           id: messageId || id,
           name: group
         } : {
           id: messageId || id,
           name: title
         },
-        groupId = _ref4.id,
-        groupName = _ref4.name;
+        groupId = _ref5.id,
+        groupName = _ref5.name;
       var groupIndex = allGroups.findIndex(function (it) {
         return it.id === groupId;
       });
@@ -2817,10 +2614,10 @@ var ScreenTypes = function ScreenTypes(_ref) {
     className: classNames([styles$4.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.rows
-  }, groups.map(function (_ref6) {
-    var id = _ref6.id,
-      name = _ref6.name,
-      items = _ref6.items;
+  }, groups.map(function (_ref7) {
+    var id = _ref7.id,
+      name = _ref7.name,
+      items = _ref7.items;
     return /*#__PURE__*/React.createElement("div", {
       key: "group-".concat(id),
       className: styles$4.row
@@ -2840,29 +2637,19 @@ var ScreenTypes = function ScreenTypes(_ref) {
       onClickItem: onClickItem
     })));
   })));
-};
-ScreenTypes.propTypes = propTypes$6;
-ScreenTypes.defaultProps = defaultProps$6;
-
-var styles$3 = {"container":"micromag-editor-modals-screen-types-container"};
+}
 
-var propTypes$5 = {
-  selectedTypes: PropTypes.arrayOf(PropTypes.string),
-  className: PropTypes.string,
-  onRequestClose: PropTypes.func,
-  onClickScreenType: PropTypes.func
-};
-var defaultProps$5 = {
-  selectedTypes: null,
-  className: null,
-  onRequestClose: null,
-  onClickScreenType: null
-};
-var ScreenTypesModal = function ScreenTypesModal(_ref) {
-  var selectedTypes = _ref.selectedTypes,
-    className = _ref.className,
-    onRequestClose = _ref.onRequestClose,
-    onClickScreenType = _ref.onClickScreenType;
+var styles$3 = {"container":"container"};
+
+function ScreenTypesModal(_ref) {
+  var _ref$selectedTypes = _ref.selectedTypes,
+    selectedTypes = _ref$selectedTypes === void 0 ? null : _ref$selectedTypes,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$onRequestClose = _ref.onRequestClose,
+    onRequestClose = _ref$onRequestClose === void 0 ? null : _ref$onRequestClose,
+    _ref$onClickScreenTyp = _ref.onClickScreenType,
+    onClickScreenType = _ref$onClickScreenTyp === void 0 ? null : _ref$onClickScreenTyp;
   return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "QBaiO0",
@@ -2878,45 +2665,30 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
     className: styles$3.menu,
     onClickItem: onClickScreenType
   })));
-};
-ScreenTypesModal.propTypes = propTypes$5;
-ScreenTypesModal.defaultProps = defaultProps$5;
-
-var styles$2 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
-
-var _excluded$1 = ["id"];
-var propTypes$4 = {
-  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
-  isTheme: PropTypes.bool,
-  isVertical: PropTypes.bool,
-  isCreateOpened: PropTypes.bool,
-  isParsed: PropTypes.bool,
-  isTree: PropTypes.bool,
-  onClickScreen: PropTypes.func,
-  onChange: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$4 = {
-  value: null,
-  isTheme: false,
-  isVertical: false,
-  isCreateOpened: false,
-  isParsed: false,
-  isTree: false,
-  onClickScreen: null,
-  onChange: null,
-  className: null
-};
-var EditorScreens = function EditorScreens(_ref) {
-  var unparsedValue = _ref.value,
-    isTheme = _ref.isTheme,
-    isVertical = _ref.isVertical,
-    isCreateOpened = _ref.isCreateOpened,
-    isParsed = _ref.isParsed,
-    isTree = _ref.isTree,
-    onClickScreen = _ref.onClickScreen,
-    onChange = _ref.onChange,
-    className = _ref.className;
+}
+
+var styles$2 = {"container":"container","navbar":"navbar"};
+
+var _excluded$2 = ["id"];
+function EditorScreens(_ref) {
+  var _ref$value = _ref.value,
+    unparsedValue = _ref$value === void 0 ? null : _ref$value,
+    _ref$isTheme = _ref.isTheme,
+    isTheme = _ref$isTheme === void 0 ? false : _ref$isTheme,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$isCreateOpened = _ref.isCreateOpened,
+    isCreateOpened = _ref$isCreateOpened === void 0 ? false : _ref$isCreateOpened,
+    _ref$isParsed = _ref.isParsed,
+    isParsed = _ref$isParsed === void 0 ? false : _ref$isParsed,
+    _ref$isTree = _ref.isTree,
+    isTree = _ref$isTree === void 0 ? false : _ref$isTree,
+    _ref$onClickScreen = _ref.onClickScreen,
+    onClickScreen = _ref$onClickScreen === void 0 ? null : _ref$onClickScreen,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   var valueWithTheme = useThemeValue(unparsedValue, isTheme);
   var value = isParsed ? unparsedValue : useParsedStory(valueWithTheme, {
     withMedias: false
@@ -3009,7 +2781,7 @@ var EditorScreens = function EditorScreens(_ref) {
         }).map(function (_ref13) {
           var _screenProps$find;
           var id = _ref13.id,
-            props = _objectWithoutProperties(_ref13, _excluded$1);
+            props = _objectWithoutProperties(_ref13, _excluded$2);
           return _objectSpread(_objectSpread({
             id: id
           }, props), (_screenProps$find = screenProps.find(function (_ref14) {
@@ -3140,44 +2912,29 @@ var EditorScreens = function EditorScreens(_ref) {
     onClickScreenType: onClickScreenType,
     onRequestClose: onCreateModalRequestClose
   }) : null);
-};
-EditorScreens.propTypes = propTypes$4;
-EditorScreens.defaultProps = defaultProps$4;
-
-var styles$1 = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","center":"micromag-editor-center","inner":"micromag-editor-inner","visible":"micromag-editor-visible","top":"micromag-editor-top"};
-
-var propTypes$3 = {
-  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
-  deviceScreens: PropTypes$1.deviceScreens,
-  viewerTheme: PropTypes$1.viewerTheme,
-  mobileView: PropTypes.oneOf(['screens', 'preview', 'form']),
-  fullscreen: PropTypes.bool,
-  isTheme: PropTypes.bool,
-  isCreateOpened: PropTypes.bool,
-  onChange: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$3 = {
-  value: null,
-  deviceScreens: getDeviceScreens(),
-  viewerTheme: null,
-  mobileView: 'preview',
-  fullscreen: false,
-  isTheme: false,
-  isCreateOpened: false,
-  onChange: null,
-  className: null
-};
-var Editor = function Editor(_ref) {
-  var value = _ref.value,
-    viewerTheme = _ref.viewerTheme,
-    isTheme = _ref.isTheme,
-    isCreateOpened = _ref.isCreateOpened,
-    deviceScreens = _ref.deviceScreens,
-    initialMobileView = _ref.mobileView,
-    onChange = _ref.onChange,
-    fullscreen = _ref.fullscreen,
-    className = _ref.className;
+}
+
+var styles$1 = {"container":"container","inner":"inner","left":"left","center":"center","right":"right","visible":"visible","preview":"preview","fullscreen":"fullscreen","top":"top"};
+
+function Editor(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$viewerTheme = _ref.viewerTheme,
+    viewerTheme = _ref$viewerTheme === void 0 ? null : _ref$viewerTheme,
+    _ref$isTheme = _ref.isTheme,
+    isTheme = _ref$isTheme === void 0 ? false : _ref$isTheme,
+    _ref$isCreateOpened = _ref.isCreateOpened,
+    isCreateOpened = _ref$isCreateOpened === void 0 ? false : _ref$isCreateOpened,
+    _ref$deviceScreens = _ref.deviceScreens,
+    deviceScreens = _ref$deviceScreens === void 0 ? getDeviceScreens() : _ref$deviceScreens,
+    _ref$mobileView = _ref.mobileView,
+    initialMobileView = _ref$mobileView === void 0 ? 'preview' : _ref$mobileView,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
+    _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
   var push = useRoutePush();
   var refScreensContainer = useRef(null);
   var _useRouteParams = useRouteParams({
@@ -3346,44 +3103,23 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     className: styles$1.inner
   }))), /*#__PURE__*/React.createElement(Modals, null)))));
-};
-Editor.propTypes = propTypes$3;
-Editor.defaultProps = defaultProps$3;
-
-// eslint-disable-next-line import/prefer-default-export
-var routes = PropTypes.shape({
-  home: PropTypes.string.isRequired,
-  screen: PropTypes.string.isRequired,
-  'screen.field': PropTypes.string.isRequired,
-  'screen.field.form': PropTypes.string.isRequired
-});
-
-var styles = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
+}
 
-var propTypes$2 = {
-  name: PropTypes.string,
-  field: PropTypes$1.formField,
-  value: PropTypes$1.component,
-  className: PropTypes.string,
-  gotoFieldForm: PropTypes.func.isRequired,
-  closeFieldForm: PropTypes.func.isRequired,
-  onChange: PropTypes.func
-};
-var defaultProps$2 = {
-  name: null,
-  field: null,
-  value: null,
-  className: null,
-  onChange: null
-};
-var SettingsForm = function SettingsForm(_ref) {
-  var name = _ref.name,
-    field = _ref.field,
-    value = _ref.value,
-    className = _ref.className,
+var styles = {"container":"container","inner":"inner"};
+
+function SettingsForm(_ref) {
+  var _ref$name = _ref.name,
+    name = _ref$name === void 0 ? null : _ref$name,
+    _ref$field = _ref.field,
+    field = _ref$field === void 0 ? null : _ref$field,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
     gotoFieldForm = _ref.gotoFieldForm,
     closeFieldForm = _ref.closeFieldForm,
-    onChange = _ref.onChange;
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange;
   if (field === null) return false;
   var _ref2 = field || {},
     _ref2$type = _ref2.type,
@@ -3418,9 +3154,7 @@ var SettingsForm = function SettingsForm(_ref) {
     closeFieldForm: closeFieldForm,
     fieldsProps: fieldsProps
   })));
-};
-SettingsForm.propTypes = propTypes$2;
-SettingsForm.defaultProps = defaultProps$2;
+}
 
 // eslint-disable-next-line import/prefer-default-export
 
@@ -3429,21 +3163,16 @@ var FormsComponents = /*#__PURE__*/Object.freeze({
     Settings: SettingsForm
 });
 
-/* eslint-disable react/jsx-props-no-spreading */
-var propTypes$1 = {
-  children: PropTypes.node
-};
-var defaultProps$1 = {
-  children: null
-};
-var FormsProvider = function FormsProvider(props) {
+var _excluded$1 = ["children"];
+function FormsProvider(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React.createElement(ComponentsProvider, Object.assign({
     namespace: FORMS_NAMESPACE,
     components: FormsComponents
-  }, props));
-};
-FormsProvider.propTypes = propTypes$1;
-FormsProvider.defaultProps = defaultProps$1;
+  }, props), children);
+}
 
 var home = "/";
 var screen_wildcard = "/:screen/(.*)?";
@@ -3458,37 +3187,23 @@ var defaultRoutes = {
 
 var _excluded = ["value", "memoryRouter", "routes", "basePath", "uppy", "googleApiKey", "googleMapsLibraries", "screenNamespaces"];
 var pathToRegexpParser = createPathToRegexpParser();
-var propTypes = {
-  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
-  routes: routes,
-  memoryRouter: PropTypes.bool,
-  basePath: PropTypes.string,
-  uppy: PropTypes.shape({
-    transport: PropTypes.string
-  }),
-  googleApiKey: PropTypes.string,
-  googleMapsLibraries: PropTypes.arrayOf(PropTypes.string),
-  screenNamespaces: PropTypes.arrayOf(PropTypes.string)
-};
-var defaultProps = {
-  value: null,
-  routes: defaultRoutes,
-  memoryRouter: false,
-  basePath: null,
-  uppy: null,
-  googleApiKey: null,
-  googleMapsLibraries: ['places'],
-  screenNamespaces: null
-};
-var EditorContainer = function EditorContainer(_ref) {
-  var value = _ref.value,
-    memoryRouter = _ref.memoryRouter,
-    routes = _ref.routes,
-    basePath = _ref.basePath,
-    uppy = _ref.uppy,
-    googleApiKey = _ref.googleApiKey,
-    googleMapsLibraries = _ref.googleMapsLibraries,
-    screenNamespaces = _ref.screenNamespaces,
+function EditorContainer(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$memoryRouter = _ref.memoryRouter,
+    memoryRouter = _ref$memoryRouter === void 0 ? false : _ref$memoryRouter,
+    _ref$routes = _ref.routes,
+    routes = _ref$routes === void 0 ? defaultRoutes : _ref$routes,
+    _ref$basePath = _ref.basePath,
+    basePath = _ref$basePath === void 0 ? null : _ref$basePath,
+    _ref$uppy = _ref.uppy,
+    uppy = _ref$uppy === void 0 ? null : _ref$uppy,
+    _ref$googleApiKey = _ref.googleApiKey,
+    googleApiKey = _ref$googleApiKey === void 0 ? null : _ref$googleApiKey,
+    _ref$googleMapsLibrar = _ref.googleMapsLibraries,
+    googleMapsLibraries = _ref$googleMapsLibrar === void 0 ? ['places'] : _ref$googleMapsLibrar,
+    _ref$screenNamespaces = _ref.screenNamespaces,
+    screenNamespaces = _ref$screenNamespaces === void 0 ? null : _ref$screenNamespaces,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useIntl = useIntl(),
     locale = _useIntl.locale;
@@ -3528,8 +3243,6 @@ var EditorContainer = function EditorContainer(_ref) {
       value: value
     }, props)));
   }))))))))))));
-};
-EditorContainer.propTypes = propTypes;
-EditorContainer.defaultProps = defaultProps;
+}
 
 export { Editor, ScreenTypes, ScreensMenu as Screens, createScreen, EditorContainer as default };