@micromag/editor 0.3.347 → 0.3.349

package/es/index.js

@@ -74,8 +74,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 = useRef({
     url: url,
@@ -335,7 +333,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: PropTypes$1.component,
@@ -377,9 +375,9 @@ var ScreenForm = function ScreenForm(_ref) {
   //     }
   // }, [intl, onClickDelete, value]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.container, _defineProperty({}, className, className)])
+    className: classNames([styles$i.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$h.inner
+    className: styles$i.inner
   }, fields !== null ? /*#__PURE__*/React.createElement(Fields, {
     fields: fields,
     value: value,
@@ -391,7 +389,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: PropTypes$1.story,
@@ -615,13 +613,13 @@ var Breadcrumb = function Breadcrumb(_ref) {
     theme: "secondary",
     withoutBar: true,
     noWrap: true,
-    className: classNames([styles$g.container, 'text-truncate', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$h.container, 'text-truncate', _defineProperty({}, 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.string,
@@ -645,10 +643,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
         "value": "Delete screen"
       }]
     }),
-    className: classNames([styles$f.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$g.container, _defineProperty({}, className, className)]),
     onClickClose: onCancel
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.description
+    className: styles$g.description
   }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "q/tLk0",
     defaultMessage: [{
@@ -656,7 +654,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
       "value": "Are you sure you want to delete this screen?"
     }]
   }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$f.actions
+    className: styles$g.actions
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: onCancel,
     className: "btn-outline-secondary me-2"
@@ -681,7 +679,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.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
@@ -729,7 +727,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 = useState(false),
@@ -870,7 +868,7 @@ var EditForm = function EditForm(_ref) {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$e.navbar])
+    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
   }, /*#__PURE__*/React.createElement(Breadcrumb, {
     story: value,
     url: url,
@@ -891,7 +889,7 @@ var EditForm = function EditForm(_ref) {
     visible: screenSettingsOpened,
     onClickOutside: onDropdownClickOutside
   })) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$e.content])
+    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$f.content])
   }, screen !== null ? /*#__PURE__*/React.createElement(TransitionGroup, {
     className: "w-100 flex-grow-1",
     childFactory: function childFactory(child) {
@@ -903,14 +901,14 @@ var EditForm = function EditForm(_ref) {
     timeout: transitionTimeout,
     key: "field-".concat(fieldParams, "-").concat(formParams)
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$e.panel])
+    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$e.form,
+    className: styles$f.form,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
     fieldContext: fieldContext,
@@ -920,13 +918,13 @@ var EditForm = function EditForm(_ref) {
     timeout: transitionTimeout,
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$e.panel]),
+    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$e.form,
+    className: styles$f.form,
     onChange: onScreenFormChange,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
@@ -978,7 +976,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 = {
@@ -1048,7 +1046,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 = {
@@ -1067,9 +1065,9 @@ var DeviceButton = function DeviceButton(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$6);
   var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$c.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 DeviceButton.propTypes = propTypes$g;
@@ -1093,14 +1091,14 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React.createElement(Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
         itemProps = _objectWithoutProperties(item, _excluded$5);
       return /*#__PURE__*/React.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;
         }
@@ -1111,9 +1109,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.bool,
@@ -1155,17 +1151,17 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick = _ref.onClick,
     refButton = _ref.refButton;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$a.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames([styles$c.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$c.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
   }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
-    className: styles$a.screen
+    className: styles$c.screen
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inner
+    className: styles$c.inner
   }, icon !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$a.icon
+    className: styles$c.icon
   }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$a.label
+    className: styles$c.label
   }, label) : null)), /*#__PURE__*/React.createElement(Button, {
-    className: styles$a.button,
+    className: styles$c.button,
     withoutStyle: true,
     id: id,
     href: href,
@@ -1173,7 +1169,7 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick: onClick,
     refButton: refButton
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$a.border, 'rounded'])
+    className: classNames([styles$c.border, 'rounded'])
   })));
 };
 ScreenButton.propTypes = propTypes$e;
