@micromag/editor 0.2.412 → 0.2.413

package/es/index.js

@@ -71,7 +71,7 @@ var useRouteParams = function useRouteParams() {
   return routeParams;
 };
 
-var styles$f = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
+var styles$h = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
 
 var createScreen = function createScreen(definition) {
   var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -245,7 +245,7 @@ var SettingsButton = function SettingsButton(_ref) {
 SettingsButton.propTypes = propTypes$n;
 SettingsButton.defaultProps = defaultProps$n;
 
-var styles$e = {"container":"micromag-editor-menus-breadcrumb-container"};
+var styles$g = {"container":"micromag-editor-menus-breadcrumb-container"};
 
 var propTypes$m = {
   story: PropTypes$1.story,
@@ -395,14 +395,14 @@ var Breadcrumb = function Breadcrumb(_ref) {
     theme: "secondary",
     withoutBar: true,
     noWrap: true,
-    className: classNames([styles$e.container, 'text-truncate', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$g.container, 'text-truncate', _defineProperty({}, className, className !== null)])
   }));
 };
 
 Breadcrumb.propTypes = propTypes$m;
 Breadcrumb.defaultProps = defaultProps$m;
 
-var styles$d = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
+var styles$f = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
 
 var propTypes$l = {
   value: PropTypes$1.component,
@@ -445,9 +445,9 @@ var ScreenForm = function ScreenForm(_ref) {
 
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.container, _defineProperty({}, className, className)])
+    className: classNames([styles$f.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.inner
+    className: styles$f.inner
   }, /*#__PURE__*/React.createElement(Fields, {
     fields: fields,
     value: value,
@@ -485,7 +485,7 @@ var FieldWithContexts = function FieldWithContexts(props) {
 FieldWithContexts.propTypes = propTypes$k;
 FieldWithContexts.defaultProps = defaultProps$k;
 
-var styles$c = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
+var styles$e = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
 
 var propTypes$j = {
   className: PropTypes.string,
@@ -510,10 +510,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
         "value": "Delete screen"
       }]
     }),
-    className: classNames([styles$c.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$e.container, _defineProperty({}, className, className)]),
     onClickClose: onCancel
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.description
+    className: styles$e.description
   }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "q/tLk0",
     defaultMessage: [{
@@ -521,7 +521,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
       "value": "Are you sure you want to delete this screen?"
     }]
   }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$c.actions
+    className: styles$e.actions
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: onCancel,
     className: "btn-outline-secondary mr-2"
@@ -547,7 +547,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
 DeleteScreenModal.propTypes = propTypes$j;
 DeleteScreenModal.defaultProps = defaultProps$j;
 
-var styles$b = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
+var styles$d = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
 
 var propTypes$i = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
@@ -590,7 +590,7 @@ var EditForm = function EditForm(_ref) {
   });
   var screen = screenIndex !== -1 ? screens[screenIndex] : null; // Get transition value
 
-  var _useFormTransition = useFormTransition(url, screenIndex, styles$b),
+  var _useFormTransition = useFormTransition(url, screenIndex, styles$d),
       transitionName = _useFormTransition.name,
       transitionTimeout = _useFormTransition.timeout;
 
@@ -706,7 +706,7 @@ var EditForm = function EditForm(_ref) {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$b.navbar])
+    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$d.navbar])
   }, /*#__PURE__*/React.createElement(Breadcrumb, {
     story: value,
     url: url,
@@ -722,14 +722,14 @@ var EditForm = function EditForm(_ref) {
     align: "right",
     onClickOutside: onDropdownClickOutside
   })) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$b.content])
+    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$d.content])
   }, screen !== null ? /*#__PURE__*/React.createElement(CSSTransitionGroup, {
     transitionName: transitionName,
     transitionEnterTimeout: transitionTimeout,
     transitionLeaveTimeout: transitionTimeout,
     className: "w-100 flex-grow-1"
   }, fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$b.panel]),
