@micromag/editor 0.3.347 → 0.3.349

package/lib/index.js

@@ -94,8 +94,6 @@ var useRouteParams = function useRouteParams() {
   return routeParams;
 };
 
-var styles$i = {"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","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
-
 var useFormTransition = function useFormTransition(url, screenIndex, styles) {
   var lastPageRef = React.useRef({
     url: url,
@@ -355,7 +353,7 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
 FieldWithContexts.propTypes = propTypes$n;
 FieldWithContexts.defaultProps = defaultProps$n;
 
-var styles$h = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
+var styles$i = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
 
 var propTypes$m = {
   value: core.PropTypes.component,
@@ -397,9 +395,9 @@ var ScreenForm = function ScreenForm(_ref) {
   //     }
   // }, [intl, onClickDelete, value]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$i.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$h.inner
+    className: styles$i.inner
   }, fields$1 !== null ? /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
     fields: fields$1,
     value: value,
@@ -411,7 +409,7 @@ var ScreenForm = function ScreenForm(_ref) {
 ScreenForm.propTypes = propTypes$m;
 ScreenForm.defaultProps = defaultProps$m;
 
-var styles$g = {"container":"micromag-editor-menus-breadcrumb-container"};
+var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
 
 var propTypes$l = {
   story: core.PropTypes.story,
@@ -635,13 +633,13 @@ var Breadcrumb = function Breadcrumb(_ref) {
     theme: "secondary",
     withoutBar: true,
     noWrap: true,
-    className: classNames__default["default"]([styles$g.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$h.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
   }));
 };
 Breadcrumb.propTypes = propTypes$l;
 Breadcrumb.defaultProps = defaultProps$l;
 
-var styles$f = {"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":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
 
 var propTypes$k = {
   className: PropTypes__default["default"].string,
@@ -665,10 +663,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
         "value": "Delete screen"
       }]
     }),
-    className: classNames__default["default"]([styles$f.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"]([styles$g.container, _defineProperty__default["default"]({}, className, className)]),
     onClickClose: onCancel
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$f.description
+    className: styles$g.description
   }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "q/tLk0",
     defaultMessage: [{
@@ -676,7 +674,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
       "value": "Are you sure you want to delete this screen?"
     }]
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$f.actions
+    className: styles$g.actions
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     onClick: onCancel,
     className: "btn-outline-secondary me-2"
@@ -701,7 +699,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
 DeleteScreenModal.propTypes = propTypes$k;
 DeleteScreenModal.defaultProps = defaultProps$k;
 
-var styles$e = {"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 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__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
@@ -749,7 +747,7 @@ var EditForm = function EditForm(_ref) {
   }, [screensManager, screen]);
 
   // Get transition value
-  var _useFormTransition = useFormTransition(url, screenIndex, styles$e),
+  var _useFormTransition = useFormTransition(url, screenIndex, styles$f),
     transitionClassNames = _useFormTransition.classNames,
     transitionTimeout = _useFormTransition.timeout;
   var _useState = React.useState(false),
@@ -890,7 +888,7 @@ var EditForm = function EditForm(_ref) {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$e.navbar])
+    className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
   }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
     story: value,
     url: url,
@@ -911,7 +909,7 @@ var EditForm = function EditForm(_ref) {
     visible: screenSettingsOpened,
     onClickOutside: onDropdownClickOutside
   })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$e.content])
