@micromag/core 0.3.1 → 0.3.5

package/es/components.js

@@ -53,7 +53,7 @@ var Label = function Label(_ref) {
 Label.propTypes = propTypes$J;
 Label.defaultProps = defaultProps$J;
 
-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 styles$u = {"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$t.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$u.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$t.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$u.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$t.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$u.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$t.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$u.center, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$t.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$u.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$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)]);
+  }, _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$u.container, (_ref8 = {}, _defineProperty(_ref8, styles$u.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$u.withIcon, hasIcon), _defineProperty(_ref8, styles$u.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$u.withText, text !== null), _defineProperty(_ref8, styles$u.withShadow, withShadow), _defineProperty(_ref8, styles$u.isSmall, small), _defineProperty(_ref8, styles$u.isBig, big), _defineProperty(_ref8, styles$u.isLink, href !== null), _defineProperty(_ref8, styles$u.asLink, asLink), _defineProperty(_ref8, styles$u.isDisabled, disabled), _defineProperty(_ref8, styles$u.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
 
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$t.linkDisabled, disabled)]);
+    }, styles$u.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$s = {};
+var styles$t = {};
 
 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$s.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$t.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$s.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames([styles$t.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$r = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
+var styles$s = {"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$r.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$s.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$r.panel]),
+    className: classNames(['w-100', styles$s.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$r.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames([styles$s.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$r.actions, (_ref4 = {}, _defineProperty(_ref4, styles$r[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames([styles$s.actions, (_ref4 = {}, _defineProperty(_ref4, styles$s[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -624,7 +624,7 @@ var Form = function Form(_ref) {
     }]
   })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
-    className: styles$r.buttons
+    className: styles$s.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$q = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
+var styles$r = {"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$q.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$r.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$q.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$r.withoutStyle, withoutStyle)]),
     to: href
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
@@ -916,7 +916,7 @@ var Spinner = function Spinner(_ref) {
 Spinner.propTypes = propTypes$B;
 Spinner.defaultProps = defaultProps$B;
 
-var styles$p = {};
+var styles$q = {};
 
 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$p.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$q.container, _defineProperty({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
 };
 
 FormPanel.propTypes = propTypes$A;
 FormPanel.defaultProps = defaultProps$A;
 
-var styles$o = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
+var styles$p = {"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$o.container, 'breadcrumb', 'mb-0', {
+    className: classNames([styles$p.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$o.arrow, separator === 'arrow'), _defineProperty(_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
+      }, _defineProperty(_ref3, styles$p.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,7 +1010,7 @@ 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 styles$o = {"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 = {
@@ -1053,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, styles$n[align], align !== null), _defineProperty(_ref2, "show", visible), _defineProperty(_ref2, className, className !== null), _ref2)]),
+    className: classNames(['dropdown-menu', (_ref2 = {}, _defineProperty(_ref2, styles$o[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;
@@ -1314,7 +1314,7 @@ var Navbar = function Navbar(_ref) {
     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, 'navbar-expand', 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
+      'px-0': compact
     }])
   }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link, {
     className: classNames(['navbar-brand', _defineProperty({
@@ -1348,7 +1348,7 @@ var Navbar = function Navbar(_ref) {
 Navbar.propTypes = propTypes$w;
 Navbar.defaultProps = defaultProps$w;
 
-var styles$m = {};
+var styles$n = {};
 
 var messages = defineMessages({
   previous: {
@@ -1408,7 +1408,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
   });
 
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$m.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$n.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("ul", {
     className: classNames(['pagination', _defineProperty({}, paginationClassName, paginationClassName !== null)])
   }, withPreviousNext ? /*#__PURE__*/React.createElement("li", {
@@ -1454,7 +1454,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
 PaginationMenu.propTypes = propTypes$v;
 PaginationMenu.defaultProps = defaultProps$v;
 
-var styles$l = {"container":"micromag-core-menus-tabs-container"};
+var styles$m = {"container":"micromag-core-menus-tabs-container"};
 
 var propTypes$u = {
   items: PropTypes.menuItems,
@@ -1484,22 +1484,22 @@ var TabsMenu = function TabsMenu(_ref) {
       className = _ref.className,
       onClickItem = _ref.onClickItem;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$l.container, _defineProperty({}, className, className)])
+    className: classNames([styles$m.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement(Buttons, {
     buttons: items,
     size: size,
     theme: theme,
     renderButton: renderItemButton,
     onClickButton: onClickItem,
-    className: styles$l.buttons,
-    buttonClassName: classNames([styles$l.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
+    className: styles$m.buttons,
+    buttonClassName: classNames([styles$m.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
   }));
 };
 
 TabsMenu.propTypes = propTypes$u;
 TabsMenu.defaultProps = defaultProps$u;
 
-var styles$k = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
+var styles$l = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
 
 var propTypes$t = {
   modals: PropTypes.modals.isRequired,
@@ -1519,9 +1519,9 @@ var ModalsContainer = function ModalsContainer(_ref) {
     setModalsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$k.container, _defineProperty({}, className, className)])
+    className: classNames([styles$l.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$k.modals, _defineProperty({}, styles$k.hasModals, modals.length > 0)]),
+    className: classNames([styles$l.modals, _defineProperty({}, styles$l.hasModals, modals.length > 0)]),
     ref: containerRef
   }));
 };
@@ -1614,7 +1614,7 @@ var ModalPortal = function ModalPortal(_ref) {
 ModalPortal.propTypes = propTypes$r;
 ModalPortal.defaultProps = defaultProps$r;
 
-var styles$j = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
+var styles$k = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
 
 var propTypes$q = {
   id: PropTypes$1.string,
@@ -1646,16 +1646,16 @@ var Modal = function Modal(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$j.container, _defineProperty({}, styles$j[position], position !== null)])
+    className: classNames([styles$k.container, _defineProperty({}, styles$k[position], position !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$j.inner
+    className: styles$k.inner
   }, children)));
 };
 
 Modal.propTypes = propTypes$q;
 Modal.defaultProps = defaultProps$q;
 
-var styles$i = {"container":"micromag-core-modals-dialog-container"};
+var styles$j = {"container":"micromag-core-modals-dialog-container"};
 
 var propTypes$p = {
   title: PropTypes.label,
@@ -1687,12 +1687,12 @@ var ModalDialog = function ModalDialog(_ref) {
       onClickClose = _ref.onClickClose,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-dialog', styles$i.container, _defineProperty({}, className, className)]),
+    className: classNames(['modal-dialog', styles$j.container, _defineProperty({}, className, className)]),
     role: "dialog"
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', styles$i.header, {// 'bg-dark': theme === 'dark',
+    className: classNames(['modal-header', styles$j.header, {// 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1704,14 +1704,14 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-body', styles$i.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames(['modal-body', styles$j.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
     }])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-footer', styles$i.footer])
+    className: classNames(['modal-footer', styles$j.footer])
   }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
-    className: styles$i.buttons
+    className: styles$j.buttons
   }) : null) : null));
 };
 
@@ -1777,7 +1777,7 @@ var UploadModal = function UploadModal(_ref) {
 UploadModal.propTypes = propTypes$o;
 UploadModal.defaultProps = defaultProps$o;
 
-var styles$h = {"container":"micromag-core-panels-container"};
+var styles$i = {"container":"micromag-core-panels-container"};
 
 var propTypes$n = {
   panels: PropTypes.panels,
@@ -1799,9 +1799,9 @@ var PanelsContainer = function PanelsContainer(_ref) {
     setPanelsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.container, _defineProperty({}, className, className)])
+    className: classNames([styles$i.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.panels, _defineProperty({}, styles$h.hasPanels, panels.length > 0)]),
+    className: classNames([styles$i.panels, _defineProperty({}, styles$i.hasPanels, panels.length > 0)]),
     ref: containerRef
   }));
 };
@@ -1853,7 +1853,7 @@ var PanelPortal = function PanelPortal(_ref) {
 PanelPortal.propTypes = propTypes$m;
 PanelPortal.defaultProps = defaultProps$m;
 
-var styles$g = {"container":"micromag-core-panels-panel-container"};
+var styles$h = {"container":"micromag-core-panels-panel-container"};
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$l = {
@@ -1883,14 +1883,14 @@ var Panel = function Panel(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.container
+    className: styles$h.container
   }, children));
 };
 
 Panel.propTypes = propTypes$l;
 Panel.defaultProps = defaultProps$l;
 
-var styles$f = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
+var styles$g = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
 
 var propTypes$k = {
   title: PropTypes$1.node,
@@ -1931,21 +1931,21 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     return setOpened(!opened);
   }, [opened, setOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.container, (_ref2 = {}, _defineProperty(_ref2, styles$f.isOpened, opened), _defineProperty(_ref2, openedClassName, opened && openedClassName !== null), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames([styles$g.container, (_ref2 = {}, _defineProperty(_ref2, styles$g.isOpened, opened), _defineProperty(_ref2, openedClassName, opened && openedClassName !== null), _defineProperty(_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.top, _defineProperty({}, topClassName, topClassName !== null)])
+    className: classNames([styles$g.top, _defineProperty({}, topClassName, topClassName !== null)])
   }, /*#__PURE__*/React.createElement(Button$1, {
     withoutStyle: true,
-    className: classNames([styles$f.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
+    className: classNames([styles$g.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: opened ? faAngleUp : faAngleDown,
-      className: styles$f.icon
+      className: styles$g.icon
     }),
     iconPosition: "right",
-    labelClassName: styles$f.label,
+    labelClassName: styles$g.label,
     onClick: onClick
   }, title)), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.content, _defineProperty({}, contentClassName, contentClassName !== null)])
+    className: classNames([styles$g.content, _defineProperty({}, contentClassName, contentClassName !== null)])
   }, children));
 };
 
@@ -2072,7 +2072,7 @@ var Detector = function Detector(_ref) {
 Detector.propTypes = propTypes$i;
 Detector.defaultProps = defaultProps$i;
 
-var styles$e = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
+var styles$f = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
 
 var propTypes$h = {
   width: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
@@ -2101,9 +2101,9 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
       boxClassName = _ref.boxClassName,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$e.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$e.outline, outline), _ref2)])
+    className: classNames([styles$f.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$f.outline, outline), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$e.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
+    className: classNames([styles$f.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
     style: {
       width: width,
       height: height
@@ -2166,7 +2166,7 @@ var ElementComponent = function ElementComponent(_ref) {
 ElementComponent.propTypes = propTypes$g;
 ElementComponent.defaultProps = defaultProps$g;
 
-var styles$d = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
+var styles$e = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
 
 var propTypes$f = {
   children: PropTypes$1.node,
@@ -2189,9 +2189,9 @@ var Empty = function Empty(_ref) {
       light = _ref.light,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.container, (_ref2 = {}, _defineProperty(_ref2, styles$d.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$d.light, light), _defineProperty(_ref2, className, className), _ref2)])
+    className: classNames([styles$e.container, (_ref2 = {}, _defineProperty(_ref2, styles$e.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$e.light, light), _defineProperty(_ref2, className, className), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.middle
+    className: styles$e.middle
   }, /*#__PURE__*/React.createElement(Label, null, children)));
 };
 
@@ -2249,7 +2249,7 @@ var FontFaces = function FontFaces(_ref) {
 FontFaces.propTypes = propTypes$e;
 FontFaces.defaultProps = defaultProps$e;
 
-var styles$c = {};
+var styles$d = {};
 
 var propTypes$d = {
   thumbnail: PropTypes$1.node,
@@ -2282,19 +2282,19 @@ var Media = function Media(_ref) {
       bodyClassName = _ref.bodyClassName,
       titleClassName = _ref.titleClassName;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card', styles$c.container, _defineProperty({}, className, className !== null)])
+    className: classNames(['card', styles$d.container, _defineProperty({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames(['me-3', styles$c.thumbnail, _defineProperty({
+    className: classNames(['me-3', styles$d.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(['card-body', styles$c.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+    className: classNames(['card-body', styles$d.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
   }, title !== null ? /*#__PURE__*/React.createElement("h5", {
-    className: classNames(['mt-0', styles$c.title, _defineProperty({}, titleClassName, titleClassName !== null)])
+    className: classNames(['mt-0', styles$d.title, _defineProperty({}, titleClassName, titleClassName !== null)])
   }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children));
 };
 
@@ -2968,7 +2968,7 @@ var Meta = function Meta(_ref) {
 Meta.propTypes = propTypes$c;
 Meta.defaultProps = defaultProps$c;
 
-var styles$b = {"container":"micromag-core-partials-slideshow-container","item":"micromag-core-partials-slideshow-item","items":"micromag-core-partials-slideshow-items","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
+var styles$c = {"container":"micromag-core-partials-slideshow-container","item":"micromag-core-partials-slideshow-item","items":"micromag-core-partials-slideshow-items","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
 
 var propTypes$b = {
   items: PropTypes$1.arrayOf(PropTypes$1.node),
@@ -3027,16 +3027,16 @@ var Slideshow = function Slideshow(_ref) {
     height: height
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$b.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$c.container, _defineProperty({}, className, className)]),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$b.items
+    className: styles$c.items
   }, items.map(function (it, i) {
     var _ref3;
 
     return /*#__PURE__*/React.createElement("div", {
       key: "slide-".concat(i + 1),
-      className: classNames([styles$b.item, (_ref3 = {}, _defineProperty(_ref3, styles$b.prev, i < index), _defineProperty(_ref3, styles$b.current, i === index), _defineProperty(_ref3, styles$b.next, i > index), _ref3)])
+      className: classNames([styles$c.item, (_ref3 = {}, _defineProperty(_ref3, styles$c.prev, i < index), _defineProperty(_ref3, styles$c.current, i === index), _defineProperty(_ref3, styles$c.next, i > index), _ref3)])
     }, it);
   })), children);
 };
@@ -3044,7 +3044,7 @@ var Slideshow = function Slideshow(_ref) {
 Slideshow.propTypes = propTypes$b;
 Slideshow.defaultProps = defaultProps$b;
 
-var styles$a = {"icon":"micromag-core-placeholders-icon"};
+var styles$b = {"icon":"micromag-core-placeholders-icon"};
 
 /* eslint-disable react/prop-types */
 var AdFrame = function AdFrame(_ref) {
@@ -3057,7 +3057,7 @@ var AdFrame = function AdFrame(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faAd,
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
@@ -3072,7 +3072,7 @@ var AdImage = function AdImage(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faImage,
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
@@ -3089,11 +3089,11 @@ var Audio = function Audio(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMusic,
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
-var styles$9 = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
+var styles$a = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
 
 var propTypes$a = {
   lines: PropTypes$1.number,
@@ -3122,11 +3122,11 @@ var PlaceholderText = function PlaceholderText(_ref) {
   var lineHeight = height !== null && isNumber(height) ? "".concat(Math.round(height * fontSize), "px") : height;
   var oddWidth = isNumber(width) ? width * 0.9 : '90%';
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className)])
+    className: classNames([styles$a.container, _defineProperty({}, className, className)])
   }, _toConsumableArray(Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: "line-".concat(index),
-      className: styles$9.line,
+      className: styles$a.line,
       style: {
         width: index % 2 === 0 ? width : oddWidth,
         height: lineHeight,
@@ -3169,38 +3169,38 @@ var Image = function Image(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faImage,
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Line = function Line(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$a.shortText]),
+    className: classNames([props.className, styles$b.shortText]),
     height: 0.2,
     lines: 1
   }));
 };
 
-var styles$8 = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
+var styles$9 = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
 
 var Map = function Map(props) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "100%",
-    className: classNames([styles$8.container, _defineProperty({}, props.className, props.className !== null)])
+    className: classNames([styles$9.container, _defineProperty({}, props.className, props.className !== null)])
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$8.icon
+    className: styles$9.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$8.icon
+    className: styles$9.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$8.icon
+    className: styles$9.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$8.icon
+    className: styles$9.icon
   }));
 };
 
@@ -3209,18 +3209,18 @@ var MapPath = function MapPath(props) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "70%",
-    className: classNames([props.className, styles$a.mapPath])
+    className: classNames([props.className, styles$b.mapPath])
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMapMarkedAlt,
     size: "lg",
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Quote = function Quote(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$a.subtitle]),
+    className: classNames([props.className, styles$b.subtitle]),
     height: 0.5,
     lines: 6
   }));
@@ -3229,7 +3229,7 @@ var Quote = function Quote(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var ShortText = function ShortText(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$a.shortText]),
+    className: classNames([props.className, styles$b.shortText]),
     height: 0.2,
     lines: 2
   }));
@@ -3238,7 +3238,7 @@ var ShortText = function ShortText(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Subtitle = function Subtitle(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$a.subtitle]),
+    className: classNames([props.className, styles$b.subtitle]),
     height: 0.3,
     lines: 1
   }));
@@ -3257,21 +3257,21 @@ var TextPlaceholder = function TextPlaceholder(props) {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames([props.className, styles$a.text])
+    className: classNames([props.className, styles$b.text])
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Timeline = function Timeline(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$a.timeline])
+    className: classNames([props.className, styles$b.timeline])
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Title = function Title(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$a.title]),
+    className: classNames([props.className, styles$b.title]),
     height: 0.5,
     lines: 2,
     lineMargin: 4
@@ -3289,11 +3289,11 @@ var Video = function Video(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faVideo,
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
-var styles$7 = {"container":"micromag-core-placeholders-video-360-container","box":"micromag-core-placeholders-video-360-box","icon":"micromag-core-placeholders-video-360-icon","label":"micromag-core-placeholders-video-360-label"};
+var styles$8 = {"container":"micromag-core-placeholders-video-360-container","box":"micromag-core-placeholders-video-360-box","icon":"micromag-core-placeholders-video-360-icon","label":"micromag-core-placeholders-video-360-label"};
 
 var Video360 = function Video360(_ref) {
   var width = _ref.width,
@@ -3302,13 +3302,13 @@ var Video360 = function Video360(_ref) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
-    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
-    boxClassName: styles$7.box
+    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)]),
+    boxClassName: styles$8.box
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faVideo,
-    className: styles$7.icon
+    className: styles$8.icon
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$7.label
+    className: styles$8.label
   }, "360"));
 };
 
@@ -3323,16 +3323,17 @@ var VideoLoop = function VideoLoop(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faPlay,
-    className: styles$a.icon
+    className: styles$b.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faRedo,
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
-var styles$6 = {"container":"micromag-core-screens-screen-placeholder-container"};
+var styles$7 = {"container":"micromag-core-screens-screen-placeholder-container"};
+
+var styles$6 = {"container":"micromag-core-screens-screen-container"};
 
-/* eslint-disable react/jsx-props-no-spreading */
 var propTypes$9 = {
   screen: PropTypes.storyComponent.isRequired,
   renderContext: PropTypes.renderContext,
@@ -3386,7 +3387,7 @@ var Screen = function Screen(_ref) {
     renderContext: renderContext,
     screenState: screenState
   }, ScreenComponent !== null ? /*#__PURE__*/React.createElement("div", {
-    className: className
+    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(ScreenComponent, Object.assign({}, screen, {
     active: active,
     current: current,
@@ -3444,7 +3445,7 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
   }, /*#__PURE__*/React.createElement(Screen$1, {
     screen: screen,
     layout: layout,
-    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)])
   })));
 };