+    className: classNames(['w-100', styles$d.panel]),
     key: "field-".concat(fieldParams, "-").concat(formParams)
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen
@@ -737,19 +737,19 @@ var EditForm = function EditForm(_ref) {
     name: fieldParams.replace(/\//g, '.'),
     value: screen,
     form: formParams,
-    className: styles$b.form,
+    className: styles$d.form,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
     fieldContext: fieldContext,
     onChange: onScreenFormChange
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$b.panel]),
+    className: classNames(['w-100', styles$d.panel]),
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen
   }, /*#__PURE__*/React.createElement(ScreenForm, {
     value: screen,
-    className: styles$b.form,
+    className: styles$d.form,
     onChange: onScreenFormChange,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
@@ -791,7 +791,7 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$a = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
+var styles$c = {"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$h = {
@@ -865,7 +865,7 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$9 = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$b = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 var _excluded$6 = ["device", "className", "iconComponents"];
 var propTypes$f = {
@@ -886,9 +886,9 @@ var DeviceButton = function DeviceButton(_ref) {
 
   var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$9.icon
+    className: styles$b.icon
   }));
 };
 
@@ -914,7 +914,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React.createElement(Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$c.container, _defineProperty({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
           itemProps = _objectWithoutProperties(item, _excluded$5);
@@ -922,7 +922,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
       return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
-        className: styles$a.button,
+        className: styles$c.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
         }
@@ -934,7 +934,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
 DevicesMenu.propTypes = propTypes$e;
 DevicesMenu.defaultProps = defaultProps$e;
 
-var styles$8 = {"container":"micromag-editor-preview-container","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story","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","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
+var styles$a = {"container":"micromag-editor-preview-container","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story","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","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
 
 var propTypes$d = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
@@ -1036,13 +1036,13 @@ var EditorPreview = function EditorPreview(_ref) {
     };
   }, [device, contentRect, screen, withoutDevicesSizes]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, screens.map(function (screenName) {
-      return styles$8["screen-".concat(screenName)];
-    }), (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
+    className: classNames([styles$a.container, screens.map(function (screenName) {
+      return styles$a["screen-".concat(screenName)];
+    }), (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$a.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner
+    className: styles$a.inner
   }, !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.top
+    className: styles$a.top
   }, /*#__PURE__*/React.createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
@@ -1051,12 +1051,12 @@ var EditorPreview = function EditorPreview(_ref) {
     }),
     onClickItem: onClickDeviceItem
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.bottom
+    className: styles$a.bottom
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner,
+    className: styles$a.inner,
     ref: bottomRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.preview,
+    className: styles$a.preview,
     style: previewStyle
   }, /*#__PURE__*/React.createElement(Route, {
     path: [routes.screen, routes.home],
@@ -1064,12 +1064,12 @@ var EditorPreview = function EditorPreview(_ref) {
       var _ref4$match$params$sc = _ref4.match.params.screen,
           screenId = _ref4$match$params$sc === void 0 ? null : _ref4$match$params$sc;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$8.viewerContainer
+        className: styles$a.viewerContainer
       }, /*#__PURE__*/React.createElement(Viewer, {
         story: valueParsed,
         storyIsParsed: true,
         screen: screenId,
-        className: styles$8.story,
+        className: styles$a.story,
         theme: viewerTheme,
         interactions: null,
         renderContext: "edit",
@@ -1082,13 +1082,13 @@ var EditorPreview = function EditorPreview(_ref) {
 EditorPreview.propTypes = propTypes$d;
 EditorPreview.defaultProps = defaultProps$d;
 
-var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
+var styles$9 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
 
-var styles$6 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
+var styles$8 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
 
-var styles$5 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen"};
+var styles$7 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen"};
 
-var styles$4 = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
+var styles$6 = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
 
 var propTypes$c = {
   active: PropTypes.bool,
@@ -1132,17 +1132,17 @@ var ScreenButton = function ScreenButton(_ref) {
       onClick = _ref.onClick,
       refButton = _ref.refButton;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$4.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames([styles$6.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$6.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.screen
+    className: styles$6.screen
   }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
-    className: styles$4.inner
+    className: styles$6.inner
   }, icon !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$4.icon
+    className: styles$6.icon
   }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$4.label
+    className: styles$6.label
   }, label) : null)), /*#__PURE__*/React.createElement(Button, {
-    className: styles$4.button,
+    className: styles$6.button,
     withoutStyle: true,
     id: id,
     href: href,
@@ -1150,7 +1150,7 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick: onClick,
     refButton: refButton
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$4.border, 'rounded'])
+    className: classNames([styles$6.border, 'rounded'])
   })));
 };
 
@@ -1211,7 +1211,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       height = _ref2$height === void 0 ? null : _ref2$height;
 
   return /*#__PURE__*/React.createElement(ScreenButton$1, Object.assign({}, screen, {
-    className: classNames([styles$5.button, (_ref3 = {}, _defineProperty(_ref3, buttonClassName, buttonClassName !== null), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    className: classNames([styles$7.button, (_ref3 = {}, _defineProperty(_ref3, buttonClassName, buttonClassName !== null), _defineProperty(_ref3, className, className !== null), _ref3)]),
     title: isMessage(title) ? intl.formatMessage(title) : null,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1223,21 +1223,21 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       }
     }
   }), withPreview && !withPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.preview,
+    className: styles$7.preview,
     style: previewStyle
   }, /*#__PURE__*/React.createElement(ScreenPreview, {
     screen: screen,
     width: width,
     height: height,
-    className: styles$5.screen
+    className: styles$7.screen
   })) : null, withPlaceholder && !withPreview ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.placeholder,
+    className: styles$7.placeholder,
     style: previewStyle
   }, /*#__PURE__*/React.createElement(ScreenPlaceholder, {
     screen: screen,
     width: width,
     height: height,
-    className: styles$5.screen
+    className: styles$7.screen
   })) : null);
 };
 
