@micromag/editor 0.3.150 → 0.3.154

package/assets/css/styles.css

@@ -3,12 +3,12 @@
 .micromag-editor-forms-screen-container{position:relative;padding:.5rem}.micromag-editor-forms-screen-container .micromag-editor-forms-screen-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
 .micromag-editor-menus-breadcrumb-container li{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.micromag-editor-menus-breadcrumb-container li:before{float:none}.micromag-editor-menus-breadcrumb-container li:last-child{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
 .micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-description{margin-bottom:10px}.micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
-.micromag-editor-preview-container .micromag-editor-preview-noStory,.micromag-editor-preview-container .micromag-editor-preview-story{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-preview-container{position:relative}.micromag-editor-preview-container>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-editor-preview-container .micromag-editor-preview-top{display:none;width:100%;padding:20px 0}.micromag-editor-preview-container .micromag-editor-preview-bottom{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;padding:0;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-bottom>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0 auto;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-preview{width:100%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.micromag-editor-preview-container .micromag-editor-preview-preview,.micromag-editor-preview-container .micromag-editor-preview-viewerContainer{position:relative;height:100%}.micromag-editor-preview-container .micromag-editor-preview-devices{position:absolute;right:10px;bottom:10px}.micromag-editor-preview-screen-medium .micromag-editor-preview-top{display:block;width:100%;overflow-x:auto;text-align:center}.micromag-editor-preview-screen-medium .micromag-editor-preview-bottom{padding:50px 20px}
 .micromag-editor-menus-devices-container{display:inline-block;position:relative}.micromag-editor-menus-devices-container .micromag-editor-menus-devices-button{display:block;width:40px;height:30px;padding:5px}
 .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;width:100%;height:auto;max-height:100%}
 .micromag-editor-partials-screen-states-container{display:inline-block}.micromag-editor-partials-screen-states-button{width:50px;min-height:75px}.micromag-editor-partials-screen-states-button.btn-outline-secondary{border-color:#6c6c6c;color:#6c6c6c}.micromag-editor-partials-screen-states-button.btn-outline-secondary:hover{border-color:#e9e9e9;background:rgba(0,0,0,0);color:#e9e9e9}.micromag-editor-partials-screen-states-addButton{border-style:dashed}.micromag-editor-partials-screen-states-title{padding:0 .2em;font-size:.75em;text-align:left}
 .micromag-editor-buttons-screen-with-preview-button{display:block;position:relative}
 .micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button{position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-border,.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button,.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-inner{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-buttons-screen-container{position:relative;overflow:hidden}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button{display:inline-block}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-border{display:block}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen{display:block;position:relative;width:100%;height:0;padding-bottom:150%;pointer-events:none}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-icon{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-label{padding:5px 0;font-size:.75rem;font-weight:700}.micromag-editor-buttons-screen-container.micromag-editor-buttons-screen-active .micromag-editor-buttons-screen-border{z-index:2;border:3px solid #a13dff}
+.micromag-editor-preview-container .micromag-editor-preview-noStory,.micromag-editor-preview-container .micromag-editor-preview-story{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-preview-container{position:relative}.micromag-editor-preview-container>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-editor-preview-container .micromag-editor-preview-top{display:none;width:100%;padding:20px 0}.micromag-editor-preview-container .micromag-editor-preview-bottom{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;padding:0;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-bottom>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0 auto;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-preview{width:100%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.micromag-editor-preview-container .micromag-editor-preview-preview,.micromag-editor-preview-container .micromag-editor-preview-viewerContainer{position:relative;height:100%}.micromag-editor-preview-container .micromag-editor-preview-devices{position:absolute;right:10px;bottom:10px}.micromag-editor-preview-screen-medium .micromag-editor-preview-top{display:block;width:100%;overflow-x:auto;text-align:center}.micromag-editor-preview-screen-medium .micromag-editor-preview-bottom{padding:50px 20px}
 .micromag-editor-screens-container .micromag-editor-screens-navbar{z-index:999;background-color:#1c1c1c}.micromag-editor-screens-container .micromag-editor-screens-navbar>div{padding:0}
 .micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-screen{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-menus-screens-item,.micromag-editor-menus-screens-items{margin:0;padding:0;list-style:none}.micromag-editor-menus-screens-container{position:relative}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-5px;padding:0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{display:block;position:relative;z-index:2;width:33.3%;padding:5px}@media screen and (min-width:540px){.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{width:20%}}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-button{display:block}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{background:rgba(0,0,0,.9)}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-settings{position:absolute;top:0;right:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-noWrap .micromag-editor-menus-screens-items{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-item{width:100%}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-item{margin:5px;padding:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-button{width:100px}
 .micromag-editor-sortable-sortable-tree-item{padding-bottom:3px}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-parent{padding-bottom:0;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group{padding-top:3px;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group.micromag-editor-sortable-sortable-tree-isLastChild{margin-bottom:4px;padding-bottom:6px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}

package/es/index.js

@@ -8,7 +8,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
 import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
-import { useParsedStory, useResizeObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
+import { useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
 import { getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
 import { useRouteMatch, useHistory, Route, MemoryRouter } from 'react-router';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -1049,9 +1049,7 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$d = {"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","devices":"micromag-editor-preview-devices","screen-medium":"micromag-editor-preview-screen-medium"};
-
-var styles$c = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
+var styles$d = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 var propTypes$i = {
@@ -1125,7 +1123,7 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$b = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$c = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 var _excluded$6 = ["device", "className", "iconComponents"];
 var propTypes$g = {
@@ -1146,9 +1144,9 @@ var DeviceButton = function DeviceButton(_ref) {
 
   var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$c.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
@@ -1174,7 +1172,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React.createElement(Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames([styles$c.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
           itemProps = _objectWithoutProperties(item, _excluded$5);
@@ -1182,7 +1180,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
       return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
-        className: styles$c.button,
+        className: styles$d.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
         }
@@ -1194,11 +1192,11 @@ var DevicesMenu = function DevicesMenu(_ref) {
 DevicesMenu.propTypes = propTypes$f;
 DevicesMenu.defaultProps = defaultProps$f;
 
-var styles$a = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
+var styles$b = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
 
-var styles$9 = {"button":"micromag-editor-buttons-screen-with-preview-button"};
+var styles$a = {"button":"micromag-editor-buttons-screen-with-preview-button"};
 
-var styles$8 = {"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$9 = {"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$e = {
   active: PropTypes.bool,
@@ -1242,17 +1240,17 @@ var ScreenButton = function ScreenButton(_ref) {
       onClick = _ref.onClick,
       refButton = _ref.refButton;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$8.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames([styles$9.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$9.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
   }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
-    className: styles$8.screen
+    className: styles$9.screen
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner
+    className: styles$9.inner
   }, icon !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.icon
+    className: styles$9.icon
   }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.label
+    className: styles$9.label
   }, label) : null)), /*#__PURE__*/React.createElement(Button, {
-    className: styles$8.button,
+    className: styles$9.button,
     withoutStyle: true,
     id: id,
     href: href,
@@ -1260,7 +1258,7 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick: onClick,
     refButton: refButton
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$8.border, 'rounded'])
+    className: classNames([styles$9.border, 'rounded'])
   })));
 };
 
@@ -1312,7 +1310,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
   return /*#__PURE__*/React.createElement(ScreenButton$1, {
     href: href,
     active: active,
-    className: classNames([styles$9.button, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.button, _defineProperty({}, className, className !== null)]),
     title: isMessage(title) ? intl.formatMessage(title) : null,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1326,7 +1324,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
   }, /*#__PURE__*/React.createElement(ScreenComponent, {
     screen: screen,
     screenState: screenState,
-    className: styles$9.screen,
+    className: styles$a.screen,
     withSize: true
   }));
 };
@@ -1377,15 +1375,15 @@ function ScreenStates(_ref) {
     return id === stateParam;
   }) !== -1 ? stateParam : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex align-items-end m-n1"
   }, /*#__PURE__*/React.createElement("div", {
     className: "p-1 align-self-stretch d-flex flex-column"
   }, /*#__PURE__*/React.createElement("h6", {
-    className: classNames(['fw-normal', 'invisible', styles$a.title])
+    className: classNames(['fw-normal', 'invisible', styles$b.title])
   }, "Settings"), /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+    className: classNames([styles$b.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
     theme: screenParam !== null && field === null ? 'primary' : 'secondary',
     outline: screenParam === null || field !== null,
     size: "lg",
@@ -1436,7 +1434,7 @@ function ScreenStates(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
     }, /*#__PURE__*/React.createElement("h6", {
-      className: classNames(['fw-normal', 'text-muted', styles$a.title])
+      className: classNames(['fw-normal', 'text-muted', styles$b.title])
     }, /*#__PURE__*/React.createElement(FormattedMessage, label)), repeatable ? /*#__PURE__*/React.createElement("ul", {
       className: "d-flex list-unstyled m-n1 flex-grow-1"
     }, repeatableItems.map(function (item, index) {
@@ -1446,7 +1444,7 @@ function ScreenStates(_ref) {
         index: index,
         screen: screen,
         screenState: "".concat(id, ".").concat(index),
-        className: styles$a.button,
+        className: styles$b.button,
         active: currentState !== null && id === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
         href: url('screen.field', {
           screen: screen.id,
@@ -1456,7 +1454,7 @@ function ScreenStates(_ref) {
     }), !withoutCreate ? /*#__PURE__*/React.createElement("li", {
       className: "p-1"
     }, /*#__PURE__*/React.createElement(Button, {
-      className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
+      className: classNames([styles$b.button, styles$b.addButton, 'h-100', 'p-0', 'justify-content-center']),
       theme: "secondary",
       outline: true,
       size: "lg",
@@ -1467,7 +1465,7 @@ function ScreenStates(_ref) {
     })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview, {
       screen: screen,
       screenState: id,
-      className: styles$a.button,
+      className: styles$b.button,
       active: id === currentState,
       href: url('screen.field', {
         screen: screen.id,
@@ -1485,6 +1483,8 @@ function ScreenStates(_ref) {
 ScreenStates.propTypes = propTypes$c;
 ScreenStates.defaultProps = defaultProps$c;
 
+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","devices":"micromag-editor-preview-devices","screen-medium":"micromag-editor-preview-screen-medium"};
+
 var propTypes$b = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
   devices: PropTypes$1.devices,
@@ -1517,7 +1517,7 @@ var defaultProps$b = {
 };
 
 var EditorPreview = function EditorPreview(_ref) {
-  var _ref9;
+  var _ref8;
 
   var value = _ref.value,
       viewerTheme = _ref.viewerTheme,
@@ -1562,9 +1562,12 @@ var EditorPreview = function EditorPreview(_ref) {
     });
   }, [devices, deviceId]); // Calculate preview style
 
-  var _useResizeObserver = useResizeObserver(),
-      bottomRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
+  var _useDimensionObserver = useDimensionObserver(),
+      bottomRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      bottomWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+      _useDimensionObserver3 = _useDimensionObserver.height,
+      bottomHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
 
   var previewStyle = useMemo(function () {
     if (withoutDevicesSizes && initialDevice === null) {
@@ -1573,13 +1576,6 @@ var EditorPreview = function EditorPreview(_ref) {
 
     var deviceWidth = device.width,
         deviceHeight = device.height;
-
-    var _ref2 = contentRect || {},
-        _ref2$width = _ref2.width,
-        bottomWidth = _ref2$width === void 0 ? 0 : _ref2$width,
-        _ref2$height = _ref2.height,
-        bottomHeight = _ref2$height === void 0 ? 0 : _ref2$height;
-
     var maxWidth = screen === 'mobile' ? bottomWidth : deviceWidth;
     var maxHeight = screen === 'mobile' ? bottomHeight : deviceHeight;
 
@@ -1591,73 +1587,73 @@ var EditorPreview = function EditorPreview(_ref) {
       height: maxHeight,
       transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
     };
-  }, [device, contentRect, screen, withoutDevicesSizes, initialDevice]);
+  }, [device, bottomWidth, bottomHeight, screen, withoutDevicesSizes, initialDevice]);
   var currentScreen = useMemo(function () {
-    var _ref3 = valueParsed || {},
-        _ref3$components = _ref3.components,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
+    var _ref2 = valueParsed || {},
+        _ref2$components = _ref2.components,
+        components = _ref2$components === void 0 ? [] : _ref2$components;
 
-    return (screenId !== null ? components.find(function (_ref4) {
-      var id = _ref4.id;
+    return (screenId !== null ? components.find(function (_ref3) {
+      var id = _ref3.id;
       return id === screenId;
     }) : components[0]) || null;
   }, [valueParsed, screenId]);
   var currentScreenStates = useScreenStates(currentScreen);
 
-  var _ref5 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
-      _ref6 = _slicedToArray(_ref5, 1),
-      _ref6$ = _ref6[0],
-      screenStateParam = _ref6$ === void 0 ? null : _ref6$;
+  var _ref4 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
+      _ref5 = _slicedToArray(_ref4, 1),
+      _ref5$ = _ref5[0],
+      screenStateParam = _ref5$ === void 0 ? null : _ref5$;
 
-  var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref7) {
-    var id = _ref7.id;
+  var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref6) {
+    var id = _ref6.id;
     return id === screenStateParam;
   }) || null : null;
 
-  var _ref8 = currentScreenState || {},
-      _ref8$id = _ref8.id,
-      screenStateId = _ref8$id === void 0 ? null : _ref8$id,
-      _ref8$repeatable = _ref8.repeatable,
-      repeatable = _ref8$repeatable === void 0 ? false : _ref8$repeatable;
+  var _ref7 = currentScreenState || {},
+      _ref7$id = _ref7.id,
+      screenStateId = _ref7$id === void 0 ? null : _ref7$id,
+      _ref7$repeatable = _ref7.repeatable,
+      repeatable = _ref7$repeatable === void 0 ? false : _ref7$repeatable;
 
   var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.container, screens.map(function (screenName) {
-      return styles$d["screen-".concat(screenName)];
-    }), (_ref9 = {}, _defineProperty(_ref9, className, className), _defineProperty(_ref9, styles$d.withoutDevicesSizes, withoutDevicesSizes), _ref9)])
+    className: classNames([styles$8.container, screens.map(function (screenName) {
+      return styles$8["screen-".concat(screenName)];
+    }), (_ref8 = {}, _defineProperty(_ref8, className, className), _defineProperty(_ref8, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref8)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.inner
+    className: styles$8.inner
   }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.top, 'px-1'])
+    className: classNames([styles$8.top, 'px-1'])
   }, /*#__PURE__*/React.createElement(ScreenStates, {
     screen: currentScreen,
     screenState: currentScreenStateId,
     value: value,
     onChange: onChange
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.bottom
+    className: styles$8.bottom
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.inner,
+    className: styles$8.inner,
     ref: bottomRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.preview,
+    className: styles$8.preview,
     style: previewStyle
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.viewerContainer
+    className: styles$8.viewerContainer
   }, /*#__PURE__*/React.createElement(Viewer, {
     story: valueParsed,
     storyIsParsed: true,
     screen: screenId,
     screenState: currentScreenStateId,
-    className: styles$d.story,
+    className: styles$8.story,
     theme: viewerTheme,
     interactions: null,
     renderContext: "edit",
     onScreenChange: onScreenChange
   }))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
-    className: styles$d.deviceMenu
+    className: styles$8.deviceMenu
   }, /*#__PURE__*/React.createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
@@ -1665,7 +1661,7 @@ var EditorPreview = function EditorPreview(_ref) {
       });
     }),
     onClickItem: onClickDeviceItem,
-    className: styles$d.devices
+    className: styles$8.devices
   })) : null));
 };
 

package/lib/index.js

@@ -1069,9 +1069,7 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$d = {"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","devices":"micromag-editor-preview-devices","screen-medium":"micromag-editor-preview-screen-medium"};
-
-var styles$c = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
+var styles$d = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 var propTypes$i = {
@@ -1145,7 +1143,7 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$b = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$c = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 var _excluded$6 = ["device", "className", "iconComponents"];
 var propTypes$g = {
@@ -1166,9 +1164,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$b.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), /*#__PURE__*/React__default["default"].createElement(DeviceIcon, {
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
@@ -1194,7 +1192,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
           itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
@@ -1202,7 +1200,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
-        className: styles$c.button,
+        className: styles$d.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
         }
@@ -1214,11 +1212,11 @@ var DevicesMenu = function DevicesMenu(_ref) {
 DevicesMenu.propTypes = propTypes$f;
 DevicesMenu.defaultProps = defaultProps$f;
 
-var styles$a = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
+var styles$b = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
 
-var styles$9 = {"button":"micromag-editor-buttons-screen-with-preview-button"};
+var styles$a = {"button":"micromag-editor-buttons-screen-with-preview-button"};
 
-var styles$8 = {"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$9 = {"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$e = {
   active: PropTypes__default["default"].bool,
@@ -1262,17 +1260,17 @@ var ScreenButton = function ScreenButton(_ref) {
       onClick = _ref.onClick,
       refButton = _ref.refButton;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$8.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
+    className: classNames__default["default"]([styles$9.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$9.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
   }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.screen
+    className: styles$9.screen
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.inner
+    className: styles$9.inner
   }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.icon
+    className: styles$9.icon
   }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.label
+    className: styles$9.label
   }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$8.button,
+    className: styles$9.button,
     withoutStyle: true,
     id: id,
     href: href,
@@ -1280,7 +1278,7 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick: onClick,
     refButton: refButton
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$8.border, 'rounded'])
+    className: classNames__default["default"]([styles$9.border, 'rounded'])
   })));
 };
 
@@ -1332,7 +1330,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
     href: href,
     active: active,
-    className: classNames__default["default"]([styles$9.button, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$a.button, _defineProperty__default["default"]({}, className, className !== null)]),
     title: utils.isMessage(title) ? intl.formatMessage(title) : null,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1346,7 +1344,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, {
     screen: screen,
     screenState: screenState,
-    className: styles$9.screen,
+    className: styles$a.screen,
     withSize: true
   }));
 };
@@ -1397,15 +1395,15 @@ function ScreenStates(_ref) {
     return id === stateParam;
   }) !== -1 ? stateParam : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "d-flex align-items-end m-n1"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "p-1 align-self-stretch d-flex flex-column"
   }, /*#__PURE__*/React__default["default"].createElement("h6", {
-    className: classNames__default["default"](['fw-normal', 'invisible', styles$a.title])
+    className: classNames__default["default"](['fw-normal', 'invisible', styles$b.title])
   }, "Settings"), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+    className: classNames__default["default"]([styles$b.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
     theme: screenParam !== null && field === null ? 'primary' : 'secondary',
     outline: screenParam === null || field !== null,
     size: "lg",
@@ -1456,7 +1454,7 @@ function ScreenStates(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
     }, /*#__PURE__*/React__default["default"].createElement("h6", {
-      className: classNames__default["default"](['fw-normal', 'text-muted', styles$a.title])
+      className: classNames__default["default"](['fw-normal', 'text-muted', styles$b.title])
     }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, label)), repeatable ? /*#__PURE__*/React__default["default"].createElement("ul", {
       className: "d-flex list-unstyled m-n1 flex-grow-1"
     }, repeatableItems.map(function (item, index) {
@@ -1466,7 +1464,7 @@ function ScreenStates(_ref) {
         index: index,
         screen: screen,
         screenState: "".concat(id, ".").concat(index),
-        className: styles$a.button,
+        className: styles$b.button,
         active: currentState !== null && id === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
         href: url('screen.field', {
           screen: screen.id,
@@ -1476,7 +1474,7 @@ function ScreenStates(_ref) {
     }), !withoutCreate ? /*#__PURE__*/React__default["default"].createElement("li", {
       className: "p-1"
     }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-      className: classNames__default["default"]([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
+      className: classNames__default["default"]([styles$b.button, styles$b.addButton, 'h-100', 'p-0', 'justify-content-center']),
       theme: "secondary",
       outline: true,
       size: "lg",
@@ -1487,7 +1485,7 @@ function ScreenStates(_ref) {
     })) : null) : /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
       screen: screen,
       screenState: id,
-      className: styles$a.button,
+      className: styles$b.button,
       active: id === currentState,
       href: url('screen.field', {
         screen: screen.id,
@@ -1505,6 +1503,8 @@ function ScreenStates(_ref) {
 ScreenStates.propTypes = propTypes$c;
 ScreenStates.defaultProps = defaultProps$c;
 
+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","devices":"micromag-editor-preview-devices","screen-medium":"micromag-editor-preview-screen-medium"};
+
 var propTypes$b = {
   value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
   devices: core.PropTypes.devices,
@@ -1537,7 +1537,7 @@ var defaultProps$b = {
 };
 
 var EditorPreview = function EditorPreview(_ref) {
-  var _ref9;
+  var _ref8;
 
   var value = _ref.value,
       viewerTheme = _ref.viewerTheme,
@@ -1582,9 +1582,12 @@ var EditorPreview = function EditorPreview(_ref) {
     });
   }, [devices, deviceId]); // Calculate preview style
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      bottomRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      bottomRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      bottomWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+      _useDimensionObserver3 = _useDimensionObserver.height,
+      bottomHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
 
   var previewStyle = React.useMemo(function () {
     if (withoutDevicesSizes && initialDevice === null) {
@@ -1593,13 +1596,6 @@ var EditorPreview = function EditorPreview(_ref) {
 
     var deviceWidth = device.width,
         deviceHeight = device.height;
-
-    var _ref2 = contentRect || {},
-        _ref2$width = _ref2.width,
-        bottomWidth = _ref2$width === void 0 ? 0 : _ref2$width,
-        _ref2$height = _ref2.height,
-        bottomHeight = _ref2$height === void 0 ? 0 : _ref2$height;
-
     var maxWidth = screen === 'mobile' ? bottomWidth : deviceWidth;
     var maxHeight = screen === 'mobile' ? bottomHeight : deviceHeight;
 
@@ -1611,73 +1607,73 @@ var EditorPreview = function EditorPreview(_ref) {
       height: maxHeight,
       transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
     };
-  }, [device, contentRect, screen, withoutDevicesSizes, initialDevice]);
+  }, [device, bottomWidth, bottomHeight, screen, withoutDevicesSizes, initialDevice]);
   var currentScreen = React.useMemo(function () {
-    var _ref3 = valueParsed || {},
-        _ref3$components = _ref3.components,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
+    var _ref2 = valueParsed || {},
+        _ref2$components = _ref2.components,
+        components = _ref2$components === void 0 ? [] : _ref2$components;
 
-    return (screenId !== null ? components.find(function (_ref4) {
-      var id = _ref4.id;
+    return (screenId !== null ? components.find(function (_ref3) {
+      var id = _ref3.id;
       return id === screenId;
     }) : components[0]) || null;
   }, [valueParsed, screenId]);
   var currentScreenStates = useScreenStates(currentScreen);
 
-  var _ref5 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
-      _ref6 = _slicedToArray__default["default"](_ref5, 1),
-      _ref6$ = _ref6[0],
-      screenStateParam = _ref6$ === void 0 ? null : _ref6$;
+  var _ref4 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
+      _ref5 = _slicedToArray__default["default"](_ref4, 1),
+      _ref5$ = _ref5[0],
+      screenStateParam = _ref5$ === void 0 ? null : _ref5$;
 
-  var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref7) {
-    var id = _ref7.id;
+  var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref6) {
+    var id = _ref6.id;
     return id === screenStateParam;
   }) || null : null;
 
-  var _ref8 = currentScreenState || {},
-      _ref8$id = _ref8.id,
-      screenStateId = _ref8$id === void 0 ? null : _ref8$id,
-      _ref8$repeatable = _ref8.repeatable,
-      repeatable = _ref8$repeatable === void 0 ? false : _ref8$repeatable;
+  var _ref7 = currentScreenState || {},
+      _ref7$id = _ref7.id,
+      screenStateId = _ref7$id === void 0 ? null : _ref7$id,
+      _ref7$repeatable = _ref7.repeatable,
+      repeatable = _ref7$repeatable === void 0 ? false : _ref7$repeatable;
 
   var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$d.container, screens.map(function (screenName) {
-      return styles$d["screen-".concat(screenName)];
-    }), (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className), _defineProperty__default["default"](_ref9, styles$d.withoutDevicesSizes, withoutDevicesSizes), _ref9)])
+    className: classNames__default["default"]([styles$8.container, screens.map(function (screenName) {
+      return styles$8["screen-".concat(screenName)];
+    }), (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className), _defineProperty__default["default"](_ref8, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref8)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.inner
+    className: styles$8.inner
   }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$d.top, 'px-1'])
+    className: classNames__default["default"]([styles$8.top, 'px-1'])
   }, /*#__PURE__*/React__default["default"].createElement(ScreenStates, {
     screen: currentScreen,
     screenState: currentScreenStateId,
     value: value,
     onChange: onChange
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.bottom
+    className: styles$8.bottom
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.inner,
+    className: styles$8.inner,
     ref: bottomRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.preview,
+    className: styles$8.preview,
     style: previewStyle
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.viewerContainer
+    className: styles$8.viewerContainer
   }, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
     story: valueParsed,
     storyIsParsed: true,
     screen: screenId,
     screenState: currentScreenStateId,
-    className: styles$d.story,
+    className: styles$8.story,
     theme: viewerTheme,
     interactions: null,
     renderContext: "edit",
     onScreenChange: onScreenChange
   }))))), !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.deviceMenu
+    className: styles$8.deviceMenu
   }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
@@ -1685,7 +1681,7 @@ var EditorPreview = function EditorPreview(_ref) {
       });
     }),
     onClickItem: onClickDeviceItem,
-    className: styles$d.devices
+    className: styles$8.devices
   })) : null));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.150",
+    "version": "0.3.154",
     "description": "",
     "keywords": [
         "javascript"
@@ -62,11 +62,11 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.150",
-        "@micromag/elements": "^0.3.150",
-        "@micromag/fields": "^0.3.150",
-        "@micromag/screens": "^0.3.150",
-        "@micromag/viewer": "^0.3.150",
+        "@micromag/core": "^0.3.153",
+        "@micromag/elements": "^0.3.153",
+        "@micromag/fields": "^0.3.153",
+        "@micromag/screens": "^0.3.154",
+        "@micromag/viewer": "^0.3.154",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
+    "gitHead": "334e86f5f89e7fae922eddbd68352c7865e234d8"
 }