@micromag/editor 0.2.412 → 0.2.413

package/lib/index.js

@@ -90,7 +90,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] : {};
@@ -264,7 +264,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: core.PropTypes.story,
@@ -414,14 +414,14 @@ var Breadcrumb = function Breadcrumb(_ref) {
     theme: "secondary",
     withoutBar: true,
     noWrap: true,
-    className: classNames__default["default"]([styles$e.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$g.container, 'text-truncate', _defineProperty__default["default"]({}, 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: core.PropTypes.component,
@@ -464,9 +464,9 @@ var ScreenForm = function ScreenForm(_ref) {
 
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$f.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.inner
+    className: styles$f.inner
   }, /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
     fields: fields$1,
     value: value,
@@ -504,7 +504,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__default["default"].string,
@@ -529,10 +529,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
         "value": "Delete screen"
       }]
     }),
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className)]),
     onClickClose: onCancel
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$c.description
+    className: styles$e.description
   }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "q/tLk0",
     defaultMessage: [{
@@ -540,7 +540,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
       "value": "Are you sure you want to delete this screen?"
     }]
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$c.actions
+    className: styles$e.actions
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     onClick: onCancel,
     className: "btn-outline-secondary mr-2"
@@ -566,7 +566,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__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
@@ -609,7 +609,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;
 
@@ -725,7 +725,7 @@ var EditForm = function EditForm(_ref) {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$b.navbar])
+    className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$d.navbar])
   }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
     story: value,
     url: url,
@@ -741,14 +741,14 @@ var EditForm = function EditForm(_ref) {
     align: "right",
     onClickOutside: onDropdownClickOutside
   })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$b.content])
+    className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$d.content])
   }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransitionGroup, {
     transitionName: transitionName,
     transitionEnterTimeout: transitionTimeout,
     transitionLeaveTimeout: transitionTimeout,
     className: "w-100 flex-grow-1"
   }, fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$b.panel]),
+    className: classNames__default["default"](['w-100', styles$d.panel]),
     key: "field-".concat(fieldParams, "-").concat(formParams)
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen
@@ -756,19 +756,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__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$b.panel]),
+    className: classNames__default["default"](['w-100', styles$d.panel]),
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen
   }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
     value: screen,
-    className: styles$b.form,
+    className: styles$d.form,
     onChange: onScreenFormChange,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
@@ -810,7 +810,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 = {
@@ -884,7 +884,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 = {
@@ -905,9 +905,9 @@ var DeviceButton = function DeviceButton(_ref) {
 
   var DeviceIcon = utils.getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
-    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), /*#__PURE__*/React__default["default"].createElement(DeviceIcon, {
-    className: styles$9.icon
+    className: styles$b.icon
   }));
 };
 
@@ -933,7 +933,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
           itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
@@ -941,7 +941,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
       return /*#__PURE__*/React__default["default"].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;
         }
@@ -953,7 +953,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__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
@@ -1055,13 +1055,13 @@ var EditorPreview = function EditorPreview(_ref) {
     };
   }, [device, contentRect, screen, withoutDevicesSizes]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, screens.map(function (screenName) {
-      return styles$8["screen-".concat(screenName)];
-    }), (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
+    className: classNames__default["default"]([styles$a.container, screens.map(function (screenName) {
+      return styles$a["screen-".concat(screenName)];
+    }), (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$a.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.inner
+    className: styles$a.inner
   }, !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.top
+    className: styles$a.top
   }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
@@ -1070,12 +1070,12 @@ var EditorPreview = function EditorPreview(_ref) {
     }),
     onClickItem: onClickDeviceItem
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.bottom
+    className: styles$a.bottom
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.inner,
+    className: styles$a.inner,
     ref: bottomRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.preview,
+    className: styles$a.preview,
     style: previewStyle
   }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
     path: [routes.screen, routes.home],