+    className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$f.content])
   }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, {
     className: "w-100 flex-grow-1",
     childFactory: function childFactory(child) {
@@ -923,14 +921,14 @@ var EditForm = function EditForm(_ref) {
     timeout: transitionTimeout,
     key: "field-".concat(fieldParams, "-").concat(formParams)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$e.panel])
+    className: classNames__default["default"](['w-100', styles$f.panel])
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen
   }, /*#__PURE__*/React__default["default"].createElement(FieldWithContexts, {
     name: fieldParams.replace(/\//g, '.'),
     value: screen,
     form: formParams,
-    className: styles$e.form,
+    className: styles$f.form,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
     fieldContext: fieldContext,
@@ -940,13 +938,13 @@ var EditForm = function EditForm(_ref) {
     timeout: transitionTimeout,
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$e.panel]),
+    className: classNames__default["default"](['w-100', styles$f.panel]),
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen
   }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
     value: screen,
-    className: styles$e.form,
+    className: styles$f.form,
     onChange: onScreenFormChange,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
@@ -998,7 +996,7 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$d = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
+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 = {
@@ -1068,7 +1066,7 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$c = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$d = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 var _excluded$6 = ["device", "className", "iconComponents"];
 var propTypes$g = {
@@ -1087,9 +1085,9 @@ var DeviceButton = function DeviceButton(_ref) {
     props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
   var DeviceIcon = utils.getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), /*#__PURE__*/React__default["default"].createElement(DeviceIcon, {
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 DeviceButton.propTypes = propTypes$g;
@@ -1113,14 +1111,14 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
         itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
       return /*#__PURE__*/React__default["default"].createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
-        className: styles$d.button,
+        className: styles$e.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
         }
@@ -1131,9 +1129,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
 DevicesMenu.propTypes = propTypes$f;
 DevicesMenu.defaultProps = defaultProps$f;
 
-var styles$b = {"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":"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 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__default["default"].bool,
@@ -1175,17 +1171,17 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick = _ref.onClick,
     refButton = _ref.refButton;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$a.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
+    className: classNames__default["default"]([styles$c.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$c.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
   }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$a.screen
+    className: styles$c.screen
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$a.inner
+    className: styles$c.inner
   }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$a.icon
+    className: styles$c.icon
   }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$a.label
+    className: styles$c.label
   }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$a.button,
+    className: styles$c.button,
     withoutStyle: true,
     id: id,
     href: href,
@@ -1193,7 +1189,7 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick: onClick,
     refButton: refButton
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$a.border, 'rounded'])
+    className: classNames__default["default"]([styles$c.border, 'rounded'])
   })));
 };
 ScreenButton.propTypes = propTypes$e;
@@ -1204,7 +1200,7 @@ var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function
   }));
 });
 
