@micromag/editor 0.4.89 → 0.4.90-alpha.2

package/es/index.js

@@ -1,19 +1,23 @@
 import { c } from 'react/compiler-runtime';
-import classNames from 'classnames';
-import React, { useRef, useMemo, useCallback, useState, useEffect } from 'react';
+import { useRouteMatcher, createPathToRegexpParser } from '@folklore/routes';
 import { useIntl, FormattedMessage } from 'react-intl';
-import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Label, Modal, ModalDialog, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
+import { useLocation, Switch, Route, Router } from 'wouter';
+import { memoryLocation } from 'wouter/memory-location';
+import { UppyProvider } from '@panneau/uppy';
 import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useFieldsComponentsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, PlaybackProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, FontsProvider, EditorProvider, VisitorProvider, ComponentsContext, RoutesProvider, GoogleMapsClientProvider, GoogleKeysProvider, StoryProvider } from '@micromag/core/contexts';
-import { useIsVisible, useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
 import { getScreenFieldsWithStates, getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
-import { useRouteMatcher, createPathToRegexpParser } from '@folklore/routes';
-import { useLocation, Switch, Route, Router } from 'wouter';
+import { Fields, FieldsProvider } from '@micromag/fields';
+import { ScreensProvider } from '@micromag/screens';
+import classNames from 'classnames';
+import { useRef, useMemo, useCallback, useState, useEffect } from 'react';
+import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Label, Modals } from '@micromag/core/components';
+import { useIsVisible, useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
 import { easings, useTransition, animated } from '@react-spring/web';
 import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Fields, FieldsProvider } from '@micromag/fields';
+import ConfirmModal from '@panneau/modal-confirm';
 import { v1 } from 'uuid';
 import { getSizeWithinBounds } from '@folklore/size';
 import { Viewer } from '@micromag/viewer';
@@ -29,10 +33,8 @@ import { CSS } from '@dnd-kit/utilities';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 import { faGripLines } from '@fortawesome/free-solid-svg-icons/faGripLines';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import Dialog from '@panneau/modal-dialog';
 import orderBy from 'lodash/orderBy';
-import { memoryLocation } from 'wouter/memory-location';
-import { UppyProvider } from '@panneau/uppy';
-import { ScreensProvider } from '@micromag/screens';
 
 const useRouteParams = t0 => {
   const $ = c(12);
@@ -247,55 +249,47 @@ const getFieldByName = (fields, name) => fields.reduce((foundField, it) => {
 }, null);
 
 function SettingsButton(t0) {
-  const $ = c(10);
+  const $ = c(8);
   let props;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
-      className: t1,
-      dots: t2,
+      dots: t1,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = props;
     $[2] = t1;
-    $[3] = t2;
   } else {
     props = $[1];
     t1 = $[2];
-    t2 = $[3];
   }
-  const className = t1 === undefined ? null : t1;
-  const dots = t2 === undefined ? false : t2;
-  const t3 = dots ? faEllipsisV : faCogs;
-  let t4;
-  if ($[4] !== t3) {
-    t4 = /*#__PURE__*/jsx(FontAwesomeIcon, {
-      icon: t3
+  const dots = t1 === undefined ? false : t1;
+  const t2 = dots ? faEllipsisV : faCogs;
+  let t3;
+  if ($[3] !== t2) {
+    t3 = /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: t2
     });
+    $[3] = t2;
     $[4] = t3;
-    $[5] = t4;
   } else {
-    t4 = $[5];
+    t3 = $[4];
   }
-  let t5;
-  if ($[6] !== className || $[7] !== props || $[8] !== t4) {
-    t5 = /*#__PURE__*/jsx(Button, {
-      className: className,
-      theme: "secondary",
+  let t4;
+  if ($[5] !== props || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx(Button, {
       size: "sm",
-      icon: t4,
+      icon: t3,
       ...props
     });
-    $[6] = className;
-    $[7] = props;
-    $[8] = t4;
-    $[9] = t5;
+    $[5] = props;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t5 = $[9];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 }
 
 function FieldWithContexts(t0) {
@@ -355,24 +349,19 @@ function FieldWithContexts(t0) {
     finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId, ...nameParts.slice(1)] : nameParts.slice(1);
   }
   const formComponents = useFormsComponents();
-  return definition !== null ? /*#__PURE__*/jsx("div", {
-    className: classNames({
-      "p-2": form === null
-    }),
-    children: finalNameParts.length > 0 ? /*#__PURE__*/jsx(FieldForm, {
-      fields: finalScreenFields,
-      formComponents: formComponents,
-      name: finalNameParts.join("."),
-      form: form,
-      ...props
-    }) : /*#__PURE__*/jsx(Fields, {
-      fields: stateFields,
-      ...props
-    })
+  return definition !== null ? finalNameParts.length > 0 ? /*#__PURE__*/jsx(FieldForm, {
+    fields: finalScreenFields,
+    formComponents: formComponents,
+    name: finalNameParts.join("."),
+    form: form,
+    ...props
+  }) : /*#__PURE__*/jsx(Fields, {
+    fields: stateFields,
+    ...props
   }) : null;
 }
 
-var styles$i = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
+var styles$g = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
 
 function ScreenForm(t0) {
   const $ = c(15);
@@ -400,7 +389,7 @@ function ScreenForm(t0) {
   const fields = t5;
   let t6;
   if ($[2] !== className) {
-    t6 = classNames([styles$i.container, className]);
+    t6 = classNames([styles$g.container, className]);
     $[2] = className;
     $[3] = t6;
   } else {
@@ -427,7 +416,7 @@ function ScreenForm(t0) {
   let t8;
   if ($[10] !== t7) {
     t8 = /*#__PURE__*/jsx("div", {
-      className: styles$i.inner,
+      className: styles$g.inner,
       children: t7
     });
     $[10] = t7;
@@ -450,7 +439,7 @@ function ScreenForm(t0) {
   return t9;
 }
 
-var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
+var styles$f = {"container":"micromag-editor-menus-breadcrumb-container"};
 
 /* eslint-disable react/jsx-props-no-spreading */
 
@@ -633,143 +622,68 @@ function Breadcrumb({
   return /*#__PURE__*/jsxs(Fragment, {
     children: [withBack ? /*#__PURE__*/jsx(BackButton, {
       onClick: onClickBack,
-      className: "me-2 py-0"
+      className: "me-2",
+      outline: true,
+      size: "sm"
     }) : null, /*#__PURE__*/jsx(Breadcrumb$1, {
       items: items,
-      theme: "secondary",
       withoutBar: true,
       noWrap: true,
-      className: classNames([styles$h.container, 'text-truncate', className])
+      className: classNames([styles$f.container, 'text-truncate', className])
     })]
   });
 }
 
-var styles$g = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
-
-function DeleteScreenModal(t0) {
-  const $ = c(17);
-  const {
-    className: t1,
-    onConfirm: t2,
-    onCancel: t3
-  } = t0;
-  const className = t1 === undefined ? null : t1;
-  const onConfirm = t2 === undefined ? null : t2;
-  const onCancel = t3 === undefined ? null : t3;
-  let t4;
+function DeleteScreenModal(props) {
+  const $ = c(5);
+  let t0;
+  let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = /*#__PURE__*/jsx(FormattedMessage, {
+    t0 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "p6q/+/",
       defaultMessage: "Delete screen"
     });
-    $[0] = t4;
-  } else {
-    t4 = $[0];
-  }
-  let t5;
-  if ($[1] !== className) {
-    t5 = classNames([styles$g.container, className]);
-    $[1] = className;
-    $[2] = t5;
-  } else {
-    t5 = $[2];
-  }
-  let t6;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /*#__PURE__*/jsx("div", {
-      className: styles$g.description,
-      children: /*#__PURE__*/jsx(Label, {
-        children: /*#__PURE__*/jsx(FormattedMessage, {
-          id: "q/tLk0",
-          defaultMessage: "Are you sure you want to delete this screen?"
-        })
+    t1 = {
+      label: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "gRxcTc",
+        defaultMessage: "Delete screen"
       })
-    });
-    $[3] = t6;
-  } else {
-    t6 = $[3];
-  }
-  let t7;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = /*#__PURE__*/jsx(Label, {
-      children: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "0GT0SI",
-        defaultMessage: "Cancel"
-      })
-    });
-    $[4] = t7;
-  } else {
-    t7 = $[4];
-  }
-  let t8;
-  if ($[5] !== onCancel) {
-    t8 = /*#__PURE__*/jsx(Button, {
-      onClick: onCancel,
-      className: "btn-outline-secondary me-2",
-      children: t7
-    });
-    $[5] = onCancel;
-    $[6] = t8;
-  } else {
-    t8 = $[6];
-  }
-  let t9;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = /*#__PURE__*/jsx(FormattedMessage, {
-      id: "gRxcTc",
-      defaultMessage: "Delete screen"
-    });
-    $[7] = t9;
-  } else {
-    t9 = $[7];
-  }
-  let t10;
-  if ($[8] !== onConfirm) {
-    t10 = /*#__PURE__*/jsx(Button, {
-      onClick: onConfirm,
-      theme: "danger",
-      label: t9
-    });
-    $[8] = onConfirm;
-    $[9] = t10;
+    };
+    $[0] = t0;
+    $[1] = t1;
   } else {
-    t10 = $[9];
+    t0 = $[0];
+    t1 = $[1];
   }
-  let t11;
-  if ($[10] !== t10 || $[11] !== t8) {
-    t11 = /*#__PURE__*/jsxs("div", {
-      className: styles$g.actions,
-      children: [t8, t10]
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "q/tLk0",
+      defaultMessage: "Are you sure you want to delete this screen?"
     });
-    $[10] = t10;
-    $[11] = t8;
-    $[12] = t11;
+    $[2] = t2;
   } else {
-    t11 = $[12];
+    t2 = $[2];
   }
-  let t12;
-  if ($[13] !== onCancel || $[14] !== t11 || $[15] !== t5) {
-    t12 = /*#__PURE__*/jsx(Modal, {
-      children: /*#__PURE__*/jsxs(ModalDialog, {
-        title: t4,
-        className: t5,
-        onClose: onCancel,
-        children: [t6, t11]
-      })
+  let t3;
+  if ($[3] !== props) {
+    t3 = /*#__PURE__*/jsx(ConfirmModal, {
+      id: "delete-screen",
+      title: t0,
+      confirmButton: t1,
+      ...props,
+      children: t2
     });
-    $[13] = onCancel;
-    $[14] = t11;
-    $[15] = t5;
-    $[16] = t12;
+    $[3] = props;
+    $[4] = t3;
   } else {
-    t12 = $[16];
+    t3 = $[4];
   }
-  return t12;
+  return t3;
 }
 
-var styles$f = {"content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","panel":"micromag-editor-form-panel"};
+var styles$e = {"content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","panel":"micromag-editor-form-panel"};
 
-/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 function EditForm({
   value = null,
   isTheme = false,
@@ -804,7 +718,7 @@ function EditForm({
   // Get transition direction
   const {
     direction
-  } = useFormTransition(url, screenIndex, styles$f);
+  } = useFormTransition(url, screenIndex, styles$e);
   const [screenSettingsOpened, setScreenSettingsOpened] = useState(false);
   const [deleteScreenModalOpened, setDeleteScreenModalOpened] = useState(false);
   const [fieldForms, setFieldForms] = useState({});
@@ -945,7 +859,7 @@ function EditForm({
     triggerOnChange(deleteScreen(value, screenId));
     setDeleteScreenModalOpened(false);
   }, [value, triggerOnChange, screenId, setScreenSettingsOpened, routePush, screens]);
-  const onDeleteScreenCancel = useCallback(() => {
+  const onDeleteModalClosed = useCallback(() => {
     setDeleteScreenModalOpened(false);
   }, [setDeleteScreenModalOpened]);
   const dropdownItems = [!isTheme ? {
@@ -971,7 +885,7 @@ function EditForm({
       compact: true,
       noWrap: true,
       withoutCollapse: true,
-      className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar]),
+      className: classNames(['sticky-top', 'border-bottom', styles$e.navbar]),
       children: [/*#__PURE__*/jsx(Breadcrumb, {
         story: value,
         url: url,
@@ -984,8 +898,7 @@ function EditForm({
         children: [/*#__PURE__*/jsx(SettingsButton, {
           onClick: onSettingsClick,
           dots: true,
-          className: "py-0",
-          theme: "default"
+          className: "py-0"
         }), /*#__PURE__*/jsx(DropdownMenu, {
           align: "end",
           items: dropdownItems,
@@ -994,14 +907,14 @@ function EditForm({
         })]
       }) : null]
     }) : null, /*#__PURE__*/jsx("div", {
-      className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$f.content]),
+      className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$e.content]),
       children: screen !== null ? /*#__PURE__*/jsx("div", {
         className: "w-100 flex-grow-1",
         style: {
           position: 'relative'
         },
         children: panelTransitions((springStyle, item_0) => item_0 !== null ? /*#__PURE__*/jsx(animated.div, {
-          className: classNames(['w-100', styles$f.panel]),
+          className: classNames(['w-100', styles$e.panel]),
           style: {
             ...springStyle,
             ...(item_0.key !== transitionItem?.key ? {
@@ -1021,14 +934,14 @@ function EditForm({
               name: item_0.fieldParams.replace(/\//g, '.'),
               value: item_0.screen,
               form: item_0.formParams,
-              className: styles$f.form,
+              className: styles$e.form,
               gotoFieldForm: gotoFieldForm,
               closeFieldForm: closeFieldForm,
               fieldContext: fieldContext,
               onChange: onScreenFormChange
             }) : /*#__PURE__*/jsx(ScreenForm, {
               value: item_0.screen,
-              className: styles$f.form,
+              className: styles$e.form,
               onChange: onScreenFormChange,
               gotoFieldForm: gotoFieldForm,
               closeFieldForm: closeFieldForm
@@ -1045,7 +958,7 @@ function EditForm({
       })
     }), deleteScreenModalOpened ? /*#__PURE__*/jsx(DeleteScreenModal, {
       onConfirm: onDeleteScreenConfirm,
-      onCancel: onDeleteScreenCancel
+      onClosed: onDeleteModalClosed
     }) : null]
   });
 }
@@ -1229,7 +1142,7 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$e = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$d = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 function DeviceButton(t0) {
   const $ = c(16);
@@ -1269,7 +1182,7 @@ function DeviceButton(t0) {
   const DeviceIcon = t3;
   let t4;
   if ($[8] !== className) {
-    t4 = classNames([styles$e.container, className]);
+    t4 = classNames([styles$d.container, className]);
     $[8] = className;
     $[9] = t4;
   } else {
@@ -1278,7 +1191,7 @@ function DeviceButton(t0) {
   let t5;
   if ($[10] !== DeviceIcon) {
     t5 = /*#__PURE__*/jsx(DeviceIcon, {
-      className: styles$e.icon
+      className: styles$d.icon
     });
     $[10] = DeviceIcon;
     $[11] = t5;
@@ -1302,7 +1215,7 @@ function DeviceButton(t0) {
   return t6;
 }
 
-var styles$d = {"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"};
 
 const emptyArray$1 = [];
 function DevicesMenu(t0) {
@@ -1317,7 +1230,7 @@ function DevicesMenu(t0) {
   const onClickItem = t3 === undefined ? null : t3;
   let t4;
   if ($[0] !== className) {
-    t4 = classNames([styles$d.container, className]);
+    t4 = classNames([styles$c.container, className]);
     $[0] = className;
     $[1] = t4;
   } else {
@@ -1334,7 +1247,7 @@ function DevicesMenu(t0) {
         device: id,
         ...props,
         ...itemProps,
-        className: styles$d.button,
+        className: styles$c.button,
         onClick: e => onClickItem !== null ? onClickItem(e, item, index) : null
       });
     };
@@ -1361,10 +1274,10 @@ function DevicesMenu(t0) {
   return t6;
 }
 
-var styles$c = {"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$b = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","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"};
 
 function ScreenButton(t0) {
-  const $ = c(18);
+  const $ = c(23);
   const {
     active: t1,
     id: t2,
@@ -1375,7 +1288,7 @@ function ScreenButton(t0) {
     children: t7,
     title: t8,
     onClick: t9,
-    refButton: t10
+    ref: t10
   } = t0;
   const active = t1 === undefined ? false : t1;
   const id = t2 === undefined ? null : t2;
@@ -1389,8 +1302,8 @@ function ScreenButton(t0) {
   const refButton = t10 === undefined ? null : t10;
   let t11;
   if ($[0] !== active || $[1] !== className) {
-    t11 = classNames([styles$c.container, "rounded", className, {
-      [styles$c.active]: active
+    t11 = classNames([styles$b.container, className, {
+      [styles$b.active]: active
     }]);
     $[0] = active;
     $[1] = className;
@@ -1401,14 +1314,14 @@ function ScreenButton(t0) {
   let t12;
   if ($[3] !== children || $[4] !== icon || $[5] !== label) {
     t12 = children !== null ? children : /*#__PURE__*/jsx("div", {
-      className: styles$c.screen,
+      className: styles$b.screen,
       children: /*#__PURE__*/jsxs("div", {
-        className: styles$c.inner,
+        className: styles$b.inner,
         children: [icon !== null ? /*#__PURE__*/jsx("div", {
-          className: styles$c.icon,
+          className: styles$b.icon,
           children: icon
         }) : null, label !== null ? /*#__PURE__*/jsx("div", {
-          className: styles$c.label,
+          className: styles$b.label,
           children: label
         }) : null]
       })
@@ -1420,69 +1333,68 @@ function ScreenButton(t0) {
   } else {
     t12 = $[6];
   }
-  let t13;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /*#__PURE__*/jsx("span", {
-      className: classNames([styles$c.border, "rounded"])
+  const t13 = !active;
+  let t14;
+  if ($[7] !== active || $[8] !== t13) {
+    t14 = classNames(["position-absolute top-0 start-0 w-100 h-100 border border-primary border-3 fade", {
+      "opacity-0": t13,
+      "opacity-100": active
+    }]);
+    $[7] = active;
+    $[8] = t13;
+    $[9] = t14;
+  } else {
+    t14 = $[9];
+  }
+  let t15;
+  if ($[10] !== t14) {
+    t15 = /*#__PURE__*/jsx("span", {
+      className: t14
     });
-    $[7] = t13;
+    $[10] = t14;
+    $[11] = t15;
   } else {
-    t13 = $[7];
+    t15 = $[11];
   }
-  let t14;
-  if ($[8] !== href || $[9] !== id || $[10] !== onClick || $[11] !== refButton || $[12] !== title) {
-    t14 = /*#__PURE__*/jsx(Button, {
-      className: styles$c.button,
+  let t16;
+  if ($[12] !== href || $[13] !== id || $[14] !== onClick || $[15] !== refButton || $[16] !== t15 || $[17] !== title) {
+    t16 = /*#__PURE__*/jsx(Button, {
+      className: styles$b.button,
       withoutStyle: true,
       id: id,
       href: href,
       title: title,
       onClick: onClick,
       refButton: refButton,
-      children: t13
+      children: t15
     });
-    $[8] = href;
-    $[9] = id;
-    $[10] = onClick;
-    $[11] = refButton;
-    $[12] = title;
-    $[13] = t14;
+    $[12] = href;
+    $[13] = id;
+    $[14] = onClick;
+    $[15] = refButton;
+    $[16] = t15;
+    $[17] = title;
+    $[18] = t16;
   } else {
-    t14 = $[13];
+    t16 = $[18];
   }
-  let t15;
-  if ($[14] !== t11 || $[15] !== t12 || $[16] !== t14) {
-    t15 = /*#__PURE__*/jsxs("div", {
+  let t17;
+  if ($[19] !== t11 || $[20] !== t12 || $[21] !== t16) {
+    t17 = /*#__PURE__*/jsxs("div", {
       className: t11,
-      children: [t12, t14]
+      children: [t12, t16]
     });
-    $[14] = t11;
-    $[15] = t12;
-    $[16] = t14;
-    $[17] = t15;
+    $[19] = t11;
+    $[20] = t12;
+    $[21] = t16;
+    $[22] = t17;
   } else {
-    t15 = $[17];
+    t17 = $[22];
   }
-  return t15;
+  return t17;
 }
-var ScreenButton$1 = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const $ = c(3);
-  let t0;
-  if ($[0] !== props || $[1] !== ref) {
-    t0 = /*#__PURE__*/jsx(ScreenButton, {
-      ...props,
-      refButton: ref
-    });
-    $[0] = props;
-    $[1] = ref;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  return t0;
-});
 
-var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","index":"micromag-editor-buttons-screen-with-preview-index","name":"micromag-editor-buttons-screen-with-preview-name","deleteButton":"micromag-editor-buttons-screen-with-preview-deleteButton","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
+var styles$a = {"button":"micromag-editor-buttons-screen-with-preview-button","index":"micromag-editor-buttons-screen-with-preview-index","name":"micromag-editor-buttons-screen-with-preview-name","deleteButton":"micromag-editor-buttons-screen-with-preview-deleteButton","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
 
 function ScreenWithPreview(t0) {
   const $ = c(40);
@@ -1543,8 +1455,8 @@ function ScreenWithPreview(t0) {
   const t16 = withIndexIndicator || withName;
   let t17;
   if ($[4] !== className || $[5] !== t16) {
-    t17 = classNames([styles$b.button, className, {
-      [styles$b.withIndex]: t16
+    t17 = classNames([styles$a.button, className, {
+      [styles$a.withIndex]: t16
     }]);
     $[4] = className;
     $[5] = t16;
@@ -1576,7 +1488,7 @@ function ScreenWithPreview(t0) {
     t20 = /*#__PURE__*/jsx(ScreenComponent, {
       screen: screen,
       screenState: screenState,
-      className: styles$b.screen,
+      className: styles$a.screen,
       hidden: t19,
       withSize: true
     });
@@ -1591,7 +1503,7 @@ function ScreenWithPreview(t0) {
   let t21;
   if ($[17] !== index || $[18] !== withIndexIndicator) {
     t21 = index !== null && withIndexIndicator ? /*#__PURE__*/jsx("div", {
-      className: styles$b.index,
+      className: styles$a.index,
       children: index + 1
     }) : null;
     $[17] = index;
@@ -1603,7 +1515,7 @@ function ScreenWithPreview(t0) {
   let t22;
   if ($[20] !== finalTitle || $[21] !== withIndexIndicator || $[22] !== withName) {
     t22 = withName && !withIndexIndicator ? /*#__PURE__*/jsx("div", {
-      className: styles$b.name,
+      className: styles$a.name,
       children: finalTitle || null
     }) : null;
     $[20] = finalTitle;
@@ -1616,7 +1528,7 @@ function ScreenWithPreview(t0) {
   let t23;
   if ($[24] !== onDeleteButtonClick || $[25] !== withDeleteButtonOnRepeatables) {
     t23 = withDeleteButtonOnRepeatables ? /*#__PURE__*/jsx("div", {
-      className: styles$b.deleteButton,
+      className: styles$a.deleteButton,
       onClick: onDeleteButtonClick,
       children: /*#__PURE__*/jsx(FontAwesomeIcon, {
         icon: faTimesCircle
@@ -1630,7 +1542,7 @@ function ScreenWithPreview(t0) {
   }
   let t24;
   if ($[27] !== active || $[28] !== finalTitle || $[29] !== href || $[30] !== t17 || $[31] !== t18 || $[32] !== t20 || $[33] !== t21 || $[34] !== t22 || $[35] !== t23) {
-    t24 = /*#__PURE__*/jsxs(ScreenButton$1, {
+    t24 = /*#__PURE__*/jsxs(ScreenButton, {
       href: href,
       active: active,
       className: t17,
@@ -1666,7 +1578,7 @@ function ScreenWithPreview(t0) {
   return t25;
 }
 
-var styles$a = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title","settings":"micromag-editor-partials-screen-states-settings"};
+var styles$9 = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title","settings":"micromag-editor-partials-screen-states-settings"};
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 function ScreenStates({
@@ -1688,16 +1600,16 @@ function ScreenStates({
     id
   }) => id === stateParam) !== -1 ? stateParam : null;
   return /*#__PURE__*/jsx("div", {
-    className: classNames([styles$a.container, className]),
+    className: classNames([styles$9.container, className]),
     children: /*#__PURE__*/jsxs("div", {
       className: "d-flex align-items-end m-n1",
       children: [/*#__PURE__*/jsxs("div", {
-        className: classNames(['p-1 align-self-stretch d-flex flex-column', styles$a.settings]),
+        className: classNames(['p-1 align-self-stretch d-flex flex-column', styles$9.settings]),
         children: [/*#__PURE__*/jsx("h6", {
-          className: classNames(['fw-normal', 'invisible', styles$a.title]),
+          className: classNames(['fw-normal', 'invisible', styles$9.title]),
           children: "Settings"
         }), /*#__PURE__*/jsx(Button, {
-          className: classNames([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+          className: classNames([styles$9.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
           theme: screenParam !== null && field === null ? 'primary' : 'secondary',
           outline: screenParam === null || field !== null,
           size: "lg",
@@ -1767,7 +1679,7 @@ function ScreenStates({
         return /*#__PURE__*/jsxs("div", {
           className: "p-1 align-self-stretch d-flex flex-column",
           children: [/*#__PURE__*/jsx("h6", {
-            className: classNames(['fw-normal', 'text-body-secondary', styles$a.title]),
+            className: classNames(['fw-normal', 'text-body-secondary', styles$9.title]),
             children: /*#__PURE__*/jsx(FormattedMessage, {
               ...label
             })
@@ -1781,7 +1693,7 @@ function ScreenStates({
                 withDeleteButtonOnRepeatables: true,
                 screen: screen,
                 screenState: `${id_0}.${index}`,
-                className: styles$a.button,
+                className: styles$9.button,
                 active: currentState !== null && id_0 === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
                 href: url('screen.field', {
                   screen: screen.id,
@@ -1792,7 +1704,7 @@ function ScreenStates({
             }, index)), !withoutCreate ? /*#__PURE__*/jsx("li", {
               className: "p-1",
               children: /*#__PURE__*/jsx(Button, {
-                className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
+                className: classNames([styles$9.button, styles$9.addButton, 'h-100', 'p-0', 'justify-content-center']),
                 theme: "secondary",
                 outline: true,
                 size: "lg",
@@ -1805,7 +1717,7 @@ function ScreenStates({
           }) : /*#__PURE__*/jsx(ScreenWithPreview, {
             screen: screen,
             screenState: id_0,
-            className: styles$a.button,
+            className: styles$9.button,
             active: id_0 === currentState,
             href: url('screen.field', {
               screen: screen.id,
@@ -1823,7 +1735,7 @@ function ScreenStates({
   });
 }
 
-var styles$9 = {"container":"micromag-editor-preview-container","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","deviceMenu":"micromag-editor-preview-deviceMenu","devices":"micromag-editor-preview-devices","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story"};
+var styles$8 = {"container":"micromag-editor-preview-container","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","deviceMenu":"micromag-editor-preview-deviceMenu","devices":"micromag-editor-preview-devices","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story"};
 
 function EditorPreview(t0) {
   const $ = c(69);
@@ -2060,13 +1972,13 @@ function EditorPreview(t0) {
     t31 = $[38];
   }
   const currentScreenStateId = t31;
-  const t32 = classNames([styles$9.container, screens.map(_temp2$1), className, {
-    [styles$9.withoutDevicesSizes]: withoutDevicesSizes
+  const t32 = classNames([styles$8.container, screens.map(_temp2$1), className, {
+    [styles$8.withoutDevicesSizes]: withoutDevicesSizes
   }]);
   let t33;
   if ($[39] !== currentScreen || $[40] !== currentScreenStateId || $[41] !== currentScreenStates || $[42] !== onChange || $[43] !== value) {
     t33 = currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/jsx("div", {
-      className: classNames([styles$9.top, "px-1"]),
+      className: classNames([styles$8.top, "px-1"]),
       children: /*#__PURE__*/jsx(ScreenStates, {
         screen: currentScreen,
         screenState: currentScreenStateId,
@@ -2086,14 +1998,14 @@ function EditorPreview(t0) {
   let t34;
   if ($[45] !== currentScreenStateId || $[46] !== onScreenChange || $[47] !== screenId || $[48] !== valueParsed || $[49] !== viewerTheme) {
     t34 = /*#__PURE__*/jsx("div", {
-      className: styles$9.viewerContainer,
+      className: styles$8.viewerContainer,
       children: /*#__PURE__*/jsx(PlaybackProvider, {
         children: /*#__PURE__*/jsx(Viewer, {
           story: valueParsed,
           storyIsParsed: true,
           screen: screenId,
           screenState: currentScreenStateId,
-          className: styles$9.story,
+          className: styles$8.story,
           theme: viewerTheme,
           interactions: null,
           renderContext: "edit",
@@ -2118,7 +2030,7 @@ function EditorPreview(t0) {
   let t35;
   if ($[51] !== previewStyle || $[52] !== t34) {
     t35 = /*#__PURE__*/jsx("div", {
-      className: styles$9.preview,
+      className: styles$8.preview,
       style: previewStyle,
       children: t34
     });
@@ -2131,9 +2043,9 @@ function EditorPreview(t0) {
   let t36;
   if ($[54] !== bottomRef || $[55] !== t35) {
     t36 = /*#__PURE__*/jsx("div", {
-      className: styles$9.bottom,
+      className: styles$8.bottom,
       children: /*#__PURE__*/jsx("div", {
-        className: styles$9.inner,
+        className: styles$8.inner,
         ref: bottomRef,
         children: t35
       })
@@ -2147,14 +2059,14 @@ function EditorPreview(t0) {
   let t37;
   if ($[57] !== deviceId || $[58] !== devices || $[59] !== onClickDeviceItem || $[60] !== withoutDevicesSizes) {
     t37 = !withoutDevicesSizes ? /*#__PURE__*/jsx("div", {
-      className: styles$9.deviceMenu,
+      className: styles$8.deviceMenu,
       children: /*#__PURE__*/jsx(DevicesMenu, {
         items: devices.map(it_2 => ({
           ...it_2,
           active: it_2.id === deviceId
         })),
         onClickItem: onClickDeviceItem,
-        className: styles$9.devices
+        className: styles$8.devices
       })
     }) : null;
     $[57] = deviceId;
@@ -2168,7 +2080,7 @@ function EditorPreview(t0) {
   let t38;
   if ($[62] !== t33 || $[63] !== t36 || $[64] !== t37) {
     t38 = /*#__PURE__*/jsxs("div", {
-      className: styles$9.inner,
+      className: styles$8.inner,
       children: [t33, t36, t37]
     });
     $[62] = t33;
@@ -2193,7 +2105,7 @@ function EditorPreview(t0) {
   return t39;
 }
 function _temp2$1(screenName) {
-  return styles$9[`screen-${screenName}`];
+  return styles$8[`screen-${screenName}`];
 }
 function _temp$3(it_1) {
   return it_1.match(/^[0-9]+$/) !== null;
@@ -2520,10 +2432,10 @@ const sortableTreeKeyboardCoordinates = (context, indentationWidth) => (event, {
   return undefined;
 };
 
-var styles$8 = {"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","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
+var styles$7 = {"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","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
 
 const SortableTreeItemActions = function (t0) {
-  const $ = c(70);
+  const $ = c(71);
   let depth;
   let indentationWidth;
   let props;
@@ -2635,15 +2547,17 @@ const SortableTreeItemActions = function (t0) {
   const children = t18 === undefined ? null : t18;
   const containerRef = t19 === undefined ? null : t19;
   const t20 = onCollapse !== null;
-  let t21;
-  if ($[23] !== clone || $[24] !== disableInteraction || $[25] !== disableSelection || $[26] !== ghost || $[27] !== indicator || $[28] !== t20) {
-    t21 = classNames([styles$8.wrapper, {
-      [styles$8.clone]: clone,
-      [styles$8.ghost]: ghost,
-      [styles$8.indicator]: indicator,
-      [styles$8.disableSelection]: disableSelection,
-      [styles$8.disableInteraction]: disableInteraction,
-      [styles$8.withChildren]: t20
+  const t21 = onCollapse !== null;
+  let t22;
+  if ($[23] !== clone || $[24] !== disableInteraction || $[25] !== disableSelection || $[26] !== ghost || $[27] !== indicator || $[28] !== t20 || $[29] !== t21) {
+    t22 = classNames([styles$7.wrapper, "text-body", {
+      [styles$7.clone]: clone,
+      [styles$7.ghost]: ghost,
+      [styles$7.indicator]: indicator,
+      [styles$7.disableSelection]: disableSelection,
+      [styles$7.disableInteraction]: disableInteraction,
+      [styles$7.withChildren]: t20,
+      "bg-body-secondary": t21
     }]);
     $[23] = clone;
     $[24] = disableInteraction;
@@ -2652,165 +2566,166 @@ const SortableTreeItemActions = function (t0) {
     $[27] = indicator;
     $[28] = t20;
     $[29] = t21;
+    $[30] = t22;
   } else {
-    t21 = $[29];
+    t22 = $[30];
   }
-  const t22 = `${indentationWidth * depth}px`;
-  const t23 = `${5 * depth}px`;
-  let t24;
-  if ($[30] !== t22 || $[31] !== t23) {
-    t24 = {
-      marginLeft: t22,
-      marginRight: t23
+  const t23 = `${indentationWidth * depth}px`;
+  const t24 = `${5 * depth}px`;
+  let t25;
+  if ($[31] !== t23 || $[32] !== t24) {
+    t25 = {
+      marginLeft: t23,
+      marginRight: t24
     };
-    $[30] = t22;
     $[31] = t23;
     $[32] = t24;
-  } else {
-    t24 = $[32];
-  }
-  let t25;
-  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-    t25 = classNames([styles$8.button, styles$8.handle]);
     $[33] = t25;
   } else {
     t25 = $[33];
   }
   let t26;
   if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-    t26 = /*#__PURE__*/jsx(FontAwesomeIcon, {
-      className: styles$8.icon,
-      icon: faGripLines
-    });
+    t26 = classNames([styles$7.button, styles$7.handle]);
     $[34] = t26;
   } else {
     t26 = $[34];
   }
   let t27;
-  if ($[35] !== handleProps) {
-    t27 = /*#__PURE__*/jsx("button", {
-      className: t25,
+  if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+    t27 = /*#__PURE__*/jsx(FontAwesomeIcon, {
+      className: styles$7.icon,
+      icon: faGripLines
+    });
+    $[35] = t27;
+  } else {
+    t27 = $[35];
+  }
+  let t28;
+  if ($[36] !== handleProps) {
+    t28 = /*#__PURE__*/jsx("button", {
+      className: t26,
       type: "button",
       ...handleProps,
-      children: t26
+      children: t27
     });
-    $[35] = handleProps;
-    $[36] = t27;
+    $[36] = handleProps;
+    $[37] = t28;
   } else {
-    t27 = $[36];
+    t28 = $[37];
   }
-  let t28;
-  if ($[37] !== clone || $[38] !== onRemove) {
-    t28 = !clone && onRemove ? /*#__PURE__*/jsx("button", {
+  let t29;
+  if ($[38] !== clone || $[39] !== onRemove) {
+    t29 = !clone && onRemove ? /*#__PURE__*/jsx("button", {
       type: "button",
       onClick: onRemove,
       children: /*#__PURE__*/jsx(FontAwesomeIcon, {
         icon: faTimes
       })
     }) : null;
-    $[37] = clone;
-    $[38] = onRemove;
-    $[39] = t28;
+    $[38] = clone;
+    $[39] = onRemove;
+    $[40] = t29;
   } else {
-    t28 = $[39];
+    t29 = $[40];
   }
-  let t29;
-  if ($[40] !== childCount || $[41] !== clone || $[42] !== showCount) {
-    t29 = clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/jsx("span", {
-      className: styles$8.count,
+  let t30;
+  if ($[41] !== childCount || $[42] !== clone || $[43] !== showCount) {
+    t30 = clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/jsx("span", {
+      className: styles$7.count,
       children: childCount
     }) : null;
-    $[40] = childCount;
-    $[41] = clone;
-    $[42] = showCount;
-    $[43] = t29;
+    $[41] = childCount;
+    $[42] = clone;
+    $[43] = showCount;
+    $[44] = t30;
   } else {
-    t29 = $[43];
+    t30 = $[44];
   }
-  let t30;
-  if ($[44] !== childCount || $[45] !== collapsed || $[46] !== onCollapse || $[47] !== showCollapsedCount) {
-    t30 = showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/jsx("span", {
-      className: styles$8.collapsedCount,
+  let t31;
+  if ($[45] !== childCount || $[46] !== collapsed || $[47] !== onCollapse || $[48] !== showCollapsedCount) {
+    t31 = showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/jsx("span", {
+      className: styles$7.collapsedCount,
       children: childCount
     }) : null;
-    $[44] = childCount;
-    $[45] = collapsed;
-    $[46] = onCollapse;
-    $[47] = showCollapsedCount;
-    $[48] = t30;
+    $[45] = childCount;
+    $[46] = collapsed;
+    $[47] = onCollapse;
+    $[48] = showCollapsedCount;
+    $[49] = t31;
   } else {
-    t30 = $[48];
+    t31 = $[49];
   }
-  let t31;
-  if ($[49] !== collapsed || $[50] !== depth || $[51] !== onCollapse) {
-    t31 = onCollapse && depth === 0 ? /*#__PURE__*/jsx("button", {
+  let t32;
+  if ($[50] !== collapsed || $[51] !== depth || $[52] !== onCollapse) {
+    t32 = onCollapse && depth === 0 ? /*#__PURE__*/jsx("button", {
       type: "button",
       onClick: onCollapse,
-      className: classNames(styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed),
+      className: classNames(styles$7.button, styles$7.collapse, collapsed && styles$7.collapsed),
       children: /*#__PURE__*/jsx(FontAwesomeIcon, {
         icon: faAngleDown
       })
     }) : null;
-    $[49] = collapsed;
-    $[50] = depth;
-    $[51] = onCollapse;
-    $[52] = t31;
+    $[50] = collapsed;
+    $[51] = depth;
+    $[52] = onCollapse;
+    $[53] = t32;
   } else {
-    t31 = $[52];
+    t32 = $[53];
   }
-  let t32;
-  if ($[53] !== children) {
-    t32 = /*#__PURE__*/jsx("div", {
-      className: styles$8.children,
+  let t33;
+  if ($[54] !== children) {
+    t33 = /*#__PURE__*/jsx("div", {
+      className: styles$7.children,
       children: children
     });
-    $[53] = children;
-    $[54] = t32;
+    $[54] = children;
+    $[55] = t33;
   } else {
-    t32 = $[54];
+    t33 = $[55];
   }
-  let t33;
-  if ($[55] !== containerRef || $[56] !== style || $[57] !== t27 || $[58] !== t28 || $[59] !== t29 || $[60] !== t30 || $[61] !== t31 || $[62] !== t32) {
-    t33 = /*#__PURE__*/jsxs("div", {
-      className: styles$8.inner,
+  let t34;
+  if ($[56] !== containerRef || $[57] !== style || $[58] !== t28 || $[59] !== t29 || $[60] !== t30 || $[61] !== t31 || $[62] !== t32 || $[63] !== t33) {
+    t34 = /*#__PURE__*/jsxs("div", {
+      className: styles$7.inner,
       ref: containerRef,
       style: style,
-      children: [t27, t28, t29, t30, t31, t32]
+      children: [t28, t29, t30, t31, t32, t33]
     });
-    $[55] = containerRef;
-    $[56] = style;
-    $[57] = t27;
+    $[56] = containerRef;
+    $[57] = style;
     $[58] = t28;
     $[59] = t29;
     $[60] = t30;
     $[61] = t31;
     $[62] = t32;
     $[63] = t33;
+    $[64] = t34;
   } else {
-    t33 = $[63];
+    t34 = $[64];
   }
-  let t34;
-  if ($[64] !== props || $[65] !== t21 || $[66] !== t24 || $[67] !== t33 || $[68] !== wrapperRef) {
-    t34 = /*#__PURE__*/jsx("div", {
-      className: t21,
+  let t35;
+  if ($[65] !== props || $[66] !== t22 || $[67] !== t25 || $[68] !== t34 || $[69] !== wrapperRef) {
+    t35 = /*#__PURE__*/jsx("div", {
+      className: t22,
       ref: wrapperRef,
-      style: t24,
+      style: t25,
       ...props,
-      children: t33
+      children: t34
     });
-    $[64] = props;
-    $[65] = t21;
-    $[66] = t24;
-    $[67] = t33;
-    $[68] = wrapperRef;
-    $[69] = t34;
+    $[65] = props;
+    $[66] = t22;
+    $[67] = t25;
+    $[68] = t34;
+    $[69] = wrapperRef;
+    $[70] = t35;
   } else {
-    t34 = $[69];
+    t35 = $[70];
   }
-  return t34;
+  return t35;
 };
 
-var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
+var styles$6 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
 
 const animateLayoutChanges = ({
   isSorting,
@@ -2982,7 +2897,7 @@ function SortableTreeItem(t0) {
   const cancellingPointerUp = t17;
   let t18;
   if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-    t18 = classNames([styles$7.container]);
+    t18 = classNames([styles$6.container]);
     $[30] = t18;
   } else {
     t18 = $[30];
@@ -3006,7 +2921,7 @@ function SortableTreeItem(t0) {
   let t20;
   if ($[36] !== Component || $[37] !== value) {
     t20 = Component !== null ? /*#__PURE__*/jsx("div", {
-      className: styles$7.parent,
+      className: styles$6.parent,
       children: /*#__PURE__*/jsx(Component, {
         ...value
       })
@@ -3020,7 +2935,7 @@ function SortableTreeItem(t0) {
   let t21;
   if ($[39] !== Component || $[40] !== childValue) {
     t21 = childValue !== null ? /*#__PURE__*/jsx("div", {
-      className: styles$7.child,
+      className: styles$6.child,
       children: /*#__PURE__*/jsx(Component, {
         ...childValue
       })
@@ -3069,7 +2984,7 @@ function SortableTreeItem(t0) {
   return t22;
 }
 
-var styles$6 = {"item":"micromag-editor-sortable-sortable-tree-item","parent":"micromag-editor-sortable-sortable-tree-parent","group":"micromag-editor-sortable-sortable-tree-group","isLastChild":"micromag-editor-sortable-sortable-tree-isLastChild"};
+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"};
 
 const initialItems = [{
   id: 'Home',
@@ -3378,10 +3293,11 @@ function SortableTree({
           parentId: parentId_1 = null
         }) => parentId_1 === id_16) : null;
         return /*#__PURE__*/jsx("div", {
-          className: classNames([styles$6.item, {
-            [styles$6.parent]: onCollapse !== null && !collapsed_1,
-            [styles$6.group]: depth_0 === 1,
-            [styles$6.isLastChild]: next === null
+          className: classNames([styles$5.item, 'pb-2', {
+            [styles$5.parent]: onCollapse !== null && !collapsed_1,
+            [styles$5.group]: depth_0 === 1,
+            'bg-body-secondary': depth_0 === 1,
+            [styles$5.isLastChild]: next === null
           }]),
           children: /*#__PURE__*/jsx(SortableTreeItem, {
             id: id_16,
@@ -3403,7 +3319,7 @@ function SortableTree({
         dropAnimation: dropAnimation,
         modifiers: indicator ? [adjustTranslate] : undefined,
         children: activeId && activeItem ? /*#__PURE__*/jsx("div", {
-          className: styles$6.item,
+          className: styles$5.item,
           children: /*#__PURE__*/jsx(SortableTreeItem, {
             id: activeId,
             depth: activeItem.depth,
@@ -3423,7 +3339,7 @@ function SortableTree({
   });
 }
 
-var styles$5 = {"items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","container":"micromag-editor-menus-screens-container","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
+var styles$4 = {"items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","container":"micromag-editor-menus-screens-container","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
 
 const emptyArray = [];
 function ScreensMenu(t0) {
@@ -3476,7 +3392,7 @@ function ScreensMenu(t0) {
       const itemCustomClassName = t18 === undefined ? null : t18;
       const onClick = t19 === undefined ? null : t19;
       return /*#__PURE__*/jsxs("li", {
-        className: classNames([styles$5.item, itemCustomClassName, itemClassName, {}]),
+        className: classNames([styles$4.item, itemCustomClassName, itemClassName, {}]),
         "data-screen-id": item.id,
         children: [/*#__PURE__*/jsx(ScreenWithPreview, {
           index: index,
@@ -3494,7 +3410,7 @@ function ScreensMenu(t0) {
           onClick: onClick,
           onClickItem: onClickItem
         }), settings !== null ? /*#__PURE__*/jsx("div", {
-          className: classNames([settingsClassName, styles$5.settings, "p-2"]),
+          className: classNames([settingsClassName, styles$4.settings, "p-2"]),
           children: isFunction(settings) ? settings(index) : settings
         }) : null]
       }, item.id);
@@ -3526,11 +3442,11 @@ function ScreensMenu(t0) {
   const sortableItems = t17;
   let t18;
   if ($[14] !== className || $[15] !== isTree || $[16] !== isVertical || $[17] !== noWrap || $[18] !== withPlaceholder) {
-    t18 = classNames([styles$5.container, className, {
-      [styles$5.noWrap]: noWrap,
-      [styles$5.isVertical]: isVertical,
-      [styles$5.isTree]: isTree,
-      [styles$5.withPlaceholder]: withPlaceholder
+    t18 = classNames([styles$4.container, className, {
+      [styles$4.noWrap]: noWrap,
+      [styles$4.isVertical]: isVertical,
+      [styles$4.isTree]: isTree,
+      [styles$4.withPlaceholder]: withPlaceholder
     }]);
     $[14] = className;
     $[15] = isTree;
@@ -3567,7 +3483,7 @@ function ScreensMenu(t0) {
       delayOnTouchStart: true,
       delay: 2,
       tag: "ul",
-      className: styles$5.items,
+      className: styles$4.items,
       children: itemsElements
     }) : null;
     $[26] = isTree;
@@ -3583,7 +3499,7 @@ function ScreensMenu(t0) {
   let t21;
   if ($[33] !== isTree || $[34] !== items.length || $[35] !== itemsElements || $[36] !== sortable) {
     t21 = !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/jsx("ul", {
-      className: styles$5.items,
+      className: styles$4.items,
       children: itemsElements
     }) : null;
     $[33] = isTree;
@@ -3649,9 +3565,8 @@ function _temp$2(t0) {
   };
 }
 
-var styles$4 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
+var styles$3 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","screen":"micromag-editor-menus-screen-types-screen"};
 
-/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 function ScreenTypes({
   screens = null,
   selectedTypes = null,
@@ -3704,9 +3619,9 @@ function ScreenTypes({
         screen: definition,
         title,
         className: classNames({
-          'bg-secondary': !selected,
+          'bg-body': !selected,
           'bg-primary': selected,
-          [styles$4.selected]: selected
+          [styles$3.selected]: selected
         })
       };
       return groupIndex !== -1 ? [...allGroups.slice(0, groupIndex), {
@@ -3722,30 +3637,30 @@ function ScreenTypes({
     return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
   }, [finalDefinitions, selectedTypes]);
   return /*#__PURE__*/jsx("div", {
-    className: classNames([styles$4.container, className]),
+    className: classNames([styles$3.container, className]),
     children: /*#__PURE__*/jsx("div", {
-      className: styles$4.rows,
+      className: styles$3.rows,
       children: groups.map(({
         id: id_1,
         name,
         items
       }) => /*#__PURE__*/jsxs("div", {
-        className: styles$4.row,
+        className: styles$3.row,
         children: [/*#__PURE__*/jsx(Label, {
           children: name
         }), /*#__PURE__*/jsx("div", {
-          className: styles$4.layouts,
+          className: styles$3.layouts,
           children: /*#__PURE__*/jsx(ScreensMenu, {
             items: items,
             withPlaceholder: true,
             withName: true,
-            itemClassName: classNames([styles$4.screen, 'border', 'rounded', {
+            itemClassName: classNames([styles$3.screen, 'border', 'rounded', {
               'border-secondary': selectedTypes === null,
-              'border-dark': selectedTypes !== null,
+              border: selectedTypes !== null,
               'bg-secondary': selectedTypes === null,
               'text-secondary': selectedTypes !== null
             }]),
-            buttonClassName: styles$4.button,
+            buttonClassName: styles$3.button,
             onClickItem: onClickItem
           })
         })]
@@ -3754,63 +3669,66 @@ function ScreenTypes({
   });
 }
 
-var styles$3 = {"container":"micromag-editor-modals-screen-types-container"};
-
 function ScreenTypesModal(t0) {
   const $ = c(10);
   const {
     selectedTypes: t1,
     className: t2,
-    onRequestClose: t3,
+    onClosed: t3,
     onClickScreenType: t4
   } = t0;
   const selectedTypes = t1 === undefined ? null : t1;
   const className = t2 === undefined ? null : t2;
-  const onRequestClose = t3 === undefined ? null : t3;
+  const onClosed = t3 === undefined ? null : t3;
   const onClickScreenType = t4 === undefined ? null : t4;
+  const [opened, setOpened] = useState(true);
   let t5;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /*#__PURE__*/jsx(FormattedMessage, {
-      id: "QBaiO0",
-      defaultMessage: "Add a screen"
-    });
+    t5 = () => {
+      setOpened(false);
+    };
     $[0] = t5;
   } else {
     t5 = $[0];
   }
+  const requestClose = t5;
   let t6;
-  if ($[1] !== className) {
-    t6 = classNames([styles$3.container, className]);
-    $[1] = className;
-    $[2] = t6;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "QBaiO0",
+      defaultMessage: "Add a screen"
+    });
+    $[1] = t6;
   } else {
-    t6 = $[2];
+    t6 = $[1];
   }
   let t7;
-  if ($[3] !== onClickScreenType || $[4] !== selectedTypes) {
+  if ($[2] !== onClickScreenType || $[3] !== selectedTypes) {
     t7 = /*#__PURE__*/jsx(ScreenTypes, {
       selectedTypes: selectedTypes,
-      className: styles$3.menu,
       onClickItem: onClickScreenType
     });
-    $[3] = onClickScreenType;
-    $[4] = selectedTypes;
-    $[5] = t7;
+    $[2] = onClickScreenType;
+    $[3] = selectedTypes;
+    $[4] = t7;
   } else {
-    t7 = $[5];
+    t7 = $[4];
   }
   let t8;
-  if ($[6] !== onRequestClose || $[7] !== t6 || $[8] !== t7) {
-    t8 = /*#__PURE__*/jsx(Modal, {
-      children: /*#__PURE__*/jsx(ModalDialog, {
-        title: t5,
-        className: t6,
-        onClose: onRequestClose,
-        children: t7
-      })
+  if ($[5] !== className || $[6] !== onClosed || $[7] !== opened || $[8] !== t7) {
+    t8 = /*#__PURE__*/jsx(Dialog, {
+      id: "screen-types",
+      title: t6,
+      size: "lg",
+      visible: opened,
+      requestClose: requestClose,
+      onClosed: onClosed,
+      className: className,
+      children: t7
     });
-    $[6] = onRequestClose;
-    $[7] = t6;
+    $[5] = className;
+    $[6] = onClosed;
+    $[7] = opened;
     $[8] = t7;
     $[9] = t8;
   } else {
@@ -3945,14 +3863,14 @@ function EditorScreens({
     onClickScreen(currentScreen);
   }, [screens, isTheme, createScreenFromDefinition, push, onClickScreen]);
   const onClickAdd = useCallback(() => setCreateModalOpened(true), [setCreateModalOpened]);
-  const onCreateModalRequestClose = useCallback(() => setCreateModalOpened(false), [setCreateModalOpened]);
+  const onCreateModalClosed = useCallback(() => setCreateModalOpened(false), [setCreateModalOpened]);
   return /*#__PURE__*/jsxs("div", {
     className: classNames(['d-flex', 'flex-column', styles$2.container, className]),
     children: [/*#__PURE__*/jsxs(Navbar, {
       compact: true,
       noWrap: true,
       withoutCollapse: true,
-      className: classNames(['sticky-top', styles$2.navbar]),
+      className: classNames(['sticky-top', 'border-bottom', styles$2.navbar]),
       children: [/*#__PURE__*/jsx("strong", {
         className: "mb-0 me-auto",
         children: /*#__PURE__*/jsx(FormattedMessage, {
@@ -4036,7 +3954,7 @@ function EditorScreens({
         type: type_0
       }) => type_0) : [],
       onClickScreenType: onClickScreenType,
-      onRequestClose: onCreateModalRequestClose
+      onClosed: onCreateModalClosed
     }) : null]
   });
 }
@@ -4263,7 +4181,7 @@ function Editor(t0) {
   useEffect(t26, t27);
   let t28;
   if ($[30] !== className || $[31] !== fullscreen || $[32] !== screenSize) {
-    t28 = classNames([styles$1.container, screenSize !== null ? screenSize.screens.map(_temp$1) : null, className, {
+    t28 = classNames([styles$1.container, "bg-body-tertiary", "text-body", screenSize !== null ? screenSize.screens.map(_temp$1) : null, className, {
       [styles$1.fullscreen]: fullscreen
     }]);
     $[30] = className;
@@ -4321,7 +4239,6 @@ function Editor(t0) {
   let t32;
   if ($[39] !== t29 || $[40] !== t30 || $[41] !== t31) {
     t32 = /*#__PURE__*/jsxs(Navbar, {
-      theme: "light",
       compact: true,
       noWrap: true,
       withoutCollapse: true,
@@ -4386,7 +4303,7 @@ function Editor(t0) {
   const t38 = !isMobile || mobileView === "preview";
   let t39;
   if ($[55] !== t38) {
-    t39 = classNames([styles$1.center, {
+    t39 = classNames([styles$1.center, "bg-body-secondary", {
       [styles$1.visible]: t38
     }]);
     $[55] = t38;