@micromag/editor 0.4.49 → 0.4.50

package/es/index.js

@@ -16,6 +16,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Fields, FieldsProvider } from '@micromag/fields';
 import { v1 } from 'uuid';
 import { getSizeWithinBounds } from '@folklore/size';
@@ -219,11 +220,11 @@ function SettingsButton(_ref) {
     _ref$dots = _ref.dots,
     dots = _ref$dots === void 0 ? false : _ref$dots,
     props = _objectWithoutProperties(_ref, _excluded$a);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
+  return /*#__PURE__*/jsx(Button, _objectSpread({
     className: className,
     theme: "secondary",
     size: "sm",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
       icon: dots ? faEllipsisV : faCogs
     })
   }, props));
@@ -265,18 +266,19 @@ function FieldWithContexts(_ref) {
     finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(nameParts.slice(1))) : nameParts.slice(1);
   }
   var formComponents = useFormsComponents();
-  return definition !== null ? /*#__PURE__*/React.createElement("div", {
+  return definition !== null ? /*#__PURE__*/jsx("div", {
     className: classNames({
       'p-2': form === null
-    })
-  }, finalNameParts.length > 0 ? /*#__PURE__*/React.createElement(FieldForm, Object.assign({
-    fields: finalScreenFields,
-    formComponents: formComponents,
-    name: finalNameParts.join('.'),
-    form: form
-  }, props)) : /*#__PURE__*/React.createElement(Fields, Object.assign({
-    fields: stateFields
-  }, props))) : null;
+    }),
+    children: finalNameParts.length > 0 ? /*#__PURE__*/jsx(FieldForm, _objectSpread({
+      fields: finalScreenFields,
+      formComponents: formComponents,
+      name: finalNameParts.join('.'),
+      form: form
+    }, props)) : /*#__PURE__*/jsx(Fields, _objectSpread({
+      fields: stateFields
+    }, props))
+  }) : null;
 }
 
 var styles$i = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
@@ -308,17 +310,19 @@ function ScreenForm(_ref) {
   //         onClickDelete(value);
   //     }
   // }, [intl, onClickDelete, value]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$i.inner
-  }, fields !== null ? /*#__PURE__*/React.createElement(Fields, {
-    fields: fields,
-    value: value,
-    onChange: onChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm
-  }) : null));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$i.container, className]),
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$i.inner,
+      children: fields !== null ? /*#__PURE__*/jsx(Fields, {
+        fields: fields,
+        value: value,
+        onChange: onChange,
+        gotoFieldForm: gotoFieldForm,
+        closeFieldForm: closeFieldForm
+      }) : null
+    })
+  });
 }
 
 var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
@@ -495,7 +499,7 @@ function Breadcrumb(_ref) {
     var _ref10 = metadata || {},
       _ref10$title = _ref10.title,
       title = _ref10$title === void 0 ? null : _ref10$title;
-    var typeTitle = screenTitle !== null ? /*#__PURE__*/React.createElement(FormattedMessage, screenTitle) : null;
+    var typeTitle = screenTitle !== null ? /*#__PURE__*/jsx(FormattedMessage, _objectSpread({}, screenTitle)) : null;
     var parametersMessage = intl.formatMessage({
       id: "AHvHaY",
       defaultMessage: [{
@@ -529,16 +533,18 @@ function Breadcrumb(_ref) {
     setLocation(items[itemsLength - 2].url);
   }, [items, setLocation, itemsLength]);
   var withBack = itemsLength > 1;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, withBack ? /*#__PURE__*/React.createElement(BackButton, {
-    onClick: onClickBack,
-    className: "me-2 py-0"
-  }) : null, /*#__PURE__*/React.createElement(Breadcrumb$1, {
-    items: items,
-    theme: "secondary",
-    withoutBar: true,
-    noWrap: true,
-    className: classNames([styles$h.container, 'text-truncate', className])
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [withBack ? /*#__PURE__*/jsx(BackButton, {
+      onClick: onClickBack,
+      className: "me-2 py-0"
+    }) : null, /*#__PURE__*/jsx(Breadcrumb$1, {
+      items: items,
+      theme: "secondary",
+      withoutBar: true,
+      noWrap: true,
+      className: classNames([styles$h.container, 'text-truncate', className])
+    })]
+  });
 }
 
 var styles$g = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
@@ -551,46 +557,56 @@ function DeleteScreenModal(_ref) {
     onConfirm = _ref$onConfirm === void 0 ? null : _ref$onConfirm,
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? null : _ref$onCancel;
-  return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
-    title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "p6q/+/",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Delete screen"
-      }]
-    }),
-    className: classNames([styles$g.container, className]),
-    onClose: onCancel
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.description
-  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "q/tLk0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Are you sure you want to delete this screen?"
-    }]
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$g.actions
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: onCancel,
-    className: "btn-outline-secondary me-2"
-  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "0GT0SI",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  }))), /*#__PURE__*/React.createElement(Button, {
-    onClick: onConfirm,
-    theme: "danger",
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "gRxcTc",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Delete screen"
-      }]
+  return /*#__PURE__*/jsx(Modal, {
+    children: /*#__PURE__*/jsxs(ModalDialog, {
+      title: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "p6q/+/",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Delete screen"
+        }]
+      }),
+      className: classNames([styles$g.container, className]),
+      onClose: onCancel,
+      children: [/*#__PURE__*/jsx("div", {
+        className: styles$g.description,
+        children: /*#__PURE__*/jsx(Label, {
+          children: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "q/tLk0",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Are you sure you want to delete this screen?"
+            }]
+          })
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: styles$g.actions,
+        children: [/*#__PURE__*/jsx(Button, {
+          onClick: onCancel,
+          className: "btn-outline-secondary me-2",
+          children: /*#__PURE__*/jsx(Label, {
+            children: /*#__PURE__*/jsx(FormattedMessage, {
+              id: "0GT0SI",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Cancel"
+              }]
+            })
+          })
+        }), /*#__PURE__*/jsx(Button, {
+          onClick: onConfirm,
+          theme: "danger",
+          label: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "gRxcTc",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Delete screen"
+            }]
+          })
+        })]
+      })]
     })
-  }))));
+  });
 }
 
 var styles$f = {"content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","panel":"micromag-editor-form-panel"};