-var styles$9 = {"button":"micromag-editor-buttons-screen-with-preview-button"};
+var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","index":"micromag-editor-buttons-screen-with-preview-index","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
 
 var propTypes$d = {
   screen: core.PropTypes.screenComponent,
@@ -1214,6 +1210,7 @@ var propTypes$d = {
   title: PropTypes__default["default"].string,
   active: PropTypes__default["default"].bool,
   withPlaceholder: PropTypes__default["default"].bool,
+  withIndexIndicator: PropTypes__default["default"].bool,
   onClick: PropTypes__default["default"].func,
   onClickItem: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
@@ -1225,11 +1222,13 @@ var defaultProps$d = {
   href: null,
   active: false,
   withPlaceholder: false,
+  withIndexIndicator: false,
   onClick: null,
   onClickItem: null,
   className: null
 };
 var ScreenWithPreview = function ScreenWithPreview(_ref) {
+  var _ref2;
   var screen = _ref.screen,
     screenState = _ref.screenState,
     index = _ref.index,
@@ -1239,13 +1238,14 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     className = _ref.className,
     _onClick = _ref.onClick,
     onClickItem = _ref.onClickItem,
-    withPlaceholder = _ref.withPlaceholder;
+    withPlaceholder = _ref.withPlaceholder,
+    withIndexIndicator = _ref.withIndexIndicator;
   var intl = reactIntl.useIntl();
   var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
   return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
     href: href,
     active: active,
-    className: classNames__default["default"]([styles$9.button, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$b.button, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$b.withIndex, withIndexIndicator), _ref2)]),
     title: utils.isMessage(title) ? intl.formatMessage(title) : null,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1258,13 +1258,17 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, {
     screen: screen,
     screenState: screenState,
-    className: styles$9.screen,
+    className: styles$b.screen,
     withSize: true
-  }));
+  }), index !== null && withIndexIndicator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$b.index
+  }, index + 1) : 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 propTypes$c = {
   screen: core.PropTypes.screen.isRequired,
   screenState: PropTypes__default["default"].string,
@@ -1303,15 +1307,15 @@ function ScreenStates(_ref) {
     return id === stateParam;
   }) !== -1 ? stateParam : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "d-flex align-items-end m-n1"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "p-1 align-self-stretch d-flex flex-column"
   }, /*#__PURE__*/React__default["default"].createElement("h6", {
-    className: classNames__default["default"](['fw-normal', 'invisible', styles$b.title])
+    className: classNames__default["default"](['fw-normal', 'invisible', styles$a.title])
   }, "Settings"), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([styles$b.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+    className: classNames__default["default"]([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
     theme: screenParam !== null && field === null ? 'primary' : 'secondary',
     outline: screenParam === null || field !== null,
     size: "lg",
@@ -1356,7 +1360,7 @@ function ScreenStates(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
     }, /*#__PURE__*/React__default["default"].createElement("h6", {
-      className: classNames__default["default"](['fw-normal', 'text-muted', styles$b.title])
+      className: classNames__default["default"](['fw-normal', 'text-muted', styles$a.title])
     }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, label)), repeatable ? /*#__PURE__*/React__default["default"].createElement("ul", {
       className: "d-flex list-unstyled m-n1 flex-grow-1"
     }, repeatableItems.map(function (item, index) {
@@ -1364,9 +1368,10 @@ function ScreenStates(_ref) {
         className: "p-1"
       }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
         index: index,
+        withIndexIndicator: true,
         screen: screen,
         screenState: "".concat(id, ".").concat(index),
-        className: styles$b.button,
+        className: styles$a.button,
         active: currentState !== null && id === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
         href: url('screen.field', {
           screen: screen.id,
@@ -1376,7 +1381,7 @@ function ScreenStates(_ref) {
     }), !withoutCreate ? /*#__PURE__*/React__default["default"].createElement("li", {
       className: "p-1"
     }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-      className: classNames__default["default"]([styles$b.button, styles$b.addButton, 'h-100', 'p-0', 'justify-content-center']),
+      className: classNames__default["default"]([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
       theme: "secondary",
       outline: true,
       size: "lg",
@@ -1387,7 +1392,7 @@ function ScreenStates(_ref) {
     })) : null) : /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
       screen: screen,
       screenState: id,
-      className: styles$b.button,
+      className: styles$a.button,
       active: id === currentState,
       href: url('screen.field', {
         screen: screen.id,
@@ -1405,7 +1410,7 @@ function ScreenStates(_ref) {
 ScreenStates.propTypes = propTypes$c;
 ScreenStates.defaultProps = defaultProps$c;
 
-var styles$8 = {"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","screen-medium":"micromag-editor-preview-screen-medium"};
+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","screen-medium":"micromag-editor-preview-screen-medium"};
 
 var propTypes$b = {
   value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
@@ -1529,34 +1534,34 @@ var EditorPreview = function EditorPreview(_ref) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, screens.map(function (screenName) {
-      return styles$8["screen-".concat(screenName)];
-    }), (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className), _defineProperty__default["default"](_ref8, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref8)])
+    className: classNames__default["default"]([styles$9.container, screens.map(function (screenName) {
+      return styles$9["screen-".concat(screenName)];
+    }), (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className), _defineProperty__default["default"](_ref8, styles$9.withoutDevicesSizes, withoutDevicesSizes), _ref8)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.inner
+    className: styles$9.inner
   }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.top, 'px-1'])
+    className: classNames__default["default"]([styles$9.top, 'px-1'])
   }, /*#__PURE__*/React__default["default"].createElement(ScreenStates, {
     screen: currentScreen,
     screenState: currentScreenStateId,
     value: value,
     onChange: onChange
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.bottom
+    className: styles$9.bottom
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.inner,
+    className: styles$9.inner,
     ref: bottomRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.preview,
+    className: styles$9.preview,
     style: previewStyle
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.viewerContainer
+    className: styles$9.viewerContainer
   }, /*#__PURE__*/React__default["default"].createElement(contexts.PlaybackProvider, null, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
     story: valueParsed,
     storyIsParsed: true,
     screen: screenId,
     screenState: currentScreenStateId,
-    className: styles$8.story,
+    className: styles$9.story,
     theme: viewerTheme,
     interactions: null,
     renderContext: "edit",
@@ -1566,7 +1571,7 @@ var EditorPreview = function EditorPreview(_ref) {
     withoutGestures: true,
     withoutMenu: true
   })))))), !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.deviceMenu
+    className: styles$9.deviceMenu
   }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
@@ -1574,15 +1579,15 @@ var EditorPreview = function EditorPreview(_ref) {
       });
     }),
     onClickItem: onClickDeviceItem,