@@ -1184,7 +1180,7 @@ var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-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: PropTypes$1.screenComponent,
@@ -1194,6 +1190,7 @@ var propTypes$d = {
   title: PropTypes.string,
   active: PropTypes.bool,
   withPlaceholder: PropTypes.bool,
+  withIndexIndicator: PropTypes.bool,
   onClick: PropTypes.func,
   onClickItem: PropTypes.func,
   className: PropTypes.string
@@ -1205,11 +1202,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,
@@ -1219,13 +1218,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 = useIntl();
   var ScreenComponent = withPlaceholder ? ScreenPlaceholder : ScreenPreview;
   return /*#__PURE__*/React.createElement(ScreenButton$1, {
     href: href,
     active: active,
-    className: classNames([styles$9.button, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$b.button, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$b.withIndex, withIndexIndicator), _ref2)]),
     title: isMessage(title) ? intl.formatMessage(title) : null,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1238,13 +1238,17 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
   }, /*#__PURE__*/React.createElement(ScreenComponent, {
     screen: screen,
     screenState: screenState,
-    className: styles$9.screen,
+    className: styles$b.screen,
     withSize: true
-  }));
+  }), index !== null && withIndexIndicator ? /*#__PURE__*/React.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: PropTypes$1.screen.isRequired,
   screenState: PropTypes.string,
@@ -1283,15 +1287,15 @@ function ScreenStates(_ref) {
     return id === stateParam;
   }) !== -1 ? stateParam : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex align-items-end m-n1"
   }, /*#__PURE__*/React.createElement("div", {
     className: "p-1 align-self-stretch d-flex flex-column"
   }, /*#__PURE__*/React.createElement("h6", {
-    className: classNames(['fw-normal', 'invisible', styles$b.title])
+    className: classNames(['fw-normal', 'invisible', styles$a.title])
   }, "Settings"), /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles$b.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+    className: classNames([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",
@@ -1336,7 +1340,7 @@ function ScreenStates(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
     }, /*#__PURE__*/React.createElement("h6", {
-      className: classNames(['fw-normal', 'text-muted', styles$b.title])
+      className: classNames(['fw-normal', 'text-muted', styles$a.title])
     }, /*#__PURE__*/React.createElement(FormattedMessage, label)), repeatable ? /*#__PURE__*/React.createElement("ul", {
       className: "d-flex list-unstyled m-n1 flex-grow-1"
     }, repeatableItems.map(function (item, index) {
@@ -1344,9 +1348,10 @@ function ScreenStates(_ref) {
         className: "p-1"
       }, /*#__PURE__*/React.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,
@@ -1356,7 +1361,7 @@ function ScreenStates(_ref) {
     }), !withoutCreate ? /*#__PURE__*/React.createElement("li", {
       className: "p-1"
     }, /*#__PURE__*/React.createElement(Button, {
-      className: classNames([styles$b.button, styles$b.addButton, 'h-100', 'p-0', 'justify-content-center']),
+      className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
       theme: "secondary",
       outline: true,
       size: "lg",
@@ -1367,7 +1372,7 @@ function ScreenStates(_ref) {
     })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview, {
       screen: screen,
       screenState: id,
-      className: styles$b.button,
+      className: styles$a.button,
       active: id === currentState,
       href: url('screen.field', {
         screen: screen.id,
@@ -1385,7 +1390,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.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
@@ -1509,34 +1514,34 @@ var EditorPreview = function EditorPreview(_ref) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, screens.map(function (screenName) {
-      return styles$8["screen-".concat(screenName)];
-    }), (_ref8 = {}, _defineProperty(_ref8, className, className), _defineProperty(_ref8, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref8)])
+    className: classNames([styles$9.container, screens.map(function (screenName) {
+      return styles$9["screen-".concat(screenName)];
+    }), (_ref8 = {}, _defineProperty(_ref8, className, className), _defineProperty(_ref8, styles$9.withoutDevicesSizes, withoutDevicesSizes), _ref8)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner
+    className: styles$9.inner
   }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.top, 'px-1'])
+    className: classNames([styles$9.top, 'px-1'])
   }, /*#__PURE__*/React.createElement(ScreenStates, {
     screen: currentScreen,
     screenState: currentScreenStateId,
     value: value,
     onChange: onChange
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.bottom
+    className: styles$9.bottom
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner,
+    className: styles$9.inner,
     ref: bottomRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.preview,
+    className: styles$9.preview,
     style: previewStyle
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.viewerContainer
+    className: styles$9.viewerContainer
   }, /*#__PURE__*/React.createElement(PlaybackProvider, null, /*#__PURE__*/React.createElement(Viewer, {
     story: valueParsed,
     storyIsParsed: true,
     screen: screenId,
     screenState: currentScreenStateId,
-    className: styles$8.story,
+    className: styles$9.story,
     theme: viewerTheme,
     interactions: null,
     renderContext: "edit",
@@ -1546,7 +1551,7 @@ var EditorPreview = function EditorPreview(_ref) {
     withoutGestures: true,
     withoutMenu: true
   })))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.deviceMenu
+    className: styles$9.deviceMenu
   }, /*#__PURE__*/React.createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
@@ -1554,15 +1559,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) {
@@ -1909,9 +1914,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 = {
@@ -1986,21 +1991,21 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded$4);
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$4.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$4.clone, clone), _defineProperty(_ref2, styles$4.ghost, ghost), _defineProperty(_ref2, styles$4.indicator, indicator), _defineProperty(_ref2, styles$4.disableSelection, disableSelection), _defineProperty(_ref2, styles$4.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$4.withChildren, onCollapse !== null), _ref2)]),
+    className: classNames([styles$5.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$5.clone, clone), _defineProperty(_ref2, styles$5.ghost, ghost), _defineProperty(_ref2, styles$5.indicator, indicator), _defineProperty(_ref2, styles$5.disableSelection, disableSelection), _defineProperty(_ref2, styles$5.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$5.withChildren, onCollapse !== null), _ref2)]),
     ref: wrapperRef,
     style: {
       marginLeft: "".concat(indentationWidth * depth, "px"),
       marginRight: "".concat(5 * depth, "px")
     }
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: styles$4.inner,
+    className: styles$5.inner,
     ref: ref,
     style: style
   }, /*#__PURE__*/React.createElement("button", Object.assign({
-    className: classNames([styles$4.button, styles$4.handle]),
+    className: classNames([styles$5.button, styles$5.handle]),
     type: "button"
   }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$4.icon,
+    className: styles$5.icon,
     icon: faGripLines
   })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -2008,17 +2013,17 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTimes
   })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$4.count