@@ -815,7 +831,7 @@ function EditForm(_ref) {
   var dropdownItems = [!isTheme ? {
     id: 'duplicate',
     type: 'button',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "IBjY5r",
       defaultMessage: [{
         "type": 0,
@@ -826,7 +842,7 @@ function EditForm(_ref) {
   } : null, {
     id: 'delete',
     type: 'button',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "hpiKce",
       defaultMessage: [{
         "type": 0,
@@ -837,83 +853,91 @@ function EditForm(_ref) {
   }].filter(function (it) {
     return it !== null;
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'flex-column', className])
-  }, screenId !== null ? /*#__PURE__*/React.createElement(Navbar, {
-    compact: true,
-    noWrap: true,
-    withoutCollapse: true,
-    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
-  }, /*#__PURE__*/React.createElement(Breadcrumb, {
-    story: value,
-    url: url,
-    screenId: screenId,
-    field: fieldParams,
-    form: formParams,
-    className: "me-auto"
-  }), fieldParams === null ? /*#__PURE__*/React.createElement("div", {
-    className: "dropdown"
-  }, /*#__PURE__*/React.createElement(SettingsButton, {
-    onClick: onSettingsClick,
-    dots: true,
-    className: "py-0",
-    theme: "default"
-  }), /*#__PURE__*/React.createElement(DropdownMenu, {
-    align: "end",
-    items: dropdownItems,
-    visible: screenSettingsOpened,
-    onClickOutside: onDropdownClickOutside
-  })) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$f.content])
-  }, screen !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "w-100 flex-grow-1",
-    style: {
-      position: 'relative'
-    }
-  }, panelTransitions(function (springStyle, item) {
-    return item !== null ? /*#__PURE__*/React.createElement(animated.div, {
-      className: classNames(['w-100', styles$f.panel]),
-      style: _objectSpread(_objectSpread({}, springStyle), item.key !== (transitionItem === null || transitionItem === void 0 ? void 0 : transitionItem.key) ? {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        zIndex: 0
-      } : {
-        position: 'relative',
-        zIndex: 1
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(['d-flex', 'flex-column', className]),
+    children: [screenId !== null ? /*#__PURE__*/jsxs(Navbar, {
+      compact: true,
+      noWrap: true,
+      withoutCollapse: true,
+      className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar]),
+      children: [/*#__PURE__*/jsx(Breadcrumb, {
+        story: value,
+        url: url,
+        screenId: screenId,
+        field: fieldParams,
+        form: formParams,
+        className: "me-auto"
+      }), fieldParams === null ? /*#__PURE__*/jsxs("div", {
+        className: "dropdown",
+        children: [/*#__PURE__*/jsx(SettingsButton, {
+          onClick: onSettingsClick,
+          dots: true,
+          className: "py-0",
+          theme: "default"
+        }), /*#__PURE__*/jsx(DropdownMenu, {
+          align: "end",
+          items: dropdownItems,
+          visible: screenSettingsOpened,
+          onClickOutside: onDropdownClickOutside
+        })]
+      }) : null]
+    }) : null, /*#__PURE__*/jsx("div", {
+      className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$f.content]),
+      children: screen !== null ? /*#__PURE__*/jsx("div", {
+        className: "w-100 flex-grow-1",
+        style: {
+          position: 'relative'
+        },
+        children: panelTransitions(function (springStyle, item) {
+          return item !== null ? /*#__PURE__*/jsx(animated.div, {
+            className: classNames(['w-100', styles$f.panel]),
+            style: _objectSpread(_objectSpread({}, springStyle), item.key !== (transitionItem === null || transitionItem === void 0 ? void 0 : transitionItem.key) ? {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              zIndex: 0
+            } : {
+              position: 'relative',
+              zIndex: 1
+            }),
+            children: /*#__PURE__*/jsx(ScreenProvider, {
+              data: item.screen,
+              children: item.isField ? /*#__PURE__*/jsx(FieldWithContexts, {
+                name: item.fieldParams.replace(/\//g, '.'),
+                value: item.screen,
+                form: item.formParams,
+                className: styles$f.form,
+                gotoFieldForm: gotoFieldForm,
+                closeFieldForm: closeFieldForm,
+                fieldContext: fieldContext,
+                onChange: onScreenFormChange
+              }) : /*#__PURE__*/jsx(ScreenForm, {
+                value: item.screen,
+                className: styles$f.form,
+                onChange: onScreenFormChange,
+                gotoFieldForm: gotoFieldForm,
+                closeFieldForm: closeFieldForm
+              })
+            })
+          }) : null;
+        })
+      }) : /*#__PURE__*/jsx(Empty, {
+        className: "w-100 m-2",
+        children: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "QfpTKK",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Select a screen..."
+          }],
+          decription: "Indication to select a screen to view the form"
+        })
       })
-    }, /*#__PURE__*/React.createElement(ScreenProvider, {
-      data: item.screen
-    }, item.isField ? /*#__PURE__*/React.createElement(FieldWithContexts, {
-      name: item.fieldParams.replace(/\//g, '.'),
-      value: item.screen,
-      form: item.formParams,
-      className: styles$f.form,
-      gotoFieldForm: gotoFieldForm,
-      closeFieldForm: closeFieldForm,
-      fieldContext: fieldContext,
-      onChange: onScreenFormChange
-    }) : /*#__PURE__*/React.createElement(ScreenForm, {
-      value: item.screen,
-      className: styles$f.form,
-      onChange: onScreenFormChange,
-      gotoFieldForm: gotoFieldForm,
-      closeFieldForm: closeFieldForm
-    }))) : null;
-  })) : /*#__PURE__*/React.createElement(Empty, {
-    className: "w-100 m-2"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "QfpTKK",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Select a screen..."
-    }],
-    decription: "Indication to select a screen to view the form"
-  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal, {
-    onConfirm: onDeleteScreenConfirm,
-    onCancel: onDeleteScreenCancel
-  }) : null);
+    }), deleteScreenModalOpened ? /*#__PURE__*/jsx(DeleteScreenModal, {
+      onConfirm: onDeleteScreenConfirm,
+      onCancel: onDeleteScreenCancel
+    }) : null]
+  });
 }
 
 function useScreenStates(screen) {
@@ -953,7 +977,7 @@ function DesktopIcon(_ref) {
     color = _ref$color === void 0 ? 'currentColor' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     version: "1.1",
@@ -963,11 +987,12 @@ function DesktopIcon(_ref) {
     height: "100px",
     viewBox: "0 0 100 100",
     xmlSpace: "preserve",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M84 17H16c-3.3 0-6 2.7-6 6v42c0 3.3 2.7 6 6 6h22v4.2c-.1.4-.9 1.5-1.3 2-1.1 1.4-2.2 2.8-1.4 4.4.3.7 1.1 1.4 2.7 1.4h23c1 0 3.3 0 4.1-1.8.8-1.8-.6-3.2-1.8-4.5-.4-.5-1.1-1.2-1.3-1.6V71h22c3.3 0 6-2.7 6-6V23c0-3.3-2.7-6-6-6zM40.3 79c.9-1.1 1.7-2.4 1.7-3.8V71h16v4.2c0 1.4 1 2.7 2 3.8H40.3zM86 65c0 1.1-.9 2-2 2H16c-1.1 0-2-.9-2-2v-6h72v6zm0-10H14V23c0-1.1.9-2 2-2h68c1.1 0 2 .9 2 2v32z"
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "M84 17H16c-3.3 0-6 2.7-6 6v42c0 3.3 2.7 6 6 6h22v4.2c-.1.4-.9 1.5-1.3 2-1.1 1.4-2.2 2.8-1.4 4.4.3.7 1.1 1.4 2.7 1.4h23c1 0 3.3 0 4.1-1.8.8-1.8-.6-3.2-1.8-4.5-.4-.5-1.1-1.2-1.3-1.6V71h22c3.3 0 6-2.7 6-6V23c0-3.3-2.7-6-6-6zM40.3 79c.9-1.1 1.7-2.4 1.7-3.8V71h16v4.2c0 1.4 1 2.7 2 3.8H40.3zM86 65c0 1.1-.9 2-2 2H16c-1.1 0-2-.9-2-2v-6h72v6zm0-10H14V23c0-1.1.9-2 2-2h68c1.1 0 2 .9 2 2v32z"
+    })
+  });
 }
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
@@ -976,7 +1001,7 @@ function MobileIcon(_ref) {
     color = _ref$color === void 0 ? 'currentColor' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     version: "1.1",
@@ -986,11 +1011,12 @@ function MobileIcon(_ref) {
     height: "100px",
     viewBox: "0 0 100 100",
     xmlSpace: "preserve",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M66 11H34c-3.3 0-6 2.7-6 6v66c0 3.3 2.7 6 6 6h32c3.3 0 6-2.7 6-6V17c0-3.3-2.7-6-6-6zm2 72c0 1.1-.9 2-2 2H34c-1.1 0-2-.9-2-2v-4h36v4zm0-8H32V25h36v50zm0-54H32v-4c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v4z"
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx("path", {
+      fill: color,
+      d: "M66 11H34c-3.3 0-6 2.7-6 6v66c0 3.3 2.7 6 6 6h32c3.3 0 6-2.7 6-6V17c0-3.3-2.7-6-6-6zm2 72c0 1.1-.9 2-2 2H34c-1.1 0-2-.9-2-2v-4h36v4zm0-8H32V25h36v50zm0-54H32v-4c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v4z"
+    })
+  });
 }
 
 var DeviceIcons = /*#__PURE__*/Object.freeze({
@@ -1010,10 +1036,12 @@ function DeviceButton(_ref) {
     iconComponents = _ref$iconComponents === void 0 ? DeviceIcons : _ref$iconComponents,
     props = _objectWithoutProperties(_ref, _excluded$7);
   var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
+  return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
     className: classNames([styles$e.container, className])
-  }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$e.icon
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(DeviceIcon, {
+      className: styles$e.icon
+    })
   }));
 }
 