-    className: styles$8.devices
+    className: styles$9.devices
   })) : null));
 };
 EditorPreview.propTypes = propTypes$b;
 EditorPreview.defaultProps = defaultProps$b;
 
-var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
+var styles$8 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
 
-var styles$6 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","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$7 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","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 iOS = /iPad|iPhone|iPod/.test(navigator.platform);
 function getDragDepth(offset, indentationWidth) {
@@ -1929,9 +1934,9 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
   };
 };
 
-var styles$5 = {"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 styles$6 = {"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 styles$4 = {"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","text":"micromag-editor-sortable-sortable-tree-item-actions-text","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 styles$5 = {"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","text":"micromag-editor-sortable-sortable-tree-item-actions-text","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"];
 var propTypes$a = {
@@ -2006,21 +2011,21 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     children = _ref.children,
     props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: classNames__default["default"]([styles$4.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$4.clone, clone), _defineProperty__default["default"](_ref2, styles$4.ghost, ghost), _defineProperty__default["default"](_ref2, styles$4.indicator, indicator), _defineProperty__default["default"](_ref2, styles$4.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$4.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$4.withChildren, onCollapse !== null), _ref2)]),
+    className: classNames__default["default"]([styles$5.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$5.clone, clone), _defineProperty__default["default"](_ref2, styles$5.ghost, ghost), _defineProperty__default["default"](_ref2, styles$5.indicator, indicator), _defineProperty__default["default"](_ref2, styles$5.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$5.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$5.withChildren, onCollapse !== null), _ref2)]),
     ref: wrapperRef,
     style: {
       marginLeft: "".concat(indentationWidth * depth, "px"),
       marginRight: "".concat(5 * depth, "px")
     }
   }, props), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.inner,
+    className: styles$5.inner,
     ref: ref,
     style: style
   }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
-    className: classNames__default["default"]([styles$4.button, styles$4.handle]),
+    className: classNames__default["default"]([styles$5.button, styles$5.handle]),
     type: "button"
   }, handleProps), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$4.icon,
+    className: styles$5.icon,
     icon: faGripLines.faGripLines
   })), !clone && onRemove ? /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
@@ -2028,17 +2033,17 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faTimes.faTimes
   })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$4.count
+    className: styles$5.count
   }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$4.collapsedCount
+    className: styles$5.collapsedCount
   }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     onClick: onCollapse,
-    className: classNames__default["default"](styles$4.button, styles$4.collapse, collapsed && styles$4.collapsed)
+    className: classNames__default["default"](styles$5.button, styles$5.collapse, collapsed && styles$5.collapsed)
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faAngleDown.faAngleDown
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.children
+    className: styles$5.children
   }, children)));
 });
 SortableTreeItemActions.propTypes = propTypes$a;
@@ -2143,7 +2148,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     }
   }, [onPointerUp]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$5.container])
+    className: classNames__default["default"]([styles$6.container])
   }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