+    className: styles$5.count
   }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$4.collapsedCount
+    className: styles$5.collapsedCount
   }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onCollapse,
-    className: classNames(styles$4.button, styles$4.collapse, collapsed && styles$4.collapsed)
+    className: classNames(styles$5.button, styles$5.collapse, collapsed && styles$5.collapsed)
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faAngleDown
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.children
+    className: styles$5.children
   }, children)));
 });
 SortableTreeItemActions.propTypes = propTypes$a;
@@ -2123,7 +2128,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     }
   }, [onPointerUp]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container])
+    className: classNames([styles$6.container])
   }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
@@ -2139,15 +2144,15 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     collapsed: collapsed,
     onCollapse: onCollapse
   }, props), Component !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.parent
+    className: styles$6.parent
   }, /*#__PURE__*/React.createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.child
+    className: styles$6.child
   }, /*#__PURE__*/React.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',
@@ -2526,7 +2531,7 @@ var SortableTree = function SortableTree(_ref2) {
       return parentId === id;
     }) : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles$3.item, (_ref22 = {}, _defineProperty(_ref22, styles$3.parent, onCollapse !== null && !collapsed), _defineProperty(_ref22, styles$3.group, depth === 1), _defineProperty(_ref22, styles$3.isLastChild, next === null), _ref22)]),
+      className: classNames([styles$4.item, (_ref22 = {}, _defineProperty(_ref22, styles$4.parent, onCollapse !== null && !collapsed), _defineProperty(_ref22, styles$4.group, depth === 1), _defineProperty(_ref22, styles$4.isLastChild, next === null), _ref22)]),
       key: id
     }, /*#__PURE__*/React.createElement(SortableTreeItem, {
       key: id,
@@ -2550,7 +2555,7 @@ var SortableTree = function SortableTree(_ref2) {
     dropAnimation: dropAnimation,
     modifiers: indicator ? [adjustTranslate] : undefined
   }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
-    className: styles$3.item,
+    className: styles$4.item,
     key: activeId
   }, /*#__PURE__*/React.createElement(SortableTreeItem, {
     id: activeId,
@@ -2633,7 +2638,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       item = _objectWithoutProperties(_ref2, _excluded$2);
     return /*#__PURE__*/React.createElement("li", {
       key: item.id,
-      className: classNames([styles$6.item, (_ref3 = {}, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
+      className: classNames([styles$7.item, (_ref3 = {}, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
       "data-screen-id": item.id
     }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
       index: index,
@@ -2648,7 +2653,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       onClick: onClick,
       onClickItem: onClickItem
     }), settings !== null ? /*#__PURE__*/React.createElement("div", {
-      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$6.settings, 'p-2'])
+      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$7.settings, 'p-2'])
     }, isFunction(settings) ? settings(index) : settings) : null);
   }) : [];
   var sortableItems = useMemo(function () {
@@ -2683,7 +2688,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
     });
   }, [items, isTree, items.length]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, (_ref8 = {}, _defineProperty(_ref8, styles$6.noWrap, noWrap), _defineProperty(_ref8, styles$6.isVertical, isVertical), _defineProperty(_ref8, styles$6.isTree, isTree), _defineProperty(_ref8, styles$6.withPlaceholder, withPlaceholder), _defineProperty(_ref8, className, className), _ref8)])