@@ -1028,16 +1056,16 @@ function DevicesMenu(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$onClickItem = _ref.onClickItem,
     onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem;
-  return /*#__PURE__*/React.createElement(Tabs, {
+  return /*#__PURE__*/jsx(Tabs, {
     items: items,
     theme: "outline-secondary",
     className: classNames([styles$d.container, className]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
         itemProps = _objectWithoutProperties(item, _excluded$6);
-      return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
+      return /*#__PURE__*/jsx(DeviceButton, _objectSpread(_objectSpread(_objectSpread({
         device: id
-      }, props, itemProps, {
+      }, props), itemProps), {}, {
         className: styles$d.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
@@ -1070,30 +1098,36 @@ function ScreenButton(_ref) {
     onClick = _ref$onClick === void 0 ? null : _ref$onClick,
     _ref$refButton = _ref.refButton,
     refButton = _ref$refButton === void 0 ? null : _ref$refButton;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, 'rounded', className, _defineProperty({}, styles$c.active, active)])
-  }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
-    className: styles$c.screen
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.inner
-  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$c.icon
-  }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$c.label
-  }, label) : null)), /*#__PURE__*/React.createElement(Button, {
-    className: styles$c.button,
-    withoutStyle: true,
-    id: id,
-    href: href,
-    title: title,
-    onClick: onClick,
-    refButton: refButton
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$c.border, 'rounded'])
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$c.container, 'rounded', className, _defineProperty({}, styles$c.active, active)]),
+    children: [children !== null ? children : /*#__PURE__*/jsx("div", {
+      className: styles$c.screen,
+      children: /*#__PURE__*/jsxs("div", {
+        className: styles$c.inner,
+        children: [icon !== null ? /*#__PURE__*/jsx("div", {
+          className: styles$c.icon,
+          children: icon
+        }) : null, label !== null ? /*#__PURE__*/jsx("div", {
+          className: styles$c.label,
+          children: label
+        }) : null]
+      })
+    }), /*#__PURE__*/jsx(Button, {
+      className: styles$c.button,
+      withoutStyle: true,
+      id: id,
+      href: href,
+      title: title,
+      onClick: onClick,
+      refButton: refButton,
+      children: /*#__PURE__*/jsx("span", {
+        className: classNames([styles$c.border, 'rounded'])
+      })
+    })]
+  });
 }
 var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(ScreenButton, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(ScreenButton, _objectSpread(_objectSpread({}, props), {}, {
     refButton: ref
   }));
 });
@@ -1136,37 +1170,42 @@ function ScreenWithPreview(_ref) {
     visible = _useIsVisible.visible;
   var ScreenComponent = withPlaceholder ? ScreenPlaceholder : ScreenPreview;
   var finalTitle = isMessage(title) ? intl.formatMessage(title) : title || null;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(ScreenButton$1, {
-    href: href,
-    active: active,
-    className: classNames([styles$b.button, className, _defineProperty({}, styles$b.withIndex, withIndexIndicator || withName)]),
-    title: finalTitle,
-    onClick: function onClick() {
-      if (_onClick !== null) {
-        _onClick(screen, index);
-      }
-      if (onClickItem !== null) {
-        onClickItem(screen, index);
-      }
-    }
-  }, /*#__PURE__*/React.createElement(ScreenComponent, {
-    screen: screen,
-    screenState: screenState,
-    className: styles$b.screen,
-    hidden: !visible,
-    withSize: true
-  }), index !== null && withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
-    className: styles$b.index
-  }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
-    className: styles$b.name
-  }, finalTitle || null) : null, withDeleteButtonOnRepeatables ? /*#__PURE__*/React.createElement("div", {
-    className: styles$b.deleteButton,
-    onClick: onDeleteButtonClick
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTimesCircle
-  })) : null));
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    children: /*#__PURE__*/jsxs(ScreenButton$1, {
+      href: href,
+      active: active,
+      className: classNames([styles$b.button, className, _defineProperty({}, styles$b.withIndex, withIndexIndicator || withName)]),
+      title: finalTitle,
+      onClick: function onClick() {
+        if (_onClick !== null) {
+          _onClick(screen, index);
+        }
+        if (onClickItem !== null) {
+          onClickItem(screen, index);
+        }
+      },
+      children: [/*#__PURE__*/jsx(ScreenComponent, {
+        screen: screen,
+        screenState: screenState,
+        className: styles$b.screen,
+        hidden: !visible,
+        withSize: true
+      }), index !== null && withIndexIndicator ? /*#__PURE__*/jsx("div", {
+        className: styles$b.index,
+        children: index + 1
+      }) : null, withName && !withIndexIndicator ? /*#__PURE__*/jsx("div", {
+        className: styles$b.name,
+        children: finalTitle || null
+      }) : null, withDeleteButtonOnRepeatables ? /*#__PURE__*/jsx("div", {
+        className: styles$b.deleteButton,
+        onClick: onDeleteButtonClick,
+        children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: faTimesCircle
+        })
+      }) : null]
+    })
+  });
 }
 
 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","settings":"micromag-editor-partials-screen-states-settings"};
@@ -1198,131 +1237,140 @@ function ScreenStates(_ref) {
     var id = _ref4.id;
     return id === stateParam;
   }) !== -1 ? stateParam : null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-end m-n1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['p-1 align-self-stretch d-flex flex-column', styles$a.settings])
-  }, /*#__PURE__*/React.createElement("h6", {
-    className: classNames(['fw-normal', 'invisible', styles$a.title])
-  }, "Settings"), /*#__PURE__*/React.createElement(Button, {
-    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",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faCogs
-    }),
-    href: url('screen', {
-      screen: screen.id
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$a.container, className]),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "d-flex align-items-end m-n1",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classNames(['p-1 align-self-stretch d-flex flex-column', styles$a.settings]),
+        children: [/*#__PURE__*/jsx("h6", {
+          className: classNames(['fw-normal', 'invisible', styles$a.title]),
+          children: "Settings"
+        }), /*#__PURE__*/jsx(Button, {
+          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",
+          icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: faCogs
+          }),
+          href: url('screen', {
+            screen: screen.id
+          })
+        })]
+      }), states.map(function (state) {
+        var id = state.id,
+          _state$label = state.label,
+          label = _state$label === void 0 ? null : _state$label,
+          _state$repeatable = state.repeatable,
+          repeatable = _state$repeatable === void 0 ? false : _state$repeatable,
+          _state$withoutCreate = state.withoutCreate,
+          withoutCreate = _state$withoutCreate === void 0 ? false : _state$withoutCreate,
+          _state$fieldName = state.fieldName,
+          fieldName = _state$fieldName === void 0 ? null : _state$fieldName;
+        var repeatableItems = repeatable ? screen[fieldName || id] || [] : null;
+        var onClickAdd = function onClickAdd() {
+          var _ref5 = value || {},
+            _ref5$components = _ref5.components,
+            currentComponentsValue = _ref5$components === void 0 ? [] : _ref5$components;
+          var currentScreenIndex = currentComponentsValue.findIndex(function (_ref6) {
+            var screenId = _ref6.id;
+            return screen.id === screenId;
+          });
+          var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
+          var currentFieldValue = currentScreenValue[fieldName || id] || [];
+          var newValue = _objectSpread(_objectSpread({}, value), {}, {
+            components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, [].concat(_toConsumableArray(currentFieldValue), [{}])))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
+          });
+          if (onChange !== null) {
+            onChange(newValue);
+          }
+          push('screen.field', {
+            screen: screen.id,
+            field: [id, currentFieldValue.length]
+          });
+        };
+        var onClickDelete = function onClickDelete(indexToDelete) {
+          var _ref7 = value || {},
+            _ref7$components = _ref7.components,
+            currentComponentsValue = _ref7$components === void 0 ? [] : _ref7$components;
+          var currentScreenIndex = currentComponentsValue.findIndex(function (_ref8) {
+            var screenId = _ref8.id;
+            return screen.id === screenId;
+          });
+          var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
+          currentScreenValue[fieldName || id] || [];
+          var newValue = _objectSpread(_objectSpread({}, value), {}, {
+            components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, (currentScreenValue[fieldName || id] || []).filter(function (_, index) {
+              return index !== indexToDelete;
+            })))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
+          });
+          if (onChange !== null) {
+            onChange(newValue);
+          }
+          push('screen', {
+            screen: screen.id
+          });
+        };
+        return /*#__PURE__*/jsxs("div", {
+          className: "p-1 align-self-stretch d-flex flex-column",
+          children: [/*#__PURE__*/jsx("h6", {
+            className: classNames(['fw-normal', 'text-body-secondary', styles$a.title]),
+            children: /*#__PURE__*/jsx(FormattedMessage, _objectSpread({}, label))
+          }), repeatable ? /*#__PURE__*/jsxs("ul", {
+            className: "d-flex list-unstyled m-n1 flex-grow-1",
+            children: [repeatableItems.map(function (item, index) {
+              return /*#__PURE__*/jsx("li", {
+                className: "p-1",
+                children: /*#__PURE__*/jsx(ScreenWithPreview, {
+                  index: index,
+                  withIndexIndicator: true,
+                  withDeleteButtonOnRepeatables: true,
+                  screen: screen,
+                  screenState: "".concat(id, ".").concat(index),
+                  className: styles$a.button,
+                  active: currentState !== null && id === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
+                  href: url('screen.field', {
+                    screen: screen.id,
+                    field: [id, index]
+                  }),
+                  onDeleteButtonClick: function onDeleteButtonClick() {
+                    return onClickDelete(index);
+                  }
+                })
+              });
+            }), !withoutCreate ? /*#__PURE__*/jsx("li", {
+              className: "p-1",
+              children: /*#__PURE__*/jsx(Button, {
+                className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
+                theme: "secondary",
+                outline: true,
+                size: "lg",
+                icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                  icon: faPlus
+                }),
+                onClick: onClickAdd
+              })
+            }) : null]
+          }) : /*#__PURE__*/jsx(ScreenWithPreview, {
+            screen: screen,
+            screenState: id,
+            className: styles$a.button,
+            active: id === currentState,
+            href: url('screen.field', {
+              screen: screen.id,
+              field: id
+            })
+            // onClick={() => {
+            //     if (onStateChange !== null) {
+            //         onStateChange(id);
+            //     }
+            // }}
+          })]
+        });
+      })]
     })