@@ -1642,9 +1642,13 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
   };
 };
 
-var styles$3 = {"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","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator","text":"micromag-editor-sortable-sortable-tree-item-actions-text","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","count":"micromag-editor-sortable-sortable-tree-item-actions-count","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","Count":"micromag-editor-sortable-sortable-tree-item-actions-Count","Text":"micromag-editor-sortable-sortable-tree-item-actions-Text","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","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"};
+var styles$5 = {"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 = {};
+
+var styles$3 = {"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","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","count":"micromag-editor-sortable-sortable-tree-item-actions-count","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","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", "children"];
+var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "children"];
 var propTypes$a = {
   childCount: PropTypes.number,
   clone: PropTypes.bool,
@@ -1669,6 +1673,7 @@ var propTypes$a = {
     transform: PropTypes.string.isRequired
   }),
   showId: PropTypes.bool,
+  showCount: PropTypes.bool,
   children: PropTypes.node
 };
 var defaultProps$a = {
@@ -1687,6 +1692,7 @@ var defaultProps$a = {
   wrapperRef: null,
   style: null,
   showId: false,
+  showCount: false,
   children: null
 };
 var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -1709,7 +1715,8 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref.value;
       var wrapperRef = _ref.wrapperRef;
       _ref.showId;
-      var children = _ref.children,
+      var showCount = _ref.showCount,
+      children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$4);
 
   return /*#__PURE__*/React.createElement("li", Object.assign({
@@ -1720,11 +1727,7 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, style)
   }, props), /*#__PURE__*/React.createElement("div", {
     className: styles$3.inner,
-    ref: ref,
-    style: {
-      width: style.width,
-      height: style.height
-    }
+    ref: ref
   }, /*#__PURE__*/React.createElement("button", Object.assign({
     className: classNames([styles$3.button, styles$3.handle]),
     type: "button"
@@ -1736,17 +1739,14 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: onRemove
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTimes
-  })) : null, clone && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
+  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
     className: styles$3.count
-  }, childCount) : null, onCollapse && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
+  }, childCount) : null, onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
     className: styles$3.collapsedCount
   }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onCollapse,
-    className: classNames(styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed),
-    style: {
-      width: style.width
-    }
+    className: classNames(styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed)
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faAngleDown
   })) : null), /*#__PURE__*/React.createElement("div", {
@@ -1756,7 +1756,7 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
 SortableTreeItemActions.propTypes = propTypes$a;
 SortableTreeItemActions.defaultProps = defaultProps$a;
 
-var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "onCollapse", "onClickItem"];
+var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "isLastChild"];
 var propTypes$9 = {
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
@@ -1773,16 +1773,20 @@ var propTypes$9 = {
     scale: PropTypes.number.isRequired
   }),
   smallScale: PropTypes.number,
+  collapsed: PropTypes.bool,
   onCollapse: PropTypes.func,