@@ -2159,15 +2164,15 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     collapsed: collapsed,
     onCollapse: onCollapse
   }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5.parent
+    className: styles$6.parent
   }, /*#__PURE__*/React__default["default"].createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5.child
+    className: styles$6.child
   }, /*#__PURE__*/React__default["default"].createElement(Component, childValue)) : null));
 };
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
 
-var styles$3 = {"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$4 = {"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 initialItems = [{
   id: 'Home',
@@ -2546,7 +2551,7 @@ var SortableTree = function SortableTree(_ref2) {
       return parentId === id;
     }) : null;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]([styles$3.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$3.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$3.group, depth === 1), _defineProperty__default["default"](_ref22, styles$3.isLastChild, next === null), _ref22)]),
+      className: classNames__default["default"]([styles$4.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$4.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$4.group, depth === 1), _defineProperty__default["default"](_ref22, styles$4.isLastChild, next === null), _ref22)]),
       key: id
     }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
       key: id,
@@ -2570,7 +2575,7 @@ var SortableTree = function SortableTree(_ref2) {
     dropAnimation: dropAnimation,
     modifiers: indicator ? [adjustTranslate] : undefined
   }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.item,
+    className: styles$4.item,
     key: activeId
   }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
     id: activeId,
@@ -2653,7 +2658,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       item = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
     return /*#__PURE__*/React__default["default"].createElement("li", {
       key: item.id,
-      className: classNames__default["default"]([styles$6.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
+      className: classNames__default["default"]([styles$7.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
       "data-screen-id": item.id
     }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
       index: index,
@@ -2668,7 +2673,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       onClick: onClick,
       onClickItem: onClickItem
     }), settings !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$6.settings, 'p-2'])
+      className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$7.settings, 'p-2'])
     }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
   }) : [];
   var sortableItems = React.useMemo(function () {
@@ -2703,7 +2708,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
     });
   }, [items, isTree, items.length]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$6.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$6.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$6.isTree, isTree), _defineProperty__default["default"](_ref8, styles$6.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
+    className: classNames__default["default"]([styles$7.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$7.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$7.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$7.isTree, isTree), _defineProperty__default["default"](_ref8, styles$7.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
   }, isTree && !sortable ? /*#__PURE__*/React__default["default"].createElement(SortableTree, {
     items: sortableItems,
     component: ScreenWithPreview,
@@ -2716,15 +2721,15 @@ var ScreensMenu = function ScreensMenu(_ref) {
     delayOnTouchStart: true,
     delay: 2,
     tag: "ul",
-    className: styles$6.items
+    className: styles$7.items
   }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$6.items
+    className: styles$7.items
   }, itemsElements) : null);
 };
 ScreensMenu.propTypes = propTypes$7;
 ScreensMenu.defaultProps = defaultProps$7;
 
-var styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
+var styles$3 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
 
 var propTypes$6 = {
   screens: core.PropTypes.screenDefinitions,
@@ -2788,7 +2793,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
         className: classNames__default["default"](_defineProperty__default["default"]({
           'bg-secondary': !selected,
           'bg-primary': selected
-        }, styles$2.selected, selected))
+        }, styles$3.selected, selected))
       };
       return groupIndex !== -1 ? [].concat(_toConsumableArray__default["default"](allGroups.slice(0, groupIndex)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, allGroups[groupIndex]), {}, {
         items: [].concat(_toConsumableArray__default["default"](allGroups[groupIndex].items), [item])
@@ -2802,28 +2807,28 @@ var ScreenTypes = function ScreenTypes(_ref) {
     return orderBy__default["default"](groupItems, ['order', 'name'], ['asc', 'asc']);
   }, [finalDefinitions, selectedTypes]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2.rows
+    className: styles$3.rows
   }, groups.map(function (_ref6) {
     var id = _ref6.id,
       name = _ref6.name,
       items = _ref6.items;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "group-".concat(id),
-      className: styles$2.row
+      className: styles$3.row
     }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, name), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$2.layouts
+      className: styles$3.layouts
     }, /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
       items: items,
       withPlaceholder: true,