-  })), states.map(function (state) {
-    var id = state.id,
-      _state$label = state.label,
-      label = _state$label === void 0 ? null : _state$label,
-      _state$repeatable = state.repeatable,
-      repeatable = _state$repeatable === void 0 ? false : _state$repeatable,
-      _state$withoutCreate = state.withoutCreate,
-      withoutCreate = _state$withoutCreate === void 0 ? false : _state$withoutCreate,
-      _state$fieldName = state.fieldName,
-      fieldName = _state$fieldName === void 0 ? null : _state$fieldName;
-    var repeatableItems = repeatable ? screen[fieldName || id] || [] : null;
-    var onClickAdd = function onClickAdd() {
-      var _ref5 = value || {},
-        _ref5$components = _ref5.components,
-        currentComponentsValue = _ref5$components === void 0 ? [] : _ref5$components;
-      var currentScreenIndex = currentComponentsValue.findIndex(function (_ref6) {
-        var screenId = _ref6.id;
-        return screen.id === screenId;
-      });
-      var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
-      var currentFieldValue = currentScreenValue[fieldName || id] || [];
-      var newValue = _objectSpread(_objectSpread({}, value), {}, {
-        components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, [].concat(_toConsumableArray(currentFieldValue), [{}])))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
-      });
-      if (onChange !== null) {
-        onChange(newValue);
-      }
-      push('screen.field', {
-        screen: screen.id,
-        field: [id, currentFieldValue.length]
-      });
-    };
-    var onClickDelete = function onClickDelete(indexToDelete) {
-      var _ref7 = value || {},
-        _ref7$components = _ref7.components,
-        currentComponentsValue = _ref7$components === void 0 ? [] : _ref7$components;
-      var currentScreenIndex = currentComponentsValue.findIndex(function (_ref8) {
-        var screenId = _ref8.id;
-        return screen.id === screenId;
-      });
-      var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
-      currentScreenValue[fieldName || id] || [];
-      var newValue = _objectSpread(_objectSpread({}, value), {}, {
-        components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, (currentScreenValue[fieldName || id] || []).filter(function (_, index) {
-          return index !== indexToDelete;
-        })))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
-      });
-      if (onChange !== null) {
-        onChange(newValue);
-      }
-      push('screen', {
-        screen: screen.id
-      });
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-1 align-self-stretch d-flex flex-column"
-    }, /*#__PURE__*/React.createElement("h6", {
-      className: classNames(['fw-normal', 'text-body-secondary', 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) {
-      return /*#__PURE__*/React.createElement("li", {
-        className: "p-1"
-      }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
-        index: index,
-        withIndexIndicator: true,
-        withDeleteButtonOnRepeatables: true,
-        screen: screen,
-        screenState: "".concat(id, ".").concat(index),
-        className: styles$a.button,
-        active: currentState !== null && id === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
-        href: url('screen.field', {
-          screen: screen.id,
-          field: [id, index]
-        }),
-        onDeleteButtonClick: function onDeleteButtonClick() {
-          return onClickDelete(index);
-        }
-      }));
-    }), !withoutCreate ? /*#__PURE__*/React.createElement("li", {
-      className: "p-1"
-    }, /*#__PURE__*/React.createElement(Button, {
-      className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
-      theme: "secondary",
-      outline: true,
-      size: "lg",
-      icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: faPlus
-      }),
-      onClick: onClickAdd
-    })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview, {
-      screen: screen,
-      screenState: id,
-      className: styles$a.button,
-      active: id === currentState,
-      href: url('screen.field', {
-        screen: screen.id,
-        field: id
-      })
-      // onClick={() => {
-      //     if (onStateChange !== null) {
-      //         onStateChange(id);
-      //     }
-      // }}
-    }));
-  })));
+  });
 }
 
 var styles$9 = {"container":"micromag-editor-preview-container","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","deviceMenu":"micromag-editor-preview-deviceMenu","devices":"micromag-editor-preview-devices","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story"};
@@ -1434,55 +1482,65 @@ function EditorPreview(_ref) {
   var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames([styles$9.container, screens.map(function (screenName) {
       return styles$9["screen-".concat(screenName)];
-    }), className, _defineProperty({}, styles$9.withoutDevicesSizes, withoutDevicesSizes)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.inner
-  }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React.createElement("div", {
-    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$9.bottom
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.inner,
-    ref: bottomRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.preview,
-    style: previewStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.viewerContainer
-  }, /*#__PURE__*/React.createElement(PlaybackProvider, null, /*#__PURE__*/React.createElement(Viewer, {
-    story: valueParsed,
-    storyIsParsed: true,
-    screen: screenId,
-    screenState: currentScreenStateId,
-    className: styles$9.story,
-    theme: viewerTheme,
-    interactions: null,
-    renderContext: "edit",
-    onScreenChange: onScreenChange,
-    withNavigationHint: false,
-    withoutNavigationArrow: true,
-    withoutTransitions: true,
-    withoutGestures: true,
-    withoutMenu: true
-  })))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
-    className: styles$9.deviceMenu
-  }, /*#__PURE__*/React.createElement(DevicesMenu, {
-    items: devices.map(function (it) {
-      return _objectSpread(_objectSpread({}, it), {}, {
-        active: it.id === deviceId
-      });
-    }),
-    onClickItem: onClickDeviceItem,
-    className: styles$9.devices
-  })) : null));
+    }), className, _defineProperty({}, styles$9.withoutDevicesSizes, withoutDevicesSizes)]),
+    children: /*#__PURE__*/jsxs("div", {
+      className: styles$9.inner,
+      children: [currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/jsx("div", {
+        className: classNames([styles$9.top, 'px-1']),
+        children: /*#__PURE__*/jsx(ScreenStates, {
+          screen: currentScreen,
+          screenState: currentScreenStateId,
+          value: value,
+          onChange: onChange
+        })
+      }) : null, /*#__PURE__*/jsx("div", {
+        className: styles$9.bottom,
+        children: /*#__PURE__*/jsx("div", {
+          className: styles$9.inner,
+          ref: bottomRef,
+          children: /*#__PURE__*/jsx("div", {
+            className: styles$9.preview,
+            style: previewStyle,
+            children: /*#__PURE__*/jsx("div", {
+              className: styles$9.viewerContainer,
+              children: /*#__PURE__*/jsx(PlaybackProvider, {
+                children: /*#__PURE__*/jsx(Viewer, {
+                  story: valueParsed,
+                  storyIsParsed: true,
+                  screen: screenId,
+                  screenState: currentScreenStateId,
+                  className: styles$9.story,
+                  theme: viewerTheme,
+                  interactions: null,
+                  renderContext: "edit",
+                  onScreenChange: onScreenChange,
+                  withNavigationHint: false,
+                  withoutNavigationArrow: true,
+                  withoutTransitions: true,
+                  withoutGestures: true,
+                  withoutMenu: true
+                })
+              })
+            })
+          })
+        })
+      }), !withoutDevicesSizes ? /*#__PURE__*/jsx("div", {
+        className: styles$9.deviceMenu,
+        children: /*#__PURE__*/jsx(DevicesMenu, {
+          items: devices.map(function (it) {
+            return _objectSpread(_objectSpread({}, it), {}, {
+              active: it.id === deviceId
+            });
+          }),
+          onClickItem: onClickDeviceItem,
+          className: styles$9.devices
+        })
+      }) : null]
+    })
+  });
 }
 
 var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