@@ -1083,12 +1083,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__default["default"].createElement("div", {
-        className: styles$8.viewerContainer
+        className: styles$a.viewerContainer
       }, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
         story: valueParsed,
         storyIsParsed: true,
         screen: screenId,
-        className: styles$8.story,
+        className: styles$a.story,
         theme: viewerTheme,
         interactions: null,
         renderContext: "edit",
@@ -1101,13 +1101,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__default["default"].bool,
@@ -1151,17 +1151,17 @@ var ScreenButton = function ScreenButton(_ref) {
       onClick = _ref.onClick,
       refButton = _ref.refButton;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$4.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
+    className: classNames__default["default"]([styles$6.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$6.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.screen
+    className: styles$6.screen
   }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.inner
+    className: styles$6.inner
   }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.icon
+    className: styles$6.icon
   }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.label
+    className: styles$6.label
   }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$4.button,
+    className: styles$6.button,
     withoutStyle: true,
     id: id,
     href: href,
@@ -1169,7 +1169,7 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick: onClick,
     refButton: refButton
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$4.border, 'rounded'])
+    className: classNames__default["default"]([styles$6.border, 'rounded'])
   })));
 };
 
@@ -1230,7 +1230,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       height = _ref2$height === void 0 ? null : _ref2$height;
 
   return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, Object.assign({}, screen, {
-    className: classNames__default["default"]([styles$5.button, (_ref3 = {}, _defineProperty__default["default"](_ref3, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
+    className: classNames__default["default"]([styles$7.button, (_ref3 = {}, _defineProperty__default["default"](_ref3, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
     title: utils.isMessage(title) ? intl.formatMessage(title) : null,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1242,21 +1242,21 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       }
     }
   }), withPreview && !withPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5.preview,
+    className: styles$7.preview,
     style: previewStyle
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
     screen: screen,
     width: width,
     height: height,
-    className: styles$5.screen
+    className: styles$7.screen
   })) : null, withPlaceholder && !withPreview ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5.placeholder,
+    className: styles$7.placeholder,
     style: previewStyle
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPlaceholder, {
     screen: screen,
     width: width,
     height: height,
-    className: styles$5.screen
+    className: styles$7.screen
   })) : null);
 };
 
@@ -1661,9 +1661,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__default["default"].number,
   clone: PropTypes__default["default"].bool,
@@ -1688,6 +1692,7 @@ var propTypes$a = {
     transform: PropTypes__default["default"].string.isRequired
   }),
   showId: PropTypes__default["default"].bool,
+  showCount: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node
 };
 var defaultProps$a = {
@@ -1706,6 +1711,7 @@ var defaultProps$a = {
   wrapperRef: null,
   style: null,
   showId: false,
+  showCount: false,
   children: null
 };
 var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -1728,7 +1734,8 @@ var SortableTreeItemActions = /*#__PURE__*/React.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__default["default"](_ref, _excluded$4);
 
   return /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
@@ -1739,11 +1746,7 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }, style)
   }, props), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3.inner,
-    ref: ref,
-    style: {
-      width: style.width,
-      height: style.height
-    }
+    ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
     className: classNames__default["default"]([styles$3.button, styles$3.handle]),
     type: "button"
@@ -1755,17 +1758,14 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onClick: onRemove
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faTimes
-  })) : null, clone && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
+  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$3.count
-  }, childCount) : null, onCollapse && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, childCount) : null, onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$3.collapsedCount
   }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     onClick: onCollapse,
-    className: classNames__default["default"](styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed),
-    style: {
-      width: style.width
-    }
+    className: classNames__default["default"](styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed)
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faAngleDown
   })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1775,7 +1775,7 @@ var SortableTreeItemActions = /*#__PURE__*/React.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__default["default"].string.isRequired,
   index: PropTypes__default["default"].number.isRequired,
@@ -1792,16 +1792,20 @@ var propTypes$9 = {
     scale: PropTypes__default["default"].number.isRequired
   }),
   smallScale: PropTypes__default["default"].number,