+    className: classNames([styles$7.container, (_ref8 = {}, _defineProperty(_ref8, styles$7.noWrap, noWrap), _defineProperty(_ref8, styles$7.isVertical, isVertical), _defineProperty(_ref8, styles$7.isTree, isTree), _defineProperty(_ref8, styles$7.withPlaceholder, withPlaceholder), _defineProperty(_ref8, className, className), _ref8)])
   }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
     items: sortableItems,
     component: ScreenWithPreview,
@@ -2696,15 +2701,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.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: PropTypes$1.screenDefinitions,
@@ -2768,7 +2773,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
         className: classNames(_defineProperty({
           'bg-secondary': !selected,
           'bg-primary': selected
-        }, styles$2.selected, selected))
+        }, styles$3.selected, selected))
       };
       return groupIndex !== -1 ? [].concat(_toConsumableArray(allGroups.slice(0, groupIndex)), [_objectSpread(_objectSpread({}, allGroups[groupIndex]), {}, {
         items: [].concat(_toConsumableArray(allGroups[groupIndex].items), [item])
@@ -2782,28 +2787,28 @@ var ScreenTypes = function ScreenTypes(_ref) {
     return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
   }, [finalDefinitions, selectedTypes]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, _defineProperty({}, className, className)])
+    className: classNames([styles$3.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.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.createElement("div", {
       key: "group-".concat(id),
-      className: styles$2.row
+      className: styles$3.row
     }, /*#__PURE__*/React.createElement(Label, null, name), /*#__PURE__*/React.createElement("div", {
-      className: styles$2.layouts
+      className: styles$3.layouts
     }, /*#__PURE__*/React.createElement(ScreensMenu, {
       items: items,
       withPlaceholder: true,
-      itemClassName: classNames([styles$2.screen, 'border', 'rounded', {
+      itemClassName: classNames([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
     })));
   })));
@@ -2811,7 +2816,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.arrayOf(PropTypes.string),
@@ -2838,11 +2843,11 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
         "value": "Add a screen"
       }]
     }),
-    className: classNames([styles$1.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$2.container, _defineProperty({}, className, className)]),
     onClickClose: onRequestClose
   }, /*#__PURE__*/React.createElement(ScreenTypes, {
     selectedTypes: selectedTypes,
-    className: styles$1.menu,
+    className: styles$2.menu,
     onClickItem: onClickScreenType
   })));
 };
@@ -3009,12 +3014,12 @@ var EditorScreens = function EditorScreens(_ref) {
     return setCreateModalOpened(false);
   }, [setCreateModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'flex-column', styles$7.container, className])
+    className: classNames(['d-flex', 'flex-column', styles$8.container, className])
   }, /*#__PURE__*/React.createElement(Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', styles$7.navbar])
+    className: classNames(['sticky-top', styles$8.navbar])
   }, /*#__PURE__*/React.createElement("strong", {
     className: "mb-0 me-auto"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -3080,6 +3085,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.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
   deviceScreens: PropTypes$1.deviceScreens,
@@ -3207,16 +3214,16 @@ var Editor = function Editor(_ref) {
   return /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(PanelsProvider, null, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles$i["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles$i.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
+    className: classNames([styles$1.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$1["screen-".concat(screenName)];
+    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles$1.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
     ref: refContainer
   }, /*#__PURE__*/React.createElement(Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: styles$i.top
+    className: styles$1.top
   }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(Button, {
     size: "sm",
     theme: "secondary",
@@ -3249,9 +3256,9 @@ var Editor = function Editor(_ref) {
       "value": "View screen"
     }]
   })) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$i.inner
+    className: styles$1.inner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.left, _defineProperty({}, styles$i.visible, !isMobile || mobileView === 'screens')]),
+    className: classNames([styles$1.left, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
   }, /*#__PURE__*/React.createElement(EditorScreens, {
     value: story,
@@ -3261,25 +3268,25 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles$i.inner,
+    className: styles$1.inner,
     isTree: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.center, _defineProperty({}, styles$i.visible, !isMobile || mobileView === 'preview')])
+    className: classNames([styles$1.center, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React.createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
-    className: styles$i.preview,
+    className: styles$1.preview,
     onScreenChange: onPreviewScreenChange,
     onChange: onStoryChange
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.right, _defineProperty({}, styles$i.visible, !isMobile || mobileView === 'form')])
+    className: classNames([styles$1.right, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'form')])
   }, /*#__PURE__*/React.createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
-    className: styles$i.inner
+    className: styles$1.inner
   }))), /*#__PURE__*/React.createElement(Modals, null)))));
 };
 Editor.propTypes = propTypes$3;