@@ -1875,44 +1933,54 @@ var SortableTreeItemActions = function SortableTreeItemActions(_ref) {
     _ref$containerRef = _ref.containerRef,
     containerRef = _ref$containerRef === void 0 ? null : _ref$containerRef,
     props = _objectWithoutProperties(_ref, _excluded$5);
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     className: classNames([styles$8.wrapper, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$8.clone, clone), styles$8.ghost, ghost), styles$8.indicator, indicator), styles$8.disableSelection, disableSelection), styles$8.disableInteraction, disableInteraction), styles$8.withChildren, onCollapse !== null)]),
     ref: wrapperRef,
     style: {
       marginLeft: "".concat(indentationWidth * depth, "px"),
       marginRight: "".concat(5 * depth, "px")
     }
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner,
-    ref: containerRef,
-    style: style
-  }, /*#__PURE__*/React.createElement("button", Object.assign({
-    className: classNames([styles$8.button, styles$8.handle]),
-    type: "button"
-  }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$8.icon,
-    icon: faGripLines
-  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: onRemove
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTimes
-  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$8.count
-  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
-    className: styles$8.collapsedCount
-  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: onCollapse,
-    className: classNames(styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed)
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faAngleDown
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.children
-  }, children)));
+  }, props), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: styles$8.inner,
+      ref: containerRef,
+      style: style,
+      children: [/*#__PURE__*/jsx("button", _objectSpread(_objectSpread({
+        className: classNames([styles$8.button, styles$8.handle]),
+        type: "button"
+      }, handleProps), {}, {
+        children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          className: styles$8.icon,
+          icon: faGripLines
+        })
+      })), !clone && onRemove ? /*#__PURE__*/jsx("button", {
+        type: "button",
+        onClick: onRemove,
+        children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: faTimes
+        })
+      }) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/jsx("span", {
+        className: styles$8.count,
+        children: childCount
+      }) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/jsx("span", {
+        className: styles$8.collapsedCount,
+        children: childCount
+      }) : null, onCollapse && depth === 0 ? /*#__PURE__*/jsx("button", {
+        type: "button",
+        onClick: onCollapse,
+        className: classNames(styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed),
+        children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: faAngleDown
+        })
+      }) : null, /*#__PURE__*/jsx("div", {
+        className: styles$8.children,
+        children: children
+      })]
+    })
+  }));
 };
 var SortableTreeItemActions$1 = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(SortableTreeItemActions, _objectSpread(_objectSpread({}, props), {}, {
     containerRef: ref
   }));
 });
@@ -1989,27 +2057,32 @@ function SortableTreeItem(_ref2) {
       onPointerUp(e);
     }
   }, [onPointerUp]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container])
-  }, /*#__PURE__*/React.createElement(SortableTreeItemActions$1, Object.assign({
-    ref: setDraggableNodeRef,
-    wrapperRef: setDroppableNodeRef,
-    style: actionsStyle,
-    depth: depth,
-    ghost: isDragging,
-    disableSelection: iOS,
-    disableInteraction: isSorting,
-    handleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
-      onPointerDown: onClickAction,
-      onPointerUp: cancellingPointerUp
-    }),
-    collapsed: collapsed,
-    onCollapse: onCollapse
-  }, props), Component !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$7.parent
-  }, /*#__PURE__*/React.createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$7.child
-  }, /*#__PURE__*/React.createElement(Component, childValue)) : null));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$7.container]),
+    children: /*#__PURE__*/jsxs(SortableTreeItemActions$1, _objectSpread(_objectSpread({
+      ref: setDraggableNodeRef,
+      wrapperRef: setDroppableNodeRef,
+      style: actionsStyle,
+      depth: depth,
+      ghost: isDragging,
+      disableSelection: iOS,
+      disableInteraction: isSorting,
+      handleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+        onPointerDown: onClickAction,
+        onPointerUp: cancellingPointerUp
+      }),
+      collapsed: collapsed,
+      onCollapse: onCollapse
+    }, props), {}, {
+      children: [Component !== null ? /*#__PURE__*/jsx("div", {
+        className: styles$7.parent,
+        children: /*#__PURE__*/jsx(Component, _objectSpread({}, value))
+      }) : null, childValue !== null ? /*#__PURE__*/jsx("div", {
+        className: styles$7.child,
+        children: /*#__PURE__*/jsx(Component, _objectSpread({}, childValue))
+      }) : null]
+    }))
+  });
 }
 
 var styles$6 = {"item":"micromag-editor-sortable-sortable-tree-item","parent":"micromag-editor-sortable-sortable-tree-parent","group":"micromag-editor-sortable-sortable-tree-group","isLastChild":"micromag-editor-sortable-sortable-tree-isLastChild"};
@@ -2333,7 +2406,7 @@ function SortableTree(_ref2) {
       });
     });
   }, [setItems, setProperty]);
-  return /*#__PURE__*/React.createElement(DndContext, {
+  return /*#__PURE__*/jsx(DndContext, {
     accessibility: {
       announcements: announcements
     }
@@ -2346,75 +2419,77 @@ function SortableTree(_ref2) {
     onDragMove: handleDragMove,
     onDragOver: handleDragOver,
     onDragEnd: handleDragEnd,
-    onDragCancel: handleDragCancel
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: sortedIds,
-    strategy: verticalListSortingStrategy
-  }, flattenedItems.map(function (_ref17, idx) {
-    var _flattenedItems;
-    var id = _ref17.id,
-      _ref17$children = _ref17.children,
-      children = _ref17$children === void 0 ? [] : _ref17$children,
-      collapsed = _ref17.collapsed,
-      depth = _ref17.depth;
-    var screenValue = defaultItems.find(function (_ref18) {
-      var _ref18$id = _ref18.id,
-        defaultId = _ref18$id === void 0 ? null : _ref18$id;
-      return defaultId === id;
-    });
-    var next = ((_flattenedItems = flattenedItems[idx + 1]) === null || _flattenedItems === void 0 ? void 0 : _flattenedItems.parentId) || null;
-    var isCollapsed = collapsed && children.length > 0;
-    var onCollapse = collapsible && children.length ? function () {
-      return handleCollapse(id);
-    } : null;
-    var currentDepth = id === activeId && projected ? projected.depth : depth;
-    var childCount = getChildCount(items, id);
-    var childValue = childCount > 0 && collapsed ? defaultItems.slice().reverse().find(function (_ref19) {
-      var _ref19$parentId = _ref19.parentId,
-        parentId = _ref19$parentId === void 0 ? null : _ref19$parentId;
-      return parentId === id;
-    }) : null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles$6.item, _defineProperty(_defineProperty(_defineProperty({}, styles$6.parent, onCollapse !== null && !collapsed), styles$6.group, depth === 1), styles$6.isLastChild, next === null)]),
-      key: id
-    }, /*#__PURE__*/React.createElement(SortableTreeItem, {
-      key: id,
-      id: id,
-      depth: currentDepth,
-      indentationWidth: indentationWidth,
-      indicator: indicator,
-      collapsed: isCollapsed,
-      onCollapse: onCollapse,
-      onRemove: removable ? function () {
-        return handleRemove(id);
-      } : undefined,
-      childCount: childCount,
-      component: component,
-      value: (screenValue === null || screenValue === void 0 ? void 0 : screenValue.value) || null,
-      onClickItem: onClickItem,
-      index: idx,
-      childValue: (childValue === null || childValue === void 0 ? void 0 : childValue.value) || null
-    }));
-  }), /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(DragOverlay, {
-    dropAnimation: dropAnimation,
-    modifiers: indicator ? [adjustTranslate] : undefined
-  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
-    className: styles$6.item,
-    key: activeId
-  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
-    id: activeId,
-    depth: activeItem.depth,
-    clone: true,
-    childCount: getChildCount(items, activeId) + 1,
-    indentationWidth: indentationWidth,
-    component: component,
-    value: activeValue === null || activeValue === void 0 ? void 0 : activeValue.value,
-    onClickItem: onClickItem,
-    index: flattenedItems.findIndex(function (_ref21) {
-      var id = _ref21.id;
-      return activeId === id;
+    onDragCancel: handleDragCancel,
+    children: /*#__PURE__*/jsxs(SortableContext, {
+      items: sortedIds,
+      strategy: verticalListSortingStrategy,
+      children: [flattenedItems.map(function (_ref17, idx) {
+        var _flattenedItems;
+        var id = _ref17.id,
+          _ref17$children = _ref17.children,
+          children = _ref17$children === void 0 ? [] : _ref17$children,
+          collapsed = _ref17.collapsed,
+          depth = _ref17.depth;
+        var screenValue = defaultItems.find(function (_ref18) {
+          var _ref18$id = _ref18.id,
+            defaultId = _ref18$id === void 0 ? null : _ref18$id;
+          return defaultId === id;
+        });
+        var next = ((_flattenedItems = flattenedItems[idx + 1]) === null || _flattenedItems === void 0 ? void 0 : _flattenedItems.parentId) || null;
+        var isCollapsed = collapsed && children.length > 0;
+        var onCollapse = collapsible && children.length ? function () {
+          return handleCollapse(id);
+        } : null;
+        var currentDepth = id === activeId && projected ? projected.depth : depth;
+        var childCount = getChildCount(items, id);
+        var childValue = childCount > 0 && collapsed ? defaultItems.slice().reverse().find(function (_ref19) {
+          var _ref19$parentId = _ref19.parentId,
+            parentId = _ref19$parentId === void 0 ? null : _ref19$parentId;
+          return parentId === id;
+        }) : null;
+        return /*#__PURE__*/jsx("div", {
+          className: classNames([styles$6.item, _defineProperty(_defineProperty(_defineProperty({}, styles$6.parent, onCollapse !== null && !collapsed), styles$6.group, depth === 1), styles$6.isLastChild, next === null)]),
+          children: /*#__PURE__*/jsx(SortableTreeItem, {
+            id: id,
+            depth: currentDepth,
+            indentationWidth: indentationWidth,
+            indicator: indicator,
+            collapsed: isCollapsed,
+            onCollapse: onCollapse,
+            onRemove: removable ? function () {
+              return handleRemove(id);
+            } : undefined,
+            childCount: childCount,
+            component: component,
+            value: (screenValue === null || screenValue === void 0 ? void 0 : screenValue.value) || null,
+            onClickItem: onClickItem,
+            index: idx,
+            childValue: (childValue === null || childValue === void 0 ? void 0 : childValue.value) || null
+          }, id)
+        }, id);
+      }), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(DragOverlay, {
+        dropAnimation: dropAnimation,
+        modifiers: indicator ? [adjustTranslate] : undefined,
+        children: activeId && activeItem ? /*#__PURE__*/jsx("div", {
+          className: styles$6.item,
+          children: /*#__PURE__*/jsx(SortableTreeItem, {
+            id: activeId,
+            depth: activeItem.depth,
+            clone: true,
+            childCount: getChildCount(items, activeId) + 1,
+            indentationWidth: indentationWidth,
+            component: component,
+            value: activeValue === null || activeValue === void 0 ? void 0 : activeValue.value,
+            onClickItem: onClickItem,
+            index: flattenedItems.findIndex(function (_ref21) {
+              var id = _ref21.id;
+              return activeId === id;
+            })
+          })
+        }, activeId) : null
+      }), document.body)]
     })
-  })) : null), document.body)));
+  });
 }
 
 var styles$5 = {"items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","container":"micromag-editor-menus-screens-container","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
@@ -2464,27 +2539,28 @@ function ScreensMenu(_ref) {
       active = _ref2.active,
       href = _ref2.href,
       item = _objectWithoutProperties(_ref2, _excluded$3);
-    return /*#__PURE__*/React.createElement("li", {
-      key: item.id,
+    return /*#__PURE__*/jsxs("li", {
       className: classNames([styles$5.item, itemCustomClassName, itemClassName, {}]),
-      "data-screen-id": item.id
-    }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
-      index: index,
-      screen: withPlaceholder ? _objectSpread(_objectSpread({}, screen), {}, {
-        type: type
-      }) : screen,
-      href: href,
-      className: buttonClassName,
-      title: title,
-      active: active,
-      withPreview: withPreview,
-      withPlaceholder: withPlaceholder,
-      withName: withName,
-      onClick: onClick,
-      onClickItem: onClickItem
-    }), settings !== null ? /*#__PURE__*/React.createElement("div", {
-      className: classNames([settingsClassName, styles$5.settings, 'p-2'])
-    }, isFunction(settings) ? settings(index) : settings) : null);
+      "data-screen-id": item.id,
+      children: [/*#__PURE__*/jsx(ScreenWithPreview, {
+        index: index,
+        screen: withPlaceholder ? _objectSpread(_objectSpread({}, screen), {}, {
+          type: type
+        }) : screen,
+        href: href,
+        className: buttonClassName,
+        title: title,
+        active: active,
+        withPreview: withPreview,
+        withPlaceholder: withPlaceholder,
+        withName: withName,
+        onClick: onClick,
+        onClickItem: onClickItem
+      }), settings !== null ? /*#__PURE__*/jsx("div", {
+        className: classNames([settingsClassName, styles$5.settings, 'p-2']),
+        children: isFunction(settings) ? settings(index) : settings
+      }) : null]
+    }, item.id);
   }) : [];
   var sortableItems = useMemo(function () {
     return isTree ? items.map(function (_ref3) {
@@ -2517,24 +2593,27 @@ function ScreensMenu(_ref) {
       };
     });
   }, [items, isTree, items.length]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$5.noWrap, noWrap), styles$5.isVertical, isVertical), styles$5.isTree, isTree), styles$5.withPlaceholder, withPlaceholder)])