+  collapsed: PropTypes__default["default"].bool,
   onCollapse: PropTypes__default["default"].func,
-  onClickItem: PropTypes__default["default"].func
+  onClickItem: PropTypes__default["default"].func,
+  isLastChild: PropTypes__default["default"].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) {
@@ -1818,9 +1822,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__default["default"](_ref2, _excluded$3);
+      onClickItem = _ref2.onClickItem;
+      _ref2.isLastChild;
+      var props = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
 
   var _useSortable = sortable.useSortable({
     id: id,
@@ -1867,7 +1873,9 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
       onPointerDown(e);
     }
   }, [value, index, onClickItem, onPointerDown]);
-  return /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$4.container])
+  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     style: actionsStyle,
@@ -1878,10 +1886,11 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     handleProps: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, attributes), listeners), {}, {
       onPointerDown: onClickAction
     }),
+    collapsed: collapsed,
     onCollapse: onCollapse
   }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement(Component, Object.assign({}, value, {
     previewStyle: previewStyle
-  })) : null);
+  })) : null));
 };
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
@@ -2090,6 +2099,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__default["default"].createElement(core$1.DndContext, {
     announcements: announcements,
     sensors: sensors,
@@ -2103,59 +2117,74 @@ var SortableTree = function SortableTree(_ref2) {
   }, /*#__PURE__*/React__default["default"].createElement(sortable.SortableContext, {
     items: sortedIds,
     strategy: sortable.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__default["default"].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__default["default"].createElement("div", {
+      className: classNames__default["default"]([styles$5.item, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$5.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref10, styles$5.group, depth === 1), _defineProperty__default["default"](_ref10, styles$5.isLastChild, next === null), _ref10)]),
+      key: id
+    }, /*#__PURE__*/React__default["default"].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__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(core$1.DragOverlay, {
     dropAnimation: dropAnimation,
     modifiers: indicator ? [adjustTranslate] : undefined
-  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
+  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$5.item,
+    key: activeId
+  }, /*#__PURE__*/React__default["default"].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;
     });
 
@@ -2169,15 +2198,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);
   }
 
@@ -2189,21 +2218,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];
@@ -2212,8 +2241,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;
@@ -2269,12 +2298,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 = sortable.arrayMove(clonedItems, activeIndex, overIndex);
@@ -2294,8 +2323,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;
           });
         };
@@ -2323,7 +2352,7 @@ var propTypes$7 = {
   items: core.PropTypes.menuItems,
   withPreview: PropTypes__default["default"].bool,
   withPlaceholder: PropTypes__default["default"].bool,
-  settings: PropTypes__default["default"].node,
+  settings: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
   previewMinWidth: PropTypes__default["default"].number,
   sortable: PropTypes__default["default"].bool,
   isTree: PropTypes__default["default"].bool,
@@ -2434,7 +2463,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement("li", {
       key: item.id,
-      className: classNames__default["default"]([styles$6.item, (_ref5 = {}, _defineProperty__default["default"](_ref5, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
+      className: classNames__default["default"]([styles$8.item, (_ref5 = {}, _defineProperty__default["default"](_ref5, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
       "data-screen-id": item.id,
       ref: index === 0 ? containerRef : null
     }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
@@ -2449,7 +2478,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       onClick: onClick,
       onClickItem: onClickItem
     }), settings !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$6.settings, 'p-2'])
+      className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$8.settings, 'p-2'])
     }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
   }) : [];
   var sortableItems = React.useMemo(function () {
@@ -2485,7 +2514,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
     });
   }, [items, isTree]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$6.noWrap, noWrap), _defineProperty__default["default"](_ref10, styles$6.isVertical, isVertical), _defineProperty__default["default"](_ref10, styles$6.isTree, isTree), _defineProperty__default["default"](_ref10, styles$6.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref10, className, className), _ref10)]),