-      itemClassName: classNames__default["default"]([styles$2.screen, 'border', 'rounded', {
+      itemClassName: classNames__default["default"]([styles$3.screen, 'border', 'rounded', {
         'border-secondary': selectedTypes === null,
         'border-dark': selectedTypes !== null,
         'bg-secondary': selectedTypes === null,
         'text-secondary': selectedTypes !== null
       }]),
-      buttonClassName: styles$2.button,
+      buttonClassName: styles$3.button,
       onClickItem: onClickItem
     })));
   })));
@@ -2831,7 +2836,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
 ScreenTypes.propTypes = propTypes$6;
 ScreenTypes.defaultProps = defaultProps$6;
 
-var styles$1 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
+var styles$2 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
 
 var propTypes$5 = {
   selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -2858,11 +2863,11 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
         "value": "Add a screen"
       }]
     }),
-    className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className)]),
     onClickClose: onRequestClose
   }, /*#__PURE__*/React__default["default"].createElement(ScreenTypes, {
     selectedTypes: selectedTypes,
-    className: styles$1.menu,
+    className: styles$2.menu,
     onClickItem: onClickScreenType
   })));
 };
@@ -3029,12 +3034,12 @@ var EditorScreens = function EditorScreens(_ref) {
     return setCreateModalOpened(false);
   }, [setCreateModalOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['d-flex', 'flex-column', styles$7.container, className])
+    className: classNames__default["default"](['d-flex', 'flex-column', styles$8.container, className])
   }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames__default["default"](['sticky-top', styles$7.navbar])
+    className: classNames__default["default"](['sticky-top', styles$8.navbar])
   }, /*#__PURE__*/React__default["default"].createElement("strong", {
     className: "mb-0 me-auto"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -3100,6 +3105,8 @@ var EditorScreens = function EditorScreens(_ref) {
 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","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
+
 var propTypes$3 = {
   value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
   deviceScreens: core.PropTypes.deviceScreens,
@@ -3227,16 +3234,16 @@ var Editor = function Editor(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(contexts.ModalsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.PanelsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles$i["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$i.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
+    className: classNames__default["default"]([styles$1.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$1["screen-".concat(screenName)];
+    }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$1.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
     ref: refContainer
   }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: styles$i.top
+    className: styles$1.top
   }, mobileView !== 'screens' ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
     size: "sm",
     theme: "secondary",
@@ -3269,9 +3276,9 @@ var Editor = function Editor(_ref) {
       "value": "View screen"
     }]
   })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$i.inner
+    className: styles$1.inner
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.left, _defineProperty__default["default"]({}, styles$i.visible, !isMobile || mobileView === 'screens')]),
+    className: classNames__default["default"]([styles$1.left, _defineProperty__default["default"]({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
   }, /*#__PURE__*/React__default["default"].createElement(EditorScreens, {
     value: story,
@@ -3281,25 +3288,25 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles$i.inner,
+    className: styles$1.inner,
     isTree: true
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.center, _defineProperty__default["default"]({}, styles$i.visible, !isMobile || mobileView === 'preview')])
+    className: classNames__default["default"]([styles$1.center, _defineProperty__default["default"]({}, styles$1.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React__default["default"].createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
-    className: styles$i.preview,
+    className: styles$1.preview,
     onScreenChange: onPreviewScreenChange,
     onChange: onStoryChange
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.right, _defineProperty__default["default"]({}, styles$i.visible, !isMobile || mobileView === 'form')])
+    className: classNames__default["default"]([styles$1.right, _defineProperty__default["default"]({}, styles$1.visible, !isMobile || mobileView === 'form')])
   }, /*#__PURE__*/React__default["default"].createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
-    className: styles$i.inner
+    className: styles$1.inner
   }))), /*#__PURE__*/React__default["default"].createElement(components.Modals, null)))));
 };
 Editor.propTypes = propTypes$3;