-  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
-    items: sortableItems,
-    component: ScreenWithPreview,
-    onClickItem: onClickItem,
-    onChange: onOrderChange
-  }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React.createElement(ReactSortable, {
-    list: sortableItems,
-    setList: onOrderChange,
-    animation: 200,
-    delayOnTouchStart: true,
-    delay: 2,
-    tag: "ul",
-    className: styles$5.items
-  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
-    className: styles$5.items
-  }, itemsElements) : null);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$5.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$5.noWrap, noWrap), styles$5.isVertical, isVertical), styles$5.isTree, isTree), styles$5.withPlaceholder, withPlaceholder)]),
+    children: [isTree && !sortable ? /*#__PURE__*/jsx(SortableTree, {
+      items: sortableItems,
+      component: ScreenWithPreview,
+      onClickItem: onClickItem,
+      onChange: onOrderChange
+    }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/jsx(ReactSortable, {
+      list: sortableItems,
+      setList: onOrderChange,
+      animation: 200,
+      delayOnTouchStart: true,
+      delay: 2,
+      tag: "ul",
+      className: styles$5.items,
+      children: itemsElements
+    }) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/jsx("ul", {
+      className: styles$5.items,
+      children: itemsElements
+    }) : null]
+  });
 }
 
 var styles$4 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
@@ -2614,33 +2693,38 @@ function ScreenTypes(_ref) {
     }, []);
     return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
   }, [finalDefinitions, selectedTypes]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.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$4.row
-    }, /*#__PURE__*/React.createElement(Label, null, name), /*#__PURE__*/React.createElement("div", {
-      className: styles$4.layouts
-    }, /*#__PURE__*/React.createElement(ScreensMenu, {
-      items: items,
-      withPlaceholder: true,
-      withName: true,
-      itemClassName: classNames([styles$4.screen, 'border', 'rounded', {
-        'border-secondary': selectedTypes === null,
-        'border-dark': selectedTypes !== null,
-        'bg-secondary': selectedTypes === null,
-        'text-secondary': selectedTypes !== null
-      }]),
-      buttonClassName: styles$4.button,
-      onClickItem: onClickItem
-    })));
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$4.container, className]),
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$4.rows,
+      children: groups.map(function (_ref6) {
+        var id = _ref6.id,
+          name = _ref6.name,
+          items = _ref6.items;
+        return /*#__PURE__*/jsxs("div", {
+          className: styles$4.row,
+          children: [/*#__PURE__*/jsx(Label, {
+            children: name
+          }), /*#__PURE__*/jsx("div", {
+            className: styles$4.layouts,
+            children: /*#__PURE__*/jsx(ScreensMenu, {
+              items: items,
+              withPlaceholder: true,
+              withName: true,
+              itemClassName: classNames([styles$4.screen, 'border', 'rounded', {
+                'border-secondary': selectedTypes === null,
+                'border-dark': selectedTypes !== null,
+                'bg-secondary': selectedTypes === null,
+                'text-secondary': selectedTypes !== null
+              }]),
+              buttonClassName: styles$4.button,
+              onClickItem: onClickItem
+            })
+          })]
+        }, "group-".concat(id));
+      })
+    })
+  });
 }
 
 var styles$3 = {"container":"micromag-editor-modals-screen-types-container"};
@@ -2655,21 +2739,24 @@ function ScreenTypesModal(_ref) {
     onRequestClose = _ref$onRequestClose === void 0 ? null : _ref$onRequestClose,
     _ref$onClickScreenTyp = _ref.onClickScreenType,
     onClickScreenType = _ref$onClickScreenTyp === void 0 ? null : _ref$onClickScreenTyp;
-  return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
-    title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "QBaiO0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Add a screen"
-      }]
-    }),
-    className: classNames([styles$3.container, className]),
-    onClose: onRequestClose
-  }, /*#__PURE__*/React.createElement(ScreenTypes, {
-    selectedTypes: selectedTypes,
-    className: styles$3.menu,
-    onClickItem: onClickScreenType
-  })));
+  return /*#__PURE__*/jsx(Modal, {
+    children: /*#__PURE__*/jsx(ModalDialog, {
+      title: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "QBaiO0",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Add a screen"
+        }]
+      }),
+      className: classNames([styles$3.container, className]),
+      onClose: onRequestClose,
+      children: /*#__PURE__*/jsx(ScreenTypes, {
+        selectedTypes: selectedTypes,
+        className: styles$3.menu,
+        onClickItem: onClickScreenType
+      })
+    })
+  });
 }
 
 var styles$2 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