-  onClickItem: PropTypes.func
+  onClickItem: PropTypes.func,
+  isLastChild: PropTypes.bool
 };
 var defaultProps$9 = {
   component: null,
   value: null,
   style: null,
   smallScale: 0.75,
+  collapsed: false,
   onCollapse: null,
-  onClickItem: null
+  onClickItem: null,
+  isLastChild: false
 };
 
 var animateLayoutChanges = function animateLayoutChanges(_ref) {
@@ -1799,9 +1803,11 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
       value = _ref2.value,
       itemStyle = _ref2.style,
       smallScale = _ref2.smallScale,
+      collapsed = _ref2.collapsed,
       onCollapse = _ref2.onCollapse,
-      onClickItem = _ref2.onClickItem,
-      props = _objectWithoutProperties(_ref2, _excluded$3);
+      onClickItem = _ref2.onClickItem;
+      _ref2.isLastChild;
+      var props = _objectWithoutProperties(_ref2, _excluded$3);
 
   var _useSortable = useSortable({
     id: id,
@@ -1848,7 +1854,9 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
       onPointerDown(e);
     }
   }, [value, index, onClickItem, onPointerDown]);
-  return /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container])
+  }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     style: actionsStyle,
@@ -1859,10 +1867,11 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     handleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
       onPointerDown: onClickAction
     }),
+    collapsed: collapsed,
     onCollapse: onCollapse
   }, props), Component !== null ? /*#__PURE__*/React.createElement(Component, Object.assign({}, value, {
     previewStyle: previewStyle
-  })) : null);
+  })) : null));
 };
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
@@ -2071,6 +2080,11 @@ var SortableTree = function SortableTree(_ref2) {
     // console.log('fuck off');
     setItems(buildTree(defaultItems));
   }, []);
+  var activeValue = defaultItems.find(function (_ref7) {
+    var _ref7$id = _ref7.id,
+        defaultId = _ref7$id === void 0 ? null : _ref7$id;
+    return defaultId === activeId;
+  });
   return /*#__PURE__*/React.createElement(DndContext, {
     announcements: announcements,
     sensors: sensors,
@@ -2084,59 +2098,74 @@ var SortableTree = function SortableTree(_ref2) {
   }, /*#__PURE__*/React.createElement(SortableContext, {
     items: sortedIds,
     strategy: verticalListSortingStrategy
-  }, flattenedItems.map(function (_ref7, idx) {
-    var id = _ref7.id,
-        _ref7$children = _ref7.children,
-        children = _ref7$children === void 0 ? [] : _ref7$children,
-        collapsed = _ref7.collapsed,
-        depth = _ref7.depth,
-        _ref7$value = _ref7.value,
-        value = _ref7$value === void 0 ? null : _ref7$value;
-    return /*#__PURE__*/React.createElement(SortableTreeItem, {
+  }, flattenedItems.map(function (_ref8, idx) {
+    var _flattenedItems, _ref10;
+
+    var id = _ref8.id,
+        _ref8$children = _ref8.children,
+        children = _ref8$children === void 0 ? [] : _ref8$children,
+        collapsed = _ref8.collapsed,
+        depth = _ref8.depth;
+    var screenValue = defaultItems.find(function (_ref9) {
+      var _ref9$id = _ref9.id,
+          defaultId = _ref9$id === void 0 ? null : _ref9$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;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames([styles$5.item, (_ref10 = {}, _defineProperty(_ref10, styles$5.parent, onCollapse !== null && !collapsed), _defineProperty(_ref10, styles$5.group, depth === 1), _defineProperty(_ref10, styles$5.isLastChild, next === null), _ref10)]),
+      key: id
+    }, /*#__PURE__*/React.createElement(SortableTreeItem, {
       key: id,
       id: id,
-      depth: id === activeId && projected ? projected.depth : depth,
+      depth: currentDepth,
       indentationWidth: indentationWidth,
       indicator: indicator,
-      collapsed: Boolean(collapsed && children.length),
-      onCollapse: collapsible && children.length ? function () {
-        return handleCollapse(id);
-      } : undefined,
+      collapsed: isCollapsed,
+      onCollapse: onCollapse,
       onRemove: removable ? function () {
         return handleRemove(id);
       } : undefined,
       childCount: getChildCount(items, id),
       component: component,
-      value: value,
+      value: (screenValue === null || screenValue === void 0 ? void 0 : screenValue.value) || null,
       style: itemStyle,
       onClickItem: onClickItem,
       index: idx
-    });
+    }));
   }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
     dropAnimation: dropAnimation,
     modifiers: indicator ? [adjustTranslate] : undefined
-  }, activeId && activeItem ? /*#__PURE__*/React.createElement(SortableTreeItem, {
+  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
+    className: styles$5.item,
+    key: activeId
+  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
     id: activeId,
     depth: activeItem.depth,
     clone: true,
     childCount: getChildCount(items, activeId) + 1,
     indentationWidth: indentationWidth,
     component: component,
-    value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value,
+    value: activeValue === null || activeValue === void 0 ? void 0 : activeValue.value,
     onClickItem: onClickItem,
-    index: flattenedItems.findIndex(function (_ref8) {
-      var id = _ref8.id;
+    index: flattenedItems.findIndex(function (_ref11) {
+      var id = _ref11.id;
       return activeId === id;
     }),
     style: itemStyle
-  }) : null), document.body)));
+  })) : null), document.body)));
 