+    className: classNames__default["default"]([styles$8.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$8.noWrap, noWrap), _defineProperty__default["default"](_ref10, styles$8.isVertical, isVertical), _defineProperty__default["default"](_ref10, styles$8.isTree, isTree), _defineProperty__default["default"](_ref10, styles$8.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref10, className, className), _ref10)]),
     ref: columnRef
   }, isTree && !sortable ? /*#__PURE__*/React__default["default"].createElement(SortableTree, {
     items: sortableItems,
@@ -2500,9 +2529,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__default["default"].createElement("ul", {
-    className: styles$6.items
+    className: styles$8.items
   }, itemsElements) : null);
 };
 
@@ -2755,60 +2784,54 @@ var EditorScreens = function EditorScreens(_ref) {
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = React.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__default["default"](_objectSpread__default["default"]({}, value), {}, {
-        components: _toConsumableArray__default["default"](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__default["default"](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__default["default"](_ref15, _excluded$1);
+          var id = _ref12.id,
+              props = _objectWithoutProperties__default["default"](_ref12, _excluded$1);
 
           return _objectSpread__default["default"](_objectSpread__default["default"]({
             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);
         })
@@ -2821,8 +2844,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [value, onChange]);
   var onClickScreenType = React.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;
 
@@ -2842,12 +2865,12 @@ var EditorScreens = function EditorScreens(_ref) {
     return setCreateModalOpened(false);
   }, [setCreateModalOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['d-flex', 'flex-column', styles$7.container, className])
+    className: classNames__default["default"](['d-flex', 'flex-column', styles$9.container, className])
   }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames__default["default"](['sticky-top', styles$7.navbar])
+    className: classNames__default["default"](['sticky-top', styles$9.navbar])
   }, /*#__PURE__*/React__default["default"].createElement("strong", {
     className: "mb-0 mr-auto"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -2867,9 +2890,9 @@ var EditorScreens = function EditorScreens(_ref) {
     className: "flex-grow-1 d-flex w-100 p-2"
   }, /*#__PURE__*/React__default["default"].createElement(reactRouter.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__default["default"].createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -2902,8 +2925,8 @@ var EditorScreens = function EditorScreens(_ref) {
       })));
     }
   })), createModalOpened ? /*#__PURE__*/React__default["default"].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,
@@ -3049,16 +3072,16 @@ var Editor = function Editor(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(contexts.ModalsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.PanelsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles$f["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$f.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
+    className: classNames__default["default"]([styles$h.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$h["screen-".concat(screenName)];
+    }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$h.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
     ref: refContainer
   }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: styles$f.top
+    className: styles$h.top
   }, mobileView !== 'screens' ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
     size: "sm",
     theme: "secondary",
@@ -3091,9 +3114,9 @@ var Editor = function Editor(_ref) {
       "value": "View screen"
     }]
   })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$f.inner
+    className: styles$h.inner
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.left, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'screens')]),
+    className: classNames__default["default"]([styles$h.left, _defineProperty__default["default"]({}, styles$h.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
   }, /*#__PURE__*/React__default["default"].createElement(EditorScreens, {
     value: story,
@@ -3103,24 +3126,24 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles$f.inner,
+    className: styles$h.inner,
     isTree: true
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.center, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'preview')])
+    className: classNames__default["default"]([styles$h.center, _defineProperty__default["default"]({}, styles$h.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React__default["default"].createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
-    className: styles$f.preview,
+    className: styles$h.preview,
     onScreenChange: onPreviewScreenChange
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.right, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'form')])
+    className: classNames__default["default"]([styles$h.right, _defineProperty__default["default"]({}, styles$h.visible, !isMobile || mobileView === 'form')])
   }, /*#__PURE__*/React__default["default"].createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
-    className: styles$f.inner
+    className: styles$h.inner
   }))), /*#__PURE__*/React__default["default"].createElement(components.Modals, null)))));
 };