@@ -2821,102 +2908,115 @@ function EditorScreens(_ref) {
   var onCreateModalRequestClose = useCallback(function () {
     return setCreateModalOpened(false);
   }, [setCreateModalOpened]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'flex-column', styles$2.container, className])
-  }, /*#__PURE__*/React.createElement(Navbar, {
-    compact: true,
-    noWrap: true,
-    withoutCollapse: true,
-    className: classNames(['sticky-top', styles$2.navbar])
-  }, /*#__PURE__*/React.createElement("strong", {
-    className: "mb-0 me-auto"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "jf+4Hq",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Screens"
-    }]
-  })), /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    size: "sm",
-    onClick: onClickAdd,
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faPlus
-    })
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-grow-1 d-flex w-100 p-2"
-  }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
-    path: "".concat(routes.screen, "/(.*)?")
-  }, function (_ref16) {
-    var _ref16$screen = _ref16.screen,
-      screenId = _ref16$screen === void 0 ? null : _ref16$screen;
-    return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
-      items: screens.map(function (it) {
-        return {
-          id: it.id,
-          screen: it,
-          href: url('screen', {
-            screen: it.id
-          }),
-          active: it.id === screenId
-        };
-      }),
-      isVertical: isVertical,
-      withPreview: true,
-      sortable: !isTree,
-      className: "w-100",
-      onClickItem: onClickScreen,
-      onOrderChange: onOrderChange,
-      isTree: isTree
-    }) : /*#__PURE__*/React.createElement(Empty, {
-      className: "flex-grow-1 p-2"
-    }, /*#__PURE__*/React.createElement(Button, {
-      theme: "primary",
-      onClick: onClickAdd
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "JoWKee",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Create your first screen"
-      }]
-    })));
-  }), /*#__PURE__*/React.createElement(Route, null, screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
-    items: screens.map(function (it) {
-      return {
-        id: it.id,
-        screen: it,
-        href: url('screen', {
-          screen: it.id
-        }),
-        active: false
-      };
-    }),
-    isVertical: isVertical,
-    withPreview: true,
-    sortable: !isTree,
-    className: "w-100",
-    onClickItem: onClickScreen,
-    onOrderChange: onOrderChange,
-    isTree: isTree
-  }) : /*#__PURE__*/React.createElement(Empty, {
-    className: "flex-grow-1 p-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    onClick: onClickAdd
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "JoWKee",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Create your first screen"
-    }]
-  })))))), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref17) {
-      var type = _ref17.type;
-      return type;
-    }) : [],
-    onClickScreenType: onClickScreenType,
-    onRequestClose: onCreateModalRequestClose
-  }) : null);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(['d-flex', 'flex-column', styles$2.container, className]),
+    children: [/*#__PURE__*/jsxs(Navbar, {
+      compact: true,
+      noWrap: true,
+      withoutCollapse: true,
+      className: classNames(['sticky-top', styles$2.navbar]),
+      children: [/*#__PURE__*/jsx("strong", {
+        className: "mb-0 me-auto",
+        children: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "jf+4Hq",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Screens"
+          }]
+        })
+      }), /*#__PURE__*/jsx(Button, {
+        theme: "primary",
+        size: "sm",
+        onClick: onClickAdd,
+        icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: faPlus
+        })
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-grow-1 d-flex w-100 p-2",
+      children: /*#__PURE__*/jsxs(Switch, {
+        children: [/*#__PURE__*/jsx(Route, {
+          path: "".concat(routes.screen, "/(.*)?"),
+          children: function children(_ref16) {
+            var _ref16$screen = _ref16.screen,
+              screenId = _ref16$screen === void 0 ? null : _ref16$screen;
+            return screens.length > 0 ? /*#__PURE__*/jsx(ScreensMenu, {
+              items: screens.map(function (it) {
+                return {
+                  id: it.id,
+                  screen: it,
+                  href: url('screen', {
+                    screen: it.id
+                  }),
+                  active: it.id === screenId
+                };
+              }),
+              isVertical: isVertical,
+              withPreview: true,
+              sortable: !isTree,
+              className: "w-100",
+              onClickItem: onClickScreen,
+              onOrderChange: onOrderChange,
+              isTree: isTree
+            }) : /*#__PURE__*/jsx(Empty, {
+              className: "flex-grow-1 p-2",
+              children: /*#__PURE__*/jsx(Button, {
+                theme: "primary",
+                onClick: onClickAdd,
+                children: /*#__PURE__*/jsx(FormattedMessage, {
+                  id: "JoWKee",
+                  defaultMessage: [{
+                    "type": 0,
+                    "value": "Create your first screen"
+                  }]
+                })
+              })
+            });
+          }
+        }), /*#__PURE__*/jsx(Route, {
+          children: screens.length > 0 ? /*#__PURE__*/jsx(ScreensMenu, {
+            items: screens.map(function (it) {
+              return {
+                id: it.id,
+                screen: it,
+                href: url('screen', {
+                  screen: it.id
+                }),
+                active: false
+              };
+            }),
+            isVertical: isVertical,
+            withPreview: true,
+            sortable: !isTree,
+            className: "w-100",
+            onClickItem: onClickScreen,
+            onOrderChange: onOrderChange,
+            isTree: isTree
+          }) : /*#__PURE__*/jsx(Empty, {
+            className: "flex-grow-1 p-2",
+            children: /*#__PURE__*/jsx(Button, {
+              theme: "primary",
+              onClick: onClickAdd,
+              children: /*#__PURE__*/jsx(FormattedMessage, {
+                id: "JoWKee",
+                defaultMessage: [{
+                  "type": 0,
+                  "value": "Create your first screen"
+                }]
+              })
+            })
+          })
+        })]
+      })
+    }), createModalOpened ? /*#__PURE__*/jsx(ScreenTypesModal, {
+      selectedTypes: isTheme ? screens.map(function (_ref17) {
+        var type = _ref17.type;
+        return type;
+      }) : [],
+      onClickScreenType: onClickScreenType,
+      onRequestClose: onCreateModalRequestClose
+    }) : null]
+  });
 }
 
 var styles$1 = {"container":"micromag-editor-container","inner":"micromag-editor-inner","left":"micromag-editor-left","center":"micromag-editor-center","right":"micromag-editor-right","visible":"micromag-editor-visible","preview":"micromag-editor-preview","fullscreen":"micromag-editor-fullscreen","top":"micromag-editor-top"};
@@ -3031,83 +3131,96 @@ function Editor(_ref) {
       screens.scrollTop = cnt.offsetTop + item.offsetTop + item.offsetHeight / 2 - screens.clientHeight / 2;
     }
   }, [screenId]);
