@micromag/core 0.2.412 → 0.3.0

package/es/components.js

@@ -53,7 +53,7 @@ var Label = function Label(_ref) {
 Label.propTypes = propTypes$J;
 Label.defaultProps = defaultProps$J;
 
-var styles$s = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","withIcon":"micromag-core-buttons-button-withIcon","label":"micromag-core-buttons-button-label","right":"micromag-core-buttons-button-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
+var styles$t = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","withIcon":"micromag-core-buttons-button-withIcon","label":"micromag-core-buttons-button-label","right":"micromag-core-buttons-button-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
 var _excluded$8 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$I = {
@@ -160,25 +160,25 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$s.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$t.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$s.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$t.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$s.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$t.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$s.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$t.center, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$s.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$t.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
   var buttonClassNames = classNames([(_ref7 = {
     btn: withStyle
-  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7), styles$s.container, (_ref8 = {}, _defineProperty(_ref8, styles$s.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$s.withIcon, hasIcon), _defineProperty(_ref8, styles$s.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$s.withText, text !== null), _defineProperty(_ref8, styles$s.withShadow, withShadow), _defineProperty(_ref8, styles$s.isSmall, small), _defineProperty(_ref8, styles$s.isBig, big), _defineProperty(_ref8, styles$s.isLink, href !== null), _defineProperty(_ref8, styles$s.asLink, asLink), _defineProperty(_ref8, styles$s.isDisabled, disabled), _defineProperty(_ref8, styles$s.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7), styles$t.container, (_ref8 = {}, _defineProperty(_ref8, styles$t.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$t.withIcon, hasIcon), _defineProperty(_ref8, styles$t.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$t.withText, text !== null), _defineProperty(_ref8, styles$t.withShadow, withShadow), _defineProperty(_ref8, styles$t.isSmall, small), _defineProperty(_ref8, styles$t.isBig, big), _defineProperty(_ref8, styles$t.isLink, href !== null), _defineProperty(_ref8, styles$t.asLink, asLink), _defineProperty(_ref8, styles$t.isDisabled, disabled), _defineProperty(_ref8, styles$t.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
 
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$s.linkDisabled, disabled)]);
+    }, styles$t.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -208,7 +208,7 @@ var Button$1 = function Button(_ref) {
 Button$1.propTypes = propTypes$I;
 Button$1.defaultProps = defaultProps$I;
 
-var styles$r = {};
+var styles$s = {};
 
 var _excluded$7 = ["className", "onClick", "theme"];
 var propTypes$H = {
@@ -239,7 +239,7 @@ var Buttons = function Buttons(_ref) {
       buttonClassName = _ref.buttonClassName,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$r.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$s.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -254,7 +254,7 @@ var Buttons = function Buttons(_ref) {
 
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames([styles$r.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames([styles$s.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -398,7 +398,7 @@ var FieldForm = function FieldForm(_ref) {
 FieldForm.propTypes = propTypes$F;
 FieldForm.defaultProps = defaultProps$F;
 
-var styles$q = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
+var styles$r = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
 var propTypes$E = {
   action: PropTypes$1.string.isRequired,
@@ -577,7 +577,7 @@ var Form = function Form(_ref) {
 
   return /*#__PURE__*/React.createElement("form", {
     action: action,
-    className: classNames([styles$q.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$r.container, _defineProperty({}, className, className !== null)]),
     method: method,
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
@@ -587,7 +587,7 @@ var Form = function Form(_ref) {
     outline: true,
     onClick: closeFieldForm
   })) : null, fields && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$q.panel]),
+    className: classNames(['w-100', styles$r.panel]),
     key: "field"
   }, /*#__PURE__*/React.createElement(FieldForm, {
     name: fieldParams.replace(/\//g, '.'),
@@ -603,11 +603,11 @@ var Form = function Form(_ref) {
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
-    className: classNames([styles$q.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames([styles$r.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
   }) : null, generalError ? /*#__PURE__*/React.createElement("p", {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$q.actions, (_ref4 = {}, _defineProperty(_ref4, styles$q[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames([styles$r.actions, (_ref4 = {}, _defineProperty(_ref4, styles$r[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -615,7 +615,7 @@ var Form = function Form(_ref) {
     theme: "secondary",
     outline: true,
     disabled: status === 'loading',
-    className: classNames(['mr-2', _defineProperty({}, cancelClassName, cancelClassName !== null)])
+    className: classNames(['me-2', _defineProperty({}, cancelClassName, cancelClassName !== null)])
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "PyxZY2",
     defaultMessage: [{
@@ -624,7 +624,7 @@ var Form = function Form(_ref) {
     }]
   })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
-    className: styles$q.buttons
+    className: styles$r.buttons
   }) : /*#__PURE__*/React.createElement(Button$1, {
     type: "submit",
     theme: "primary",
@@ -643,7 +643,7 @@ var Form = function Form(_ref) {
 Form.propTypes = propTypes$E;
 Form.defaultProps = defaultProps$E;
 
-var styles$p = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
+var styles$q = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$4 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$D = {
@@ -676,12 +676,12 @@ var Link = function Link(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$4);
 
   return external ? /*#__PURE__*/React.createElement("a", Object.assign({
-    className: classNames([className, _defineProperty({}, styles$p.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$q.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
   }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(Link$1, Object.assign({
-    className: classNames([className, _defineProperty({}, styles$p.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$q.withoutStyle, withoutStyle)]),
     to: href
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
@@ -830,7 +830,7 @@ var Card = function Card(_ref) {
   if (onClick !== null) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classNames(['p-0', 'text-left', cardClassName]),
+      className: classNames(['p-0', 'text-start', cardClassName]),
       onClick: onClick
     }, cardInner);
   }
@@ -916,7 +916,7 @@ var Spinner = function Spinner(_ref) {
 Spinner.propTypes = propTypes$B;
 Spinner.defaultProps = defaultProps$B;
 
-var styles$o = {};
+var styles$p = {};
 
 var _excluded$2 = ["description", "loading", "children", "className"];
 var propTypes$A = {
@@ -940,14 +940,14 @@ var FormPanel = function FormPanel(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$2);
 
   return /*#__PURE__*/React.createElement(Card, Object.assign({
-    className: classNames([styles$o.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
 };
 
 FormPanel.propTypes = propTypes$A;
 FormPanel.defaultProps = defaultProps$A;
 
-var styles$n = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
+var styles$o = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
 var propTypes$z = {
   items: PropTypes.menuItems,
@@ -976,7 +976,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   return /*#__PURE__*/React.createElement("nav", {
     className: className
   }, /*#__PURE__*/React.createElement("ol", {
-    className: classNames([styles$n.container, 'breadcrumb', 'mb-0', {
+    className: classNames([styles$o.container, 'breadcrumb', 'mb-0', {
       'p-0': withoutBar,
       'bg-transparent': withoutBar,
       'rounded-0': withoutBar,
@@ -994,7 +994,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     return /*#__PURE__*/React.createElement("li", {
       className: classNames(['breadcrumb-item', (_ref3 = {
         active: active
-      }, _defineProperty(_ref3, styles$n.arrow, separator === 'arrow'), _defineProperty(_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
+      }, _defineProperty(_ref3, styles$o.arrow, separator === 'arrow'), _defineProperty(_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
       key: "item-".concat(index)
     }, active ? /*#__PURE__*/React.createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React.createElement(Link$1, {
       to: url,
@@ -1010,6 +1010,8 @@ var Breadcrumb = function Breadcrumb(_ref) {
 Breadcrumb.propTypes = propTypes$z;
 Breadcrumb.defaultProps = defaultProps$z;
 
+var styles$n = {"start":"micromag-core-menus-dropdown-start","end":"micromag-core-menus-dropdown-end"};
+
 var _excluded$1 = ["id", "type", "className", "label", "children", "onClick", "active"];
 var propTypes$y = {
   items: PropTypes.menuItems,
@@ -1051,7 +1053,7 @@ var Dropdown = function Dropdown(_ref) {
   }, [refContainer.current, onClickOutside]);
   useDocumentEvent('click', onDocumentClick, visible);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['dropdown-menu', (_ref2 = {}, _defineProperty(_ref2, "dropdown-menu-".concat(align), align !== null), _defineProperty(_ref2, "show", visible), _defineProperty(_ref2, className, className !== null), _ref2)]),
+    className: classNames(['dropdown-menu', (_ref2 = {}, _defineProperty(_ref2, styles$n[align], align !== null), _defineProperty(_ref2, "show", visible), _defineProperty(_ref2, className, className !== null), _ref2)]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _ref3;
@@ -1076,10 +1078,11 @@ var Dropdown = function Dropdown(_ref) {
     if (type === 'link') {
       ItemComponent = Link;
     } else if (type === 'button') {
-      ItemComponent = Button$1;
-      itemProps.type = 'button';
+      ItemComponent = 'button';
     } else if (type === 'header') {
       ItemComponent = 'h6';
+    } else if (type === 'divider') {
+      ItemComponent = 'hr';
     }
 
     var finalOnClickItem = customOnClick !== null || type === 'link' && onClickItem !== null ? function (e) {
@@ -1091,16 +1094,16 @@ var Dropdown = function Dropdown(_ref) {
         onClickItem(e);
       }
     } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
+    return ItemComponent !== null ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
       key: "item-".concat(index),
-      className: classNames(['d-block', 'w-100', (_ref3 = {
-        'dropdown-item': type === 'link',
+      className: classNames([(_ref3 = {
+        'dropdown-item': type === 'link' || type === 'button',
         'dropdown-divider': type === 'divider',
         'dropdown-header': type === 'header',
         active: active
       }, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, customClassName, customClassName !== null), _ref3)]),
       onClick: finalOnClickItem
-    }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren) : null;
+    }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
   }));
 };
 
@@ -1309,6 +1312,10 @@ var Navbar = function Navbar(_ref) {
   }, [setMenuVisible, menuVisible]);
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames(['navbar', (_ref2 = {}, _defineProperty(_ref2, "bg-".concat(theme), theme !== null), _defineProperty(_ref2, "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), _defineProperty(_ref2, "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), _defineProperty(_ref2, "navbar-expand-".concat(size), !withoutCollapse), _defineProperty(_ref2, 'py-2', compact), _defineProperty(_ref2, 'px-2', compact), _defineProperty(_ref2, 'flex-nowrap', noWrap), _defineProperty(_ref2, className, className !== null), _ref2)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['container-fluid', {
+      'px-0': true
+    }])
   }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link, {
     className: classNames(['navbar-brand', _defineProperty({
       'py-0': compact
@@ -1335,7 +1342,7 @@ var Navbar = function Navbar(_ref) {
     className: classNames(['navbar-collapse', 'collapse', {
       show: menuVisible
     }])
-  }, children) : children);
+  }, children) : children));
 };
 
 Navbar.propTypes = propTypes$w;
@@ -1693,12 +1700,10 @@ var ModalDialog = function ModalDialog(_ref) {
     className: "modal-title"
   }, /*#__PURE__*/React.createElement(Label, null, title)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "close text-light",
+    className: "btn-close",
     "aria-label": "Close",
     onClick: onClickClose
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true"
-  }, "\xD7"))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classNames(['modal-body', styles$i.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
     }])
@@ -2277,17 +2282,17 @@ var Media = function Media(_ref) {
       bodyClassName = _ref.bodyClassName,
       titleClassName = _ref.titleClassName;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['media', styles$c.container, _defineProperty({}, className, className !== null)])
+    className: classNames(['card', styles$c.container, _defineProperty({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames(['mr-3', styles$c.thumbnail, _defineProperty({
+    className: classNames(['me-3', styles$c.thumbnail, _defineProperty({
       'align-self-start': thumbnailAlign === 'top',
       'align-self-center': thumbnailAlign === 'center',
       'align-self-end': thumbnailAlign === 'bottom'
     }, thumbnailClassName, thumbnailClassName !== null)])
   }) : thumbnail, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['media-body', styles$c.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+    className: classNames(['card-body', styles$c.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
   }, title !== null ? /*#__PURE__*/React.createElement("h5", {
     className: classNames(['mt-0', styles$c.title, _defineProperty({}, titleClassName, titleClassName !== null)])
   }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children));
@@ -2333,6 +2338,10 @@ var target = PropTypes$1.oneOf(['_blank', '_self', '_parent']);
 var interaction = PropTypes$1.oneOf(['tap', 'swipe']);
 PropTypes$1.arrayOf(interaction);
 PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number, PropTypes$1.array]));
+PropTypes$1.shape({
+  currentTime: PropTypes$1.number,
+  duration: PropTypes$1.number
+});
 /**
  * Site
  */
@@ -2380,7 +2389,7 @@ PropTypes$1.oneOf(bootstrapThemeStrings);
 PropTypes$1.oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
 PropTypes$1.oneOf(['lg', 'sm', null]);
 PropTypes$1.oneOf(['lg', 'sm', null]);
-PropTypes$1.oneOf(['left', 'right']);
+PropTypes$1.oneOf(['start', 'end']);
 var component = PropTypes$1.oneOfType([PropTypes$1.object, PropTypes$1.func]);
 PropTypes$1.objectOf(component);
 /**
@@ -2731,7 +2740,8 @@ PropTypes$1.shape({
   screen: PropTypes$1.string,
   screens: PropTypes$1.arrayOf(PropTypes$1.string),
   width: PropTypes$1.number,
-  height: PropTypes$1.number
+  height: PropTypes$1.number,
+  landscape: PropTypes$1.number
 });
 PropTypes$1.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
 /**
@@ -3034,7 +3044,7 @@ var Slideshow = function Slideshow(_ref) {
 Slideshow.propTypes = propTypes$b;
 Slideshow.defaultProps = defaultProps$b;
 
-var styles$a = {};
+var styles$a = {"icon":"micromag-core-placeholders-icon"};
 
 /* eslint-disable react/prop-types */
 var AdFrame = function AdFrame(_ref) {
@@ -3326,6 +3336,7 @@ var styles$6 = {"container":"micromag-core-screens-screen-placeholder-container"
 var propTypes$9 = {
   screen: PropTypes.storyComponent.isRequired,
   renderContext: PropTypes.renderContext,
+  screenState: PropTypes$1.string,
   active: PropTypes$1.bool,
   current: PropTypes$1.bool,
   component: PropTypes$1.node,
@@ -3340,6 +3351,7 @@ var propTypes$9 = {
 var defaultProps$9 = {
   active: false,
   renderContext: null,
+  screenState: null,
   current: false,
   component: null,
   components: null,
@@ -3354,6 +3366,7 @@ var defaultProps$9 = {
 var Screen = function Screen(_ref) {
   var screen = _ref.screen,
       renderContext = _ref.renderContext,
+      screenState = _ref.screenState,
       active = _ref.active,
       current = _ref.current,
       components = _ref.components,
@@ -3370,7 +3383,8 @@ var Screen = function Screen(_ref) {
   var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
   return /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen,
-    renderContext: renderContext
+    renderContext: renderContext,
+    screenState: screenState
   }, ScreenComponent !== null ? /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(ScreenComponent, Object.assign({}, screen, {
@@ -3393,12 +3407,14 @@ var Screen$1 = /*#__PURE__*/React.memo(Screen);
 var propTypes$8 = {
   screen: PropTypes.component.isRequired,
   layout: PropTypes$1.string,
+  screenState: PropTypes$1.string,
   width: PropTypes$1.number,
   height: PropTypes$1.number,
   className: PropTypes$1.string
 };
 var defaultProps$8 = {
   layout: undefined,
+  screenState: null,
   width: null,
   height: null,
   className: null
@@ -3409,6 +3425,7 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
       layout = _ref.layout,
       width = _ref.width,
       height = _ref.height,
+      screenState = _ref.screenState,
       className = _ref.className;
   var screenSize = useMemo(function () {
     return {
@@ -3422,7 +3439,8 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     size: screenSize
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen,
-    renderContext: "placeholder"
+    renderContext: "placeholder",
+    screenState: screenState
   }, /*#__PURE__*/React.createElement(Screen$1, {
     screen: screen,
     layout: layout,
@@ -3438,11 +3456,13 @@ var styles$5 = {"container":"micromag-core-screens-preview-container"};
 
 var propTypes$7 = {
   screen: PropTypes.component.isRequired,
+  screenState: PropTypes$1.string,
   width: PropTypes$1.number,
   height: PropTypes$1.number,
   className: PropTypes$1.string
 };
 var defaultProps$7 = {
+  screenState: null,
   width: null,
   height: null,
   className: null
@@ -3450,6 +3470,7 @@ var defaultProps$7 = {
 
 var ScreenPreview = function ScreenPreview(_ref) {
   var screen = _ref.screen,
+      screenState = _ref.screenState,
       width = _ref.width,
       height = _ref.height,
       className = _ref.className;
@@ -3465,7 +3486,8 @@ var ScreenPreview = function ScreenPreview(_ref) {
     size: screenSize
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen,
-    renderContext: "preview"
+    renderContext: "preview",
+    screenState: screenState
   }, /*#__PURE__*/React.createElement(Screen$1, {
     screen: screen,
     renderContext: "preview",