-  function handleDragStart(_ref9) {
-    var newActiveId = _ref9.active.id;
+  function handleDragStart(_ref12) {
+    var newActiveId = _ref12.active.id;
     setActiveId(newActiveId);
     setOverId(newActiveId);
-    var newActiveItem = flattenedItems.find(function (_ref10) {
-      var id = _ref10.id;
+    var newActiveItem = flattenedItems.find(function (_ref13) {
+      var id = _ref13.id;
       return id === newActiveId;
     });
 
@@ -2150,15 +2179,15 @@ var SortableTree = function SortableTree(_ref2) {
     document.body.style.setProperty('cursor', 'grabbing');
   }
 
-  function handleDragMove(_ref11) {
-    var delta = _ref11.delta;
+  function handleDragMove(_ref14) {
+    var delta = _ref14.delta;
     setOffsetLeft(delta.x);
   }
 
-  function handleDragOver(_ref12) {
+  function handleDragOver(_ref15) {
     var _over$id;
 
-    var over = _ref12.over;
+    var over = _ref15.over;
     setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
   }
 
@@ -2170,21 +2199,21 @@ var SortableTree = function SortableTree(_ref2) {
     document.body.style.setProperty('cursor', '');
   }
 
-  function handleDragEnd(_ref13) {
-    var active = _ref13.active,
-        over = _ref13.over;
+  function handleDragEnd(_ref16) {
+    var active = _ref16.active,
+        over = _ref16.over;
     resetState();
 
     if (projected && over) {
       var depth = projected.depth,
           parentId = projected.parentId;
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(function (_ref14) {
-        var id = _ref14.id;
+      var overIndex = clonedItems.findIndex(function (_ref17) {
+        var id = _ref17.id;
         return id === over.id;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref15) {
-        var id = _ref15.id;
+      var activeIndex = clonedItems.findIndex(function (_ref18) {
+        var id = _ref18.id;
         return id === active.id;
       });
       var activeTreeItem = clonedItems[activeIndex];
@@ -2193,8 +2222,8 @@ var SortableTree = function SortableTree(_ref2) {
       if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === void 0 ? void 0 : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
         var _loop = function _loop(i) {
           var childId = activeTreeItem.children[i].id;
-          var childIndex = clonedItems.findIndex(function (_ref16) {
-            var id = _ref16.id;
+          var childIndex = clonedItems.findIndex(function (_ref19) {
+            var id = _ref19.id;
             return id === childId;
           });
           clonedItems[childIndex].parentId = parentId;
@@ -2250,12 +2279,12 @@ var SortableTree = function SortableTree(_ref2) {
       }
 
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(function (_ref17) {
-        var id = _ref17.id;
+      var overIndex = clonedItems.findIndex(function (_ref20) {
+        var id = _ref20.id;
         return id === currentOverId;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref18) {
-        var id = _ref18.id;
+      var activeIndex = clonedItems.findIndex(function (_ref21) {
+        var id = _ref21.id;
         return id === currentActiveId;
       });
       var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
@@ -2275,8 +2304,8 @@ var SortableTree = function SortableTree(_ref2) {
         var _loop2 = function _loop2() {
           var _previousSibling = previousSibling,
               parentId = _previousSibling.parentId;
-          previousSibling = sortedItems.find(function (_ref19) {
-            var id = _ref19.id;
+          previousSibling = sortedItems.find(function (_ref22) {
+            var id = _ref22.id;
             return id === parentId;
           });
         };
@@ -2304,7 +2333,7 @@ var propTypes$7 = {
   items: PropTypes$1.menuItems,
   withPreview: PropTypes.bool,
   withPlaceholder: PropTypes.bool,
-  settings: PropTypes.node,
+  settings: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   previewMinWidth: PropTypes.number,
   sortable: PropTypes.bool,
   isTree: PropTypes.bool,
@@ -2415,7 +2444,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
 
     return /*#__PURE__*/React.createElement("li", {
       key: item.id,
-      className: classNames([styles$6.item, (_ref5 = {}, _defineProperty(_ref5, itemClassName, itemClassName !== null), _defineProperty(_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
+      className: classNames([styles$8.item, (_ref5 = {}, _defineProperty(_ref5, itemClassName, itemClassName !== null), _defineProperty(_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
       "data-screen-id": item.id,
       ref: index === 0 ? containerRef : null
     }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
@@ -2430,7 +2459,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$8.settings, 'p-2'])
     }, isFunction(settings) ? settings(index) : settings) : null);
   }) : [];
   var sortableItems = useMemo(function () {
@@ -2466,7 +2495,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
     });
   }, [items, isTree]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, (_ref10 = {}, _defineProperty(_ref10, styles$6.noWrap, noWrap), _defineProperty(_ref10, styles$6.isVertical, isVertical), _defineProperty(_ref10, styles$6.isTree, isTree), _defineProperty(_ref10, styles$6.withPlaceholder, withPlaceholder), _defineProperty(_ref10, className, className), _ref10)]),
+    className: classNames([styles$8.container, (_ref10 = {}, _defineProperty(_ref10, styles$8.noWrap, noWrap), _defineProperty(_ref10, styles$8.isVertical, isVertical), _defineProperty(_ref10, styles$8.isTree, isTree), _defineProperty(_ref10, styles$8.withPlaceholder, withPlaceholder), _defineProperty(_ref10, className, className), _ref10)]),
     ref: columnRef
   }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
     items: sortableItems,
@@ -2481,9 +2510,9 @@ var ScreensMenu = function ScreensMenu(_ref) {
     delayOnTouchStart: true,
     delay: 2,
     tag: "ul",
-    className: styles$6.items
+    className: styles$8.items
   }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
-    className: styles$6.items
+    className: styles$8.items
   }, itemsElements) : null);
 };
 
@@ -2736,60 +2765,54 @@ var EditorScreens = function EditorScreens(_ref) {
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = useCallback(function (listItems) {
-    var ids = listItems.map(function (_ref7) {
-      var id = _ref7.id;
-      return id;
-    });
-    var screenProps = listItems.map(function (_ref8) {
-      var id = _ref8.id,
-          _ref8$props = _ref8.props,
-          props = _ref8$props === void 0 ? null : _ref8$props;
+    // const ids = listItems.map(({ id }) => id);
+    var screenProps = listItems.map(function (_ref7) {
+      var id = _ref7.id,
+          _ref7$props = _ref7.props,
+          props = _ref7$props === void 0 ? null : _ref7$props;
       return {
         id: id,
         props: props
       };
     });
-    var hasScreenProps = (screenProps.filter(function (_ref9) {
-      var props = _ref9.props;
+    var hasScreenProps = (screenProps.filter(function (_ref8) {
+      var props = _ref8.props;
       return props !== null;
     }) || []).length > 0;
 
-    var _ref10 = value || {},
-        _ref10$components = _ref10.components,
-        currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
+    var _ref9 = value || {},
+        _ref9$components = _ref9.components,
+        currentScreens = _ref9$components === void 0 ? [] : _ref9$components;
 
-    var currentIds = currentScreens.map(function (_ref11) {
-      var id = _ref11.id;
+    var currentIds = currentScreens.map(function (_ref10) {
+      var id = _ref10.id;
       return id;
     });
-    var sameOrder = listItems.reduce(function (same, _ref12, index) {
-      var id = _ref12.id;
+    var sameOrder = listItems.reduce(function (same, _ref11, index) {
+      var id = _ref11.id;
       return same && id === currentIds[index];
     }, true);
 
     if (!sameOrder || hasScreenProps) {
       var newValue = _objectSpread(_objectSpread({}, value), {}, {
-        components: _toConsumableArray(currentScreens).sort(function (_ref13, _ref14) {
-          var idA = _ref13.id;
-          var idB = _ref14.id;
-          var indexA = ids.indexOf(idA);
-          var indexB = ids.indexOf(idB);
-
-          if (indexA === indexB) {
-            return 0;
-          }
-
-          return indexA > indexB ? 1 : -1;
-        }).map(function (_ref15) {
+        components: _toConsumableArray(currentScreens) // .sort(({ id: idA }, { id: idB }) => {
+        //     const indexA = ids.indexOf(idA);
+        //     const indexB = ids.indexOf(idB);
+        //     if (indexA === indexB) {
+        //         return 0;
+        //     }
+        //     return indexA > indexB ? 1 : -1;
+        // })
+        .map(function (_ref12) {
           var _screenProps$find;
 
-          var id = _ref15.id,
-              props = _objectWithoutProperties(_ref15, _excluded$1);
+          var id = _ref12.id,
+              props = _objectWithoutProperties(_ref12, _excluded$1);
 
           return _objectSpread(_objectSpread({
             id: id
-          }, props), (_screenProps$find = screenProps.find(function (_ref16) {
-            var propsId = _ref16.id;
+          }, props), (_screenProps$find = screenProps.find(function (_ref13) {
+            var propsId = _ref13.id;
             return propsId === id;
           })) === null || _screenProps$find === void 0 ? void 0 : _screenProps$find.props);
         })
@@ -2802,8 +2825,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [value, onChange]);
   var onClickScreenType = useCallback(function (definition) {
     setCreateModalOpened(false);
-    var currentScreen = isTheme ? screens.find(function (_ref17) {
-      var type = _ref17.type;
+    var currentScreen = isTheme ? screens.find(function (_ref14) {
+      var type = _ref14.type;
       return type === definition.id;
     }) || null : null;
 
@@ -2823,12 +2846,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$9.container, className])
   }, /*#__PURE__*/React.createElement(Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', styles$7.navbar])
+    className: classNames(['sticky-top', styles$9.navbar])
   }, /*#__PURE__*/React.createElement("strong", {
     className: "mb-0 mr-auto"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -2848,9 +2871,9 @@ var EditorScreens = function EditorScreens(_ref) {
     className: "flex-grow-1 d-flex w-100 p-2"
   }, /*#__PURE__*/React.createElement(Route, {
     path: [routes.screen, routes.home],
-    render: function render(_ref18) {
-      var _ref18$match$params$s = _ref18.match.params.screen,
-          screenId = _ref18$match$params$s === void 0 ? null : _ref18$match$params$s;
+    render: function render(_ref15) {
+      var _ref15$match$params$s = _ref15.match.params.screen,
+          screenId = _ref15$match$params$s === void 0 ? null : _ref15$match$params$s;
       return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -2883,8 +2906,8 @@ var EditorScreens = function EditorScreens(_ref) {
       })));
     }
   })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref19) {
-      var type = _ref19.type;
+    selectedTypes: isTheme ? screens.map(function (_ref16) {
+      var type = _ref16.type;
       return type;
     }) : [],
     onClickScreenType: onClickScreenType,
@@ -3030,16 +3053,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$f.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles$f["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles$f.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
+    className: classNames([styles$h.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$h["screen-".concat(screenName)];
+    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles$h.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
     ref: refContainer
   }, /*#__PURE__*/React.createElement(Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: styles$f.top
+    className: styles$h.top
   }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(Button, {
     size: "sm",
     theme: "secondary",
@@ -3072,9 +3095,9 @@ var Editor = function Editor(_ref) {
       "value": "View screen"
     }]
   })) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$f.inner
+    className: styles$h.inner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.left, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'screens')]),
+    className: classNames([styles$h.left, _defineProperty({}, styles$h.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
   }, /*#__PURE__*/React.createElement(EditorScreens, {
     value: story,
@@ -3084,24 +3107,24 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles$f.inner,
+    className: styles$h.inner,
     isTree: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.center, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'preview')])
+    className: classNames([styles$h.center, _defineProperty({}, styles$h.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React.createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
-    className: styles$f.preview,
+    className: styles$h.preview,
     onScreenChange: onPreviewScreenChange
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.right, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'form')])
+    className: classNames([styles$h.right, _defineProperty({}, styles$h.visible, !isMobile || mobileView === 'form')])
   }, /*#__PURE__*/React.createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
-    className: styles$f.inner
+    className: styles$h.inner
   }))), /*#__PURE__*/React.createElement(Modals, null)))));
 };