-  return /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(PanelsProvider, null, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles$1["screen-".concat(screenName)];
-    }) : null, className, _defineProperty({}, styles$1.fullscreen, fullscreen)]),
-    ref: refContainer
-  }, /*#__PURE__*/React.createElement(Navbar, {
-    theme: "light",
-    compact: true,
-    noWrap: true,
-    withoutCollapse: true,
-    className: styles$1.top
-  }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    theme: "secondary",
-    onClick: onClickScreens,
-    className: "me-auto"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "wkysUu",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Screens"
-    }]
-  })) : /*#__PURE__*/React.createElement("span", null), mobileView !== 'form' ? /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    theme: "primary",
-    onClick: onClickEdit
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "HseFdk",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Edit"
-    }]
-  })) : null, mobileView === 'form' ? /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    theme: "primary",
-    onClick: onClickViewScreen
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "4POR3B",
-    defaultMessage: [{
-      "type": 0,
-      "value": "View screen"
-    }]
-  })) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$1.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.left, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
-    ref: refScreensContainer
-  }, /*#__PURE__*/React.createElement(EditorScreens, {
-    value: story,
-    isTheme: isTheme,
-    isCreateOpened: isCreateOpened,
-    isParsed: true,
-    onChange: onStoryChange,
-    onClickScreen: onClickScreen,
-    isVertical: !isMobile,
-    className: styles$1.inner,
-    isTree: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.center, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'preview')])
-  }, /*#__PURE__*/React.createElement(EditorPreview, {
-    value: story,
-    isTheme: isTheme,
-    viewerTheme: viewerTheme,
-    className: styles$1.preview,
-    onScreenChange: onPreviewScreenChange,
-    onChange: onStoryChange
-  })), /*#__PURE__*/React.createElement("div", {
-    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$1.inner
-  }))), /*#__PURE__*/React.createElement(Modals, null)))));
+  return /*#__PURE__*/jsx(ModalsProvider, {
+    children: /*#__PURE__*/jsx(PanelsProvider, {
+      children: /*#__PURE__*/jsx(ScreenSizeProvider, {
+        size: screenSize,
+        children: /*#__PURE__*/jsxs("div", {
+          className: classNames([styles$1.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+            return styles$1["screen-".concat(screenName)];
+          }) : null, className, _defineProperty({}, styles$1.fullscreen, fullscreen)]),
+          ref: refContainer,
+          children: [/*#__PURE__*/jsxs(Navbar, {
+            theme: "light",
+            compact: true,
+            noWrap: true,
+            withoutCollapse: true,
+            className: styles$1.top,
+            children: [mobileView !== 'screens' ? /*#__PURE__*/jsx(Button, {
+              size: "sm",
+              theme: "secondary",
+              onClick: onClickScreens,
+              className: "me-auto",
+              children: /*#__PURE__*/jsx(FormattedMessage, {
+                id: "wkysUu",
+                defaultMessage: [{
+                  "type": 0,
+                  "value": "Screens"
+                }]
+              })
+            }) : /*#__PURE__*/jsx("span", {}), mobileView !== 'form' ? /*#__PURE__*/jsx(Button, {
+              size: "sm",
+              theme: "primary",
+              onClick: onClickEdit,
+              children: /*#__PURE__*/jsx(FormattedMessage, {
+                id: "HseFdk",
+                defaultMessage: [{
+                  "type": 0,
+                  "value": "Edit"
+                }]
+              })
+            }) : null, mobileView === 'form' ? /*#__PURE__*/jsx(Button, {
+              size: "sm",
+              theme: "primary",
+              onClick: onClickViewScreen,
+              children: /*#__PURE__*/jsx(FormattedMessage, {
+                id: "4POR3B",
+                defaultMessage: [{
+                  "type": 0,
+                  "value": "View screen"
+                }]
+              })
+            }) : null]
+          }), /*#__PURE__*/jsxs("div", {
+            className: styles$1.inner,
+            children: [/*#__PURE__*/jsx("div", {
+              className: classNames([styles$1.left, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
+              ref: refScreensContainer,
+              children: /*#__PURE__*/jsx(EditorScreens, {
+                value: story,
+                isTheme: isTheme,
+                isCreateOpened: isCreateOpened,
+                isParsed: true,
+                onChange: onStoryChange,
+                onClickScreen: onClickScreen,
+                isVertical: !isMobile,
+                className: styles$1.inner,
+                isTree: true
+              })
+            }), /*#__PURE__*/jsx("div", {
+              className: classNames([styles$1.center, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'preview')]),
+              children: /*#__PURE__*/jsx(EditorPreview, {
+                value: story,
+                isTheme: isTheme,
+                viewerTheme: viewerTheme,
+                className: styles$1.preview,
+                onScreenChange: onPreviewScreenChange,
+                onChange: onStoryChange
+              })
+            }), /*#__PURE__*/jsx("div", {
+              className: classNames([styles$1.right, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'form')]),
+              children: /*#__PURE__*/jsx(EditForm, {
+                value: story,
+                isTheme: isTheme,
+                onChange: onStoryChange,
+                className: styles$1.inner
+              }, screenId)
+            })]
+          }), /*#__PURE__*/jsx(Modals, {})]
+        })
+      })
+    })
+  });
 }
 
 var styles = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
@@ -3145,20 +3258,22 @@ function SettingsForm(_ref) {
       onChange(newValue);
     }
   }, [value, onChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
-  }, /*#__PURE__*/React.createElement(SettingsComponent, {
-    name: name,
-    field: field,
-    fields: settings,
-    value: value,
-    onChange: onSettingsChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm,
-    fieldsProps: fieldsProps
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles.container, className]),
+    children: /*#__PURE__*/jsx("div", {
+      className: styles.inner,
+      children: /*#__PURE__*/jsx(SettingsComponent, {
+        name: name,
+        field: field,
+        fields: settings,
+        value: value,
+        onChange: onSettingsChange,
+        gotoFieldForm: gotoFieldForm,
+        closeFieldForm: closeFieldForm,
+        fieldsProps: fieldsProps
+      })
+    })
+  });
 }
 
 // eslint-disable-next-line import/prefer-default-export
@@ -3173,10 +3288,12 @@ function FormsProvider(_ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React.createElement(ComponentsProvider, Object.assign({
+  return /*#__PURE__*/jsx(ComponentsProvider, _objectSpread(_objectSpread({
     namespace: FORMS_NAMESPACE,
     components: FormsComponents
-  }, props), children);
+  }, props), {}, {
+    children: children
+  }));
 }
 
 var home = "/";
@@ -3223,31 +3340,51 @@ function EditorContainer(_ref) {
       base: !memoryRouter ? basePath : null
     };
   }, [basePath, memoryRouter]);
-  return /*#__PURE__*/React.createElement(Router, routerProps, /*#__PURE__*/React.createElement(UppyProvider, uppy, /*#__PURE__*/React.createElement(StoryProvider, {
-    story: value
-  }, /*#__PURE__*/React.createElement(ScreensProvider, {
-    filterNamespaces: true,
-    namespaces: screenNamespaces
-  }, /*#__PURE__*/React.createElement(GoogleKeysProvider, {
-    apiKey: googleApiKey
-  }, /*#__PURE__*/React.createElement(GoogleMapsClientProvider, {
-    locale: locale,
-    libraries: googleMapsLibraries
-  }, /*#__PURE__*/React.createElement(FontsProvider, null, /*#__PURE__*/React.createElement(FieldsProvider, null, /*#__PURE__*/React.createElement(FormsProvider, null, /*#__PURE__*/React.createElement(EditorProvider, null, /*#__PURE__*/React.createElement(VisitorProvider, {
-    visitor: "editor"
-  }, /*#__PURE__*/React.createElement(ComponentsContext.Consumer, null, function (manager) {
-    var formComponents = manager.getComponents(FORMS_NAMESPACE);
-    var formRegEx = formComponents !== null ? Object.keys(formComponents).map(function (name) {
-      return slug(name);
-    }).join('|') : null;
-    return /*#__PURE__*/React.createElement(RoutesProvider, {
-      routes: _objectSpread(_objectSpread({}, routes), {}, {
-        'screen.field.form': routes['screen.field.form'].replace(/:form$/, ":form(".concat(formRegEx, ")"))
+  return /*#__PURE__*/jsx(Router, _objectSpread(_objectSpread({}, routerProps), {}, {
+    children: /*#__PURE__*/jsx(UppyProvider, _objectSpread(_objectSpread({}, uppy), {}, {
+      children: /*#__PURE__*/jsx(StoryProvider, {
+        story: value,
+        children: /*#__PURE__*/jsx(ScreensProvider, {
+          filterNamespaces: true,
+          namespaces: screenNamespaces,
+          children: /*#__PURE__*/jsx(GoogleKeysProvider, {
+            apiKey: googleApiKey,
+            children: /*#__PURE__*/jsx(GoogleMapsClientProvider, {
+              locale: locale,
+              libraries: googleMapsLibraries,
+              children: /*#__PURE__*/jsx(FontsProvider, {
+                children: /*#__PURE__*/jsx(FieldsProvider, {
+                  children: /*#__PURE__*/jsx(FormsProvider, {
+                    children: /*#__PURE__*/jsx(EditorProvider, {
+                      children: /*#__PURE__*/jsx(VisitorProvider, {
+                        visitor: "editor",
+                        children: /*#__PURE__*/jsx(ComponentsContext.Consumer, {
+                          children: function children(manager) {
+                            var formComponents = manager.getComponents(FORMS_NAMESPACE);
+                            var formRegEx = formComponents !== null ? Object.keys(formComponents).map(function (name) {
+                              return slug(name);
+                            }).join('|') : null;
+                            return /*#__PURE__*/jsx(RoutesProvider, {
+                              routes: _objectSpread(_objectSpread({}, routes), {}, {
+                                'screen.field.form': routes['screen.field.form'].replace(/:form$/, ":form(".concat(formRegEx, ")"))
+                              }),
+                              children: /*#__PURE__*/jsx(Editor, _objectSpread({
+                                value: value
+                              }, props))
+                            });
+                          }
+                        })
+                      })
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
       })
-    }, /*#__PURE__*/React.createElement(Editor, Object.assign({
-      value: value
-    }, props)));
-  }))))))))))));
+    }))
+  }));
 }
 
 export { Editor, ScreenTypes, ScreensMenu as Screens, createScreen, EditorContainer as default };